From b49b8f4f479fc44cdc533ef1aae3eaf41d123436 Mon Sep 17 00:00:00 2001
From: Hermann <hp1984@mailbox.org>
Date: Fri, 24 Jul 2026 12:38:16 +0200
Subject: [PATCH] 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.
---
 css/components.css      |  24 ++++
 css/manualLocation.css  |  85 +++++++++++++
 index.html              |  18 ++-
 js/main.js              |  46 ++++++-
 js/ui/manualLocation.js | 271 ++++++++++++++++++++++++++++++++++++++++
 5 files changed, 440 insertions(+), 4 deletions(-)
 create mode 100644 css/manualLocation.css
 create mode 100644 js/ui/manualLocation.js

diff --git a/css/components.css b/css/components.css
index 055b088..b6f713e 100644
--- a/css/components.css
+++ b/css/components.css
@@ -2,6 +2,10 @@
    Karten-Marker/Popups. */
 
 .app-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
   background: #fdecea;
   color: var(--color-danger);
   padding: var(--space-sm) var(--space-lg);
@@ -9,6 +13,26 @@
   border-bottom: 1px solid var(--color-danger);
 }
 
+.app-status[hidden] {
+  display: none;
+}
+
+.app-status__text {
+  flex: 1;
+  margin: 0;
+}
+
+.app-status__close {
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-danger);
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 var(--space-xs);
+}
+
 .btn {
   border: none;
   border-radius: var(--radius-sm);
diff --git a/css/manualLocation.css b/css/manualLocation.css
new file mode 100644
index 0000000..cd92df6
--- /dev/null
+++ b/css/manualLocation.css
@@ -0,0 +1,85 @@
+/* Modal zur manuellen Eingabe des Nutzerstandorts (Bugfix, Gitea Issue #1):
+   Anders als die übrigen Modals (css/detail.css, css/form.css,
+   css/promptGenerator.css - jeweils vollflächig auf Mobile, zentriertes
+   Panel ab 1024px) ist dieses Modal auf allen Breakpoints ein kompaktes,
+   zentriertes Panel, da es nur zwei Eingabefelder enthält und ein
+   Vollbild-Modal dafür unangemessen viel Leerraum erzeugen würde. Backdrop,
+   Schließen-Button und Grundstruktur folgen trotzdem demselben Muster wie
+   die übrigen Modals. Das Eingabeformular selbst nutzt bewusst dieselben
+   Klassen wie das Ausflugsziel-Formular (.form-field, ...) aus css/form.css
+   statt sie zu duplizieren. Struktur wird von js/ui/manualLocation.js in
+   #manual-location-modal eingehängt. */
+
+.manual-location-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 2300;
+}
+
+.manual-location-modal[hidden] {
+  display: none;
+}
+
+.manual-location-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.manual-location-modal__panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(360px, 90vw);
+  max-height: 90vh;
+  overflow-y: auto;
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-card);
+  padding: var(--space-lg);
+  padding-top: calc(var(--space-lg) + 36px);
+}
+
+.manual-location-modal__close {
+  position: absolute;
+  top: var(--space-sm);
+  right: var(--space-sm);
+  z-index: 1;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.manual-location-form__title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: var(--space-sm);
+}
+
+.manual-location-form__intro {
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  line-height: 1.4;
+  margin-bottom: var(--space-md);
+}
+
+.manual-location-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.manual-location-form__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  padding-top: var(--space-sm);
+  border-top: 1px solid var(--color-border);
+}
diff --git a/index.html b/index.html
index d545d2a..4c6ecd4 100644
--- a/index.html
+++ b/index.html
@@ -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
diff --git a/js/main.js b/js/main.js
index c06aacb..07f92e6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -3,15 +3,42 @@
 (function () {
   const { initStore } = EventMap.store;
   const { initMap, centerOnCoords, requestUserLocation } = EventMap.map;
-  const { initList, initDetail, initForm, initFilterPanel, initPromptGenerator } = EventMap.ui;
+  const {
+    initList,
+    initDetail,
+    initForm,
+    initManualLocationForm,
+    initFilterPanel,
+    initPromptGenerator,
+  } = EventMap.ui;
 
   function showFatalError(message) {
     const status = document.getElementById('app-status');
-    if (!status) return;
-    status.textContent = message;
+    const statusText = document.getElementById('app-status-text');
+    if (!status || !statusText) return;
+    statusText.textContent = message;
     status.hidden = false;
   }
 
+  function hideStatus() {
+    const status = document.getElementById('app-status');
+    const statusText = document.getElementById('app-status-text');
+    if (!status || !statusText) return;
+    status.hidden = true;
+    statusText.textContent = '';
+  }
+
+  // Verdrahtet den Schließen-Button der Statusmeldung unabhängig vom
+  // restlichen Bootstrap-Ablauf, damit er auch dann funktioniert, wenn
+  // bootstrap() selbst fehlschlägt und showFatalError() aus dem
+  // catch-Handler heraus aufgerufen wird (siehe Gitea Issue #1: die
+  // Fehlermeldung war bisher dauerhaft nicht schließbar).
+  function setupStatusClose() {
+    const closeBtn = document.getElementById('app-status-close');
+    if (!closeBtn) return;
+    closeBtn.addEventListener('click', hideStatus);
+  }
+
   function setupGeolocationButton() {
     const button = document.getElementById('locate-btn');
     if (!button) return;
@@ -39,6 +66,15 @@
     });
   }
 
+  function setupManualLocationButton() {
+    const button = document.getElementById('manual-location-btn');
+    if (!button) return;
+
+    button.addEventListener('click', () => {
+      EventMap.ui.openManualLocationForm();
+    });
+  }
+
   function setupAddPlaceButton() {
     const button = document.getElementById('add-place-btn');
     if (!button) return;
@@ -64,12 +100,16 @@
     initList('place-list');
     initDetail('detail-modal');
     initForm('place-form-modal');
+    initManualLocationForm('manual-location-modal');
     initPromptGenerator('prompt-generator-modal');
     setupGeolocationButton();
+    setupManualLocationButton();
     setupAddPlaceButton();
     setupPromptGeneratorButton();
   }
 
+  setupStatusClose();
+
   bootstrap().catch((err) => {
     console.error('EventMap: Initialisierung fehlgeschlagen.', err);
     showFatalError('Die Anwendung konnte nicht geladen werden. Bitte Seite neu laden.');
diff --git a/js/ui/manualLocation.js b/js/ui/manualLocation.js
new file mode 100644
index 0000000..3990780
--- /dev/null
+++ b/js/ui/manualLocation.js
@@ -0,0 +1,271 @@
+// Modal zur manuellen Eingabe des Nutzerstandorts (Bugfix, Gitea Issue #1
+// "Eigenen Standort verwenden"): Bislang gab es keine Möglichkeit,
+// state.userLocation zu setzen, wenn die Browser-Geolocation fehlschlägt
+// oder gar nicht verfügbar ist (fehlende Berechtigung, kein HTTPS, Desktop
+// ohne GPS, ...).
+//
+// Aufbau/Muster analog zu js/ui/form.js (Modal mit Backdrop, Escape schließt,
+// Fokus auf erstes Feld beim Öffnen, Validierung + Inline-Fehlermeldungen
+// über dieselben .form-field-Klassen aus css/form.css). Rendering
+// ausschließlich über textContent/DOM-APIs (el()), niemals innerHTML.
+//
+// API: EventMap.ui.initManualLocationForm(containerId) initialisiert das
+// Modal einmalig. EventMap.ui.openManualLocationForm() öffnet es, vorbefüllt
+// mit dem aktuellen state.userLocation (falls vorhanden).
+
+(function () {
+  const { getState, setState, updateSettings } = EventMap.store;
+  const { el, isValidCoordinate } = EventMap.utils;
+  const { centerOnCoords } = EventMap.map;
+
+  const ERROR_FIELDS = ['latitude', 'longitude'];
+
+  let container = null;
+  let refs = null;
+
+  function fieldWrapper(id, labelText, inputNode, { required = false } = {}) {
+    inputNode.id = id;
+    if (required) {
+      inputNode.setAttribute('required', '');
+      inputNode.setAttribute('aria-required', 'true');
+    }
+
+    const errorEl = el('p', {
+      className: 'form-field__error',
+      attrs: { id: `${id}-error`, role: 'alert' },
+    });
+    errorEl.hidden = true;
+    inputNode.setAttribute('aria-describedby', `${id}-error`);
+
+    const labelChildren = [labelText];
+    if (required) {
+      labelChildren.push(
+        el('span', { className: 'form-field__required', attrs: { 'aria-hidden': 'true' } }, [' *'])
+      );
+    }
+
+    const wrapper = el('div', { className: 'form-field' }, [
+      el('label', { className: 'form-field__label', attrs: { for: id } }, labelChildren),
+      inputNode,
+      errorEl,
+    ]);
+
+    return { wrapper, input: inputNode, errorEl };
+  }
+
+  function buildSkeleton(rootContainer) {
+    const nodeRefs = {};
+
+    nodeRefs.backdrop = el('div', {
+      className: 'manual-location-modal__backdrop',
+      on: { click: () => closeManualLocationForm() },
+    });
+
+    nodeRefs.closeBtn = el(
+      'button',
+      {
+        className: 'manual-location-modal__close',
+        attrs: { type: 'button', 'aria-label': 'Formular schließen' },
+        on: { click: () => closeManualLocationForm() },
+      },
+      ['✕']
+    );
+
+    nodeRefs.title = el('h2', {
+      className: 'manual-location-form__title',
+      attrs: { id: 'manual-location-title' },
+      text: 'Standort manuell eingeben',
+    });
+
+    nodeRefs.intro = el('p', {
+      className: 'manual-location-form__intro',
+      text:
+        'Falls dein Browser den Standort nicht ermitteln kann oder du die Freigabe nicht ' +
+        'erteilen möchtest, gib hier Breiten- und Längengrad direkt ein.',
+    });
+
+    const latitudeField = fieldWrapper(
+      'ml-latitude',
+      'Breitengrad',
+      el('input', { attrs: { type: 'number', step: 'any', min: '-90', max: '90', placeholder: 'z.B. 48.1374' } }),
+      { required: true }
+    );
+    const longitudeField = fieldWrapper(
+      'ml-longitude',
+      'Längengrad',
+      el('input', { attrs: { type: 'number', step: 'any', min: '-180', max: '180', placeholder: 'z.B. 11.5755' } }),
+      { required: true }
+    );
+
+    nodeRefs.cancelBtn = el(
+      'button',
+      { className: 'btn btn--secondary', attrs: { type: 'button' }, on: { click: () => closeManualLocationForm() } },
+      ['Abbrechen']
+    );
+    nodeRefs.submitBtn = el(
+      'button',
+      { className: 'btn btn--primary', attrs: { type: 'submit' } },
+      ['Übernehmen']
+    );
+
+    nodeRefs.form = el(
+      'form',
+      {
+        className: 'manual-location-form',
+        attrs: { id: 'manual-location-form', novalidate: '' },
+        on: { submit: handleSubmit },
+      },
+      [
+        latitudeField.wrapper,
+        longitudeField.wrapper,
+        el('div', { className: 'manual-location-form__actions' }, [nodeRefs.cancelBtn, nodeRefs.submitBtn]),
+      ]
+    );
+
+    nodeRefs.panel = el(
+      'div',
+      {
+        className: 'manual-location-modal__panel',
+        attrs: { role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'manual-location-title' },
+      },
+      [nodeRefs.closeBtn, nodeRefs.title, nodeRefs.intro, nodeRefs.form]
+    );
+
+    rootContainer.appendChild(nodeRefs.backdrop);
+    rootContainer.appendChild(nodeRefs.panel);
+
+    nodeRefs.latitude = latitudeField.input;
+    nodeRefs.latitudeError = latitudeField.errorEl;
+    nodeRefs.longitude = longitudeField.input;
+    nodeRefs.longitudeError = longitudeField.errorEl;
+
+    return nodeRefs;
+  }
+
+  function parseNumber(raw) {
+    const trimmed = (raw || '').trim();
+    if (trimmed === '') return null;
+    const num = Number(trimmed);
+    return Number.isFinite(num) ? num : NaN;
+  }
+
+  /** Validiert die gelesenen Koordinaten. Gibt ein Objekt {feldname: Fehlermeldung} zurück. */
+  function validate(lat, lng) {
+    const errors = {};
+
+    if (lat === null) {
+      errors.latitude = 'Bitte einen Breitengrad angeben.';
+    } else if (Number.isNaN(lat) || lat < -90 || lat > 90) {
+      errors.latitude = 'Breitengrad muss eine Zahl zwischen -90 und 90 sein.';
+    }
+
+    if (lng === null) {
+      errors.longitude = 'Bitte einen Längengrad angeben.';
+    } else if (Number.isNaN(lng) || lng < -180 || lng > 180) {
+      errors.longitude = 'Längengrad muss eine Zahl zwischen -180 und 180 sein.';
+    }
+
+    if (!errors.latitude && !errors.longitude && !isValidCoordinate(lat, lng)) {
+      errors.latitude = 'Koordinaten sind ungültig.';
+    }
+
+    return errors;
+  }
+
+  function clearErrors() {
+    for (const key of ERROR_FIELDS) {
+      const input = refs[key];
+      const errorEl = refs[`${key}Error`];
+      if (!input || !errorEl) continue;
+      input.removeAttribute('aria-invalid');
+      errorEl.textContent = '';
+      errorEl.hidden = true;
+    }
+  }
+
+  function showErrors(errors) {
+    clearErrors();
+    for (const [key, message] of Object.entries(errors)) {
+      const input = refs[key];
+      const errorEl = refs[`${key}Error`];
+      if (!input || !errorEl) continue;
+      input.setAttribute('aria-invalid', 'true');
+      errorEl.textContent = message;
+      errorEl.hidden = false;
+    }
+  }
+
+  function focusFirstError(errors) {
+    const firstKey = ERROR_FIELDS.find((key) => errors[key]);
+    if (firstKey && refs[firstKey]) refs[firstKey].focus();
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    const lat = parseNumber(refs.latitude.value);
+    const lng = parseNumber(refs.longitude.value);
+    const errors = validate(lat, lng);
+    showErrors(errors);
+
+    if (Object.keys(errors).length > 0) {
+      focusFirstError(errors);
+      return;
+    }
+
+    setState({ userLocation: { lat, lng } });
+    updateSettings({ userConsentGeo: true });
+    centerOnCoords(lat, lng, 13);
+    closeManualLocationForm();
+  }
+
+  /** Öffnet das Formular, vorbefüllt mit dem aktuellen Nutzerstandort (falls vorhanden). */
+  function openManualLocationForm() {
+    if (!container || !refs) {
+      console.error(
+        'EventMap: Formular für manuellen Standort wurde noch nicht initialisiert (initManualLocationForm()).'
+      );
+      return;
+    }
+
+    clearErrors();
+    refs.form.reset();
+
+    const { userLocation } = getState();
+    if (userLocation) {
+      refs.latitude.value = userLocation.lat;
+      refs.longitude.value = userLocation.lng;
+    }
+
+    container.hidden = false;
+    document.body.classList.add('manual-location-modal-open');
+    refs.latitude.focus();
+  }
+
+  function closeManualLocationForm() {
+    if (!container || container.hidden) return;
+    container.hidden = true;
+    document.body.classList.remove('manual-location-modal-open');
+  }
+
+  /** Initialisiert das Modal im Element mit der übergebenen id. */
+  function initManualLocationForm(containerId) {
+    const containerEl = document.getElementById(containerId);
+    if (!containerEl) {
+      console.error(`EventMap: Container #${containerId} für manuellen Standort nicht gefunden.`);
+      return;
+    }
+
+    container = containerEl;
+    refs = buildSkeleton(container);
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && !container.hidden) {
+        closeManualLocationForm();
+      }
+    });
+  }
+
+  EventMap.ui.initManualLocationForm = initManualLocationForm;
+  EventMap.ui.openManualLocationForm = openManualLocationForm;
+})();