group editor implemented

public/index.html

@@ -180,6 +180,7 @@
         </section>
         <div class="route-control-actions">
           <button id="editor-button" class="editor-button" type="button" aria-label="Strecken bearbeiten" title="Strecken bearbeiten" aria-haspopup="dialog" aria-expanded="false" aria-controls="editor-dialog" data-i18n-title="editor.open" data-i18n-aria-label="editor.open" data-i18n="editor.open">Strecken bearbeiten</button>
+          <button id="group-join-open" class="editor-secondary-button" type="button" data-i18n="groups.join-open">Gruppencode eingeben</button>
           <button id="route-control-new" class="editor-primary-button" type="button" data-i18n="editor.new-route">Neue Strecke</button>
         </div>
       </nav>
@@ -334,10 +335,11 @@
           </label>
           <h3>5. Deine eigenen Strecken</h3>
           <p>Neue Strecken bleiben zuerst auf deinem Gerät. Gespeichert werden der Weg, die Orte der Stationen, Texte sowie ausgewählte Bilder und Tonaufnahmen.</p>
-          <p>Deine Entwürfe bleiben erhalten, wenn alter Fortschritt gelöscht wird oder du „Meinen Fortschritt merken“ ausschaltest. Sie bleiben auf diesem Gerät, bis du sie löschst oder die gespeicherten Daten von Wegwichtel in deinem Internetbrowser entfernst. Nur wenn du „Zur Prüfung senden“ wählst, wird deine Strecke an die Website gesendet.</p>
+          <p>Deine Entwürfe bleiben erhalten, wenn alter Fortschritt gelöscht wird oder du „Meinen Fortschritt merken“ ausschaltest. Sie bleiben auf diesem Gerät, bis du sie löschst oder die gespeicherten Daten von Wegwichtel in deinem Internetbrowser entfernst. Nur wenn du „Zur Prüfung senden“ oder „Gemeinsam bearbeiten“ wählst, wird deine Strecke an die Website gesendet.</p>
+          <p>Änderungen an gemeinsamen Stationen werden vor dem Senden zusätzlich auf diesem Gerät gesichert. Dazu gehören deine Eingaben, neu ausgewählte Bilder und Tonaufnahmen sowie vorgemerkte Entfernungen. Noch nicht gesendete Änderungen bleiben bis zum erfolgreichen Senden oder bewussten Verwerfen erhalten. Das Löschen der Website-Daten im Internetbrowser kann diese Sicherungen entfernen. Auf der Website wird während der Bearbeitung eine Sperre mit deiner Gerätekennung und deinem Gruppenzugang gespeichert, damit sich Änderungen nicht unbemerkt überschreiben.</p>
           <p>Beim ersten Start wird eine zufällige Gerätekennung gespeichert. Sie wird beim Einsenden mit deiner Strecke verknüpft. Dafür werden keine Angaben über dein Gerät oder deinen Internetanbieter gesammelt. Beim Löschen von Entwürfen oder gespeicherten App-Daten bleibt die Kennung erhalten. Wenn du alle Website-Daten im Internetbrowser löschst, geht auch die Kennung verloren.</p>
           <h3>6. Werbung und gespeicherte Einstellungen</h3>
-          <p>Wegwichtel verwendet keine Cookies. Es zählt keine Besuche für Werbung und verfolgt nicht, welche anderen Seiten du besuchst. Auf deinem Gerät wird gespeichert, ob du „Meinen Fortschritt merken“ eingeschaltet hast.</p>
+          <p>Wegwichtel verwendet keine Werbe- oder Tracking-Cookies. Für die Gruppenbearbeitung wird nach dem Öffnen einer Gruppe oder dem Beitritt ein geschütztes Zugangscookie für höchstens 30 Tage gespeichert. Es merkt sich, welche gemeinsamen Entwürfe du bearbeiten darfst. Beim Öffnen einer Gruppe oder beim Beitritt werden außerdem deine Gerätekennung und deine Gruppenmitgliedschaft auf der Website gespeichert. Gemeinsame Entwürfe und ihre Bilder und Tonaufnahmen werden auf der Website gespeichert und sind für die Gruppenmitglieder zugänglich. Es zählt keine Besuche für Werbung und verfolgt nicht, welche anderen Seiten du besuchst. Auf deinem Gerät wird gespeichert, ob du „Meinen Fortschritt merken“ eingeschaltet hast.</p>
           <h3>7. Inhalte von Schülerinnen und Schülern</h3>
           <p>Bilder, Texte und Tonaufnahmen dürfen nur geteilt werden, wenn das erlaubt ist. Wenn Kinder auf Bildern oder in Aufnahmen erkannt werden können, müssen die Regeln der Schule beachtet werden. Auch die Eltern oder anderen Sorgeberechtigten müssen die nötige Erlaubnis geben.</p>
           <h3>8. Eingesandte Bilder und Tonaufnahmen</h3>
@@ -427,7 +429,7 @@
           </ul>
           <p data-i18n="storage-help.permissions.optional">Du kannst diese Erlaubnisse ablehnen. Dann fehlen die jeweiligen Funktionen. Strecken und Stationen kannst du weiterhin selbst auswählen.</p>
           <h3 data-i18n="storage-help.providers-title">Werbung und andere Anbieter</h3>
-          <p data-i18n="storage-help.providers-data">Wegwichtel zeigt keine Werbung und verfolgt nicht, welche anderen Seiten du besuchst. Die App lädt ihre eigenen Programme und Bilder von Wegwichtel. Es werden keine Cookies verwendet.</p>
+          <p data-i18n="storage-help.providers-data">Wegwichtel zeigt keine Werbung und verfolgt nicht, welche anderen Seiten du besuchst. Die App lädt ihre eigenen Programme und Bilder von Wegwichtel. Für gemeinsame Entwürfe merkt sich dein Internetbrowser deinen Zugang für höchstens 30 Tage mit einem Cookie.</p>
         </article>
       </div>
     </div>
@@ -459,6 +461,13 @@
         </section>
         <p class="editor-muted" data-i18n="editor.routes-hint">Hier findest du Strecken für alle und deine eigenen Entwürfe.</p>
         <ul id="editor-route-list" class="editor-route-list" aria-live="polite"></ul>
+        <h3 data-i18n="groups.title">Gemeinsame Entwürfe</h3>
+        <p class="editor-muted" data-i18n="groups.online">Gemeinsam bearbeiten braucht eine Internetverbindung.</p>
+        <button id="editor-group-join" class="editor-secondary-button" type="button" data-i18n="groups.join-open">Gruppencode eingeben</button>
+        <h4 data-i18n="point-locks.pending-title">Noch nicht gesendete Änderungen</h4>
+        <p class="editor-muted" data-i18n="point-locks.pending-help">Diese Änderungen bleiben auf diesem Gerät. Öffne sie später und tippe auf Speichern. Vor dem Senden prüft Wegwichtel, ob die Station inzwischen geändert wurde.</p>
+        <ul id="editor-point-drafts" class="editor-route-list" aria-live="polite"></ul>
+        <ul id="editor-group-list" class="editor-route-list" aria-live="polite"></ul>
       </section>
       <section id="editor-route-detail-view" class="editor-view" aria-labelledby="editor-route-detail-title" hidden>
         <div class="editor-toolbar editor-toolbar-back">
@@ -570,6 +579,36 @@
   <script src="js/user-messages.js?v=0.12.14"></script>
   <script src="js/local-routes.js?v=0.12.14"></script>
   <script src="js/route-recorder.js?v=0.12.14"></script>
+  <dialog id="group-dialog" class="group-dialog" aria-labelledby="group-title">
+    <header class="group-dialog-header">
+      <h2 id="group-title" data-i18n="groups.share">Gemeinsam bearbeiten</h2>
+      <button id="group-close" type="button" aria-label="Schließen" data-i18n-aria-label="info.close">×</button>
+    </header>
+    <section id="group-entry">
+      <p data-i18n="groups.wheel-help">Schiebe die Wichtel nach oben oder unten. Die Wichtel in der Mitte ergeben den Code. Lies von links nach rechts, zuerst die obere Reihe.</p>
+      <fieldset class="group-code-fieldset"><legend data-i18n="groups.code-label">Gruppencode</legend><div id="group-wheels" class="group-wheels"></div></fieldset>
+      <button id="group-join" type="button" data-i18n="groups.join">Mitmachen</button>
+    </section>
+    <section id="group-invitation" hidden>
+      <p data-i18n="groups.invite-help">Zeige diesen Code den anderen. Damit können sie deinen gemeinsamen Entwurf öffnen und bearbeiten. Das Original bleibt erhalten.</p>
+      <div id="group-code" class="group-code" aria-label="Gruppencode" data-i18n-aria-label="groups.code-label"></div>
+      <p id="group-expiry"></p>
+      <button id="group-edit" type="button" data-i18n="groups.edit">Entwurf bearbeiten</button>
+    </section>
+    <p id="group-status" class="group-status" role="status"></p>
+  </dialog>
+  <dialog id="point-compare-dialog" class="group-dialog point-compare-dialog" aria-labelledby="point-compare-title">
+    <h2 id="point-compare-title" data-i18n="point-locks.compare-title">Die Station wurde geändert</h2>
+    <p data-i18n="point-locks.compare-help">Vergleiche deine Änderungen mit dem neuen Stand. Wenn du deine Änderungen sendest, ersetzen deine Angaben den aktuellen Stand. Prüfe auch Bilder und Tonaufnahmen. Bei gleicher Anzahl können andere Dateien dahinterstecken.</p>
+    <div id="point-compare-content" class="point-compare-content"></div>
+    <div class="editor-form-actions">
+      <button id="point-compare-cancel" type="button" data-i18n="point-locks.keep-device">Auf diesem Gerät behalten</button>
+      <button id="point-compare-accept" type="button" data-i18n="point-locks.use-mine">Meine Änderungen senden</button>
+    </div>
+  </dialog>
+  <script src="js/group-points.js?v=0.12.14"></script>
+  <script src="js/group-symbols.js?v=0.12.14"></script>
+  <script src="js/groups.js?v=0.12.14"></script>
   <script src="js/editor-ui.js?v=0.12.14"></script>
   <script src="js/privacy-storage.js?v=0.12.14"></script>
   <script src="js/legal-ui.js?v=0.12.14"></script>