FIN-IT
/
beci-anzeige
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
fetchapi.js
View File

@ -1,6 +1,7 @@
// Define the API URL // 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 = 3;
const MAX_DEPARTURE_TIMES_LOW = 3;
// Make a GET request // Make a GET request
@ -29,14 +30,14 @@ function groupDepartures(data) {
// Filtert den ersten Halt der Linie 8 // Filtert den ersten Halt der Linie 8
} else if (routes.has(x.RouteNumber)) { } else if (routes.has(x.RouteNumber)) {
const directions = routes.get(x.RouteNumber); const directions = routes.get(x.RouteNumber);
if (directions.has(x.StopPointNumber)) { if (directions.has(x.DepartureDirectionText)) {
directions.get(x.StopPointNumber).push(x); directions.get(x.DepartureDirectionText).push(x);
} else { } else {
directions.set(x.StopPointNumber, [x]); directions.set(x.DepartureDirectionText, [x]);
} }
} else { } else {
const directions = new Map(); const directions = new Map();
directions.set(x.StopPointNumber, [x]); directions.set(x.DepartureDirectionText, [x]);
routes.set(x.RouteNumber, directions); routes.set(x.RouteNumber, directions);
} }
} }
@ -93,10 +94,11 @@ function renderDOMByRoute(data) {
elemDest.appendChild(elemTimes); elemDest.appendChild(elemTimes);
direction.forEach(function(elem, i) { direction.forEach(function(elem, i) {
const countdown = Math.floor((direction[i].DepartureCountdown+direction[i].DepartureDeviation)/60);
if (i < MAX_DEPARTURE_TIMES) { if (i < MAX_DEPARTURE_TIMES) {
const elemCombined = document.createElement("span"); const elemCombined = document.createElement("span");
elemCombined.setAttribute("class", "combined"); elemCombined.setAttribute("class", "combined");
elemCombined.innerHTML = Math.floor((direction[i].DepartureCountdown+direction[i].DepartureDeviation)/60); elemCombined.innerHTML = countdown;
elemTimes.appendChild(elemCombined); elemTimes.appendChild(elemCombined);
} }
@ -135,6 +137,7 @@ function getRouteImage(route) {
return img; return img;
} }
// function setScaling
refreshData(); refreshData();
// setInterval(refreshData, 15000); // setInterval(refreshData, 15000);

50
style.css
View File

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