Add files via upload
This commit is contained in:
Serverlele30 authored and GitHub committed
1 parent
fbd97dc9d5
commit
3688c5743e
5 files changed
+887
-365
No files matched your search
+104
-363
@@ -1,391 +1,132 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
All notable changes to this project will be documented in this file.
|
Alle wichtigen Änderungen an diesem Projekt werden in dieser Datei dokumentiert.
|
||||||
|
|
||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
Das Format basiert auf [Keep a Changelog](https://keepachangelog.com/de/1.0.0/),
|
||||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
|
||||||
|
|
||||||
|
## [30.0.0] - 2026-02-10
|
||||||
|
|
||||||
|
### 🎉 Major Release - Code-Trennung & Desktop-Optimierung
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- **Modulare Dateistruktur**: Projekt in separate HTML, CSS und JS Dateien aufgeteilt
|
||||||
|
- **Desktop-Optimierungen**: Responsive Layouts für verschiedene Bildschirmgrößen
|
||||||
|
- Tablet/Desktop (768px+): 900px Container
|
||||||
|
- Large Desktop (1200px+): 1100px Container mit 2-Spalten Layout
|
||||||
|
- Extra Large (1600px+): 1400px Container mit 3-Spalten Layout
|
||||||
|
- **Hover-Effekte**: Desktop-optimierte Interaktionen
|
||||||
|
- Navigation Items
|
||||||
|
- Buttons und Filter
|
||||||
|
- Abfahrts-Items
|
||||||
|
- Journey Results
|
||||||
|
- **Live-Map Desktop-Layout**: Controls links positioniert statt oben
|
||||||
|
- **Home View Desktop**: 3-Spalten Navigation auf großen Bildschirmen
|
||||||
|
- **README.md**: Umfassende Dokumentation der Projektstruktur
|
||||||
|
- **CHANGELOG.md**: Versionsverwaltung und Änderungsprotokoll
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- **Dateistruktur**:
|
||||||
|
- `index.html`: Von 4.698 auf 390 Zeilen reduziert
|
||||||
|
- `styles.css`: 2.467 Zeilen (vorher inline)
|
||||||
|
- `script.js`: 1.992 Zeilen (vorher inline)
|
||||||
|
- **Container-Breiten**: Desktop-optimierte max-widths
|
||||||
|
- Vorher: 1200px (zu breit)
|
||||||
|
- Jetzt: 900px (Tablet), 1100px (Desktop), 1400px (XL)
|
||||||
|
- **Navigation-Menü**: Von 280px auf 320px verbreitert
|
||||||
|
- **Header-Schrift**: Desktop-Größen erhöht (36px → 38px)
|
||||||
|
- **Detail-Modal**: Responsive Breiten je nach Bildschirmgröße
|
||||||
|
- Tablet: 900px
|
||||||
|
- Desktop: 1100px
|
||||||
|
- Extra Large: 1300px
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
- **Z-Index Issue**: Popups und Modals werden jetzt korrekt über dem Header angezeigt
|
||||||
|
- Header: z-index 10000
|
||||||
|
- Detail-Modal: z-index 10005
|
||||||
|
- Detail-Header: z-index 10006
|
||||||
|
- Leaflet-Popups: z-index 10010
|
||||||
|
- **Desktop-Layout**: Fehlende Optimierungen für große Bildschirme korrigiert
|
||||||
|
- **Live-Map Controls**: Bessere Positionierung auf Desktop
|
||||||
|
|
||||||
|
### Technical Details
|
||||||
|
- CSS-Dateigröße: 2.467 Zeilen (inkl. Desktop-Optimierungen)
|
||||||
|
- JavaScript unverändert: 1.992 Zeilen
|
||||||
|
- HTML-Struktur: Sauber getrennt, 390 Zeilen
|
||||||
|
- Caching-Vorteile: Browser können CSS/JS separat cachen
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## [29.0] - 2025-12-31
|
## [29.0.0] - 2026-02-09
|
||||||
|
|
||||||
### ✨ Added
|
### Vorherige Version (Monolithisch)
|
||||||
- **GitHub-Integration:** Links zur Repository auf der Home-Page
|
- Alle Code in einer `index.html` Datei
|
||||||
- **Changelog GitHub-Link:** "📖 Alle Updates & Code auf GitHub" Button nach neuesten Updates
|
- 4.698 Zeilen insgesamt
|
||||||
- **Footer GitHub-Link:** "⭐ Star on GitHub" unter "Made with ❤️"
|
- Funktionale PWA mit allen Features
|
||||||
- **Hover-Effekte:** Interaktive Buttons mit Animations
|
- Optimiert für Mobile
|
||||||
|
|
||||||
### 🎨 Changed
|
### Features (bereits vorhanden)
|
||||||
- GitHub-Links mit BVG-Farbschema (Gelb/Schwarz)
|
- ✅ Echtzeit-Abfahrten VBB/BVG
|
||||||
- Responsive Buttons für Mobile & Desktop
|
- ✅ Routenplanung
|
||||||
|
- ✅ Live-Fahrzeugverfolgung (Radar)
|
||||||
|
- ✅ Service Worker (Offline-Fähigkeit)
|
||||||
|
- ✅ PWA Manifest (Installierbar)
|
||||||
|
- ✅ HTTPS Development Server
|
||||||
|
- ✅ DotMatrix Font Integration
|
||||||
|
- ✅ Dark Mode Design
|
||||||
|
- ✅ Touch-optimiert für Mobile
|
||||||
|
- ✅ Pull-to-Refresh
|
||||||
|
- ✅ Leaflet.js Karten-Integration
|
||||||
|
- ✅ BVG-Linienfarben
|
||||||
|
- ✅ Fahrzeug-Filter (U-Bahn, Bus, Tram, S-Bahn, Regional)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## [28.0] - 2025-12-31
|
## Projektinformationen
|
||||||
|
|
||||||
### 🐛 Fixed
|
**Entwickelt von:** Aaron K. & Claude (Anthropic)
|
||||||
- **Bug-Fix:** Abfahrten-View nicht mehr beim ersten Laden sichtbar
|
**Lizenz:** MIT
|
||||||
- Home-View ist jetzt korrekt die einzige aktive View beim Start
|
**Repository:** https://github.com/Serverlele30/VBB-Status-Web-App
|
||||||
|
|
||||||
### ✨ Changed
|
### Mitwirkende
|
||||||
- **Header-Title:** "Live-Nahverkehr für Berlin & Brandenburg" statt "ECHTZEIT-ABFAHRTSMONITOR"
|
- Aaron K. - Projektleitung, Konzept, Testing
|
||||||
- **Credits:** Aaron K. & Claude (Anthropic) im Header erwähnt
|
- Claude (Anthropic) - Entwicklung, Code-Optimierung
|
||||||
- **Navigation-Hinweis:** Pfeil entfernt für klareren Text
|
|
||||||
- **Font-Credit:** Nur @NikBLN gelb und verlinkt (nicht "DotMatrix by")
|
|
||||||
|
|
||||||
### 📝 Added
|
|
||||||
- Vollständige README.md für GitHub
|
|
||||||
- GitHub-formatiertes CHANGELOG.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## [26.0] - 2025-12-31
|
## Geplante Features / Roadmap
|
||||||
|
|
||||||
### ✨ Added
|
### v31.0.0 (geplant)
|
||||||
- **Kombinierte Hero-Box:** Navigation + Hero in einer Box
|
- [ ] API-Error Handling verbessern
|
||||||
- **Pfeil zeigt nach rechts:** Richtung zum Menü-Button
|
- [ ] Favoriten-Stationen speichern
|
||||||
|
- [ ] Benachrichtigungen bei Verspätungen
|
||||||
|
- [ ] Dunkles/Helles Theme umschaltbar
|
||||||
|
- [ ] Historische Daten und Statistiken
|
||||||
|
|
||||||
### 🎨 Changed
|
### v32.0.0 (Ideen)
|
||||||
- Kompakteres Design durch kombinierte Box
|
- [ ] Barrierefreiheit (A11y) Audit
|
||||||
- Text "oben rechts" statt "hier oben"
|
- [ ] Mehrsprachigkeit (Englisch)
|
||||||
|
- [ ] Export von Routen als iCal/PDF
|
||||||
|
- [ ] Teilen-Funktion für Verbindungen
|
||||||
|
- [ ] Integration mit Kalender-Apps
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## [25.0] - 2025-12-31
|
## Versionsschema
|
||||||
|
|
||||||
### ✨ Added
|
Dieses Projekt verwendet [Semantic Versioning](https://semver.org/lang/de/):
|
||||||
- **Home/Landing-Page:** Neue Startseite beim App-Load
|
|
||||||
- **Navigation-Hinweis:** Pfeil zeigt zum Menü-Button
|
|
||||||
- **Quick-Info Cards:** 3 Feature-Cards (Desktop nebeneinander, Mobile untereinander)
|
|
||||||
- **Features-Box:** Detaillierte technische Features
|
|
||||||
- **Two-Column Layout:** Updates | Info nebeneinander (Desktop)
|
|
||||||
|
|
||||||
### 🎨 Changed
|
- **MAJOR** (X.0.0): Breaking Changes, große Architekturänderungen
|
||||||
- "Info" statt "Credits" als Box-Titel
|
- **MINOR** (0.X.0): Neue Features, abwärtskompatibel
|
||||||
- VBB-Gebiet korrekt: "Berlin & Brandenburg"
|
- **PATCH** (0.0.X): Bugfixes, kleine Verbesserungen
|
||||||
- Kompaktere Paddings und Fonts (~20% kleiner)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## [24.0] - 2025-12-31
|
## Support & Feedback
|
||||||
|
|
||||||
### ✨ Added
|
Bei Fragen oder Problemen:
|
||||||
- **Two-Column Layout:** Changelog und Credits nebeneinander
|
1. GitHub Issues: https://github.com/Serverlele30/VBB-Status-Web-App/issues
|
||||||
|
2. README konsultieren
|
||||||
|
3. Code-Kommentare lesen
|
||||||
|
|
||||||
### 🎨 Changed
|
**Viel Erfolg mit der VBB Netz Status App! 🚇🚌🚊**
|
||||||
- Verbesserte Home-Page mit kompakterem Design
|
|
||||||
- Intro-Text statt Feature-Cards
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [23.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Home-Screen:** Erste Version der Landing-Page
|
|
||||||
- **Feature-Übersicht:** 4 Feature-Cards mit Icons
|
|
||||||
- **Changelog:** Integriert auf Home-Page
|
|
||||||
- **Credits:** Vollständige Attribution
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [22.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Dynamischer Page-Title:** Browser-Tab zeigt aktive View
|
|
||||||
- "VBB Netz Status - Abfahrten"
|
|
||||||
- "VBB Netz Status - Route"
|
|
||||||
- "VBB Netz Status - Live-Map"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [21.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Dynamische Bounds:** Live-Map lädt nur sichtbare Fahrzeuge
|
|
||||||
- **API-Optimierung:** Bis zu 69% weniger Daten bei Zoom-in
|
|
||||||
- **Auto-Reload beim Map-Bewegen:** Immer aktuelle Fahrzeuge im Sichtbereich
|
|
||||||
|
|
||||||
### 🎯 Changed
|
|
||||||
- 15% Puffer-Zone um Map-Bounds für smooth UX
|
|
||||||
- Effizientere API-Calls
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [20.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Leaflet Map Integration:** Interaktive Karte statt statischer Einbettung
|
|
||||||
- **Custom Marker:** Fahrzeuge als Custom Icons mit Linienfarben
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Verbesserte Map-Performance
|
|
||||||
- Bessere Mobile-Unterstützung
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [19.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Echte BVG-Farben:** Authentische Linienfarben für 40+ Linien
|
|
||||||
- U-Bahn: U1-U9 Original-Farben
|
|
||||||
- S-Bahn: Grün + Ringbahn Orange
|
|
||||||
- Tram: Metro-Tram Rot + Tram Gelb
|
|
||||||
- Bus: Gelb + Metro-Bus Rot
|
|
||||||
- **Linienbezeichnung unter Icon:** Mit echter Farbe
|
|
||||||
- **Touch-optimiert:** Keine Zoom-Buttons auf Mobile
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Farbschema für alle Verkehrsmittel aktualisiert
|
|
||||||
- Bessere visuelle Unterscheidung
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [18.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Linien-basierte Filterung:** U-Bahn, S-Bahn, Tram, Bus separat
|
|
||||||
- **Präzise Station-Line Mappings:** Custom extrahierte Daten für 1000+ Stationen
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Verbesserte Filter-Funktionalität
|
|
||||||
- Genauere Linien-Zuordnungen
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [17.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Live-Update Intervall:** 30 Sekunden Auto-Refresh
|
|
||||||
- **Manueller Refresh-Button:** In Live-Map View
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Optimierte Update-Strategie
|
|
||||||
- Bessere Performance bei Live-Updates
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [16.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Live-Map Feature:** Echtzeit-Fahrzeugverfolgung
|
|
||||||
- Dark-Mode Karte (CartoDB)
|
|
||||||
- Filter nach Fahrzeugtyp
|
|
||||||
- Live-Positions-Updates
|
|
||||||
- **3-Tab Navigation:** Abfahrten | Route | Live-Map
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Navigation erweitert um Live-Map Tab
|
|
||||||
- UI angepasst für 3 Views
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [15.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Detaillierte Fußwege:** Distanz + Gehzeit für alle Walking-Legs
|
|
||||||
- **Robuste Stationserkennung:** Funktioniert auch bei unvollständigen Namen
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Verbesserte Journey-Details
|
|
||||||
- Klarere Fußweg-Darstellung
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [14.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Garantierte 5 Min Umstiegszeit:** Alle Routen mit mindestens 5 Min Transfer
|
|
||||||
- **Intelligente Route-Berechnung:** API-Parameter optimiert
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Realistischere Routenplanung
|
|
||||||
- Weniger verpasste Anschlüsse
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [13.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Routenplaner-View:** Neue Tab für Journey-Planning
|
|
||||||
- **Start/Ziel-Suche:** Mit GPS-Unterstützung
|
|
||||||
- **Alternative Routen:** Mehrere Optionen anzeigen
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- 2-Tab Navigation: Abfahrten | Route
|
|
||||||
- Optimierte Layout-Struktur
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [12.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Auto-Refresh Toggle:** An/Aus Schalter im Header
|
|
||||||
- **Smart Value Update:** Nur Values ändern, kein Re-Render
|
|
||||||
|
|
||||||
### 🎯 Changed
|
|
||||||
- Performantere Refresh-Strategie
|
|
||||||
- Weniger DOM-Manipulation
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [11.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **30s Auto-Refresh:** Automatische Aktualisierung alle 30 Sekunden
|
|
||||||
- **Countdown-Anzeige:** "Auto-Refresh in: 28s"
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Immer aktuelle Abfahrten ohne manuellen Refresh
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [10.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Pull-to-Refresh:** Touch-basiert auf Mobile
|
|
||||||
- **Haptic Feedback:** Vibration bei Aktionen (navigator.vibrate)
|
|
||||||
- **Loading-Spinner:** Während Refresh
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Native App-ähnliches Verhalten
|
|
||||||
- Bessere Mobile-UX
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [9.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Detaillierte Trip-Modal:** Per Tap auf Abfahrt
|
|
||||||
- **Alle Zwischenstopps:** Mit Ankunfts-/Abfahrtszeiten
|
|
||||||
- **Swipe-to-Close:** Auf Mobile
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Mehr Informationen pro Trip
|
|
||||||
- Bessere Detail-Ansicht
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [8.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Autocomplete-Suche:** Live-Vorschläge während Eingabe
|
|
||||||
- **Keyboard-Navigation:** ↑↓ + Enter
|
|
||||||
- **Touch-optimiert:** Große Tap-Targets
|
|
||||||
|
|
||||||
### 🎯 Changed
|
|
||||||
- Schnellere Stations-Suche
|
|
||||||
- Bessere UX
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [7.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✅ Added
|
|
||||||
- **Offline-Modus:** Gespeicherte Abfahrten anzeigen
|
|
||||||
- **Offline-Indikator:** "📵 Offline-Modus" Banner
|
|
||||||
- **localStorage Caching:** Letzte Abfahrten speichern
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- App funktioniert auch ohne Internet
|
|
||||||
- Cached Daten als Fallback
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [6.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Service Worker:** PWA-Funktionalität
|
|
||||||
- **Offline-Caching:** Statische Assets cached
|
|
||||||
- **Install-Prompt:** "Als App installieren"
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- App ist jetzt installierbar
|
|
||||||
- Funktioniert offline
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [5.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **GPS-Standort:** Automatische Station finden
|
|
||||||
- **"Standort verwenden" Button:** Mit Loading-State
|
|
||||||
- **Fehlerbehandlung:** Wenn GPS fehlschlägt
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Schnellerer Zugriff auf nahegelegene Stationen
|
|
||||||
- Weniger manuelle Suche nötig
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [4.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Kategorie-Filter:** U-Bahn, S-Bahn, Tram, Bus, Fähre
|
|
||||||
- **Default: Alle außer Bus/Fähre:** Weniger "noise"
|
|
||||||
- **Toggle-Buttons:** An/Aus für jede Kategorie
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Übersichtlichere Abfahrten-Liste
|
|
||||||
- Fokus auf wichtige Linien
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [3.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Verspätungen:** Rot markiert mit Delay-Info
|
|
||||||
- **Ausfälle:** Durchgestrichen mit "Fällt aus"
|
|
||||||
- **Gleis/Steig:** Bei verfügbar angezeigt
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Mehr Informationen pro Abfahrt
|
|
||||||
- Bessere visuelle Unterscheidung
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [2.0] - 2025-12-31
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Live-Abfahrten:** Echtzeit-Daten von VBB API
|
|
||||||
- **Relativer Countdown:** "in 3 Min" statt absoluter Zeit
|
|
||||||
- **Verkehrsmittel-Icons:** 🚇🚊🚋🚌⛴️
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Funktionale Abfahrtsanzeige
|
|
||||||
- Echte Daten statt Mockups
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [1.0] - 2025-12-30
|
|
||||||
|
|
||||||
### ✨ Added
|
|
||||||
- **Initial Release**
|
|
||||||
- **Basic HTML/CSS/JS Structure**
|
|
||||||
- **BVG-Styling:** DotMatrix Font + Gelb/Schwarz
|
|
||||||
- **Responsive Design:** Mobile-First
|
|
||||||
|
|
||||||
### 🎨 Changed
|
|
||||||
- Basis-Framework erstellt
|
|
||||||
- Design-System etabliert
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Legende
|
|
||||||
|
|
||||||
- ✨ **Added:** Neue Features
|
|
||||||
- 🎨 **Changed:** Änderungen an bestehenden Features
|
|
||||||
- 🐛 **Fixed:** Bug-Fixes
|
|
||||||
- 🎯 **Improved:** Performance/UX-Verbesserungen
|
|
||||||
- ✅ **Completed:** Fertiggestellte Features
|
|
||||||
- ⚠️ **Deprecated:** Veraltete Features
|
|
||||||
- 🗑️ **Removed:** Entfernte Features
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
Wenn du einen Bug findest oder ein Feature vorschlagen möchtest, öffne bitte ein [GitHub Issue](https://github.com/Serverlele30/VBB-Status-Web-App/issues).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Made with ❤️ for Berlin & Brandenburg
|
|
||||||
+469
@@ -0,0 +1,469 @@
|
|||||||
|
# 🤝 Contributing Guide
|
||||||
|
|
||||||
|
Danke, dass du zu VBB Netz Status beitragen möchtest! Diese Anleitung hilft dir, loszulegen.
|
||||||
|
|
||||||
|
## 📋 Inhaltsverzeichnis
|
||||||
|
|
||||||
|
- [Code of Conduct](#code-of-conduct)
|
||||||
|
- [Wie kann ich beitragen?](#wie-kann-ich-beitragen)
|
||||||
|
- [Entwicklungsumgebung](#entwicklungsumgebung)
|
||||||
|
- [Coding Standards](#coding-standards)
|
||||||
|
- [Pull Request Prozess](#pull-request-prozess)
|
||||||
|
- [Bug Reports](#bug-reports)
|
||||||
|
- [Feature Requests](#feature-requests)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🤝 Code of Conduct
|
||||||
|
|
||||||
|
### Unsere Versprechen
|
||||||
|
|
||||||
|
- Respektvoller Umgang mit allen Contributors
|
||||||
|
- Konstruktive, freundliche Diskussionen
|
||||||
|
- Fokus auf das Beste für das Projekt und die Community
|
||||||
|
- Akzeptanz von konstruktiver Kritik
|
||||||
|
|
||||||
|
### Unerwünschtes Verhalten
|
||||||
|
|
||||||
|
- Beleidigungen oder persönliche Angriffe
|
||||||
|
- Trolling oder provozierende Kommentare
|
||||||
|
- Veröffentlichung privater Informationen
|
||||||
|
- Unprofessionelles Verhalten
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 Wie kann ich beitragen?
|
||||||
|
|
||||||
|
### 1. Code Contributions
|
||||||
|
|
||||||
|
- **Bugfixes**: Behebe bekannte Bugs aus Issues
|
||||||
|
- **Features**: Implementiere neue Features (nach Diskussion)
|
||||||
|
- **Optimierungen**: Verbessere Performance oder Code-Qualität
|
||||||
|
- **Tests**: Füge Tests hinzu (falls vorhanden)
|
||||||
|
|
||||||
|
### 2. Dokumentation
|
||||||
|
|
||||||
|
- **README verbessern**: Ergänze fehlende Informationen
|
||||||
|
- **Code-Kommentare**: Dokumentiere komplexe Funktionen
|
||||||
|
- **Tutorials**: Erstelle Anleitungen für Nutzer
|
||||||
|
- **Übersetzungen**: Hilf bei mehrsprachiger Unterstützung
|
||||||
|
|
||||||
|
### 3. Design
|
||||||
|
|
||||||
|
- **UI/UX Verbesserungen**: Optimiere Benutzeroberfläche
|
||||||
|
- **Icons & Assets**: Erstelle/verbessere Icons
|
||||||
|
- **Responsive Design**: Verbessere Mobile/Desktop Layouts
|
||||||
|
- **Accessibility**: Erhöhe Barrierefreiheit
|
||||||
|
|
||||||
|
### 4. Testing
|
||||||
|
|
||||||
|
- **Bug Testing**: Teste auf verschiedenen Geräten
|
||||||
|
- **Browser Compatibility**: Prüfe verschiedene Browser
|
||||||
|
- **Performance Testing**: Messe Ladezeiten & Optimierungen
|
||||||
|
- **User Feedback**: Sammle Rückmeldungen von Nutzern
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Entwicklungsumgebung
|
||||||
|
|
||||||
|
### Setup
|
||||||
|
|
||||||
|
1. **Repository forken**
|
||||||
|
```bash
|
||||||
|
# Auf GitHub: Fork-Button klicken
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Dein Fork klonen**
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/DEIN_USERNAME/VBB-Status-Web-App.git
|
||||||
|
cd VBB-Status-Web-App
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Upstream Repository hinzufügen**
|
||||||
|
```bash
|
||||||
|
git remote add upstream https://github.com/Serverlele30/VBB-Status-Web-App.git
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Dependencies installieren**
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
5. **Development Server starten**
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
### Entwicklungs-Workflow
|
||||||
|
|
||||||
|
1. **Neuen Branch erstellen**
|
||||||
|
```bash
|
||||||
|
git checkout -b feature/deine-feature-beschreibung
|
||||||
|
# oder
|
||||||
|
git checkout -b fix/bug-beschreibung
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Änderungen vornehmen**
|
||||||
|
- Editiere `index.html`, `styles.css`, `script.js`
|
||||||
|
- Teste lokal: `https://localhost:3000`
|
||||||
|
|
||||||
|
3. **Regelmäßig committen**
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "feat: Kurze Beschreibung der Änderung"
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Mit Upstream synchronisieren**
|
||||||
|
```bash
|
||||||
|
git fetch upstream
|
||||||
|
git rebase upstream/main
|
||||||
|
```
|
||||||
|
|
||||||
|
5. **Push zu deinem Fork**
|
||||||
|
```bash
|
||||||
|
git push origin feature/deine-feature-beschreibung
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Coding Standards
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- ✅ Gut: Saubere Struktur, semantisches HTML -->
|
||||||
|
<section class="departure-list" aria-label="Abfahrten">
|
||||||
|
<article class="departure-item">
|
||||||
|
<h3>Alexanderplatz</h3>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ❌ Schlecht: Keine Semantik, unleserlich -->
|
||||||
|
<div class="dl"><div class="di"><div>Alexanderplatz</div></div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* ✅ Gut: BEM-ähnliche Konvention, kommentiert */
|
||||||
|
/* Departure Item Container */
|
||||||
|
.departure-item {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.departure-item__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ❌ Schlecht: Unklar, keine Kommentare */
|
||||||
|
.di {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### JavaScript
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// ✅ Gut: Beschreibende Namen, Kommentare, Error Handling
|
||||||
|
async function loadDepartures(stationId) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/stops/${stationId}/departures`);
|
||||||
|
if (!response.ok) throw new Error('API Error');
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data.departures;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load departures:', error);
|
||||||
|
showErrorMessage('Abfahrten konnten nicht geladen werden');
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ❌ Schlecht: Kryptische Namen, kein Error Handling
|
||||||
|
async function ld(s) {
|
||||||
|
const r = await fetch(`${API_BASE}/stops/${s}/departures`);
|
||||||
|
return await r.json();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Commit Messages
|
||||||
|
|
||||||
|
Folge [Conventional Commits](https://www.conventionalcommits.org/):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Format: <type>(<scope>): <subject>
|
||||||
|
|
||||||
|
# Typen:
|
||||||
|
feat: # Neues Feature
|
||||||
|
fix: # Bugfix
|
||||||
|
docs: # Dokumentation
|
||||||
|
style: # Formatierung (kein Code-Change)
|
||||||
|
refactor: # Code-Refactoring
|
||||||
|
perf: # Performance-Verbesserung
|
||||||
|
test: # Tests hinzufügen
|
||||||
|
chore: # Build, Dependencies
|
||||||
|
|
||||||
|
# Beispiele:
|
||||||
|
git commit -m "feat(live-map): Add vehicle type filter"
|
||||||
|
git commit -m "fix(departures): Handle empty API response"
|
||||||
|
git commit -m "docs(readme): Update installation instructions"
|
||||||
|
git commit -m "style(css): Format departure items"
|
||||||
|
git commit -m "perf(api): Cache API responses for 30s"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔀 Pull Request Prozess
|
||||||
|
|
||||||
|
### 1. Vorbereitung
|
||||||
|
|
||||||
|
- [ ] Code funktioniert lokal
|
||||||
|
- [ ] Keine Console Errors
|
||||||
|
- [ ] Responsive Design getestet
|
||||||
|
- [ ] Code kommentiert
|
||||||
|
- [ ] CHANGELOG.md aktualisiert (bei größeren Changes)
|
||||||
|
|
||||||
|
### 2. Pull Request erstellen
|
||||||
|
|
||||||
|
1. Gehe zu deinem Fork auf GitHub
|
||||||
|
2. Klicke "Pull Request" → "New Pull Request"
|
||||||
|
3. Base: `Serverlele30/VBB-Status-Web-App` → `main`
|
||||||
|
4. Compare: `dein-username/VBB-Status-Web-App` → `dein-branch`
|
||||||
|
|
||||||
|
### 3. PR Beschreibung
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## Beschreibung
|
||||||
|
Kurze Zusammenfassung der Änderungen
|
||||||
|
|
||||||
|
## Typ der Änderung
|
||||||
|
- [ ] Bugfix
|
||||||
|
- [ ] Neues Feature
|
||||||
|
- [ ] Breaking Change
|
||||||
|
- [ ] Dokumentation
|
||||||
|
|
||||||
|
## Wie getestet?
|
||||||
|
- [ ] Chrome Desktop
|
||||||
|
- [ ] Firefox Desktop
|
||||||
|
- [ ] Safari Mobile
|
||||||
|
- [ ] Chrome Mobile
|
||||||
|
|
||||||
|
## Screenshots (falls UI-Änderungen)
|
||||||
|
[Screenshot hier einfügen]
|
||||||
|
|
||||||
|
## Checklist
|
||||||
|
- [ ] Code folgt Style Guide
|
||||||
|
- [ ] Selbst-Review durchgeführt
|
||||||
|
- [ ] Kommentare hinzugefügt
|
||||||
|
- [ ] CHANGELOG.md aktualisiert
|
||||||
|
- [ ] Keine neuen Warnings
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Review Prozess
|
||||||
|
|
||||||
|
- Maintainer werden deinen PR prüfen
|
||||||
|
- Möglicherweise werden Änderungen angefragt
|
||||||
|
- Nach Approval: Merge in main branch
|
||||||
|
- Branch kann gelöscht werden
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🐛 Bug Reports
|
||||||
|
|
||||||
|
### Gutes Bug Report Template:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
**Beschreibung des Bugs**
|
||||||
|
Kurze, klare Beschreibung was passiert.
|
||||||
|
|
||||||
|
**Reproduktion**
|
||||||
|
Schritte um den Bug zu reproduzieren:
|
||||||
|
1. Gehe zu '...'
|
||||||
|
2. Klicke auf '...'
|
||||||
|
3. Scrolle nach '...'
|
||||||
|
4. Sieh Fehler
|
||||||
|
|
||||||
|
**Erwartetes Verhalten**
|
||||||
|
Was sollte stattdessen passieren?
|
||||||
|
|
||||||
|
**Screenshots**
|
||||||
|
Falls zutreffend, füge Screenshots hinzu.
|
||||||
|
|
||||||
|
**Umgebung:**
|
||||||
|
- Browser: [z.B. Chrome 120, Firefox 121]
|
||||||
|
- OS: [z.B. Windows 11, macOS 14, iOS 17]
|
||||||
|
- App Version: [z.B. v30.0.0]
|
||||||
|
- Mobile/Desktop: [z.B. iPhone 15 Pro]
|
||||||
|
|
||||||
|
**Zusätzlicher Kontext**
|
||||||
|
Console Errors, Network Logs, etc.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Bug Issue erstellen:
|
||||||
|
|
||||||
|
1. Gehe zu: https://github.com/Serverlele30/VBB-Status-Web-App/issues
|
||||||
|
2. Klicke "New Issue"
|
||||||
|
3. Label: `bug`
|
||||||
|
4. Fülle Template aus
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 Feature Requests
|
||||||
|
|
||||||
|
### Gutes Feature Request Template:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
**Problem/Motivation**
|
||||||
|
Welches Problem würde dieses Feature lösen?
|
||||||
|
Beispiel: "Es ist schwierig, Favoriten-Stationen zu speichern..."
|
||||||
|
|
||||||
|
**Vorgeschlagene Lösung**
|
||||||
|
Wie könnte das Feature implementiert werden?
|
||||||
|
Beispiel: "Ein 'Favoriten'-Button neben jeder Station..."
|
||||||
|
|
||||||
|
**Alternativen**
|
||||||
|
Welche anderen Lösungen hast du in Betracht gezogen?
|
||||||
|
|
||||||
|
**Mockups/Wireframes**
|
||||||
|
Falls vorhanden, füge Design-Ideen hinzu.
|
||||||
|
|
||||||
|
**Zusätzlicher Kontext**
|
||||||
|
Andere Apps die ähnliche Features haben, etc.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Feature Request erstellen:
|
||||||
|
|
||||||
|
1. Gehe zu Issues
|
||||||
|
2. Label: `enhancement`
|
||||||
|
3. Diskutiere Feature mit Maintainern
|
||||||
|
4. Nach Approval: Implementierung starten
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Design Guidelines
|
||||||
|
|
||||||
|
### Farbschema
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Primärfarben */
|
||||||
|
--yellow: #FFED00; /* BVG Gelb */
|
||||||
|
--black: #000000; /* Hintergrund */
|
||||||
|
--white: #FFFFFF; /* Text */
|
||||||
|
|
||||||
|
/* Linienfarben (BVG Standard) */
|
||||||
|
--u1: #55A823; /* U1 Grün */
|
||||||
|
--u2: #C00000; /* U2 Rot */
|
||||||
|
--u3: #028D4C; /* U3 Grün */
|
||||||
|
/* ... siehe styles.css für alle Linien */
|
||||||
|
|
||||||
|
/* Graustufen */
|
||||||
|
--gray-dark: #1a1a1a;
|
||||||
|
--gray-medium: #333333;
|
||||||
|
--gray-light: #666666;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Typografie
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Hauptschrift: DotMatrix (Retro BVG-Look) */
|
||||||
|
font-family: 'DotMatrix', 'Courier New', monospace;
|
||||||
|
|
||||||
|
/* Größen */
|
||||||
|
--text-xs: 10px;
|
||||||
|
--text-sm: 12px;
|
||||||
|
--text-base: 14px;
|
||||||
|
--text-lg: 16px;
|
||||||
|
--text-xl: 20px;
|
||||||
|
--text-2xl: 24px;
|
||||||
|
--text-3xl: 32px;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Spacing
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 4px Base Unit */
|
||||||
|
--spacing-1: 4px;
|
||||||
|
--spacing-2: 8px;
|
||||||
|
--spacing-3: 12px;
|
||||||
|
--spacing-4: 16px;
|
||||||
|
--spacing-5: 20px;
|
||||||
|
--spacing-6: 24px;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧪 Testing Checklist
|
||||||
|
|
||||||
|
Vor Pull Request:
|
||||||
|
|
||||||
|
### Browser Compatibility
|
||||||
|
- [ ] Chrome (neueste Version)
|
||||||
|
- [ ] Firefox (neueste Version)
|
||||||
|
- [ ] Safari (neueste Version)
|
||||||
|
- [ ] Edge (neueste Version)
|
||||||
|
|
||||||
|
### Geräte
|
||||||
|
- [ ] Desktop (1920x1080+)
|
||||||
|
- [ ] Laptop (1366x768)
|
||||||
|
- [ ] Tablet (768x1024)
|
||||||
|
- [ ] Mobile (375x667 - iPhone SE)
|
||||||
|
- [ ] Mobile (414x896 - iPhone 11)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
- [ ] Abfahrten laden funktioniert
|
||||||
|
- [ ] Routenplanung funktioniert
|
||||||
|
- [ ] Live-Map zeigt Fahrzeuge
|
||||||
|
- [ ] Service Worker cached korrekt
|
||||||
|
- [ ] PWA Installation funktioniert
|
||||||
|
- [ ] Offline-Modus funktioniert
|
||||||
|
|
||||||
|
### Performance
|
||||||
|
- [ ] Ladezeit < 3s
|
||||||
|
- [ ] Keine Memory Leaks
|
||||||
|
- [ ] Smooth Scrolling
|
||||||
|
- [ ] Keine Layout Shifts
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📚 Ressourcen
|
||||||
|
|
||||||
|
### APIs
|
||||||
|
- **VBB API**: https://v6.vbb.transport.rest/api.html
|
||||||
|
- **BVG Farben**: Siehe `getBVGLineColor()` in script.js
|
||||||
|
|
||||||
|
### Libraries
|
||||||
|
- **Leaflet.js**: https://leafletjs.com/
|
||||||
|
- **Leaflet Docs**: https://leafletjs.com/reference.html
|
||||||
|
|
||||||
|
### Tools
|
||||||
|
- **Chrome DevTools**: Browser Console, Network Tab
|
||||||
|
- **Lighthouse**: Performance Audit
|
||||||
|
- **Can I Use**: Browser Compatibility Check
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ❓ Fragen?
|
||||||
|
|
||||||
|
Bei Fragen:
|
||||||
|
|
||||||
|
1. **GitHub Discussions**: (falls aktiviert)
|
||||||
|
2. **Issues**: Stelle Fragen als Issue mit Label `question`
|
||||||
|
3. **README/Docs**: Prüfe vorhandene Dokumentation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎉 Danke!
|
||||||
|
|
||||||
|
Vielen Dank für dein Interesse an VBB Netz Status! Jeder Beitrag, egal wie klein, hilft das Projekt zu verbessern.
|
||||||
|
|
||||||
|
**Happy Coding! 🚇🚌🚊**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Maintainer:**
|
||||||
|
- Aaron K. ([@Serverlele30](https://github.com/Serverlele30))
|
||||||
|
- Claude (Anthropic)
|
||||||
|
|
||||||
|
**Lizenz:** MIT
|
||||||
+310
@@ -0,0 +1,310 @@
|
|||||||
|
# 🚀 Installation & Setup
|
||||||
|
|
||||||
|
Diese Anleitung führt dich Schritt für Schritt durch die Installation der VBB Netz Status App.
|
||||||
|
|
||||||
|
## 📋 Voraussetzungen
|
||||||
|
|
||||||
|
### Erforderlich:
|
||||||
|
- **Node.js** v16.0.0 oder höher
|
||||||
|
- **npm** v8.0.0 oder höher
|
||||||
|
- **OpenSSL** (für HTTPS-Zertifikate)
|
||||||
|
|
||||||
|
### Optional:
|
||||||
|
- **Git** (zum Klonen des Repositories)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Installation
|
||||||
|
|
||||||
|
### Option 1: Mit Git
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Repository klonen
|
||||||
|
git clone https://github.com/Serverlele30/VBB-Status-Web-App.git
|
||||||
|
|
||||||
|
# In Projektverzeichnis wechseln
|
||||||
|
cd VBB-Status-Web-App
|
||||||
|
|
||||||
|
# Abhängigkeiten installieren
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Option 2: Download als ZIP
|
||||||
|
|
||||||
|
1. Repository als ZIP herunterladen
|
||||||
|
2. ZIP entpacken
|
||||||
|
3. Terminal/Kommandozeile öffnen
|
||||||
|
4. In Projektverzeichnis navigieren
|
||||||
|
5. Abhängigkeiten installieren:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ▶️ Server starten
|
||||||
|
|
||||||
|
### Entwicklungsserver (HTTPS)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
# oder
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Der Server startet automatisch auf `https://localhost:3000`
|
||||||
|
|
||||||
|
### Beim ersten Start:
|
||||||
|
|
||||||
|
1. **SSL-Zertifikat wird generiert**
|
||||||
|
- Der Server erstellt automatisch ein selbstsigniertes Zertifikat
|
||||||
|
- Gespeichert in: `./certs/`
|
||||||
|
|
||||||
|
2. **Browser-Warnung akzeptieren**
|
||||||
|
- Chrome/Edge: "Erweitert" → "Weiter zu localhost"
|
||||||
|
- Firefox: "Erweitert" → "Ausnahme hinzufügen"
|
||||||
|
- Safari: "Details" → "Diese Website besuchen"
|
||||||
|
|
||||||
|
3. **App öffnet sich**
|
||||||
|
- URL: `https://localhost:3000`
|
||||||
|
- Die App lädt automatisch
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📱 Mobile Testing
|
||||||
|
|
||||||
|
### Im lokalen Netzwerk testen:
|
||||||
|
|
||||||
|
1. **IP-Adresse finden:**
|
||||||
|
|
||||||
|
**Windows:**
|
||||||
|
```bash
|
||||||
|
ipconfig
|
||||||
|
# Suche nach "IPv4-Adresse"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Mac/Linux:**
|
||||||
|
```bash
|
||||||
|
ifconfig
|
||||||
|
# oder
|
||||||
|
ip addr show
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Auf Mobile-Gerät öffnen:**
|
||||||
|
```
|
||||||
|
https://DEINE_IP:3000
|
||||||
|
```
|
||||||
|
Beispiel: `https://192.168.1.100:3000`
|
||||||
|
|
||||||
|
3. **Zertifikatswarnung akzeptieren**
|
||||||
|
- Auf dem Smartphone die Warnung bestätigen
|
||||||
|
- "Trotzdem fortfahren" wählen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏗️ Projektstruktur
|
||||||
|
|
||||||
|
```
|
||||||
|
vbb-netz-status/
|
||||||
|
├── index.html # HTML-Struktur
|
||||||
|
├── styles.css # Alle Styles (Dark Mode, Responsive)
|
||||||
|
├── script.js # App-Logik (Abfahrten, Routen, Live-Map)
|
||||||
|
├── server.js # HTTPS-Development-Server
|
||||||
|
├── service-worker.js # PWA Service Worker (Offline)
|
||||||
|
├── manifest.json # PWA Manifest (Installation)
|
||||||
|
├── package.json # Node.js Konfiguration
|
||||||
|
├── LICENSE # MIT Lizenz
|
||||||
|
├── README.md # Projekt-Dokumentation
|
||||||
|
├── CHANGELOG.md # Versions-Historie
|
||||||
|
├── INSTALLATION.md # Diese Datei
|
||||||
|
├── .gitignore # Git-Ignore-Liste
|
||||||
|
├── certs/ # SSL-Zertifikate (auto-generiert)
|
||||||
|
│ ├── cert.pem
|
||||||
|
│ └── key.pem
|
||||||
|
└── images/ # App-Assets (Icons, Favicons)
|
||||||
|
└── favicon.png
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔐 HTTPS & SSL-Zertifikate
|
||||||
|
|
||||||
|
### Warum HTTPS?
|
||||||
|
|
||||||
|
- **PWA-Anforderung**: Service Worker benötigt HTTPS
|
||||||
|
- **Geolocation API**: Browser verlangen sichere Verbindung
|
||||||
|
- **Best Practice**: Moderne Web-Standards
|
||||||
|
|
||||||
|
### Zertifikate neu generieren:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Alte Zertifikate löschen
|
||||||
|
rm -rf certs/
|
||||||
|
|
||||||
|
# Server neu starten (generiert automatisch neue)
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
### Manuell generieren (falls OpenSSL verfügbar):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mkdir -p certs
|
||||||
|
openssl req -x509 -newkey rsa:4096 -keyout certs/key.pem -out certs/cert.pem -days 365 -nodes -subj "/CN=localhost"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
|
### Problem: "npm: command not found"
|
||||||
|
|
||||||
|
**Lösung:** Node.js installieren
|
||||||
|
- Download: https://nodejs.org/
|
||||||
|
- Empfohlen: LTS-Version
|
||||||
|
|
||||||
|
### Problem: "Port 3000 already in use"
|
||||||
|
|
||||||
|
**Lösung 1:** Anderen Prozess beenden
|
||||||
|
```bash
|
||||||
|
# Windows
|
||||||
|
netstat -ano | findstr :3000
|
||||||
|
taskkill /PID <PID> /F
|
||||||
|
|
||||||
|
# Mac/Linux
|
||||||
|
lsof -ti:3000 | xargs kill -9
|
||||||
|
```
|
||||||
|
|
||||||
|
**Lösung 2:** Port in `server.js` ändern
|
||||||
|
```javascript
|
||||||
|
const PORT = 3001; // Statt 3000
|
||||||
|
```
|
||||||
|
|
||||||
|
### Problem: "OpenSSL not found"
|
||||||
|
|
||||||
|
**Lösung (Windows):**
|
||||||
|
1. Git Bash verwenden (enthält OpenSSL)
|
||||||
|
2. Oder OpenSSL separat installieren: https://slproweb.com/products/Win32OpenSSL.html
|
||||||
|
|
||||||
|
**Lösung (Mac):**
|
||||||
|
```bash
|
||||||
|
brew install openssl
|
||||||
|
```
|
||||||
|
|
||||||
|
**Lösung (Linux):**
|
||||||
|
```bash
|
||||||
|
sudo apt-get install openssl
|
||||||
|
```
|
||||||
|
|
||||||
|
### Problem: "Cannot GET /"
|
||||||
|
|
||||||
|
**Lösung:** Stelle sicher, dass alle Dateien vorhanden sind:
|
||||||
|
```bash
|
||||||
|
ls -la
|
||||||
|
# Sollte index.html, styles.css, script.js enthalten
|
||||||
|
```
|
||||||
|
|
||||||
|
### Problem: Service Worker funktioniert nicht
|
||||||
|
|
||||||
|
**Lösung:**
|
||||||
|
1. Browser-Cache leeren (Ctrl+Shift+Del)
|
||||||
|
2. Service Worker deregistrieren:
|
||||||
|
- Chrome DevTools → Application → Service Workers → Unregister
|
||||||
|
3. Seite neu laden (Ctrl+F5)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Anpassungen
|
||||||
|
|
||||||
|
### Port ändern:
|
||||||
|
|
||||||
|
In `server.js`:
|
||||||
|
```javascript
|
||||||
|
const PORT = 3001; // Dein gewünschter Port
|
||||||
|
```
|
||||||
|
|
||||||
|
### Cache-Version ändern:
|
||||||
|
|
||||||
|
In `service-worker.js`:
|
||||||
|
```javascript
|
||||||
|
const CACHE_NAME = 'vbb-status-v31'; // Neue Version
|
||||||
|
```
|
||||||
|
|
||||||
|
### Farben anpassen:
|
||||||
|
|
||||||
|
In `styles.css`:
|
||||||
|
```css
|
||||||
|
/* Hauptfarbe ändern */
|
||||||
|
--primary-color: #FFED00; /* BVG Gelb */
|
||||||
|
--background-color: #000; /* Schwarz */
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 Dependencies
|
||||||
|
|
||||||
|
### Produktions-Dependencies:
|
||||||
|
- **mime-types** (^2.1.35): MIME-Type Detection für Server
|
||||||
|
|
||||||
|
### Keine Dev-Dependencies:
|
||||||
|
- Projekt läuft ohne Build-Prozess
|
||||||
|
- Keine Transpiler oder Bundler nötig
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Deployment
|
||||||
|
|
||||||
|
### Für Produktion:
|
||||||
|
|
||||||
|
1. **Statisches Hosting** (Empfohlen):
|
||||||
|
- GitHub Pages
|
||||||
|
- Netlify
|
||||||
|
- Vercel
|
||||||
|
- Cloudflare Pages
|
||||||
|
|
||||||
|
2. **Node.js Server** (Optional):
|
||||||
|
- Heroku
|
||||||
|
- DigitalOcean
|
||||||
|
- AWS
|
||||||
|
- Google Cloud
|
||||||
|
|
||||||
|
### GitHub Pages Deployment:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Für GitHub Pages
|
||||||
|
git add .
|
||||||
|
git commit -m "Deploy to GitHub Pages"
|
||||||
|
git push origin main
|
||||||
|
|
||||||
|
# Settings → Pages → Source: main branch
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 Support
|
||||||
|
|
||||||
|
Bei Problemen oder Fragen:
|
||||||
|
|
||||||
|
1. **GitHub Issues**: https://github.com/Serverlele30/VBB-Status-Web-App/issues
|
||||||
|
2. **README konsultieren**: Enthält zusätzliche Infos
|
||||||
|
3. **CHANGELOG prüfen**: Bekannte Probleme und Fixes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Checkliste nach Installation
|
||||||
|
|
||||||
|
- [ ] Node.js installiert (v16+)
|
||||||
|
- [ ] npm installiert (v8+)
|
||||||
|
- [ ] Repository geklont/heruntergeladen
|
||||||
|
- [ ] `npm install` ausgeführt
|
||||||
|
- [ ] Server startet ohne Fehler
|
||||||
|
- [ ] `https://localhost:3000` öffnet die App
|
||||||
|
- [ ] Zertifikatswarnung akzeptiert
|
||||||
|
- [ ] Mobile-Testing funktioniert (optional)
|
||||||
|
- [ ] PWA installiert (optional)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**🎉 Viel Erfolg mit der VBB Netz Status App!**
|
||||||
|
|
||||||
|
Entwickelt von Aaron K. & Claude (Anthropic)
|
||||||
|
Lizenz: MIT
|
||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vbb-netz-status",
|
"name": "vbb-netz-status",
|
||||||
"version": "29.0.0",
|
"version": "30.0.0",
|
||||||
"description": "Live-Nahverkehr für Berlin & Brandenburg - Progressive Web App (PWA) für Echtzeit-Abfahrten, Routenplanung und Live-Fahrzeugverfolgung im VBB-Gebiet",
|
"description": "Live-Nahverkehr für Berlin & Brandenburg - Progressive Web App (PWA) für Echtzeit-Abfahrten, Routenplanung und Live-Fahrzeugverfolgung im VBB-Gebiet",
|
||||||
"main": "server.js",
|
"main": "server.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
+3
-1
@@ -1,7 +1,9 @@
|
|||||||
const CACHE_NAME = 'vbb-status-v29';
|
const CACHE_NAME = 'vbb-status-v30';
|
||||||
const urlsToCache = [
|
const urlsToCache = [
|
||||||
'/',
|
'/',
|
||||||
'/index.html',
|
'/index.html',
|
||||||
|
'/styles.css',
|
||||||
|
'/script.js',
|
||||||
'/manifest.json',
|
'/manifest.json',
|
||||||
'/DotMatrix.ttf',
|
'/DotMatrix.ttf',
|
||||||
'/images/favicon.png'
|
'/images/favicon.png'
|
||||||
|
|||||||
Reference in new issue
Block a user