ruempel/stopmonitor.html

## stopmonitor.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stop Monitor</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="manifest" href="manifest.json"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
            crossorigin></script>
    <script>
        jQuery(() => { // inspired by: https://github.com/kiliankoe/dvbjs
            // get stop ids with: https://webapi.vvo-online.de/tr/pointfinder?format=json&query=hhz
            let params = new URLSearchParams(document.location.search.substring(1)).get("stops");
            let stops = params !== null ? params.split(",") : ["33000028", "33000617", "33000134"];
            for (let i = 0; i < stops.length; i++) {
                jQuery("<section/>").attr("id", stops[i]).css("order", i).appendTo("body");
                showDepartures(stops[i]);
            }
        });

        function showDepartures(stopid, limit = 6) {
            let uri = "https://webapi.vvo-online.de/dm";
            jQuery.ajax({url: uri, data: {format: "json", stopid: stopid, limit: limit}})
                .then(renderDepartureData.bind(this, stopid));
        }

        function renderDepartureData(stopid, data) {
            console.log(data);
            let tile = jQuery("section#" + stopid);
            jQuery("<h1/>").text(data.Name).appendTo(tile);
            for (let d of data.Departures) {
                let arrivalTime = new Date(parseInt(d.RealTime ? d.RealTime.match(/\d+/)[0] : d.ScheduledTime.match(/\d+/)[0]));
                let arrivalTimeRelative = Math.round((arrivalTime - new Date()) / 1000 / 6) / 10; // round to 0.1
                let entryText = d.LineName + " " + d.Direction + " in <span class='time'>" + arrivalTimeRelative + "</span> min";
                jQuery("<p/>").html(entryText).appendTo(tile);
            }
        }
    </script>
    <style>
        @import url(//fonts.googleapis.com/css?family=Titillium+Web:400,600);

        html {
            font-size: 20px;
        }

        body {
            font-family: "Titillium Web", sans-serif !important;
            font-size: 1.1rem;
            background-color: black;
            color: #8bc34a;
            display: flex;
            flex-direction: column;
        }

        span.time {
            color: white;
            font-weight: 600;
        }

        h1, p {
            margin: 0.25rem 1.25rem;
        }

        h1 {
            font-weight: 600;
        }

        section {
            background-color: #333;
            margin: 0.25rem;
        }
    </style>
</head>
<body>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Stop Monitor</title>
	<meta name="viewport" content="width=device-width"/>
	<link rel="manifest" href="manifest.json"/>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
	crossorigin></script>
	<script>
	jQuery(() => { // inspired by: https://github.com/kiliankoe/dvbjs
	// get stop ids with: https://webapi.vvo-online.de/tr/pointfinder?format=json&query=hhz
	let params = new URLSearchParams(document.location.search.substring(1)).get("stops");
	let stops = params !== null ? params.split(",") : ["33000028", "33000617", "33000134"];
	for (let i = 0; i < stops.length; i++) {
	jQuery("<section/>").attr("id", stops[i]).css("order", i).appendTo("body");
	showDepartures(stops[i]);
	}
	});

	function showDepartures(stopid, limit = 6) {
	let uri = "https://webapi.vvo-online.de/dm";
	jQuery.ajax({url: uri, data: {format: "json", stopid: stopid, limit: limit}})
	.then(renderDepartureData.bind(this, stopid));
	}

	function renderDepartureData(stopid, data) {
	console.log(data);
	let tile = jQuery("section#" + stopid);
	jQuery("<h1/>").text(data.Name).appendTo(tile);
	for (let d of data.Departures) {
	let arrivalTime = new Date(parseInt(d.RealTime ? d.RealTime.match(/\d+/)[0] : d.ScheduledTime.match(/\d+/)[0]));
	let arrivalTimeRelative = Math.round((arrivalTime - new Date()) / 1000 / 6) / 10; // round to 0.1
	let entryText = d.LineName + " " + d.Direction + " in <span class='time'>" + arrivalTimeRelative + "</span> min";
	jQuery("<p/>").html(entryText).appendTo(tile);
	}
	}
	</script>
	<style>
	@import url(//fonts.googleapis.com/css?family=Titillium+Web:400,600);

	html {
	font-size: 20px;
	}

	body {
	font-family: "Titillium Web", sans-serif !important;
	font-size: 1.1rem;
	background-color: black;
	color: #8bc34a;
	display: flex;
	flex-direction: column;
	}

	span.time {
	color: white;
	font-weight: 600;
	}

	h1, p {
	margin: 0.25rem 1.25rem;
	}

	h1 {
	font-weight: 600;
	}

	section {
	background-color: #333;
	margin: 0.25rem;
	}
	</style>
	</head>
	<body>
	</body>
	</html>