Files
VBB-Status-Web-App/index.html
T
2025-12-30 19:28:19 +01:00

1557 lines
53 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>VBB Netz Status</title>
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/favicon.png">
<style>
@font-face {
font-family: 'DotMatrix';
src: url('DotMatrix.ttf') format('truetype');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'DotMatrix', 'Courier New', monospace;
background-color: #000;
color: #FFED00;
min-height: 100vh;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
.container {
max-width: 100%;
padding: 10px;
}
.header {
text-align: center;
padding: 20px 10px 15px;
background-color: #000;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 2px solid #FFED00;
}
.header h1 {
font-size: 26px;
letter-spacing: 2px;
margin-bottom: 6px;
}
.header .subtitle {
font-size: 11px;
opacity: 0.7;
letter-spacing: 1px;
margin-bottom: 6px;
}
.header .author {
font-size: 9px;
opacity: 0.5;
font-style: italic;
}
.controls {
background-color: #0a0a0a;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
border: 1px solid #222;
}
.search-row {
display: flex;
gap: 10px;
margin-bottom: 15px;
align-items: stretch;
}
.search-container {
position: relative;
flex: 1;
}
.search-input {
width: 100%;
padding: 12px 45px 12px 12px;
font-family: 'DotMatrix', 'Courier New', monospace;
font-size: 16px;
background-color: #000 !important;
color: #FFED00;
border: 2px solid #FFED00;
border-radius: 6px;
outline: none;
transition: border-color 0.2s;
height: 48px;
box-sizing: border-box;
}
.search-input:focus {
border-color: #fff;
}
.search-input::placeholder {
color: rgba(255, 237, 0, 0.5);
}
/* Webkit Auto-fill Override */
.search-input:-webkit-autofill,
.search-input:-webkit-autofill:hover,
.search-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #000 inset !important;
-webkit-text-fill-color: #FFED00 !important;
}
.clear-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #FFED00;
font-size: 24px;
cursor: pointer;
padding: 4px 6px;
display: none;
line-height: 1;
opacity: 0.7;
transition: opacity 0.2s;
}
.clear-btn:hover,
.clear-btn:active {
opacity: 1;
}
.search-input:not(:placeholder-shown) ~ .clear-btn {
display: block;
}
.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #0a0a0a;
border: 2px solid #FFED00;
border-top: none;
border-radius: 0 0 6px 6px;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.suggestions.active {
display: block;
}
.suggestion-item {
padding: 12px;
cursor: pointer;
border-bottom: 1px solid #222;
transition: background-color 0.15s;
}
.suggestion-item:last-child {
border-bottom: none;
}
.suggestion-item:hover,
.suggestion-item:active {
background-color: #FFED00;
color: #000;
}
.suggestion-name {
font-size: 14px;
font-weight: bold;
}
.suggestion-products {
font-size: 11px;
opacity: 0.7;
margin-top: 4px;
}
.button-group {
display: flex;
gap: 10px;
margin-top: 0;
}
.btn {
flex: 1;
padding: 12px;
font-family: 'DotMatrix', 'Courier New', monospace;
font-size: 14px;
background-color: #FFED00;
color: #000;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.15s;
}
.btn:active {
background-color: #FFD700;
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
background-color: #666;
}
.departures-container {
margin-top: 20px;
}
.station-info {
background-color: #0a0a0a;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
border-left: 4px solid #FFED00;
}
.station-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 6px;
}
.last-update {
font-size: 11px;
opacity: 0.6;
}
.departure-item {
background-color: #0a0a0a;
padding: 14px;
margin-bottom: 10px;
border-radius: 8px;
border-left: 4px solid #666;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background-color 0.15s;
}
.departure-item:active {
background-color: #111;
}
.departure-info {
flex: 1;
}
.line-badge {
display: inline-block;
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
font-size: 13px;
margin-bottom: 6px;
}
.departure-destination {
font-size: 15px;
margin-bottom: 4px;
}
.departure-platform {
font-size: 11px;
opacity: 0.6;
}
.departure-time {
text-align: right;
font-size: 20px;
font-weight: bold;
min-width: 65px;
}
.departure-delay {
font-size: 11px;
color: #ff5555;
margin-top: 4px;
font-weight: bold;
}
.loading {
text-align: center;
padding: 40px;
font-size: 18px;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.error {
background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
color: #fff;
padding: 18px;
border-radius: 12px;
margin: 15px 0;
text-align: center;
box-shadow: 0 4px 20px rgba(255, 68, 68, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.empty-state {
text-align: center;
padding: 50px 20px;
opacity: 0.7;
}
.empty-state-icon {
font-size: 56px;
margin-bottom: 20px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.offline-indicator {
background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
color: #fff;
padding: 12px;
text-align: center;
font-size: 12px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
display: none;
box-shadow: 0 2px 10px rgba(255, 68, 68, 0.5);
font-weight: bold;
letter-spacing: 0.5px;
}
.offline-indicator.show {
display: block;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
/* Detail Modal */
.detail-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.97);
z-index: 1000;
display: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.detail-modal.active {
display: block;
}
.detail-header {
position: sticky;
top: 0;
background-color: #000;
padding: 15px;
border-bottom: 2px solid #FFED00;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
}
.detail-back-btn {
background: none;
border: 1px solid #FFED00;
color: #FFED00;
font-size: 22px;
cursor: pointer;
padding: 6px 12px;
font-family: 'DotMatrix', 'Courier New', monospace;
border-radius: 6px;
transition: background-color 0.15s;
}
.detail-back-btn:active {
background-color: #FFED00;
color: #000;
}
.detail-title {
flex: 1;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.detail-content {
padding: 15px;
}
.detail-section {
background-color: #0a0a0a;
padding: 15px;
margin-bottom: 12px;
border-radius: 8px;
border-left: 4px solid #FFED00;
}
.detail-section-title {
font-size: 13px;
font-weight: bold;
margin-bottom: 10px;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #222;
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-size: 12px;
opacity: 0.7;
}
.detail-value {
font-size: 12px;
font-weight: bold;
text-align: right;
}
.stop-list {
margin-top: 10px;
}
.stop-item {
padding: 10px;
margin-bottom: 8px;
background-color: #050505;
border-radius: 6px;
border-left: 3px solid #555;
transition: background-color 0.15s;
}
.stop-item.current {
border-left-color: #FFED00;
background-color: #0f0f0a;
}
.stop-name {
font-size: 13px;
font-weight: bold;
margin-bottom: 4px;
}
.stop-time {
font-size: 11px;
opacity: 0.7;
}
.stop-delay {
color: #ff5555;
font-size: 11px;
margin-left: 8px;
font-weight: bold;
}
.remark-item {
background-color: #0a0500;
padding: 10px;
margin-bottom: 8px;
border-radius: 6px;
border-left: 3px solid #ff8800;
}
.remark-type {
font-size: 10px;
opacity: 0.7;
text-transform: uppercase;
margin-bottom: 4px;
color: #ff8800;
font-weight: bold;
}
.remark-text {
font-size: 12px;
line-height: 1.3;
}
.loading-detail {
text-align: center;
padding: 50px 20px;
font-size: 16px;
opacity: 0.7;
}
/* Touch improvements */
.departure-item {
min-height: 70px;
-webkit-tap-highlight-color: rgba(255, 237, 0, 0.1);
}
.suggestion-item {
min-height: 50px;
-webkit-tap-highlight-color: rgba(255, 237, 0, 0.1);
}
/* Better scrolling */
.suggestions {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #FFED00 #1a1a1a;
}
.suggestions::-webkit-scrollbar {
width: 6px;
}
.suggestions::-webkit-scrollbar-track {
background: #1a1a1a;
}
.suggestions::-webkit-scrollbar-thumb {
background-color: #FFED00;
border-radius: 3px;
}
/* Improved button spacing */
.btn {
min-height: 48px;
}
.location-btn-side {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
padding: 0;
font-size: 20px;
background-color: #000;
color: #FFED00;
border: 2px solid #FFED00;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
}
.location-btn-side:active {
background-color: #FFED00;
color: #000;
}
.location-btn-side:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* KEIN Scale/Transform - nur Emoji ändert sich */
.location-btn-side.loading {
/* Button bleibt gleich, nur Emoji wird gewechselt */
}
/* Status badge */
.status-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 10px;
margin-left: 8px;
font-weight: bold;
}
.status-cancelled {
background-color: #cc0000;
color: #fff;
}
.status-ontime {
background-color: #00cc00;
color: #000;
}
@media (min-width: 768px) {
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.detail-modal {
left: 50%;
transform: translateX(-50%);
max-width: 600px;
}
}
/* Pull-to-refresh styles */
.ptr-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
transform: translateY(-100%);
transition: transform 0.3s;
z-index: 99;
}
.ptr-container.pulling {
transform: translateY(0);
}
.ptr-spinner {
width: 30px;
height: 30px;
border: 3px solid #333;
border-top-color: #FFED00;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="offline-indicator" id="offlineIndicator">
📵 Offline-Modus - Zeige gespeicherte Daten
</div>
<div class="ptr-container" id="ptrContainer">
<div class="ptr-spinner"></div>
</div>
<div class="header">
<h1>VBB NETZ STATUS</h1>
<div class="subtitle">ECHTZEIT-ABFAHRTSMONITOR</div>
<div class="author">by Aaron K.</div>
</div>
<div class="container">
<div class="controls">
<div class="search-row">
<div class="search-container">
<input
type="text"
id="stationSearch"
class="search-input"
placeholder="Station suchen..."
autocomplete="off"
>
<button class="clear-btn" id="clearBtn">×</button>
<div class="suggestions" id="suggestions"></div>
</div>
<button class="location-btn-side" id="locationBtn" title="Nächste Station per GPS finden">
📍
</button>
</div>
<div class="button-group">
<button class="btn" id="refreshBtn" disabled>🔄 Aktualisieren</button>
</div>
</div>
<div id="departuresContainer" class="departures-container"></div>
</div>
<!-- Detail Modal -->
<div class="detail-modal" id="detailModal">
<div class="detail-header">
<button class="detail-back-btn" id="detailBackBtn">←</button>
<div class="detail-title" id="detailTitle">Fahrzeug-Details</div>
<div style="width: 34px;"></div>
</div>
<div class="detail-content" id="detailContent">
<div class="loading-detail">⏳ Lade Details...</div>
</div>
</div>
<script>
const API_BASE = 'https://v6.vbb.transport.rest';
let currentStationId = null;
let currentStationName = null;
let searchTimeout = null;
let touchStartY = 0;
let isPulling = false;
let autoRefreshInterval = null;
let apiCallTimestamps = []; // Track API calls for rate limiting
// DOM Elements
const stationSearch = document.getElementById('stationSearch');
const clearBtn = document.getElementById('clearBtn');
const locationBtn = document.getElementById('locationBtn');
const suggestions = document.getElementById('suggestions');
const refreshBtn = document.getElementById('refreshBtn');
const departuresContainer = document.getElementById('departuresContainer');
const offlineIndicator = document.getElementById('offlineIndicator');
const ptrContainer = document.getElementById('ptrContainer');
const detailModal = document.getElementById('detailModal');
const detailBackBtn = document.getElementById('detailBackBtn');
const detailTitle = document.getElementById('detailTitle');
const detailContent = document.getElementById('detailContent');
// Service Worker registrieren
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(reg => console.log('Service Worker registriert'))
.catch(err => console.error('Service Worker Fehler:', err));
}
// Offline-Status überwachen
window.addEventListener('online', () => {
offlineIndicator.classList.remove('show');
});
window.addEventListener('offline', () => {
offlineIndicator.classList.add('show');
});
// Pull-to-refresh
let startY = 0;
let pulling = false;
document.addEventListener('touchstart', (e) => {
if (window.scrollY === 0 && !detailModal.classList.contains('active')) {
startY = e.touches[0].pageY;
pulling = true;
}
});
document.addEventListener('touchmove', (e) => {
if (!pulling) return;
const currentY = e.touches[0].pageY;
const pullDistance = currentY - startY;
if (pullDistance > 0 && pullDistance < 100) {
ptrContainer.style.transform = `translateY(${pullDistance - 60}px)`;
}
});
document.addEventListener('touchend', async (e) => {
if (!pulling) return;
pulling = false;
const currentY = e.changedTouches[0].pageY;
const pullDistance = currentY - startY;
if (pullDistance > 60 && currentStationId) {
ptrContainer.classList.add('pulling');
await loadDepartures();
setTimeout(() => {
ptrContainer.classList.remove('pulling');
ptrContainer.style.transform = '';
}, 300);
} else {
ptrContainer.style.transform = '';
}
});
// Swipe to close detail modal
let modalStartY = 0;
let modalPulling = false;
detailModal.addEventListener('touchstart', (e) => {
if (e.target.closest('.detail-content') && detailModal.scrollTop === 0) {
modalStartY = e.touches[0].pageY;
modalPulling = true;
}
});
detailModal.addEventListener('touchmove', (e) => {
if (!modalPulling) return;
const currentY = e.touches[0].pageY;
const pullDistance = currentY - modalStartY;
if (pullDistance > 0 && pullDistance < 200) {
detailModal.style.transform = `translateY(${pullDistance}px)`;
}
});
detailModal.addEventListener('touchend', (e) => {
if (!modalPulling) return;
modalPulling = false;
const currentY = e.changedTouches[0].pageY;
const pullDistance = currentY - modalStartY;
if (pullDistance > 100) {
closeDetailModal();
} else {
detailModal.style.transform = '';
}
});
// Station suchen mit Autocomplete
stationSearch.addEventListener('input', (e) => {
const query = e.target.value.trim();
clearTimeout(searchTimeout);
if (query.length < 2) {
suggestions.classList.remove('active');
suggestions.innerHTML = '';
return;
}
// Stop auto-refresh during search
stopAutoRefresh();
searchTimeout = setTimeout(async () => {
if (!canMakeApiCall()) {
console.warn('Rate limit reached, skipping search');
return;
}
try {
const response = await fetch(`${API_BASE}/locations?query=${encodeURIComponent(query)}&results=10`);
const locations = await response.json();
const stations = locations.filter(loc =>
loc.type === 'stop' || loc.type === 'station'
);
displaySuggestions(stations);
} catch (error) {
console.error('Suchfehler:', error);
}
}, 300);
});
// Clear button
clearBtn.addEventListener('click', () => {
stationSearch.value = '';
suggestions.classList.remove('active');
suggestions.innerHTML = '';
stationSearch.focus();
});
// Location button - Find nearest station
locationBtn.addEventListener('click', async () => {
// Check if geolocation is supported
if (!navigator.geolocation) {
showLocationError('⚠️ Dein Browser unterstützt keine Standortdienste');
return;
}
// Check if HTTPS (required for geolocation in most browsers)
if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
showLocationError('⚠️ Standortdienste benötigen HTTPS. Bitte nutze eine sichere Verbindung.');
return;
}
// Check rate limit before starting
if (!canMakeApiCall()) {
showLocationError('⚠️ Rate-Limit erreicht. Bitte warte kurz.');
return;
}
locationBtn.disabled = true;
locationBtn.textContent = '⌛'; // Emoji wechseln während Loading
// Show loading in search field
const originalPlaceholder = stationSearch.placeholder;
stationSearch.placeholder = '📍 Suche nächste Station...';
try {
// Try to check permission state first (if available)
if (navigator.permissions) {
try {
const permissionStatus = await navigator.permissions.query({ name: 'geolocation' });
if (permissionStatus.state === 'denied') {
throw new Error('PERMISSION_DENIED');
}
} catch (e) {
// Permissions API might not be available, continue anyway
console.log('Permissions API not available, trying geolocation directly');
}
}
// Get current position with better options
const position = await new Promise((resolve, reject) => {
const options = {
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 30000 // Cache for 30 seconds
};
navigator.geolocation.getCurrentPosition(resolve, reject, options);
});
const { latitude, longitude } = position.coords;
stationSearch.placeholder = '📍 Suche Stationen in der Nähe...';
// Search nearby stations - VBB API endpoint
const nearbyUrl = `${API_BASE}/locations/nearby?latitude=${latitude}&longitude=${longitude}&results=10`;
console.log('Searching nearby stations:', nearbyUrl);
const response = await fetch(nearbyUrl);
if (!response.ok) {
console.error('API Response status:', response.status);
throw new Error('API_ERROR');
}
const locations = await response.json();
// Filter for stops/stations only
const stations = locations.filter(loc =>
loc.type === 'stop' || loc.type === 'station'
);
if (!stations || stations.length === 0) {
throw new Error('NO_STATIONS');
}
// Select nearest station
const nearest = stations[0];
const distance = nearest.distance ? Math.round(nearest.distance) : '?';
selectStation(nearest.id, nearest.name);
// Show success feedback
if (navigator.vibrate) {
navigator.vibrate([50, 100, 50]);
}
stationSearch.placeholder = `✅ ${nearest.name} (${distance}m entfernt)`;
setTimeout(() => {
stationSearch.placeholder = originalPlaceholder;
}, 4000);
} catch (error) {
console.error('Standortfehler:', error);
let errorMsg = '';
let errorDetail = '';
if (error.message === 'PERMISSION_DENIED' || error.code === 1) {
errorMsg = '📍 Standortzugriff verweigert';
errorDetail = 'Bitte erlaube den Standortzugriff in deinen Browser-Einstellungen:\n\n' +
'• iOS: Einstellungen → Safari → Standort\n' +
'• Android: Chrome → Einstellungen → Website-Einstellungen → Standort\n' +
'• Desktop: Adresszeile → 🔒 Symbol → Berechtigungen';
} else if (error.code === 2) {
errorMsg = '📍 Standort nicht verfügbar';
errorDetail = 'Dein Gerät konnte deinen Standort nicht ermitteln. Stelle sicher, dass:\n\n' +
'• GPS/Standortdienste aktiviert sind\n' +
'• Du dich nicht im Flugmodus befindest\n' +
'• Du eine gute Verbindung hast';
} else if (error.code === 3) {
errorMsg = '⏱️ Zeitüberschreitung';
errorDetail = 'Die Standortermittlung hat zu lange gedauert. Bitte versuche es erneut.';
} else if (error.message === 'NO_STATIONS') {
errorMsg = '🚉 Keine Stationen in der Nähe';
errorDetail = 'Im Umkreis von 1km wurden keine VBB-Stationen gefunden.\n\nBitte nutze die manuelle Suche.';
} else if (error.message === 'API_ERROR') {
errorMsg = '⚠️ Verbindungsfehler';
errorDetail = 'Die Station konnte nicht gefunden werden.\n\nMögliche Ursachen:\n• Keine Internetverbindung\n• VBB-API vorübergehend nicht erreichbar\n\nBitte versuche es erneut oder nutze die manuelle Suche.';
} else {
errorMsg = '⚠️ Unbekannter Fehler';
errorDetail = error.message || 'Bitte versuche es erneut oder nutze die manuelle Suche.';
}
showLocationError(errorMsg, errorDetail);
stationSearch.placeholder = originalPlaceholder;
} finally {
locationBtn.disabled = false;
locationBtn.textContent = '📍'; // Zurück zum Pin-Emoji
}
});
function showLocationError(message, detail = '') {
if (detail) {
alert(message + '\n\n' + detail);
} else {
alert(message);
}
}
// Click außerhalb schließt Vorschläge
document.addEventListener('click', (e) => {
if (!e.target.closest('.search-container')) {
suggestions.classList.remove('active');
}
});
function displaySuggestions(stations) {
if (stations.length === 0) {
suggestions.innerHTML = '<div class="suggestion-item">Keine Stationen gefunden</div>';
suggestions.classList.add('active');
return;
}
suggestions.innerHTML = stations.map(station => {
const products = station.products ?
Object.entries(station.products)
.filter(([_, available]) => available)
.map(([type]) => type.toUpperCase())
.join(', ') : '';
return `
<div class="suggestion-item" data-id="${station.id}" data-name="${station.name}">
<div class="suggestion-name">${station.name}</div>
${products ? `<div class="suggestion-products">${products}</div>` : ''}
</div>
`;
}).join('');
suggestions.classList.add('active');
// Event-Listener für Vorschläge
suggestions.querySelectorAll('.suggestion-item').forEach(item => {
item.addEventListener('click', () => {
const stationId = item.dataset.id;
const stationName = item.dataset.name;
if (stationId && stationName) {
selectStation(stationId, stationName);
}
});
});
}
function selectStation(stationId, stationName) {
currentStationId = stationId;
currentStationName = stationName;
stationSearch.value = stationName;
suggestions.classList.remove('active');
refreshBtn.disabled = false;
// Haptic feedback
if (navigator.vibrate) {
navigator.vibrate(10);
}
loadDepartures();
}
// Rate Limiting: Max 100 requests per minute
function canMakeApiCall() {
const now = Date.now();
const oneMinuteAgo = now - 60000;
// Remove timestamps older than 1 minute
apiCallTimestamps = apiCallTimestamps.filter(timestamp => timestamp > oneMinuteAgo);
// Check if we're under the limit
if (apiCallTimestamps.length >= 100) {
console.warn('Rate limit reached: 100 requests per minute');
return false;
}
// Add current timestamp
apiCallTimestamps.push(now);
return true;
}
// Start/Stop Auto-Refresh
function startAutoRefresh() {
stopAutoRefresh(); // Clear any existing interval
autoRefreshInterval = setInterval(() => {
if (currentStationId && canMakeApiCall()) {
updateDeparturesValues(); // Nur Werte updaten, nicht neu rendern
}
}, 30000); // 30 seconds
}
function stopAutoRefresh() {
if (autoRefreshInterval) {
clearInterval(autoRefreshInterval);
autoRefreshInterval = null;
}
}
async function loadDepartures() {
if (!currentStationId) return;
if (!canMakeApiCall()) {
console.warn('Skipping API call due to rate limit');
return;
}
departuresContainer.innerHTML = '<div class="loading">⏳ Lade Abfahrten...</div>';
try {
const response = await fetch(
`${API_BASE}/stops/${currentStationId}/departures?duration=60&results=20`
);
if (!response.ok) throw new Error('API-Fehler');
const data = await response.json();
displayDepartures(data.departures || []);
// Start auto-refresh after successful load
startAutoRefresh();
// Haptic feedback
if (navigator.vibrate) {
navigator.vibrate(10);
}
} catch (error) {
console.error('Fehler beim Laden:', error);
departuresContainer.innerHTML = `
<div class="error">
⚠️ Fehler beim Laden der Abfahrten<br>
<small>${error.message}</small>
</div>
`;
// Stop auto-refresh on error
stopAutoRefresh();
}
}
// Update nur die Werte (Zeiten, Verspätungen) ohne DOM neu zu rendern
async function updateDeparturesValues() {
if (!currentStationId) return;
try {
const response = await fetch(
`${API_BASE}/stops/${currentStationId}/departures?duration=60&results=20`
);
if (!response.ok) throw new Error('API-Fehler');
const data = await response.json();
const departures = data.departures || [];
// Aktualisiere nur die Zeitanzeigen
const now = new Date();
const departureItems = departuresContainer.querySelectorAll('.departure-item');
departures.forEach((dep, index) => {
if (index >= departureItems.length) return;
const item = departureItems[index];
const when = new Date(dep.when);
const minutes = Math.round((when - now) / 60000);
const timeDisplay = minutes <= 0 ? 'Jetzt' : `${minutes} min`;
const delay = dep.delay ? Math.round(dep.delay / 60) : 0;
// Update Zeit
const timeElement = item.querySelector('.departure-time');
if (timeElement) {
const delayHTML = delay > 0 ?
`<div class="departure-delay">+${delay} min Verspätung</div>` : '';
timeElement.innerHTML = timeDisplay + delayHTML;
}
});
// Update Timestamp in Station Info
const lastUpdateElement = departuresContainer.querySelector('.last-update');
if (lastUpdateElement) {
lastUpdateElement.textContent = `Aktualisiert: ${now.toLocaleTimeString('de-DE')} • Auto-Refresh alle 30s`;
}
} catch (error) {
console.error('Fehler beim Aktualisieren:', error);
// Bei Fehler nicht stoppen, nächster Versuch in 30s
}
}
function displayDepartures(departures) {
if (departures.length === 0) {
departuresContainer.innerHTML = `
<div class="empty-state">
<div class="empty-state-icon">🚉</div>
<div>Keine Abfahrten in den nächsten 60 Minuten</div>
</div>
`;
return;
}
const now = new Date();
const stationInfoHTML = `
<div class="station-info">
<div class="station-name">${currentStationName}</div>
<div class="last-update">Aktualisiert: ${now.toLocaleTimeString('de-DE')} • Auto-Refresh alle 30s</div>
</div>
`;
const departuresHTML = departures.map((dep, index) => {
const when = new Date(dep.when);
const minutes = Math.round((when - now) / 60000);
const timeDisplay = minutes <= 0 ? 'Jetzt' : `${minutes} min`;
const delay = dep.delay ? Math.round(dep.delay / 60) : 0;
const delayHTML = delay > 0 ?
`<div class="departure-delay">+${delay} min Verspätung</div>` : '';
const lineColor = getLineColor(dep.line);
const platform = dep.platform ? `Gleis ${dep.platform}` : '';
const cancelled = dep.cancelled ? '<span class="status-badge status-cancelled">FÄLLT AUS</span>' : '';
return `
<div class="departure-item" style="border-left-color: ${lineColor}" data-trip-id="${dep.tripId}" data-index="${index}">
<div class="departure-info">
<div class="line-badge" style="background-color: ${lineColor}; color: #000;">
${dep.line.name}${cancelled}
</div>
<div class="departure-destination">→ ${dep.direction}</div>
${platform ? `<div class="departure-platform">${platform}</div>` : ''}
</div>
<div class="departure-time">
${timeDisplay}
${delayHTML}
</div>
</div>
`;
}).join('');
departuresContainer.innerHTML = stationInfoHTML + departuresHTML;
// Event-Listener für Departure-Items
departuresContainer.querySelectorAll('.departure-item').forEach(item => {
item.addEventListener('click', () => {
const tripId = item.dataset.tripId;
const index = item.dataset.index;
if (tripId) {
showDepartureDetails(departures[index]);
}
});
});
}
async function showDepartureDetails(departure) {
detailModal.classList.add('active');
detailTitle.textContent = departure.line.name;
detailContent.innerHTML = '<div class="loading-detail">⏳ Lade Details...</div>';
// Prevent body scroll
document.body.style.overflow = 'hidden';
// Pause auto-refresh while viewing details
stopAutoRefresh();
// Haptic feedback
if (navigator.vibrate) {
navigator.vibrate(15);
}
try {
let tripDetails = null;
// Versuche Trip-Details zu laden
if (departure.tripId && canMakeApiCall()) {
try {
const response = await fetch(`${API_BASE}/trips/${departure.tripId}`);
if (response.ok) {
const data = await response.json();
tripDetails = data.trip;
}
} catch (e) {
console.log('Keine Trip-Details verfügbar');
}
}
displayDepartureDetails(departure, tripDetails);
} catch (error) {
console.error('Fehler beim Laden der Details:', error);
detailContent.innerHTML = `
<div class="error">
⚠️ Fehler beim Laden der Details<br>
<small>${error.message}</small>
</div>
`;
}
}
function displayDepartureDetails(departure, tripDetails) {
const when = new Date(departure.when);
const plannedWhen = departure.plannedWhen ? new Date(departure.plannedWhen) : when;
const delay = departure.delay ? Math.round(departure.delay / 60) : 0;
const lineColor = getLineColor(departure.line);
let html = `
<!-- Linie & Richtung -->
<div class="detail-section" style="border-left-color: ${lineColor}">
<div class="line-badge" style="background-color: ${lineColor}; color: #000; margin-bottom: 10px;">
${departure.line.name}
</div>
<div style="font-size: 18px; font-weight: bold; margin-bottom: 10px;">
→ ${departure.direction}
</div>
${departure.cancelled ? '<div class="status-badge status-cancelled">FÄLLT AUS</div>' : ''}
</div>
<!-- Abfahrt -->
<div class="detail-section">
<div class="detail-section-title">⏱️ Abfahrt</div>
<div class="detail-row">
<div class="detail-label">Geplant</div>
<div class="detail-value">${plannedWhen.toLocaleTimeString('de-DE')}</div>
</div>
<div class="detail-row">
<div class="detail-label">Aktuell</div>
<div class="detail-value">${when.toLocaleTimeString('de-DE')}</div>
</div>
${delay > 0 ? `
<div class="detail-row">
<div class="detail-label">Verspätung</div>
<div class="detail-value" style="color: #ff4444;">+${delay} min</div>
</div>
` : ''}
${departure.platform ? `
<div class="detail-row">
<div class="detail-label">Gleis/Steig</div>
<div class="detail-value">${departure.platform}</div>
</div>
` : ''}
</div>
<!-- Fahrzeug-Info -->
<div class="detail-section">
<div class="detail-section-title">🚊 Fahrzeug</div>
${departure.line.product ? `
<div class="detail-row">
<div class="detail-label">Verkehrsmittel</div>
<div class="detail-value">${departure.line.product}</div>
</div>
` : ''}
${departure.line.operator ? `
<div class="detail-row">
<div class="detail-label">Betreiber</div>
<div class="detail-value">${departure.line.operator.name || departure.line.operator.id}</div>
</div>
` : ''}
${departure.line.mode ? `
<div class="detail-row">
<div class="detail-label">Modus</div>
<div class="detail-value">${departure.line.mode}</div>
</div>
` : ''}
${departure.tripId ? `
<div class="detail-row">
<div class="detail-label">Fahrt-ID</div>
<div class="detail-value" style="font-size: 10px; word-break: break-all;">${departure.tripId}</div>
</div>
` : ''}
</div>
`;
// Halte anzeigen wenn verfügbar
if (tripDetails && tripDetails.stopovers && tripDetails.stopovers.length > 0) {
const currentStopIndex = tripDetails.stopovers.findIndex(stop =>
stop.stop.id === currentStationId
);
html += `
<div class="detail-section">
<div class="detail-section-title">🚏 Weitere Halte (${tripDetails.stopovers.length})</div>
<div class="stop-list">
${tripDetails.stopovers.map((stop, index) => {
const stopWhen = stop.departure || stop.arrival;
const stopPlannedWhen = stop.plannedDeparture || stop.plannedArrival;
const stopTime = stopWhen ? new Date(stopWhen) : null;
const stopPlannedTime = stopPlannedWhen ? new Date(stopPlannedWhen) : null;
const stopDelay = stop.departureDelay || stop.arrivalDelay || 0;
const stopDelayMin = Math.round(stopDelay / 60);
const isCurrent = index === currentStopIndex;
const isPassed = index < currentStopIndex;
return `
<div class="stop-item ${isCurrent ? 'current' : ''}" style="opacity: ${isPassed ? '0.5' : '1'}">
<div class="stop-name">
${isCurrent ? '📍 ' : ''}${stop.stop.name}
</div>
<div class="stop-time">
${stopPlannedTime ? stopPlannedTime.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'}) : '—'}
${stopDelayMin > 0 ? `<span class="stop-delay">+${stopDelayMin}'</span>` : ''}
</div>
</div>
`;
}).join('')}
</div>
</div>
`;
}
// Hinweise anzeigen
if (departure.remarks && departure.remarks.length > 0) {
html += `
<div class="detail-section">
<div class="detail-section-title">ℹ️ Hinweise</div>
${departure.remarks.map(remark => `
<div class="remark-item">
${remark.type ? `<div class="remark-type">${remark.type}</div>` : ''}
<div class="remark-text">${remark.text || remark.summary || 'Keine Details'}</div>
</div>
`).join('')}
</div>
`;
}
// Zusätzliche Trip-Details
if (tripDetails) {
if (tripDetails.cycle) {
html += `
<div class="detail-section">
<div class="detail-section-title">🔄 Umlauf</div>
${tripDetails.cycle.min ? `
<div class="detail-row">
<div class="detail-label">Min. Takt</div>
<div class="detail-value">${tripDetails.cycle.min} min</div>
</div>
` : ''}
${tripDetails.cycle.max ? `
<div class="detail-row">
<div class="detail-label">Max. Takt</div>
<div class="detail-value">${tripDetails.cycle.max} min</div>
</div>
` : ''}
</div>
`;
}
if (tripDetails.direction) {
html += `
<div class="detail-section">
<div class="detail-row">
<div class="detail-label">Ziel-Richtung</div>
<div class="detail-value">${tripDetails.direction}</div>
</div>
</div>
`;
}
}
detailContent.innerHTML = html;
}
function closeDetailModal() {
detailModal.classList.remove('active');
detailModal.style.transform = '';
document.body.style.overflow = '';
// Resume auto-refresh
if (currentStationId) {
startAutoRefresh();
}
// Haptic feedback
if (navigator.vibrate) {
navigator.vibrate(10);
}
}
// Detail Modal schließen
detailBackBtn.addEventListener('click', closeDetailModal);
// ESC-Taste schließt Modal
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && detailModal.classList.contains('active')) {
closeDetailModal();
}
});
function getLineColor(line) {
if (!line || !line.product) return '#666';
const product = line.product.toLowerCase();
const name = line.name ? line.name.toUpperCase() : '';
// U-Bahn Linien
if (product === 'subway' || name.startsWith('U')) {
const ubahnColors = {
'U1': '#55a838', 'U2': '#da421e', 'U3': '#16683d',
'U4': '#f0d722', 'U5': '#7e5330', 'U6': '#8c6dab',
'U7': '#528dba', 'U8': '#224f86', 'U9': '#f3791d'
};
return ubahnColors[name] || '#0066CC';
}
// S-Bahn
if (product === 'suburban' || name.startsWith('S')) {
return '#5D871E';
}
// Tram
if (product === 'tram') {
return '#CC0000';
}
// Bus
if (product === 'bus') {
return '#993399';
}
// Regional
if (product === 'regional' || product === 'regionalexp') {
return '#DC281E';
}
return '#666';
}
// Refresh button
refreshBtn.addEventListener('click', loadDepartures);
// Initial state
if (!navigator.onLine) {
offlineIndicator.classList.add('show');
}
</script>
</body>
</html>