mein-sterntours/dev/frontend-navigation/BACKEND-UI.md

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:

// 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