# Navigation & Benutzerfluss-Diagramm ## Übersicht: Haupt-Navigation ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ LOGIN-SEITE │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ Username: admin │ │ │ │ Passwort: Admin#1234 │ │ │ │ [Login] ───────────────────────────────────────────┐ │ │ └────────────────────────────────────────┘ │ │ └─────────────────────────────────────────────────────────┼───────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────────────┐ │ HAUPTANSICHT (AdminDrawer) │ │ │ │ ┌──────────────────┬──────────────────────────────────────────────────┐ │ │ │ DRAWER (Links) │ MAIN CONTENT (Rechts) │ │ │ │ │ │ │ │ │ ○ Veranstaltungen ──────► [Veranstaltungs-Seiten] │ │ │ │ ○ Reiter │ │ │ │ │ ○ Pferde │ │ │ │ │ ○ Funktionäre │ │ │ │ │ ○ Meisterschaften │ │ │ │ ○ Cups │ │ │ │ │ │ │ │ │ │ [Logout] │ │ │ │ └──────────────────┴──────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` --- ## Detaillierter Navigationsbaum ``` HAUPTANSICHT (/) │ ├─ DRAWER NAVIGATION (links) │ │ │ ├─ 📁 Veranstaltungen │ │ │ │ │ ├─ [Button: Neue Veranstaltung] │ │ │ └─► /veranstaltung/neu │ │ │ │ │ │ │ └─► VERANSTALTUNGS-ANSICHT (Neue) │ │ │ ├─ Tab: Veranstaltung - Übersicht │ │ │ ├─ Tab: Stammdaten (A-Satz) ← STANDARDTAB │ │ │ ├─ Tab: Organisation │ │ │ └─ Tab: Preisliste │ │ │ │ │ ├─ [Veranstaltung 1] ► Turnier Pfingsten 2023 │ │ │ └─► /veranstaltung/1 │ │ │ │ │ │ │ └─► VERANSTALTUNGS-ANSICHT (Bestehende) │ │ │ └─ Tab: Veranstaltung - Übersicht (EINZIGER TAB) │ │ │ │ │ │ │ └─ TURNIERE-SECTION │ │ │ │ │ │ │ ├─ [Button: Neues Turnier] │ │ │ │ └─► /veranstaltung/1/turnier/neu │ │ │ │ │ │ │ │ │ └─► TURNIER-ANSICHT (Neu) │ │ │ │ ├─ Tab: Veranstaltung - Übersicht │ │ │ │ ├─ Tab: Stammdaten (A-Satz) │ │ │ │ ├─ Tab: Organisation │ │ │ │ ├─ Tab: Bewerbe ⭐ HAUPTSEITE │ │ │ │ └─ Tab: Preisliste │ │ │ │ │ │ │ └─ TURNIER-LISTE │ │ │ │ │ │ │ ├─ [Turnier 1] (zum Öffnen klicken) │ │ │ │ └─► /veranstaltung/1/turnier/1 │ │ │ │ │ │ │ │ │ └─► TURNIER-ANSICHT (Bestehend) │ │ │ │ └─ [Alle 5 Tabs wie oben] │ │ │ │ │ │ │ ├─ [Turnier 2] (zum Öffnen klicken) │ │ │ │ └─► /veranstaltung/1/turnier/2 │ │ │ │ │ │ │ └─ [Turnier 3] (zum Öffnen klicken) │ │ │ └─► /veranstaltung/1/turnier/3 │ │ │ │ │ ├─ [Veranstaltung 2] ► Sommerturnier 2023 │ │ │ └─► /veranstaltung/2 │ │ │ └─► [gleiche Struktur wie Veranstaltung 1] │ │ │ │ │ └─ [Veranstaltung 3] ► Herbstturnier 2023 │ │ └─► /veranstaltung/3 │ │ └─► [gleiche Struktur wie Veranstaltung 1] │ │ │ ├─ 📁 Reiter (nicht implementiert) │ ├─ 📁 Pferde (nicht implementiert) │ ├─ 📁 Funktionäre (nicht implementiert) │ ├─ 📁 Meisterschaften (nicht implementiert) │ ├─ 📁 Cups (nicht implementiert) │ │ │ └─ [Button: Logout] │ └─► Zurück zur Login-Seite │ └─ MAIN CONTENT AREA (rechts) └─► Zeigt jeweils die ausgewählte Seite/Tab ``` --- ## BEWERBE-TAB - Detail-Navigation ⭐ Die wichtigste Seite der Anwendung! ``` ┌─────────────────────────────────────────────────────────────────────────────────┐ │ BEWERBE-TAB (/veranstaltung/:id/turnier/:nr) │ │ │ │ ┌─────────────┬──────────────────────────┬──────────────────────────────┐ │ │ │ AKTIONEN │ BEWERBS-ÜBERSICHT │ BEWERB-KONFIGURATION │ │ │ │ (150px) │ (50%) │ (50%) │ │ │ ├─────────────┼──────────────────────────┼──────────────────────────────┤ │ │ │ │ │ │ │ │ │ [Änderungen │ ┌────────────────────┐ │ ┌──────────────────────┐ │ │ │ │ Speichern] │ │ TOOLBAR │ │ │ TABS │ │ │ │ │ │ │ │ • Aktualisieren │ │ │ ○ Bewerb │ │ │ │ │ └──────►│ │ • 12 Bewerbe │ │ │ ○ Bewertung │ │ │ │ │ (Speichert│ │ • Filtern │ │ │ ○ Geldpreise │ │ │ │ │ alle) │ └────────────────────┘ │ │ ○ Ort/Zeit │ │ │ │ │ │ │ └──────────────────────┘ │ │ │ │ [Änderungen │ ┌────────────────────┐ │ │ │ │ │ Rückgängig]│ │ TABELLE │ │ [Tab-Content hier] │ │ │ │ │ │ │ ┌─┬───┬───┬──────┐ │ │ │ │ │ │ └──────►│ │ │T│Pl.│Bew│ ... │ │ │ ← Zeigt Details des │ │ │ │ (Undo) │ │ │a│a │er │ │ │ │ ausgewählten Bewerbs │ │ │ │ │ │ │g│tz │b │ │ │ │ │ │ │ ├─────────────┤ │ │ │ │ │ │ │ │ ← Interaktive Felder │ │ │ │ │ │ └─┴───┴───┴──────┘ │ │ │ │ │ │ [Bewerb │ │ ▲ │ │ ← Speichern pro Feld │ │ │ │ Einfügen] │ │ │ Klick wählt │ │ │ │ │ │ │ │ │ │ Bewerb aus │ │ │ │ │ │ └──────►│ │ │ │ │ │ │ │ │ (Fügt │ │ └────────────────►│ │ │ │ │ │ Zeile │ │ Zeigt Details │ │ │ │ │ │ hinzu) │ │ rechts → │ │ │ │ │ │ │ │ │ │ │ │ │ │ [Bewerb │ └────────────────────┘ └──────────────────────────────┘ │ │ │ Löschen] │ │ │ │ │ │ │ │ │ └──────►│ (Löscht ausgewählten Bewerb) │ │ │ │ │ │ │ [Bewerb │ │ │ │ Teilen] │ (Dupliziert ausgewählten Bewerb) │ │ │ │ │ │ │ │ └──────►│ │ │ ├─────────────┤ │ │ │ │ │ │ │ [Bewerb nach│ (Verschiebt in Tabelle nach oben) │ │ │ oben vers.]│ │ │ │ │ │ │ └──────► Ändert Reihenfolge │ │ │ └──────►│ │ │ │ │ │ │ │ [Bewerb nach│ (Verschiebt in Tabelle nach unten) │ │ │ unten vers]│ │ │ │ │ │ │ └──────► Ändert Reihenfolge │ │ │ └──────►│ │ │ ├─────────────┤ │ │ │ │ │ │ │ [Startliste │ (Öffnet Startlisten-Editor - noch nicht implementiert) │ │ │ Bearbeiten]│ │ │ │ │ │ │ │ [Startliste │ (Öffnet Druck-Dialog - noch nicht implementiert) │ │ │ Drucken] │ │ │ ├─────────────┤ │ │ │ │ │ │ │ [Ergebnislst│ (Öffnet Ergebnislisten-Editor - noch nicht implementiert) │ │ │ Bearbeiten]│ │ │ │ │ │ │ │ [Ergebnislst│ (Öffnet Druck-Dialog - noch nicht implementiert) │ │ │ Drucken] │ │ │ └─────────────┴──────────────────────────┴──────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## Tab-Wechsel in Bewerb-Konfiguration ``` BEWERB-KONFIGURATION (Rechte Seite im Bewerbe-Tab) │ ├─ TAB 1: Bewerb (Grunddaten) │ │ │ ├─ [Feld: Nummer] ────► Text ändern → Speichern bei "Änderungen Speichern" │ ├─ [Feld: Abteilung] ► Text ändern → Speichern bei "Änderungen Speichern" │ ├─ [Feld: Typ] ──────► Text ändern → Speichern bei "Änderungen Speichern" │ ├─ [Feld: Name] ─────► Text ändern → Speichern bei "Änderungen Speichern" │ ├─ [Feld: Bezeichnung] Text ändern → Speichern bei "Änderungen Speichern" │ ├─ [Dropdown: Kategorie] Auswahl ändern │ ├─ [Dropdown: Klasse] ─► Auswahl ändern │ ├─ [Dropdown: Lizenz] ─► Auswahl ändern │ ├─ [Feld: Maximal] ───► Zahl ändern (Pferde je Reiter) │ ├─ [Dropdown: Pferdealter] Auswahl ändern │ ├─ [Feld: Zeile 1] ───► Text ändern (z.B. "Pony Einsteiger Cup OÖ") │ ├─ [Feld: Zeile 2] ───► Text ändern │ ├─ [Feld: Zeile 3] ───► Text ändern │ └─ [Feld: Logo Bewerb + Button "..."] │ └─► Button öffnet Dateiauswahl (noch nicht implementiert) │ ├─ TAB 2: Bewertung │ │ │ ├─ [Feld: Prüfung] ───────► Text ändern │ ├─ [Feld: Richtverfahren] ► Text ändern (z.B. "A") │ ├─ [Feld: Para-Grade] ────► Text ändern │ ├─ [Feld: Richteranzahl] ─► Zahl ändern │ ├─ [Feld: Aufgabe] ───────► Text ändern (z.B. "Aufgabe R") │ ├─ [Feld: Aufgabennummer] ► Text ändern │ ├─ [Feld: Maximalpunkte] ─► Zahl ändern │ │ │ └─ RICHTER-LISTE (dynamisch) │ │ │ ├─ Richter 1 │ │ ├─ [Feld: Position] ─► Text ändern (z.B. "C") │ │ ├─ [Feld: Name] ─────► Text ändern (z.B. "Schuster Alexandra") │ │ └─ [Checkbox: Aktiv] ► An/Aus │ │ │ ├─ Richter 2 │ │ ├─ [Feld: Position] ─► Text ändern (z.B. "C") │ │ ├─ [Feld: Name] ─────► Text ändern (z.B. "Vankova Kamila (CZ)") │ │ └─ [Checkbox: Aktiv] ► An/Aus │ │ │ └─ ... (weitere Richter) │ ├─ TAB 3: Geldpreise │ │ │ ├─ SECTION: Geldpreis │ │ ├─ [Checkbox: Geldpreis] ──────────► An/Aus │ │ ├─ [Feld: Startgeld] ─────────────► Text ändern (z.B. "15,00") │ │ └─ [Dropdown: Auszahlung] ────────► Auswahl (fortführend, 1/3, 1/4, 1/5) │ │ │ ├─ SECTION: Geldpreis für Kadererreiter │ │ ├─ [Checkbox: Geldpreis für Kadererreiter] ► An/Aus │ │ └─ [Feld: Startgeld für Kadererreiter] ───► Text ändern (z.B. "15,00") │ │ │ ├─ [Dropdown: Geldpreisvorlage wählen] ──────► Auswahl (Vorlagen) │ │ │ │ │ └──► Füllt Geldpreise-Tabelle automatisch │ │ │ └─ TABELLE: Geldpreise │ │ │ ├─ Spalte: Nummer │ ├─ Spalte: Geldpreis │ └─ [Zeigt "0 Geldpreise" wenn leer] │ └─ TAB 4: Ort/Zeit │ ├─ [Dropdown: Tag] ─────────────► Auswahl (28.05.2023, ...) ├─ [Dropdown: Beginnzeit] ──────► Auswahl (fix um, nicht vor, ca.) ├─ [Feld: Zeit] ────────────────► Text ändern (Format: hh:mm, z.B. "08:00") ├─ [Feld: Reitdauer] ───────────► Text ändern (Format: mm:ss, z.B. "02:00") ├─ [Feld: Umbau] ───────────────► Text ändern (in Minuten, z.B. "10") ├─ [Feld: Besichtigung] ────────► Text ändern (in Minuten, z.B. "10") ├─ [Feld: Stechen] ─────────────► Text ändern (in Minuten, leer möglich) └─ [Dropdown: Platz] ───────────► Auswahl (Vorderer Turnierplatz, Hauptplatz, ...) ``` --- ## Interaktionsfluss: Veranstaltung → Turnier → Bewerb ``` SCHRITT 1: Veranstaltung erstellen ┌────────────────────────────────────────┐ │ Drawer: [Neue Veranstaltung] │ └────────────────┬───────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ /veranstaltung/neu │ │ │ │ Tabs sichtbar: │ │ • Veranstaltung - Übersicht │ │ • Stammdaten ← STARTET HIER │ │ • Organisation │ │ • Preisliste │ │ │ │ [Daten eingeben: Name, Ort, Datum...] │ │ [Speichern-Button] │ └────────────────┬───────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ Veranstaltung gespeichert │ │ → Erscheint in Drawer-Liste │ └────────────────┬───────────────────────┘ │ ▼ SCHRITT 2: Turnier erstellen ┌────────────────────────────────────────┐ │ Drawer: [Veranstaltung 1] klicken │ └────────────────┬───────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ /veranstaltung/1 │ │ │ │ Tab: Veranstaltung - Übersicht │ │ │ │ ┌────────────────────────────────────┐ │ │ │ TURNIERE-SECTION │ │ │ │ [Button: Neues Turnier] ←─ KLICK │ │ │ └────────────────────────────────────┘ │ └────────────────┬───────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ /veranstaltung/1/turnier/neu │ │ │ │ Tabs sichtbar: │ │ • Veranstaltung - Übersicht │ │ • Stammdaten │ │ • Organisation │ │ • Bewerbe ← WICHTIGSTE SEITE │ │ • Preisliste │ │ │ │ [Daten eingeben: Turniername...] │ │ [Speichern-Button] │ └────────────────┬───────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ Turnier gespeichert │ │ → Erscheint in Turnier-Liste │ │ unter Veranstaltung 1 │ └────────────────┬───────────────────────┘ │ ▼ SCHRITT 3: Bewerbe konfigurieren ┌────────────────────────────────────────┐ │ Drawer: [Turnier 1] "Öffnen" klicken │ └────────────────┬───────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ /veranstaltung/1/turnier/1 │ │ │ │ [Tab "Bewerbe" auswählen] │ └────────────────┬───────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ BEWERBE-TAB │ │ │ │ 1. [Bewerb Einfügen] klicken │ │ → Neue Zeile in Tabelle │ │ │ │ 2. Bewerb in Tabelle auswählen │ │ → Details erscheinen rechts │ │ │ │ 3. Tabs durchgehen: │ │ • Bewerb (Grunddaten eingeben) │ │ • Bewertung (Richter hinzufügen) │ │ • Geldpreise (Startgeld festlegen) │ │ • Ort/Zeit (Zeitplan konfigurieren) │ │ │ │ 4. [Änderungen Speichern] klicken │ │ │ │ 5. Weitere Bewerbe hinzufügen... │ └────────────────────────────────────────┘ ``` --- ## Tastatur-Navigation (geplant) ``` GLOBALE SHORTCUTS (zukünftig): • Ctrl+S / Cmd+S ──► Speichern • Ctrl+Z / Cmd+Z ──► Rückgängig • Ctrl+N / Cmd+N ──► Neuer Bewerb • Tab ────────────► Nächstes Feld • Shift+Tab ──────► Vorheriges Feld • Pfeiltasten ────► Navigation in Tabellen • Enter ──────────► Zeile öffnen/bestätigen • Esc ────────────► Dialog schließen BEWERBE-TAB SHORTCUTS: • Ctrl+↑ ─────────► Bewerb nach oben • Ctrl+↓ ─────────► Bewerb nach unten • Ctrl+D ─────────► Bewerb duplizieren • Delete ─────────► Bewerb löschen (mit Bestätigung) • Ctrl+1-4 ───────► Tab-Wechsel (Bewerb/Bewertung/Geldpreise/Ort-Zeit) ``` --- ## Fehlerbehandlung & Dialoge (zukünftig) ``` AKTIONEN MIT BESTÄTIGUNG: ┌─────────────────────────────────────────┐ │ [Bewerb Löschen] geklickt │ └───────────────┬─────────────────────────┘ │ ▼ ┌─────────────────────────────────────────┐ │ ⚠️ BESTÄTIGUNGS-DIALOG │ │ │ │ "Bewerb 5 wirklich löschen?" │ │ │ │ [Abbrechen] [Löschen] ←────────────────┼──► Bewerb wird gelöscht └─────────────────────────────────────────┘ SPEICHERN MIT VALIDIERUNG: ┌─────────────────────────────────────────┐ │ [Änderungen Speichern] geklickt │ └───────────────┬─────────────────────────┘ │ ▼ ┌─────────────────────────────────────────┐ │ Validierung läuft... │ │ │ │ ✓ Alle Pflichtfelder ausgefüllt? │ │ ✓ Zeitformat korrekt? │ │ ✓ Nummern-Duplikate? │ └───────────────┬─────────────────────────┘ │ ├──► OK ──► Speichern erfolgreich ✓ │ └──► Fehler ──► ❌ FEHLER-DIALOG │ │ "Bitte korrigieren Sie:" │ • Feld "Nummer" ist leer │ • Zeit-Format ungültig │ └─► [OK] UNGESPEICHERTE ÄNDERUNGEN: ┌─────────────────────────────────────────┐ │ Benutzer verlässt Seite (z.B. klickt │ │ auf anderen Tab oder Turnier) │ └───────────────┬─────────────────────────┘ │ ▼ ┌─────────────────────────────────────────┐ │ ⚠️ WARNUNG │ │ │ │ "Sie haben ungespeicherte Änderungen." │ │ │ │ [Verwerfen] [Abbrechen] [Speichern] │ └─────────────────────────────────────────┘ ``` --- ## Zusammenfassung: Wichtigste Navigations-Buttons | Button / Element | Aktion | Führt zu | |------------------------------|-----------------------------------|-------------------------------------------------------| | **LOGIN** | | | | `[Login]` | Anmelden | Hauptansicht mit Drawer | | **DRAWER** | | | | `[Neue Veranstaltung]` | Erstellt neue Veranstaltung | `/veranstaltung/neu` (5 Tabs, startet auf Stammdaten) | | `[Veranstaltung X]` | Öffnet Veranstaltung | `/veranstaltung/:id` (nur Übersicht-Tab) | | `[Logout]` | Abmelden | Login-Seite | | **VERANSTALTUNG-ÜBERSICHT** | | | | `[Neues Turnier]` | Erstellt Turnier in Veranstaltung | `/veranstaltung/:id/turnier/neu` (5 Tabs) | | `[Turnier X] → Öffnen` | Öffnet bestehendes Turnier | `/veranstaltung/:id/turnier/:nr` (5 Tabs) | | **BEWERBE-TAB** | | | | `[Änderungen Speichern]` | Speichert alle Änderungen | Backend-Call (zukünftig) | | `[Änderungen Rückgängig]` | Macht Änderungen rückgängig | Undo-Funktion (zukünftig) | | `[Bewerb Einfügen]` | Fügt neuen Bewerb hinzu | Neue Zeile in Tabelle | | `[Bewerb Löschen]` | Löscht ausgewählten Bewerb | Zeile wird entfernt | | `[Bewerb Teilen]` | Dupliziert Bewerb | Kopie in Tabelle | | `[↑ Nach oben]` | Verschiebt Bewerb | Reihenfolge in Tabelle | | `[↓ Nach unten]` | Verschiebt Bewerb | Reihenfolge in Tabelle | | `[Startliste Bearbeiten]` | Öffnet Editor | Startlisten-Editor (zukünftig) | | `[Startliste Drucken]` | Öffnet Druckdialog | PDF-Export (zukünftig) | | `[Ergebnisliste Bearbeiten]` | Öffnet Editor | Ergebnislisten-Editor (zukünftig) | | `[Ergebnisliste Drucken]` | Öffnet Druckdialog | PDF-Export (zukünftig) | | **BEWERBE-TABELLE** | | | | `[Tabellenzeile klicken]` | Wählt Bewerb aus | Details rechts anzeigen | | **KONFIGURATIONS-TABS** | | | | `[Tab: Bewerb]` | Zeigt Grunddaten | Bewerb-Felder | | `[Tab: Bewertung]` | Zeigt Bewertung | Richter-Konfiguration | | `[Tab: Geldpreise]` | Zeigt Geldpreise | Preisliste | | `[Tab: Ort/Zeit]` | Zeigt Zeitplan | Ort/Zeit-Felder | | `[Button: ...]` (bei Logo) | Dateiauswahl | File-Dialog (zukünftig) | --- ## Visueller Überblick: Route-Hierarchy ``` / │ ├─ /veranstaltung/neu │ └─ [5 Tabs: Übersicht, Stammdaten*, Organisation, Bewerbe(versteckt), Preisliste] │ ├─ /veranstaltung/:id │ ├─ [1 Tab: Übersicht] │ └─ [Turniere-Section mit Button: Neues Turnier] │ ├─ /veranstaltung/:veranstaltungId/turnier/neu │ └─ [5 Tabs: Übersicht, Stammdaten, Organisation, Bewerbe*, Preisliste] │ └─ /veranstaltung/:veranstaltungId/turnier/:nr └─ [5 Tabs: Übersicht, Stammdaten, Organisation, Bewerbe*, Preisliste] │ └─ Bewerbe-Tab: ├─ Linke Sidebar: Aktions-Buttons (11 Buttons) ├─ Mitte: Tabelle (klickbare Zeilen) └─ Rechts: 4 Konfigurations-Tabs ├─ Tab 1: Bewerb (14 Felder) ├─ Tab 2: Bewertung (7 Felder + Richter-Liste) ├─ Tab 3: Geldpreise (5 Felder + Tabelle) └─ Tab 4: Ort/Zeit (8 Felder) ``` **Legende:** - `*` = Standard-Tab beim Öffnen - `→` = Navigiert zu - `├─` = Hat - `└─` = Zeigt/Führt zu --- **Hinweis**: Dieses Diagramm zeigt die aktuelle Prototyp-Version. Zukünftige Features (Drucken, Export, erweiterte Validierung) sind mit "(zukünftig)" markiert.