Alle sieben Aktions-Buttons (Standort, Ausflugsziel anlegen,
KI-Prompt-Generator, Import, Backup) lagen bislang als absolut
positionierte Toolbar oben links ueber der Karte - direkt dort, wo
Leaflet standardmaessig seinen Zoom-Regler platziert, wodurch sich
beides ueberschnitt. Auf dem Smartphone nahm die Toolbar zudem viel
Platz auf der Karte weg.
Die Buttons sind jetzt in einem aufklappbaren Hamburger-Menue im Header
(js/main.js: setupMenuToggle(), schliesst bei Aktion/Escape/Klick
ausserhalb) statt direkt auf der Karte. Der Zoom-Regler wurde zusaetzlich
auf oben rechts verschoben (js/map/mapController.js), damit oben links
dauerhaft Platz fuer eigene Overlays (z.B. map-picking-hint) bleibt.
App-Shell auf Flexbox umgestellt (body als Flex-Spalte, .app-layout mit
flex:1) statt des bisherigen calc(100vh - fixe Header-Hoehe) auf
Desktop, da der Header jetzt bei geoeffnetem Menue waechst - die alte
fixe Berechnung haette Karte/Liste dabei abgeschnitten. --header-height
war dadurch ueberfluessig und wurde entfernt.
Der Nutzer hat den ursprünglichen 10-Eintraege-Seed durch seinen
tatsaechlichen Datenbestand ersetzt (per Backup-Export erzeugt),
inklusive der ueber den KI-Prompt-Generator recherchierten und
importierten Ausflugsziele rund um Neustadt an der Donau/Altmuehltal.
ids/createdAt/updatedAt aus dem Backup wurden uebernommen, da
normalizePlace() vorhandene ids unveraendert beibehaelt.
Damit sehen alle Nutzer, die die App zum ersten Mal (leeres
LocalStorage) oeffnen, diesen erweiterten Datensatz statt der
urspruenglichen 10 Beispieleintraege.
Leaflet setzt auf .leaflet-tooltip standardmaessig white-space: nowrap,
wodurch max-width auf dem Tooltip-Inhalt wirkungslos blieb und lange
Kurzbeschreibungen ueber den Rahmen hinausliefen statt umzubrechen.
white-space: normal + max-width auf dem eventmap-tooltip-wrapper
behoben.
Der Backup-Export/Import (Phase 7) war bislang nur ueber den zweiten Tab
im "KI-Ausflugsziele importieren"-Fenster erreichbar - der Toolbar-Button
nannte an keiner Stelle "Export" oder "Backup", weshalb die Funktion
praktisch nicht auffindbar war.
Neuer eigener Toolbar-Button "Daten sichern/wiederherstellen" oeffnet
das bestehende Import-Fenster jetzt direkt auf dem Backup-Tab
(openImport('backup')). Der bisherige Button bleibt fuer den
KI-JSON-Import zustaendig (openImport('ai')), keine Funktionsaenderung
an der eigentlichen Export-/Import-Logik.
Marker zeigen jetzt beim Mouseover zusaetzlich zum bestehenden
Klick-Popup eine kompakte Vorschau (Leaflet-Tooltip) mit Name,
Kategorie, Kurzbeschreibung sowie Kurzfakten (Altersempfehlung,
Kostenart, Bewertung, falls vorhanden) - ohne dass geklickt werden muss.
Inhalt wird wie ueberall sonst als DOM-Node ueber el()/textContent
erzeugt, kein innerHTML.
Neuer Toolbar-Button "Standort auf Karte waehlen" ergaenzt die
bestehenden Wege (Browser-Geolocation, manuelle Eingabe): aktiviert
einen Auswahlmodus (Crosshair-Cursor, Hinweisleiste mit
Abbrechen-Option), der naechste Klick auf die Karte setzt
state.userLocation auf die geklickten Koordinaten. Escape oder der
Abbrechen-Button beenden den Modus ohne Aenderung.
js/map/mapController.js: startLocationPicking()/stopLocationPicking()/
isPickingLocation() kapseln den einmaligen Klick-Listener und dessen
Aufraeumen. Wiederverwendet den bereits vorhandenen
"Hier bist du"-Marker (aus dem vorherigen Fix) fuer die Anzeige.
Behebt Gitea Issue #2 "Standort auf Karte anzeigen": der per
Browser-Geolocation ermittelte oder manuell eingegebene Standort
(state.userLocation) wurde bisher nur zum Zentrieren/Entfernungsfilter
verwendet, aber nie selbst auf der Karte dargestellt.
Neuer, nicht interaktiver "Hier bist du"-Marker (blauer Punkt mit
Puls-Ring, js/map/markers.js: createUserLocationMarker()) wird direkt
auf die Karte gelegt (ausserhalb der clusterGroup, damit er nie mit
Ausflugsziel-Markern geclustert wird) und reagiert reaktiv auf
Aenderungen von state.userLocation in js/map/mapController.js.
Neues Modul js/import/ mit reiner Validierungslogik
(importValidator.js: parseAndValidate(), findDuplicate()). Jeder
Ausflugsziel-Eintrag im importierten KI-JSON wird einzeln bewertet statt
alles-oder-nichts: fehlender Name/Kategorie oder ungueltige Koordinaten
fuehren zur Ablehnung, weiche Probleme (unbekannte Kategorie, unsichere
website/image-URL, ungueltige Bewertung, falscher Feldtyp) erzeugen nur
eine Warnung. sanitizeEntry() setzt sicherheitskritische Felder vor der
Uebernahme zurueck (z.B. javascript:-URLs), da normalizePlace() selbst
keine Sicherheitspruefung vornimmt. findDuplicate() erkennt
wahrscheinliche Duplikate gegen den bestehenden Datenbestand.
UI (js/ui/import.js): Modal mit zwei Tabs - KI-Ausflugsziele importieren
(Text einfuegen oder Datei hochladen, Vorschau mit
gueltig/Warnung/abgelehnt, Duplikat-Toggle, Bestaetigen) und Backup
sichern/wiederherstellen (js/import/backup.js: Export als JSON-Datei,
Wiederherstellen mit Ersetzen/Ergaenzen-Wahl). Vorschau-Rendering
ausschliesslich ueber el()/textContent, da es sich um echte, ungepruefte
Fremddaten handelt.
Damit sind alle Kernfunktionen aus anforderung.md umgesetzt.
docs/plan.md entsprechend fortgeschrieben.
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.
Neues Modul js/ai/promptBuilder.js: reine Funktion buildPrompt(), deckt
alle 10 Pflichtpunkte aus anforderung.md explizit ab (Region+Radius,
Kategorien, Alter, wichtige Eigenschaften, Anzahl Ergebnisse, keine
erfundenen Informationen, unsichere Angaben kennzeichnen, ausschliesslich
gueltiges JSON, genaue Koordinaten, direkte Importierbarkeit) und bettet
das exakte JSON-Zielschema aus anforderung.md unveraendert ein.
UI (js/ui/promptGenerator.js): Modal mit allen Eingabefeldern aus der
Anforderung (Region, Radius, Kategorien, Altersgruppe, Indoor/Outdoor,
Kostenrahmen, max. Ergebnisse, besondere Anforderungen als Checkboxen +
Freitext, Ausgabesprache), Live-Vorschau des generierten Prompts,
Copy-to-Clipboard mit execCommand-Fallback (js/utils/clipboard.js) und
Speichern als Textdatei (js/utils/download.js). Neuer Toolbar-Button
oeffnet den Generator.
JSON-Import der KI-Antwort ist bewusst nicht Teil dieser Phase, sondern
folgt in Phase 7. docs/plan.md entsprechend fortgeschrieben.
Neues Modul js/filters/ mit reiner Filterlogik (filterEngine.js:
applyFilters(), getDistanceKm()) und UI (filterPanel.js) fuer alle Filter
aus anforderung.md Abschnitt 3: Kategorie, Entfernung (mit "Standort
verwenden"-Button), Alter der Kinder, Kosten, Indoor/Outdoor, 5
Ausstattungsmerkmale, Aufenthaltsdauer, Mindestbewertung sowie
Freitextsuche ueber Name/Ort/Region/Adresse. Trefferzaehler, "Filter
zuruecksetzen" und "Auf Ergebnisse zoomen" ergaenzt.
Store erweitert um updateFilters()/getFilteredPlaces() (Selector).
Karte und Liste rendern jetzt die gefilterte statt die volle
Ausflugsziel-Liste; die Karten-Rerender-Optimierung vergleicht dafuer
die Trefferliste per Id-Schluessel statt nur state.places, damit reine
Filter-/Standortaenderungen ohne Places-Aenderung erkannt werden.
Layout: Filter-Panel als aufklappbares <details> auf Mobile, eigener
Grid-Bereich neben der Karte auf Desktop. docs/plan.md entsprechend
fortgeschrieben (Phase 2-5 als umgesetzt markiert, Phase 5
Navigation war bereits Teil von Phase 2).
Neues Modal (js/ui/form.js) mit allen Feldern aus anforderung.md
Abschnitt 6: Name, Kategorie, Kurz-/Volltext-Beschreibung, Adresse, Ort,
Koordinaten, Altersgruppe, Kosten, Oeffnungszeiten, Aufenthaltsdauer,
Ausstattungs-Checkboxen, Indoor/Outdoor, Bild-URL, Website, Tags.
Validierung: Pflichtfelder (Name, Kategorie, Koordinaten), Koordinaten-
Bereichspruefung, Alter min<=max, Bild-/Website-URL nur http/https.
Fehler erscheinen inline je Feld (aria-invalid/aria-describedby), erstes
fehlerhaftes Feld wird fokussiert.
EventMap.ui.openPlaceForm(place) dient als Einstiegspunkt: ohne Argument
zum Neuanlegen, mit Place-Objekt zum Bearbeiten. Speichern aktualisiert
den Store mit neuer Array-Referenz (Karte/Liste reagieren automatisch)
und persistiert nach LocalStorage.
Verdrahtung: neuer "+ Neues Ausflugsziel hinzufuegen"-Button in der
Karten-Toolbar; der bisherige Bearbeiten-Platzhalter in der
Detailansicht (js/ui/detail.js) oeffnet jetzt das Formular vorausgefuellt
mit dem aktuell angezeigten Ausflugsziel.
Modal, das sich bei Marker- oder Listen-Auswahl (state.selectedPlaceId)
oeffnet: Titelbild/Platzhalter, vollstaendige Beschreibung, Adresse,
Mini-Karte mit Positionsmarker, Oeffnungszeiten, Kosten, Altersempfehlung,
Ausstattung (inkl. klar markierter negativer Werte), Hinweise fuer
Familien, Website-Link. Navigation-Button zu OSM Directions. Loeschen ist
bereits voll funktional (mit Bestaetigung), Bearbeiten ist als Platzhalter
fuer Phase 3 markiert.
Neuer Helper isSafeHttpUrl() in dom.js: nur http/https als Link- oder
Bildquelle zulaessig, schuetzt vor javascript:-URLs in Fremddaten
(Vorbereitung fuer KI-JSON-Import). Rendering weiterhin ausschliesslich
ueber textContent/el(), kein innerHTML mit Place-Daten.
Reines HTML5/CSS3/JavaScript ohne Build-Tooling, lauffaehig direkt per
Doppelklick auf index.html (file://, kein Server noetig):
- Datenmodell fuer Ausflugsziele mit allen Feldern aus der Anforderung,
15 feste Kategorien inkl. Farbe/Icon
- Zentraler Pub/Sub-Store mit LocalStorage-Persistenz und
Migrations-Grundgeruest
- Interaktive Karte (Leaflet + Leaflet.markercluster, lokal vendored)
mit kategoriefarbenen Markern, Clustering, Popups, Geolocation-Button
- Kartengrundlage ueber CARTO-Basemaps statt tile.openstreetmap.org, da
dessen Referer-Pflicht file://-Aufrufe blockiert
- Seed-Daten als eingebettetes Script (data/seed.js) statt JSON-Datei,
da fetch() auf lokale Dateien unter file:// nicht zuverlaessig
funktioniert
- Ergebnisliste mit 10 Beispiel-Ausflugszielen, sicher gerendert ueber
textContent/DOM-APIs statt innerHTML (Vorbereitung fuer spaeteren
KI-JSON-Import mit Fremddaten)
- Responsives Layout (Desktop nebeneinander, Mobile gestapelt)
dapelza
