Andrej Spielmann
3fefc550fe
- Django backend with DRF (clubs, wrestlers, trainers, exercises, templates, trainings, homework, locations, leistungstest) - Next.js 16 frontend with React, Shadcn UI, Tailwind - JWT authentication - Full CRUD for all entities - Calendar view for trainings - Homework management system - Leistungstest tracking
92 lines
2.3 KiB
Markdown
92 lines
2.3 KiB
Markdown
# Leistungstest Ergebnisse — Neue Ansicht
|
||
|
||
## Overview
|
||
|
||
Der "ergebnisse" Tab im Leistungstest zeigt ab sofort Ergebnisse in einer modernen Karten-Ansicht mit Toggle-Option zwischen Karten und Tabelle.
|
||
|
||
## Design
|
||
|
||
### Karten-Ansicht (Default)
|
||
- Pro Ergebnis eine übersichtliche Karte
|
||
- Header: Ringer-Avatar (initialbasiert), Name, Datum, Vorlage
|
||
- Header-Right: Score (%) in groß (farbcodiert: grün ≥100%, gelb ≥80%, rot <80%), Gesamtzeit
|
||
- Body: Liste aller Übungen mit Soll/Reps, elapsed_seconds, Done-Check
|
||
- Footer: Bewertung (Sterne), Bearbeiten/Löschen Buttons
|
||
|
||
### Toggle
|
||
- Toggle-Button-Leiste oben rechts: "⊞ Tabelle" | "📋 Karten"
|
||
- Aktive Ansicht ist hervorgehoben (weißer Hintergrund, Schatten)
|
||
- Auswahl wird in User-Preferences gespeichert (optional, falls bereits Preferences-System existiert)
|
||
|
||
### Farbcodierung
|
||
- Score ≥100%: Grün (`#16a34a`)
|
||
- Score ≥80%: Gelb (`#ca8a04`)
|
||
- Score <80%: Rot (`#dc2626`)
|
||
|
||
### Filter
|
||
- Vorlage-Dropdown (alle Vorlagen oder spezifische)
|
||
- Ringer-Dropdown (optional)
|
||
- Sortierung: Neueste zuerst (default)
|
||
|
||
### Detail-Ansicht pro Ergebnis
|
||
- Alle Übungen mit:
|
||
- Übungsname
|
||
- Soll: `targetReps` (z.B. "3×10")
|
||
- Zeit: `elapsedSeconds` formatiert als `m:ss`
|
||
- Status: ✓ wenn done
|
||
|
||
## Komponenten
|
||
|
||
### ResultsCardsView
|
||
- Rendering aller Ergebnis-Karten
|
||
- Filter-Logik
|
||
- Toggle-State
|
||
|
||
### ResultCard
|
||
- Einzelne Ergebniskarte
|
||
- Avatar mit Initial des Ringers
|
||
- Farbcodierter Score
|
||
- Übungsliste mit Zeiten
|
||
- Aktions-Buttons
|
||
|
||
## API
|
||
|
||
Ergebnisse werden via `apiFetch("/leistungstest/results/")` geladen (existierendes API).
|
||
|
||
Response-Shape:
|
||
```typescript
|
||
{
|
||
id: number
|
||
template: number
|
||
template_name: string
|
||
wrestler: number
|
||
wrestler_name: string
|
||
total_time_seconds: number
|
||
rating: number
|
||
score_percent: number
|
||
completed_at: string
|
||
items: Array<{
|
||
id: number
|
||
exercise: number
|
||
exercise_name: string
|
||
target_reps: number
|
||
actual_reps: number
|
||
elapsed_seconds: number
|
||
order: number
|
||
}>
|
||
}
|
||
```
|
||
|
||
## Backend
|
||
|
||
Keine Änderungen notwendig — bestehendes API wird verwendet.
|
||
|
||
## Implementierung
|
||
|
||
1. Neuer State `resultViewMode: "cards" | "table"` (default: "cards")
|
||
2. `ResultsCardsView` Component mit Karten-Logic
|
||
3. Toggle-Buttons im CardHeader
|
||
4. Ergebnis-Karten mit allen Details
|
||
5. Filter funktionieren wie bisher
|
||
6. Pagination bleibt bestehen
|