beci-anzeige/fetchapi.js

// Define the API URL
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
function refreshData() {
    fetch(urlDepartures)
	.then(response => {
	    if (!response.ok) {
		throw new Error('Network response was not ok');
	    }
	    return response.json();
	})
	.then(data => {
	    console.log(data);
	    renderDOMByRoute(data);
	})
	.catch(error => {
	    console.error('Error:', error);
	});
}

// Groups Departures into map by route
function groupDepartures(data) {
    const routes = new Map();
    for (let x of data.StopPassage.DepartureData) {
	if (x.DepartureDirectionText == data.StopPassage.StopName) {
	    // Filtert den ersten Halt der Linie 8
	} else if (routes.has(x.RouteNumber)) {
	    const directions = routes.get(x.RouteNumber);
	    if (directions.has(x.DepartureDirectionText)) {
		directions.get(x.DepartureDirectionText).push(x);
	    } else {
		directions.set(x.DepartureDirectionText, [x]);
	    }
	} else {
	    const directions = new Map();
	    directions.set(x.DepartureDirectionText, [x]);
	    routes.set(x.RouteNumber, directions);
	}
    }

    // Sort by Route
    const sortedRoutes = new Map([...routes].sort((a, b) => a[0] - b[0]));
    // Sort by Destination
    sorted = new Map();
    sortedRoutes.forEach(function(directions, key) {
	const sortedDirections = new Map([...directions].sort((a, b) => a[0] - b[0]));
	const sortedDirections2 = new Map();
	sortedDirections.forEach(function(direction, key2) {
	    console.log(direction);
	    const sortedArray = direction.sort((a, b) => (a.DepartureCountdown+a.DepartureDeviation) - (b.DepartureCountdown+b.DepartureDeviation));
	    sortedDirections2.set(key2, sortedArray);
	});
	sorted.set(key, sortedDirections2);
    });
    return sorted;
}

// Rendert die Api Daten in den DOM
function renderDOMByRoute(data) {
    document.body.appendChild(getHeaderBanner(data));
    
    const routes = groupDepartures(data);
    const elemBoxRoutes = document.createElement("div");

    console.log(routes);

    routes.forEach(function(route, routeNumber) {
	const elemRoute = document.createElement("div");
	elemRoute.setAttribute("class", "route");
	elemBoxRoutes.appendChild(elemRoute);
	elemRoute.appendChild(getRouteImage(routeNumber));
	const elemDivDirs = document.createElement("div");
	elemRoute.appendChild(elemDivDirs);
	route.forEach(function(direction, stopPointNumber) {
	    const elemDest = document.createElement("div");
	    elemDest.setAttribute("class", "destination");
	    elemDivDirs.appendChild(elemDest);

	    const elemDestText = document.createElement("span");
	    elemDestText.setAttribute("class", "text");
	    elemDestText.innerHTML = direction[0].DepartureDirectionText;
	    elemDest.appendChild(elemDestText);

	    const elemDestSeperator = document.createElement("span");
	    elemDestSeperator.setAttribute("class", "seperator");
	    elemDestSeperator.innerHTML = "❱";
	    elemDest.appendChild(elemDestSeperator);
	    
	    const elemTimes = document.createElement("span");
	    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 = countdown;

		    elemTimes.appendChild(elemCombined);
		}
	    });
	});
    });
    document.body.appendChild(elemBoxRoutes);
}

function getHeaderBanner(data) {
    const elemBanner = document.createElement("div");
    elemBanner.id = "banner";

    const elemFin = document.createElement("img");
    elemFin.src = "resources/finlogo.png";
    elemBanner.appendChild(elemFin);

    const elemStopName = document.createElement("div");
    elemStopName.innerHTML = data.StopPassage.StopName;
    elemStopName.setAttribute("class","text");
    elemBanner.appendChild(elemStopName);

    const date = new Date(data.StopPassage.CurrentTimestamp);
    const elemTime = document.createElement("div");
    elemTime.innerHTML = date.toLocaleTimeString('de-DE', { hour: "2-digit", minute: "2-digit" });
    elemTime.setAttribute("class","time");
    elemBanner.appendChild(elemTime);
    
    return elemBanner;
}

function getRouteImage(route) {
    const img = document.createElement('img');
    img.src = 'https://www.swu.de/typo3conf/ext/swu_timetables/Resources/Public/Icons/Routes/linie-' + route + '.svg';
    img.setAttribute("class","route-image");
    return img;
}

// function setScaling

refreshData();
// setInterval(refreshData, 15000);