added editor

public/index.html

@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="css/bootstrap.css?v=0.12.14">
   <link rel="stylesheet" href="vendor/jquery-ui/jquery-ui-1.14.2.min.css?v=0.12.14">
   <link rel="stylesheet" href="css/app.css?v=0.12.14">
+  <link rel="stylesheet" href="css/editor.css?v=0.12.14">
 </head>
 <body>
   <div class="info-control">
@@ -95,6 +96,16 @@
             <li><p>Routen werden geladen …</p></li>
           </ul>
         </section>
+
+        <section class="editor-entry-panel" aria-labelledby="editor-entry-title">
+          <div>
+            <h2 id="editor-entry-title">Strecken verwalten</h2>
+            <p>Strecken, Stationen, Bilder und Audiodateien bearbeiten.</p>
+          </div>
+          <button id="editor-button" class="editor-button" type="button" aria-label="Streckeneditor öffnen" title="Streckeneditor öffnen">
+            <span aria-hidden="true">+</span>
+          </button>
+        </section>
       </div>
     </section>
     <section id="route-page" class="app-page" hidden>
@@ -308,6 +319,97 @@
     </div>
   </dialog>
 
+
+
+  <dialog id="editor-dialog" class="editor-dialog" aria-labelledby="editor-dialog-title">
+    <div class="editor-dialog-shell">
+      <header class="editor-dialog-header">
+        <h2 id="editor-dialog-title">Streckeneditor</h2>
+        <button id="editor-close" type="button" aria-label="Streckeneditor schließen" title="Schließen">×</button>
+      </header>
+
+      <p id="editor-status" class="editor-status" role="status" aria-live="polite" hidden></p>
+
+      <section id="editor-route-list-view" class="editor-view" aria-labelledby="editor-route-list-title">
+        <div class="editor-toolbar">
+          <h3 id="editor-route-list-title">Vorhandene Strecken</h3>
+          <button id="editor-new-route" class="editor-round-button" type="button" aria-label="Neue Strecke anlegen" title="Neue Strecke anlegen">
+            <span aria-hidden="true">+</span>
+          </button>
+        </div>
+        <ul id="editor-route-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">
+          <button id="editor-route-back" class="editor-secondary-button" type="button">Zurück</button>
+          <h3 id="editor-route-detail-title">Streckendetails</h3>
+        </div>
+
+        <form id="editor-route-form" class="editor-form">
+          <input id="editor-route-id" type="hidden">
+          <label for="editor-route-name">Name der Strecke</label>
+          <input id="editor-route-name" type="text" autocomplete="off" required>
+
+          <label for="editor-route-description">Beschreibung</label>
+          <textarea id="editor-route-description" rows="4"></textarea>
+
+          <label for="editor-route-gpx">GPX-Datei optional ersetzen oder ergänzen</label>
+          <input id="editor-route-gpx" type="file" accept=".gpx,application/gpx+xml,text/xml,application/xml">
+
+          <p id="editor-route-activated" class="editor-muted">Neue Strecken bleiben unveröffentlicht, bis sie manuell in der Datenbank aktiviert werden.</p>
+
+          <button id="editor-route-save" class="editor-primary-button" type="submit">Strecke speichern</button>
+        </form>
+
+        <div class="editor-toolbar editor-poi-toolbar">
+          <h3>Stationen</h3>
+          <button id="editor-add-poi" class="editor-round-button" type="button" aria-label="POI hinzufügen" title="POI hinzufügen">
+            <span aria-hidden="true">+</span>
+          </button>
+        </div>
+        <ol id="editor-poi-list" class="editor-poi-list"></ol>
+      </section>
+
+      <section id="editor-poi-form-view" class="editor-view" aria-labelledby="editor-poi-form-title" hidden>
+        <div class="editor-toolbar editor-toolbar-back">
+          <button id="editor-poi-cancel" class="editor-secondary-button" type="button">Zurück zur Strecke</button>
+          <h3 id="editor-poi-form-title">Station bearbeiten</h3>
+        </div>
+
+        <form id="editor-poi-form" class="editor-form">
+          <input id="editor-poi-id" type="hidden">
+
+          <label for="editor-poi-title">Titel</label>
+          <input id="editor-poi-title" type="text" autocomplete="off" required>
+
+          <label for="editor-poi-description">Text</label>
+          <textarea id="editor-poi-description" rows="6"></textarea>
+
+          <div class="editor-coordinate-grid">
+            <label for="editor-poi-lat">Breite</label>
+            <input id="editor-poi-lat" type="number" inputmode="decimal" step="0.000001">
+
+            <label for="editor-poi-lon">Länge</label>
+            <input id="editor-poi-lon" type="number" inputmode="decimal" step="0.000001">
+
+            <label for="editor-poi-radius">Auslöseradius in Metern</label>
+            <input id="editor-poi-radius" type="number" inputmode="numeric" min="1" step="1" value="25">
+          </div>
+
+          <label for="editor-poi-audio">Audiodatei optional hochladen</label>
+          <input id="editor-poi-audio" type="file" accept="audio/*">
+
+          <label for="editor-poi-images">Bilder optional hochladen</label>
+          <input id="editor-poi-images" type="file" accept="image/*" multiple>
+
+          <button id="editor-poi-save" class="editor-primary-button" type="submit">Station speichern</button>
+        </form>
+      </section>
+    </div>
+  </dialog>
+
+  <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>
   <script src="js/bootstrap-loader.js?v=0.12.14"></script>