changed to rem units

This commit is contained in:
Timo Henkensiefken 2024-12-10 17:01:32 +01:00
parent c116925eda
commit 9ea4ba3879
2 changed files with 36 additions and 29 deletions

View File

@ -1,6 +1,7 @@
// Define the API URL
const urlDepartures = 'https://api.swu.de/mobility/v1/stop/passage/Departures?StopNumber=1240&Limit=35';
const urlDepartures = 'https://api.swu.de/mobility/v1/stop/passage/Departures?StopNumber=1240&Limit=50';
const MAX_DEPARTURE_TIMES = 3;
const MAX_DEPARTURE_TIMES_LOW = 3;
// Make a GET request
@ -29,14 +30,14 @@ function groupDepartures(data) {
// Filtert den ersten Halt der Linie 8
} else if (routes.has(x.RouteNumber)) {
const directions = routes.get(x.RouteNumber);
if (directions.has(x.StopPointNumber)) {
directions.get(x.StopPointNumber).push(x);
if (directions.has(x.DepartureDirectionText)) {
directions.get(x.DepartureDirectionText).push(x);
} else {
directions.set(x.StopPointNumber, [x]);
directions.set(x.DepartureDirectionText, [x]);
}
} else {
const directions = new Map();
directions.set(x.StopPointNumber, [x]);
directions.set(x.DepartureDirectionText, [x]);
routes.set(x.RouteNumber, directions);
}
}
@ -93,10 +94,11 @@ function renderDOMByRoute(data) {
elemDest.appendChild(elemTimes);
direction.forEach(function(elem, i) {
const countdown = Math.floor((direction[i].DepartureCountdown+direction[i].DepartureDeviation)/60);
if (i < MAX_DEPARTURE_TIMES) {
const elemCombined = document.createElement("span");
elemCombined.setAttribute("class", "combined");
elemCombined.innerHTML = Math.floor((direction[i].DepartureCountdown+direction[i].DepartureDeviation)/60);
elemCombined.innerHTML = countdown;
elemTimes.appendChild(elemCombined);
}
@ -135,6 +137,7 @@ function getRouteImage(route) {
return img;
}
// function setScaling
refreshData();
// setInterval(refreshData, 15000);

View File

@ -1,3 +1,7 @@
:root {
font-size: 5px;
}
* {
padding: 0;
margin: 0;
@ -5,70 +9,70 @@
body {
background-color: black;
font-size: 110px;
font-size: 5.5rem;
font-family: arial, sans;
}
#banner {
box-sizing: border-box;
height: 200px;
height: 10rem;
color: white;
margin: 16px;
margin: 0.8rem;
}
#banner img {
height: 140px;
margin: 30px;
height: 7rem;
margin: 1.5rem;
float: left;
}
#banner .text {
padding-top: 36px;
margin-left: 20px;
padding-top: 1.8rem;
margin-left: 1rem;
float: left;
}
#banner .time {
padding-top: 36px;
margin-right: 20px;
padding-top: 1.8rem;
margin-right: 1rem;
float: right;
}
.route {
margin: 16px;
margin: 0.8rem;
}
.route img {
height: 200px;
height: 10rem;
float: left;
}
.destination {
box-sizing: border-box;
height: 200px;
height: 10rem;
background-color: white;
padding-top: 28px;
padding-left: 220px;
padding-top: 1.4rem;
padding-left: 11rem;
white-space: nowrap;
overflow: clip;
}
.destination:first-child {
border-radius: 100px 100px 0 0;
border-radius: 5rem 5rem 0 0;
}
.destination:last-child {
border-radius: 0 0 100px 100px;
border-radius: 0 0 5rem 5rem;
}
.destination:only-child {
border-radius: 100px 100px 100px 100px;
border-radius: 5rem 5rem 5rem 5rem;
}
.destination .text {
color: black;
margin-right: 32px;
margin-right: 1.6rem;
}
.destination .seperator {
@ -79,13 +83,13 @@ body {
.destination .combined {
display: inline-block;
color: white;
min-width: 160px;
padding: 8px;
margin-left: 16px;
margin-right: 16px;
min-width: 8rem;
padding: 0.4rem;
margin-left: 0.8rem;
margin-right: 0.8rem;
background-color: #777;
box-sizing: border-box;
border-radius: 8px;
border-radius: 0.4rem;
text-align: center;
}