Hello community,
for all of you, who want to see actual departures of selected VVO stops I built a new “plugin” that can be used as i-frame.
At first find your stopid with help of the official page: https://www.vvo-online.de/de
Search for your stop an copy the stop id from the url.
Now copy the three files to a webserver of your choice and pass the stopid(s) to the corresponding array in dvb.js.
dvb.js:
var api = "https://webapi.vvo-online.de/dm?format=json";
var schedule = new XMLHttpRequest();
var stopids = [33000335, 33000331, 33000147];
var amount = 6;
var offset = 0;
var now = new Date();
var time = now;
if (offset !== 'undefined' && offset !== 0) {
time = new Date(now.getTime() + (offset * 60 * 1000));
}
function execute(stopids, callback) {
var done = 0;
var placeholderContent = "";
for(var k = 0; k < stopids.length; k++) {
var stopid = stopids[k];
var url = api + "&stopid=" + stopid + "&limit=" + amount + "&time=" + time.toISOString();
schedule.open("GET", url, false);
schedule.send(null);
var data = JSON.parse(schedule.response);
if(data && data.Departures && data.Departures.length > 0) {
var departures = data.Departures;
placeholderContent = placeholderContent + "<div class=\"dvb\"><div class=\"stop\">" + data.Name + "</div><div class=\"clear\"></div><div class=\"head\"><div class=\"line caption col-1\">Linie</div><div class=\"target caption col-2\">Ziel</div><div class=\"minutes caption col-3\">Min.</div></div><div class=\"clear\"></div>";
for(var i = 0; i < departures.length; i++) {
var hit = departures[i];
var arrivalTime = new Date(parseInt(hit.RealTime ? hit.RealTime.match(/\d+/)[0] : hit.ScheduledTime.match(/\d+/)[0]));
var arrivalTimeRelative = Math.round((arrivalTime - now) / 1000 / 60);
var row = "<div class=\"col-1\">" + hit.LineName + "</div><div class=\"col-2\">" + hit.Direction + "</div><div class=\"col-3\">" + arrivalTimeRelative + "</div><div class=\"clear\"></div>";
placeholderContent = placeholderContent + row;
}
placeholderContent = placeholderContent + "</div>";
done++;
if(done == stopids.length) {
callback(placeholderContent);
}
}
}
}
execute(stopids, function(result) {
document.getElementById("placeholder").innerHTML = result;
});
dvb.css:
/*Custom CSS*/
html {width: 100%;}
body {
background-color: #212121;
margin: 0;
color: #F1F1F1;
width: 100%;
}
.clear {
clear: both;
}
.dvb {
width: 100%;
}
.col-1, .col-2, .col-3 {
float:left;
height: 20px;
border-bottom: 3px solid white;
padding-left: 5px;
}
.col-1 {
width: 15%;
}
.col-2 {
width: 63%;
}
.col-3 {
width: 20%;
}
.icon, .aktuell, .forecast, .hum, .temp {
background-color: #212121;
height: 80px;
float: left;
}
.caption, .stop {
padding: 5px 0 0 5px;
font-weight: 800;
}
.stop {
font-size: 20px;
margin-bottom: 5px;
margin-top: 15px;
}
dvb.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DVB - Fahrplan</title>
<link href="css/dvb.css" rel="stylesheet">
</head>
<body>
<div id="placeholder"> </div>
<script src="js/dvb.js"></script>
</body>
</html>