hcrb/private/gruppe.html

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gruppe – HCRB</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <main class="narrow">
    <div class="card">
      <h2 id="member-form-title">Mitglied hinzufügen</h2>
      <form id="member-form">
        <input type="hidden" id="member-id">
        <label>Vorname
          <input type="text" id="member-name" required autocomplete="off" maxlength="50">
        </label>
        <label class="inline">
          <input type="checkbox" id="member-external"> Extern (gehört nicht zur Gruppe, fährt aber manchmal mit)
        </label>
        <label class="inline">
          <input type="checkbox" id="member-hascar"> Hat Auto
        </label>
        <label>Fährt am liebsten mit bei
          <select id="member-rideswith"></select>
        </label>
        <div id="member-seats-wrap" hidden>
          <label>Freie Plätze (ohne Fahrer)
            <input type="number" id="member-seats" min="1" max="8" value="4">
          </label>
          <label class="inline">
            <input type="checkbox" id="member-always"> Kommt immer mit eigenem Auto
          </label>
          <p class="muted">Fährt dann bei jeder Fahrt selbst, auch wenn weniger Autos reichen würden.</p>
          <label>Standard-Treffpunkt, wenn er/sie fährt
            <select id="member-point"></select>
          </label>
        </div>
        <div class="row">
          <button type="submit" class="primary">Speichern</button>
          <button type="button" id="member-cancel" hidden>Abbrechen</button>
        </div>
      </form>
    </div>

    <div class="card">
      <h2>Gruppe</h2>
      <p id="members-empty" class="muted" hidden>Noch keine Mitglieder gespeichert.</p>
      <ul id="members-list" class="list"></ul>
    </div>

    <div class="card">
      <h2 id="point-form-title">Treffpunkt hinzufügen</h2>
      <form id="point-form">
        <input type="hidden" id="point-id">
        <label>Name
          <input type="text" id="point-name" required autocomplete="off" maxlength="60" placeholder="z. B. Parkplatz Bahnhof">
        </label>
        <label>Adresse
          <input type="text" id="point-address" required autocomplete="off" maxlength="200" placeholder="Straße Nr., PLZ Ort">
        </label>
        <div class="row">
          <button type="submit" class="primary">Speichern</button>
          <button type="button" id="point-cancel" hidden>Abbrechen</button>
        </div>
      </form>
      <p id="points-empty" class="muted" hidden>Noch keine Treffpunkte gespeichert.</p>
      <ul id="points-list" class="list"></ul>
    </div>

    <div class="card">
      <h2>Daten sichern</h2>
      <p class="muted">Gruppe als JSON-Datei sichern oder eine gesicherte Datei wieder einspielen (ersetzt die aktuelle Gruppe).</p>
      <div class="row">
        <button id="export-btn">Exportieren (JSON)</button>
        <label class="button">Importieren
          <input type="file" id="import-file" accept="application/json" hidden>
        </label>
      </div>
    </div>
  </main>

  <script type="module" src="/js/gruppe.js"></script>
</body>
</html>