Fix: Standort-Fehlermeldung schliessbar, manuelle Standorteingabe

Behebt Gitea Issue #1 "Eigenen Standort verwenden" (zwei Teilprobleme): 1. Die Fehlermeldung bei fehlgeschlagener Geolocation-Abfrage (#app-status) liess sich bisher nicht schliessen und blockierte dauerhaft die UI. Neuer Schliessen-Button (#app-status-close), unabhaengig vom restlichen Bootstrap-Ablauf verdrahtet, damit er auch bei einem fruehen Init-Fehler funktioniert. 2. Es gab keine Moeglichkeit, den Standort manuell zu setzen, wenn die Browser-Geolocation fehlschlaegt oder nicht verfuegbar ist. Neues Modal (js/ui/manualLocation.js) mit Breiten-/Laengengrad-Eingabe, Validierung (aria-invalid/Inline-Fehler analog zum Ausflugsziel-Formular), setzt bei gueltiger Eingabe state.userLocation direkt - Karte, Liste und Entfernungsfilter reagieren automatisch darauf.
2026-07-24 12:38:16 +02:00
parent 5e2197ec24
commit b49b8f4f47
5 changed files with 440 additions and 4 deletions
@@ -17,6 +17,7 @@
  <link rel="stylesheet" href="css/form.css" />
  <link rel="stylesheet" href="css/filters.css" />
  <link rel="stylesheet" href="css/promptGenerator.css" />
+  <link rel="stylesheet" href="css/manualLocation.css" />
  <link rel="stylesheet" href="css/responsive.css" />
 </head>
 <body>
@@ -25,7 +26,17 @@
    <p class="app-header__subtitle">Familienfreundliche Ausflugsziele auf der Karte</p>
  </header>

-  <p id="app-status" class="app-status" role="alert" hidden></p>
+  <div id="app-status" class="app-status" role="alert" hidden>
+    <p id="app-status-text" class="app-status__text"></p>
+    <button
+      id="app-status-close"
+      type="button"
+      class="app-status__close"
+      aria-label="Meldung schließen"
+    >
+      ✕
+    </button>
+  </div>

  <main class="app-layout">
    <section class="map-panel" aria-label="Karte">
@@ -33,6 +44,9 @@
        <button id="locate-btn" type="button" class="btn btn--secondary">
          Meinen Standort verwenden
        </button>
+        <button id="manual-location-btn" type="button" class="btn btn--secondary">
+          Standort manuell eingeben
+        </button>
        <button id="add-place-btn" type="button" class="btn btn--primary">
          + Neues Ausflugsziel hinzufügen
        </button>
@@ -57,6 +71,7 @@

  <div id="detail-modal" class="detail-modal" hidden></div>
  <div id="place-form-modal" class="place-form-modal" hidden></div>
+  <div id="manual-location-modal" class="manual-location-modal" hidden></div>
  <div id="prompt-generator-modal" class="prompt-generator-modal" hidden></div>

  <script src="vendor/leaflet/leaflet.js"></script>
@@ -86,6 +101,7 @@
  <script src="js/ui/list.js"></script>
  <script src="js/ui/detail.js"></script>
  <script src="js/ui/form.js"></script>
+  <script src="js/ui/manualLocation.js"></script>
  <script src="js/filters/filterPanel.js"></script>

  <!-- KI-Prompt-Generator (Phase 6): eigener Bereich, da js/ai/promptBuilder.js