269 lines
10 KiB
HTML
269 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Abfahrtsinformationen</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f0f0f0; /* Hintergrundfarbe im Standardmodus */
|
|
color: #333; /* Textfarbe im Standardmodus */
|
|
position: relative;
|
|
}
|
|
|
|
/* Dark-Mode-Stile */
|
|
body.dark-mode {
|
|
background-color: #333; /* Hintergrundfarbe im Dark-Mode */
|
|
color: #ffff; /* Textfarbe im Dark-Mode */
|
|
}
|
|
/* Dark-Mode-Stile für die Tabelle */
|
|
body.dark-mode table {
|
|
color: #fff; /* Textfarbe in der Tabelle im Dark-Mode */
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
padding: 5px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button[type="submit"] {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
table, th, td {
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
th, td {
|
|
padding: 10px;
|
|
}
|
|
|
|
th {
|
|
background-color: #007bff;
|
|
color: white;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Dark-Mode-Schalter */
|
|
#dark-mode-toggle {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
color: #007bff;
|
|
}
|
|
.centered-cell {
|
|
text-align: center; /* Horizontale Ausrichtung zentriert */
|
|
vertical-align: middle; /* Vertikale Ausrichtung zentriert */
|
|
}
|
|
.centered-cell.delay-cell {
|
|
color: #FF0000;
|
|
padding: 5px;
|
|
border: none;
|
|
}
|
|
.delay-depature-text {
|
|
color: #FFA000;
|
|
font-weight: bold;
|
|
}
|
|
.delay-arrival-text {
|
|
color: #FF5000;
|
|
font-weight: bold;
|
|
}
|
|
.cancelled-row {
|
|
background-color: #500303;
|
|
}
|
|
</style>
|
|
<script>
|
|
function updateDepartures() {
|
|
const apiUrl = "/update_departures";
|
|
fetch(apiUrl)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const tableBody = document.querySelector('table tbody');
|
|
tableBody.innerHTML = '';
|
|
|
|
data.departures.forEach(leg => {
|
|
const row = document.createElement('tr');
|
|
row.className = leg.isCancelled ? 'cancelled-row' : '';
|
|
row.innerHTML = `
|
|
<td class="centered-cell">${leg.train}<br>(${leg.trainNumber})</td>
|
|
<td class="centered-cell">${leg.route[0].name}</td>
|
|
<td class="centered-cell">${leg.destination}</td>
|
|
<td class="centered-cell">${leg.via.join(', ')}</td>
|
|
<td class="centered-cell scheduled-arrival-cell"></td>
|
|
<td class="centered-cell delay-arrival"></td>
|
|
<td class="centered-cell scheduled-depature-cell"></td>
|
|
<td class="centered-cell delay-reasons delay-depature"></td>
|
|
<td class="centered-cell">${leg.scheduledPlatform}</td>
|
|
`;
|
|
const delayArrivalCell = row.querySelector('.delay-arrival');
|
|
if (leg.delayArrival !== null && leg.delayArrival !== 0) {
|
|
delayArrivalCell.innerHTML += `<span class="delay-arrival-text">${leg.delayArrival}</span>`;
|
|
}
|
|
else if (leg.delayArrival === 0) {
|
|
delayArrivalCell.innerHTML += "----------";
|
|
}
|
|
else {
|
|
delayArrivalCell.innerHTML += "----------";
|
|
}
|
|
|
|
const delayDepartureCell = row.querySelector('.delay-depature');
|
|
if (leg.delayDeparture !== null && leg.delayDeparture !==0) {
|
|
delayDepartureCell.innerHTML += `<span class="delay-depature-text">${leg.delayDeparture}</span>`;
|
|
}
|
|
else if (leg.delayArrival === 0) {
|
|
delayDepartureCell.innerHTML += "----------";
|
|
}
|
|
else {
|
|
delayDepartureCell.innerHTML += "----------";
|
|
}
|
|
|
|
const scheduledArrivalCell = row.querySelector('.scheduled-arrival-cell');
|
|
if (leg.scheduledArrival !== null) {
|
|
scheduledArrivalCell.innerHTML += leg.scheduledArrival;
|
|
}
|
|
else {
|
|
scheduledArrivalCell.innerHTML += "----------";
|
|
}
|
|
const scheduledDepatureCell = row.querySelector('.scheduled-depature-cell');
|
|
if (leg.scheduledDeparture !== null) {
|
|
scheduledDepatureCell.innerHTML += leg.scheduledDeparture;
|
|
}
|
|
else {
|
|
scheduledDepatureCell.innerHTML += "----------";
|
|
}
|
|
const delayCell = row.querySelector('.delay-reasons');
|
|
if (delayCell !== null) {
|
|
delayCell.innerHTML += '<table class="delay-reasons-table"></table>';
|
|
const delayReasonsTable = row.querySelector('.delay-reasons-table');
|
|
leg.messages.delay.forEach(delay => {
|
|
delayReasonsTable.innerHTML += `<tr><td class="centered-cell delay-cell">${delay.text}</td></tr>`;
|
|
});
|
|
}
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
});
|
|
}
|
|
|
|
setInterval(updateDepartures, 90000);
|
|
</script>
|
|
</head>
|
|
<body class="{{ station_name }}">
|
|
<button id="dark-mode-toggle">🌙</button> <!-- Mond-Emoji als Dark-Mode-Symbol -->
|
|
<h1>Abfahrten / Departures</h1>
|
|
<h2>Station: {{ station_name }}</h2>
|
|
|
|
<form method="POST">
|
|
<label for="station_name">Station:</label>
|
|
<input type="text" name="station_name" id="station_name" value="{{ station_name }}">
|
|
<button type="submit">Suchen</button>
|
|
</form>
|
|
|
|
{% if departures %}
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Von / From</th>
|
|
<th>Richtung / Direction</th>
|
|
<th>Über/ via</th>
|
|
<th>Geplante Ankunftszeit / Planned arrival</th>
|
|
<th>Verspätung der Ankunft (Minuten) / Arrival delay (minutes)</th>
|
|
<th>Geplante Abfahrtszeit / Planned departure</th>
|
|
<th>Verspätung der Abfahrt (Minuten) / Departure delay (minutes)<br><br>Verspätungsgründe / Delay Reasons</th>
|
|
<th>Bahnsteig / Platform</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for leg in departures %}
|
|
<tr class="{% if leg.isCancelled %}cancelled-row{% endif %}">
|
|
<td class="centered-cell">{{ leg.train }}<br>({{ leg.trainNumber }})</td>
|
|
<td class="centered-cell">{{ leg.route[0].name }}</td> <!-- Ursprungsort -->
|
|
<td class="centered-cell">{{ leg.destination }}</td>
|
|
<td class="centered-cell">{{ leg.via | join(', ') }}</td>
|
|
<td class="centered-cell">{{ leg.scheduledArrival if leg.scheduledArrival else "----------" }}</td>
|
|
<td class="centered-cell delay-arrival"><span class="delay-arrival-text">{{ leg.delayArrival if leg.delayArrival else "----------" }}</span></td>
|
|
<td class="centered-cell scheduled-departure-cell">{{ leg.scheduledDeparture if leg.scheduledDeparture else "----------" }}</td>
|
|
<td class="centered-cell delay-reasons delay-departure"><span class="delay-depature-text">{{ leg.delayDeparture if leg.delayDeparture else "----------" }}</span>
|
|
<table>
|
|
{% for delay in leg.messages.delay %}
|
|
<tr><td class="centered-cell delay-cell">{{ delay.text }}</td></tr>
|
|
{% endfor %}
|
|
</table>
|
|
</td>
|
|
<td>{{ leg.scheduledPlatform }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% endif %}
|
|
|
|
<script>
|
|
// JavaScript, um zwischen Dark-Mode und Standardmodus zu wechseln
|
|
const darkModeToggle = document.getElementById('dark-mode-toggle');
|
|
const body = document.body;
|
|
|
|
darkModeToggle.addEventListener('click', () => {
|
|
body.classList.toggle('dark-mode');
|
|
});
|
|
</script>
|
|
<script>
|
|
// JavaScript, um zwischen Dark-Mode und Standardmodus zu wechseln
|
|
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
// Prüfe, ob der Browser im Dark-Mode geöffnet wurde
|
|
if (prefersDarkMode.matches) {
|
|
// Füge die CSS-Klasse `dark-mode` zum Body-Element hinzu
|
|
const body = document.body;
|
|
body.classList.add('dark-mode');
|
|
}
|
|
|
|
// Registriere den `change`-Ereignishandler
|
|
prefersDarkMode.addEventListener('change', () => {
|
|
const body = document.body;
|
|
|
|
if (prefersDarkMode.matches) {
|
|
body.classList.add('dark-mode');
|
|
} else {
|
|
body.classList.remove('dark-mode');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|