Phase 3: Formular zum Anlegen und Bearbeiten

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.
This commit is contained in:
2026-07-24 11:43:01 +02:00
parent 2812e03530
commit 10f9170d61
6 changed files with 809 additions and 3 deletions
+9 -2
View File
@@ -37,6 +37,7 @@
let refs = null;
let miniMap = null;
let lastSelectedPlaceId = null;
let currentPlace = null;
function formatAgeRecommendation(ageRecommendation) {
const { min, max } = ageRecommendation || {};
@@ -115,8 +116,13 @@
attrs: { type: 'button', id: 'detail-edit-btn' },
on: {
click: () => {
// TODO Phase 3: Formular zum Bearbeiten des Ausflugsziels öffnen.
window.alert('Bearbeiten ist ab Phase 3 verfügbar.');
// Detailansicht schließen und das Bearbeiten-Formular öffnen
// (js/ui/form.js, wird nach diesem Modul geladen, daher hier zur
// Aufrufzeit über den globalen Namespace referenziert statt beim
// Datei-Laden destrukturiert).
const place = currentPlace;
setState({ selectedPlaceId: null });
EventMap.ui.openPlaceForm(place);
},
},
},
@@ -298,6 +304,7 @@
}
function renderContent(place) {
currentPlace = place;
const category = getPlaceCategory(place);
refs.name.textContent = place.name;