# Backend-UI für Navigation API

Die Backend-UI bietet eine benutzerfreundliche grafische Oberfläche zur Verwaltung und Visualisierung des Navigationsbaums **genau wie im Frontend (header.html.twig)**.

## Zugriff

**URL:** `/navigation-api`  
**Permission:** `crm-nav-api`  
**Menü:** Navigation API (Seitenmenü)

## Frontend-Struktur

Die Backend-UI zeigt den Navigationsbaum **exakt wie im Frontend** mit allen Bereichen:

### 🌍 Länder-Navigation

- ✅ **Länderseiten** (Pages mit `country_id`) als Root-Level
- ✅ **Sortierung** nach `order` und `title`
- ✅ **Gruppierung** der Children nach `beforeTitle` (Haupt / Infos)
- ✅ **titleShort** wird verwendet statt vollständigem Titel
- ✅ Toggle zum Auf-/Zuklappen der Children

### 🏠 USEDOM Ferienwohnungen

- ✅ **Ferienwohnungs-Übersicht** als Hauptseite
- ✅ **Einzelne FeWos** als Children
- ✅ Sortiert nach `order` und `title`

### 📑 Mehr-Menü Seiten

- ✅ **Über uns**
- ✅ **Reiseversicherung**
- ✅ **Reiseführer** (mit möglichen Children)
- ✅ **Reisemagazin** (mit möglichen Children)
- ✅ **Reisenews** (mit möglichen Children)

### Allgemein

- ✅ **Ausgeblendete Pages** werden angezeigt (Badge "Ausgeblendet")
- ✅ **Section-Separators** trennen die Bereiche visuell

## Features

### 📊 Live-Statistiken

Oben auf der Seite werden wichtige Kennzahlen angezeigt:

- **Gesamt Seiten:** Alle Pages in der Datenbank
- **Aktive Seiten:** Nur sichtbare und aktive Pages
- **Reiseprogramme:** Anzahl der TravelProgram-Pages
- **Länderseiten:** Anzahl der Country-Pages

Die Statistiken werden beim Laden der Seite automatisch aktualisiert.

### 🌳 Interaktiver Navigationsbaum

Der Hauptbereich zeigt den hierarchischen Navigationsbaum mit folgenden Features:

#### Visuelle Darstellung

- **Icons:**

  - ⭐ Stern (gelb) = Länderseite (Root-Level)
  - ✈️ Flugzeug = Reiseprogramm
  - 🏠 Haus = Ferienwohnung
  - ℹ️ Info-Circle = Infos-Gruppe
  - 📄 Dokument = Normale Seite

- **Badges:**

  - 🔴 **Inaktiv** = Status ist 0
  - ⚠️ **Ausgeblendet** = show_in_navi ist 0 (wird trotzdem angezeigt!)
  - 🔵 **Reiseprogramm** = Hat TravelProgram
  - 💙 **FeWo** = Hat FewoLodging
  - 💚 **Land** = Hat Country
  - ⚪ **Gruppe: Infos** = beforeTitle ist gesetzt

- **Hierarchie:**

  - **Root-Level:** Länderseiten (fett, grauer Hintergrund, blaue Linie links)
  - **Children:** Eingerückt, normale Darstellung
  - **Separator "Infos":** Grauer Block trennt Haupt- von Info-Seiten
  - Toggle-Buttons nur bei Länderseiten

- **Besonderheiten:**
  - **titleShort** wird angezeigt (wie im Frontend)
  - **Gruppierung** nach beforeTitle (Haupt, dann Infos)
  - **Ausgeblendete** Pages haben gelbes Badge aber sind sichtbar

#### Interaktion

- **Auf-/Zuklappen:**

  - Klick auf Pfeil: Einzelnen Knoten auf-/zuklappen
  - "Alle aufklappen": Zeigt kompletten Baum
  - "Alle zuklappen": Zeigt nur Root-Ebene

- **Hover-Effekt:**
  - Hintergrund wird grau beim Überfahren mit der Maus

### 🔍 Suche

Die Suchfunktion durchsucht alle Navigationspunkte nach:

- **Titel:** Page-Titel
- **Slug:** URL-freundlicher Name
- **URL:** Vollständiger Pfad

**Verwendung:**

1. Suchbegriff eingeben
2. Enter drücken oder auf Suchbutton klicken
3. Gefundene Knoten werden gelb markiert
4. Parent-Knoten werden automatisch aufgeklappt

### 🎯 Filter

**"Mit ausgeblendeten" / "Nur sichtbare"**

- **Mit ausgeblendeten (Standard):** Zeigt alle Pages inkl. ausgeblendete (show_in_navi=0)
- **Nur sichtbare:** Zeigt nur Pages mit show_in_navi=1 (wie im Frontend)

Der aktive Filter wird durch die Button-Farbe angezeigt:

- Blau = Mit ausgeblendeten
- Primär = Nur sichtbare

Ausgeblendete Pages werden mit einem gelben Badge "Ausgeblendet" markiert.

### 📥 Export

**JSON-Export-Funktion:**

- Klick auf "Export JSON" lädt eine JSON-Datei herunter
- Dateiname: `navigation-tree-YYYY-MM-DD-HHMMSS.json`
- Inhalt: Kompletter Navigationsbaum entsprechend aktuellem Filter
- Format: Pretty-printed JSON mit UTF-8 Encoding

**Verwendungszwecke:**

- Backup der Navigationsstruktur
- Import in andere Systeme
- Analyse und Dokumentation
- Debugging

### 🔄 Cache-Verwaltung

**Cache leeren:**

- Klick auf "Cache leeren"
- Bestätigung erforderlich
- Löscht alle gecachten Navigationsdaten
- Wird automatisch nach 60 Minuten erneuert

**Wann Cache leeren?**

- Nach Änderungen an Pages
- Nach Import/Export von Daten
- Bei veralteten Anzeigen
- Nach Struktur-Änderungen

## Technische Details

### API-Calls

Die UI nutzt folgende Endpunkte:

```javascript
// Statistiken laden
GET /navigation-api/stats

// Navigationsbaum laden (Frontend-Struktur)
GET /navigation-api/data?include_hidden=0|1

// Suche durchführen
GET /navigation-api/search?query=...

// Export starten (Frontend-Struktur)
GET /navigation-api/export?include_hidden=0|1

// Cache leeren
POST /navigation-api/clear-cache
```

**Unterschied zu API-Endpunkten:**

- `/api/navigation/*` = Kompletter Baum (API)
- `/navigation-api/*` = Frontend-Struktur (nur Länderseiten)

### Performance

- **Caching:** 60 Minuten Server-seitig
- **Lazy Loading:** Kinder werden nur bei Bedarf gerendert
- **Optimierte Queries:** Eager Loading von Relationships
- **Frontend-Rendering:** jQuery-basiert, schnell auch bei 1000+ Knoten

### Browser-Kompatibilität

- ✅ Chrome/Edge (aktuell)
- ✅ Firefox (aktuell)
- ✅ Safari (aktuell)
- ⚠️ IE11 (eingeschränkt)

## Styling

### Farben

- **Primary (Blau):** Reiseprogramme, aktive Aktionen
- **Success (Grün):** Aktive Pages, Länder
- **Info (Cyan):** Ferienwohnungen
- **Warning (Gelb):** "Nicht in Navi", Suchmarkierungen
- **Danger (Rot):** Inaktive Pages, Löschen-Aktionen

### Responsive Design

Die UI ist responsive und funktioniert auf verschiedenen Bildschirmgrößen:

- **Desktop (>1200px):** Volle Features, 4 Statistik-Karten
- **Tablet (768-1199px):** 2 Statistik-Karten pro Zeile
- **Mobile (<768px):** 1 Statistik-Karte pro Zeile, vereinfachte Toolbar

## Shortcuts

Keine Keyboard-Shortcuts implementiert (noch).

## Bekannte Einschränkungen

1. **Sehr große Bäume (>10.000 Knoten):**

   - Kann zu langsamem Rendering führen
   - Empfehlung: Filter verwenden

2. **Suche:**

   - Nur client-seitig, keine Server-Suche
   - Bei vielen Ergebnissen kann es unübersichtlich werden

3. **Keine Bearbeitung:**
   - Nur Anzeige, keine Inline-Bearbeitung
   - Änderungen müssen über CMS erfolgen

## Zukünftige Erweiterungen

Mögliche Features für die Zukunft:

- [ ] Drag & Drop zum Verschieben von Knoten
- [ ] Inline-Bearbeitung von Titeln
- [ ] Bulk-Operationen (Status ändern, löschen, etc.)
- [ ] Mehr Filter-Optionen (Template, Level, etc.)
- [ ] Keyboard-Shortcuts
- [ ] Pagination für sehr große Bäume
- [ ] Graphische Visualisierung (D3.js Tree)
- [ ] Breadcrumb-Anzeige für selektierten Knoten
- [ ] Export in andere Formate (CSV, XML)

## Troubleshooting

### Problem: Baum lädt nicht

**Lösung:**

1. Browser-Konsole öffnen (F12)
2. Fehler prüfen
3. Netzwerk-Tab prüfen: Status-Code der API-Calls
4. Backend-Logs prüfen

### Problem: Statistiken zeigen "-"

**Lösung:**

1. API-Endpunkt `/navigation-api/stats` prüfen
2. Browser-Konsole auf Fehler prüfen
3. Permission `crm-tp-na` prüfen

### Problem: Cache wird nicht geleert

**Lösung:**

1. CSRF-Token prüfen
2. POST-Request erfolgreich? (Netzwerk-Tab)
3. Server-Logs prüfen
4. Cache-System aktiv? (config/cache.php)

### Problem: Suche funktioniert nicht

**Lösung:**

1. JavaScript-Fehler in Konsole?
2. jQuery geladen?
3. Suchbegriff korrekt eingegeben?

## Support

Bei Problemen oder Fragen:

1. Dokumentation lesen: `dev/frontend-navigation/README.md`
2. API-Dokumentation: `dev/frontend-navigation/navigation-api.md`
3. Test-Tools verwenden: `dev/frontend-navigation/test-api.html`

## Changelog

### Version 1.0 (Initial Release)

- ✅ Navigationsbaum-Visualisierung
- ✅ Live-Statistiken
- ✅ Suche
- ✅ Filter (Alle/Aktive)
- ✅ Export (JSON)
- ✅ Cache-Verwaltung
- ✅ Responsive Design
- ✅ Icon-basierte Typerkennung
- ✅ Badge-System für Status