Claude
32c594bc4d
Löst die WebApp aus der eigenen OTP2-Instanz heraus und nutzt dieselbe
HAFAS-Anbindung (VBB + Deutsche Bahn) wie die iOS-App, damit beide Clients
gegen dasselbe Backend-Feature-Set laufen:
- js/api.js: getJourneys() ruft jetzt /journeys statt /otp/journeys auf,
inkl. via0-2 (Lat/Lon/Name/WaitMinutes), modes, bike, earlierRef/laterRef.
Gibt die volle Antwort zurück statt nur { journeys }.
- js/app.js: bis zu 3 Zwischenhalte mit eigener Ortssuche und Aufenthaltszeit,
Verkehrsmittel-Filter (ModeFilter-Komponente wiederverwendet), Fahrrad-
Toggle, Früher/Später-Buttons zum Nachladen. Share-Link-Format um
Vias/Modes/Bike erweitert, alter Umstiegszeit-Puffer entfernt (von HAFAS
nicht unterstützt).
- index.html/styles.css: neue Formularelemente für Zwischenhalte, Filter
und Paginierung.
- js/i18n.js: neue Übersetzungsschlüssel in DE/EN, alten sourceNote-String
korrigiert (& wurde per textContent gesetzt und wäre literal
angezeigt worden statt als &).
- README.md: Feature-Beschreibung aktualisiert.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
89 lines
4.4 KiB
Markdown
89 lines
4.4 KiB
Markdown
# ÖPNV Navi – Frontend
|
||
|
||
Vanilla-JS-Webapp für Live-Abfahrten, Routenplanung und eine Live-Karte im
|
||
VBB-Verbund (Berlin/Brandenburg) mit Anbindung an echte DB-Bahnhöfe. Kein
|
||
Build-Schritt, kein Framework – reines HTML/CSS/JS, läuft direkt als
|
||
statische Website.
|
||
|
||
## Tech-Stack
|
||
|
||
- Reines HTML5, CSS3, ES2020+ JavaScript (keine Frameworks, kein Bundler)
|
||
- [Leaflet](https://leafletjs.com/) für die Live-Karte (per CDN eingebunden)
|
||
- Google Fonts: IBM Plex Mono / Sans / Sans Condensed
|
||
- Service Worker für Web-Push-Benachrichtigungen
|
||
|
||
## Ordnerstruktur
|
||
|
||
```
|
||
frontend/
|
||
├── index.html Einzige HTML-Seite (Single Page App über Tabs)
|
||
├── styles.css Komplettes Stylesheet ("Solari-Anzeigetafel bei Nacht"-Theme)
|
||
├── sw.js Service Worker (Web-Push) - MUSS im Root liegen, nicht unter js/
|
||
├── manifest.json PWA-Manifest
|
||
└── js/
|
||
├── config.js Zentrale Konfiguration (API_BASE-URL des Backends)
|
||
├── api.js Schlanker fetch()-Wrapper für alle Backend-Endpunkte
|
||
├── i18n.js Mehrsprachigkeit (DE/EN), Wörterbuch + Sprachumschaltung
|
||
├── app.js Hauptlogik: Tabs, Suche, Abfahrtstafel, Favoriten, Routenplaner
|
||
├── splitflap.js Flip-Animation der Abfahrtstafel (+ Screenreader-Textalternative)
|
||
├── modefilter.js Wiederverwendbare Verkehrsmittel-Filter-Chips
|
||
├── livemap.js Live-Karte (Leaflet): Radar-Modus, Trip-Tracking, Isolations-Modus
|
||
├── tripmodal.js Fahrt-Detail-Modal (Zwischenhalte, Mini-Karte, Verspätungsstatistik)
|
||
├── tripalarm.js Fahrtalarm ("wecke mich X Stationen vorher")
|
||
└── push.js Web-Push: Service-Worker-Registrierung, Abo-Verwaltung
|
||
```
|
||
|
||
## Einrichtung / Deployment
|
||
|
||
Keine Installation nötig – es sind statische Dateien. Einfach den kompletten
|
||
Ordnerinhalt auf einen Webserver (nginx, Apache, Vercel, o.ä.) legen.
|
||
|
||
**Wichtig:**
|
||
- `sw.js` muss im **Root** des ausgelieferten Verzeichnisses liegen (dort, wo
|
||
auch `index.html` liegt), nicht unter `js/`. Der Geltungsbereich eines
|
||
Service Workers ist standardmäßig auf sein eigenes Verzeichnis und alles
|
||
darunter beschränkt.
|
||
- Web Push (und Service Worker generell) funktionieren nur über **HTTPS**
|
||
(oder `localhost` während der Entwicklung).
|
||
- In `js/config.js` die Backend-URL eintragen:
|
||
```js
|
||
window.APP_CONFIG = {
|
||
API_BASE: 'https://dein-server.example/live_navi',
|
||
};
|
||
```
|
||
|
||
## Features im Überblick
|
||
|
||
- **Abfahrten**: Live-Abfahrtstafel (VBB + echte DB-Bahnhöfe), Verkehrsmittel-Filter,
|
||
Gleiswechsel-Hinweis, Störungen & Aufzugsstatus direkt unter der Tafel
|
||
- **Route**: Routenplanung über HAFAS (VBB + Deutsche Bahn, dieselbe Anbindung wie die
|
||
iOS-App), bis zu 3 Zwischenhalte, Verkehrsmittel-Filter, Fahrrad-Option,
|
||
rollstuhlgerechte Verbindungen, Früher/Später-Nachladen, Route teilen (Link)
|
||
- **Karte**: Live-Fahrzeugpositionen, Fahrt isolieren/verfolgen, display-breite
|
||
Darstellung auf jeder Bildschirmgröße
|
||
- **Favoriten**: eigener Tab, Live-Vorschau der nächsten Abfahrt, Störungs-Badges
|
||
- **Fahrtalarm**: weckt X Stationen vor dem Ziel (Ton, Vibration, Vollbild-Overlay)
|
||
- **Push-Benachrichtigungen**: funktionieren auch bei geschlossenem Tab/Browser
|
||
(Service Worker + Web Push, siehe `js/push.js`)
|
||
- **Verlauf**: zuletzt gesuchte Haltestellen, direkt als Vorschläge im Suchfeld
|
||
- **Mehrsprachigkeit**: Deutsch/Englisch, automatische Browsersprache-Erkennung
|
||
- **Barrierefreiheit**: Tastaturbedienung überall (inkl. Suche), ARIA-Tab-Pattern,
|
||
Fokus-Fallen in Dialogen, Screenreader-Textalternative zur Flip-Animation,
|
||
`aria-live`-Regionen für Störungen/Ergebnisse
|
||
|
||
## Browser-Unterstützung
|
||
|
||
Moderne Evergreen-Browser (Chrome, Firefox, Safari, Edge). Nutzt u. a.
|
||
`fetch`, `IntersectionObserver`-freies Vanilla-DOM, Service Worker, Push API,
|
||
CSS Custom Properties und `dvh`-Einheiten (mit `vh`-Fallback). Kein IE11-Support.
|
||
|
||
## Bekannte Grenzen
|
||
|
||
- Die Live-Karte ist für blinde Nutzer naturgemäß eingeschränkt zugänglich
|
||
(Leaflet-Karten sind visuell) – Abfahrtstafel und Routenplaner liefern
|
||
dieselben Informationen barrierefrei.
|
||
- Störungstexte kommen direkt von VBB/HAFAS auf Deutsch – eine Übersetzung
|
||
ins Englische findet nicht statt (nur die App-Oberfläche selbst ist zweisprachig).
|
||
- Fahrtalarm-Ton und Vollbild-Overlay funktionieren nur bei offenem Tab; bei
|
||
geschlossenem Browser zeigt ein Push nur die Systembenachrichtigung.
|