Add webapp subproject (Vite + TypeScript + Web Components)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christoph K.
2026-04-05 20:25:50 +02:00
parent 37c56e7e3e
commit 07fdd3de31
17 changed files with 542 additions and 0 deletions

49
webapp/CLAUDE.md Normal file
View File

@@ -0,0 +1,49 @@
# CLAUDE.md — Pamietnik Webapp
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Stack
- **Sprache:** TypeScript (strict)
- **Build:** Vite
- **UI:** Vanilla Web Components (kein Framework)
- **Karte:** MapLibre GL JS + OpenStreetMap Tiles (konfigurierbare Tile-URL)
- **Kein CSS-Framework** — minimales handgeschriebenes CSS
## Befehle
```bash
npm install # Dependencies installieren
npm run dev # Dev-Server auf :5173 (proxied /v1, /login, /logout → :8080)
npm run build # TypeScript-Check + Vite-Build nach dist/
npm run typecheck # Nur TypeScript-Prüfung ohne Build
npm run preview # Build-Ergebnis lokal vorschauen
```
Das Backend muss lokal auf `:8080` laufen (siehe `../backend/`).
## Architektur
```
src/
main.ts App-Bootstrap, Routen registrieren
router.ts History-API-Router (keine externe Library)
api.ts Alle fetch()-Wrapper + TypeScript-Typen für API-Responses
auth.ts Login/Logout (POST /login, POST /logout)
style.css Globaler Reset + Basis-Layout
components/
app-shell.ts Hauptkomponente: Navigation + Router-Outlet
login-page.ts Login-Formular
days-page.ts Tagesübersicht (GET /v1/days)
day-detail-page.ts Tagesdetail + Karte (GET /v1/trackpoints|stops|suggestions)
track-map.ts MapLibre-Wrapper als isolierte Web-Component
```
## Konventionen
- Alle API-Typen (Trackpoint, Stop, Suggestion, DaySummary) sind in `api.ts` definiert
- Alle `fetch()`-Aufrufe laufen über `api.ts` — kein direktes `fetch()` in Komponenten
- Auth-State wird über Session-Cookie gehalten (`credentials: 'include'` bei jedem Request)
- 401-Response in `api.ts` → automatischer Redirect auf `/login`
- Tile-URL der Karte ist als Property auf `<track-map>` konfigurierbar (REQ-MAP-02)
- Neue Routen in `main.ts` registrieren (via `route()`), neue Komponenten in `components/` anlegen und in `main.ts` importieren