312 lines
7.9 KiB
Markdown
312 lines
7.9 KiB
Markdown
# 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
|