- Beispieldaten werden nicht mehr eingebettet (data/seed.js entfernt),
sondern beim ersten Start per fetch(EventMap.config.SEED_DATA_URL) von
einem externen, selbst gehosteten Server geladen (siehe ADR 0001,
Revision 2026-07-28).
- Neuer UI-Sprachumschalter (Deutsch/Englisch) für die Bedienoberfläche:
js/i18n/strings.js + js/i18n/i18n.js, Sprachwahl im Menü, Persistenz über
settings.language, Retranslation ohne Reload.
- Neuer Menüpunkt "Ausflugsziel übersetzen (KI)": erzeugt einen Prompt, der
eine externe KI bittet, Name/Beschreibungen eines bestehenden Ortes ins
Englische, Spanische oder Französische zu übersetzen (js/ai/translatePromptBuilder.js,
js/ui/translatePromptGenerator.js).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bisher blieb die Filter-Spalte auch bei geschlossenem <details>-Element
in voller Breite stehen, da nur der Inhalt (nicht die Grid-Spalte)
ausgeblendet wurde. Jetzt schrumpft die Spalte per :has()-Selektor auf
56px und zeigt nur noch ein Icon zum Wiederaufklappen.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Schließt Issue #3 ("Übersichtlicher Gestalten"). Karte, Ausflugsziele
und Filter stehen ab 1024px jetzt in einer Zeile nebeneinander statt
Filter über der Liste. Filter & Suche bleibt über das native
<details>-Element auf-/zuklappbar, die Zwangs-Offen-Regel für Desktop
entfällt dafür.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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.
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.
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)
dapelzaandClaude Sonnet 5