Files
GerbilManager/gerbil-manager-web
Gulum ff42341c47 GEN-4 Addendum: 7 Farbarten-Kategorien blockiert + locusToken ef/e-Fix
catalog.ts:
- locusToken E: ef/e -> 'ef' (phenotypisch ausgedrücktes Allel; enables
  catalog-Match fuer het Schimmel-Tiere wie Kohlfuchsschimmel/Orangeschimmel).
  Vorher: 'eef' matchte keinen Katalogeintrag -> Family-Fallback 'Fuchsschimmel'.
- baseColourFor: Family-Fallback entfernt (null statt family-Name) — Familie
  ist nur noch Katalog-Suchfilter, nie direkter Ausgabewert.
- CATEGORY_NAMES Guard in farbschlagFor: Fuchs/Fuchsschimmel/Schimmel/Standard/
  Colourpoint/Dilute/Colourpoint Dilute -> Unbekannter Farbschlag wenn Engine
  diese Namen zurueckgeben wuerde.
- Orangeschimmel: A:'A' hinzugefuegt (Agouti-Einschraenkung), damit aa-ef-Tiere
  durch zu Kohlfuchsschimmel fallen.
- FK-Check: Keine der 7 Kategorie-Namen sind in BASE_COLORS -> 0 FK-Risiko.

genetics.test.ts:
- 'eef with unknown other loci': erwartet jetzt 'Kohlfuchsschimmel' (korrekt!)
- GEN-4 Farbarten-Fixture: Kategorie-Guard-Test + FK-Check-Assert.
Gate: build ✓  eslint ✓  vitest 96/96 ✓  e2e 148/148 ✓
2026-06-06 21:42:15 +02:00
..

gerbil-manager-web

Frontend des Rennmaus-Managers — React + TypeScript + Vite, mobile-first (Smartphone und Laptop).

Entwicklung

npm install
npm run dev

Erwartet die laufende GerbilManagerWebAPI unter http://localhost:5179 (Profil http in GerbilManagerWebAPI/Properties/launchSettings.json).

Konfiguration

Variable Standard Beschreibung
VITE_API_BASE_URL http://localhost:5179 Basis-URL der GerbilManagerWebAPI

Konventionen

  • Alle für Benutzer sichtbaren Texte sind Deutsch und liegen zentral in src/strings/de.ts — keine Texte direkt in Komponenten hartkodieren.
  • API-Zugriffe laufen über src/api/client.ts.
  • Routen werden in src/App.tsx registriert, Seiten liegen in src/pages/.
  • Mutationen (useMutation aus src/hooks/useApi.ts): run() wirft NIE, sondern liefert ein MutationOutcome<T>{ ok: true, value } oder { ok: false, error, cause }. Aufrufer MÜSSEN verzweigen: const r = await m.run(x); if (r.ok) navigate(r.value.id). m.error treibt die Inline-Anzeige; für Spezialfälle (z. B. HTTP 409) r.cause prüfen (r.cause instanceof ApiError && r.cause.status === 409). So sind unbehandelte Promise-Rejections an Aufrufstellen ausgeschlossen (siehe auch src/dev/unhandledRejectionGuard.ts).

Build

npm run build
npm run preview

E2E-Tests (QA-1, Playwright)

npm run e2e                # Mock-Modus: startet Vite auf :5199, API wird gemockt
npx playwright test --project=phone   # nur Smartphone-Viewport (390px)
  • Mock-Modus (Standard): kein Backend nötig. e2e/mock-api.ts fängt alle API-Aufrufe ab (DATA-2-Vertrag: Gridify-Paging, camelCase, 409-Konflikte) mit frischem Datenbestand pro Test (e2e/mock-data.ts).
  • Live-Modus: dieselbe Suite gegen den echten Stack — $env:E2E_BASE_URL = 'http://localhost:5173'; npm run e2e (vorher AppHost starten). Tests, die Mock-Seed-Daten voraussetzen, überspringen sich selbst; die übrigen legen eigene Datensätze an.
  • Beide Viewports (Smartphone 390px, Laptop 1280px) laufen für jede Spec; alle Assertions prüfen die deutschen Oberflächentexte direkt aus src/strings/de.ts.