Files
eventmap/index.html
T
dapelza 39321d680f Phase 7: KI-JSON-Import und Backup-Export/Import
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.
2026-07-24 12:50:05 +02:00

129 lines
5.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EventMap Familienfreundliche Ausflugsziele</title>
<link rel="stylesheet" href="vendor/leaflet/leaflet.css" />
<link rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.css" />
<link rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.Default.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/variables.css" />
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/components.css" />
<link rel="stylesheet" href="css/detail.css" />
<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/import.css" />
<link rel="stylesheet" href="css/responsive.css" />
</head>
<body>
<header class="app-header">
<h1 class="app-header__title">EventMap</h1>
<p class="app-header__subtitle">Familienfreundliche Ausflugsziele auf der Karte</p>
</header>
<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">
<div class="map-panel__toolbar">
<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>
<button id="open-prompt-generator-btn" type="button" class="btn btn--secondary">
🤖 Neue Ausflugsziele mit KI erstellen
</button>
<button id="open-import-btn" type="button" class="btn btn--secondary">
📥 KI-Ausflugsziele importieren
</button>
</div>
<div id="map" class="map-panel__map">
<p class="map-panel__loading">Karte wird geladen…</p>
</div>
</section>
<div id="filter-panel" class="filter-panel" aria-label="Filter und Suche"></div>
<aside class="list-panel" aria-label="Ergebnisliste">
<h2 class="list-panel__title">Ausflugsziele</h2>
<div id="place-list" class="list-panel__content">
<p class="list-empty">Lade Ausflugsziele…</p>
</div>
</aside>
</main>
<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>
<div id="import-modal" class="import-modal" hidden></div>
<script src="vendor/leaflet/leaflet.js"></script>
<script src="vendor/leaflet.markercluster/leaflet.markercluster.js"></script>
<!-- Klassische Scripts statt ES-Module (import/export), damit die App
auch per Doppelklick/file:// ohne lokalen Server funktioniert.
Reihenfolge folgt der Abhängigkeitskette; alle Dateien hängen ihre
öffentliche API an das globale window.EventMap-Namespace-Objekt an. -->
<script src="js/utils/dom.js"></script>
<script src="js/utils/geo.js"></script>
<script src="js/utils/id.js"></script>
<script src="js/utils/clipboard.js"></script>
<script src="js/utils/download.js"></script>
<script src="js/filters/filterEngine.js"></script>
<script src="data/seed.js"></script>
<script src="js/config/constants.js"></script>
<script src="js/config/categories.js"></script>
<script src="js/models/schema.js"></script>
<script src="js/models/place.js"></script>
<script src="js/store/migrations.js"></script>
<script src="js/store/storage.js"></script>
<script src="js/store/store.js"></script>
<script src="js/map/geolocation.js"></script>
<script src="js/map/markers.js"></script>
<script src="js/map/mapController.js"></script>
<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
auf EventMap.config.CATEGORIES angewiesen ist und js/ui/promptGenerator.js
wiederum promptBuilder.js voraussetzt. -->
<script src="js/ai/promptBuilder.js"></script>
<script src="js/ui/promptGenerator.js"></script>
<!-- KI-JSON-Import + Backup-Export/Import (Phase 7): js/import/*.js sind
reine Validierungs-/Datenfunktionen ohne DOM-Zugriff und setzen daher
nur EventMap.utils/models/config/store voraus (bereits geladen);
js/ui/import.js baut darauf auf. -->
<script src="js/import/importValidator.js"></script>
<script src="js/import/backup.js"></script>
<script src="js/ui/import.js"></script>
<script src="js/main.js"></script>
</body>
</html>