2018-12-31 20:26:36 +11:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2018-12-31 20:45:40 +11:00
< title > Virtual Metro< / title >
2018-12-31 20:26:36 +11:00
< style type = "text/css" >
#mainsvg {
width: 100vw;
height: 100vh;
max-width: 100vw;
max-height: 100vh;
}
2019-01-11 13:25:25 +11:00
#topbar, #botbar {
2019-01-01 02:32:17 +11:00
position: absolute;
z-index: 999;
font-size: small;
}
2019-01-11 13:25:25 +11:00
#topbar {
left: 0;
top: 0;
}
#botbar {
right: 0;
bottom: 0;
text-align: right;
}
2018-12-31 20:26:36 +11:00
body, html {
2019-01-01 02:32:17 +11:00
color: #ccc;
2018-12-31 20:26:36 +11:00
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
}
2019-01-01 02:32:17 +11:00
a, a:active, a:visited {
color: #99f;
}
2018-12-31 20:26:36 +11:00
< / style >
< / head >
< body >
2019-01-01 14:41:31 +11:00
< div id = "topbar" > Stop < span id = "stopinfo" > ?< / span > [< a href = "stations" > change< / a > ] Platform < span id = "platinfo" > ?< / span > [< a href = "#" onclick = "return changePlatform();" > change< / a > ] Style < span id = "styleinfo" > ?< / span > [change: < a href = "#" onclick = "return changeStyle(1);" > 1< / a > , < a href = "#" onclick = "return changeStyle(2);" > 2< / a > ]< / div >
2019-01-11 22:40:03 +11:00
< div id = "botbar" > By RunasSudo · AGPLv3 · < a href = "https://gitlab.com/RunasSudo/virtual-metro" > Source Code< / a > · Data from PTV licensed under CC BY-SA 4.0< / div >
2018-12-31 20:26:36 +11:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/nunjucks/3.0.1/nunjucks.min.js" > < / script >
< script >
2019-01-01 02:32:17 +11:00
function getQueryVariable(variable, def) {
var vars = window.location.search.substring(1).split("&");
for (var i = 0; i < vars.length ; i + + ) {
var bits = vars[i].split("=");
if (decodeURIComponent(bits[0]) == variable) {
return decodeURIComponent(bits[1]);
}
}
return def;
}
var stop_id = parseInt(getQueryVariable("stop_id", 1099));
var plat_id = parseInt(getQueryVariable("plat_id", 1));
2019-01-01 14:41:31 +11:00
var template_id = parseInt(getQueryVariable("template_id", 1));
document.getElementById("stopinfo").innerText = stop_id;
document.getElementById("platinfo").innerText = plat_id;
document.getElementById("styleinfo").innerText = template_id;
2019-01-01 02:32:17 +11:00
2019-01-01 13:15:14 +11:00
var svg = null;
var svg_time = null;
var template = null;
var time_offset = null;
2018-12-31 20:26:36 +11:00
function start() {
2019-01-01 13:15:14 +11:00
svg = document.getElementById("mainsvg").getSVGDocument().querySelector("svg");
template = svg.innerHTML;
2018-12-31 20:26:36 +11:00
2018-12-31 20:45:40 +11:00
svg.innerHTML = nunjucks.renderString(template, {"dest": "Loading..."});
2018-12-31 20:26:36 +11:00
2019-01-01 13:15:14 +11:00
tickTrains();
window.setInterval(tickTrains, 30000);
}
function tickTrains() {
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
var result = JSON.parse(xhr.responseText);
svg.innerHTML = nunjucks.renderString(template, result);
svg_time = document.getElementById("mainsvg").getSVGDocument().querySelector("#time tspan");
document.getElementById("stopinfo").innerText = stop_id + " (" + result.stop_name + ")";
if (time_offset === null) {
time_offset = result.time_offset;
window.setInterval(tickTime, 1000);
}
2019-01-01 13:28:42 +11:00
tickTime();
2019-01-01 13:15:14 +11:00
});
xhr.open("GET", "latest?stop_id=" + stop_id + "& plat_id=" + plat_id);
xhr.send();
}
function tickTime() {
var time = new Date(new Date().getTime() + time_offset * 1000);
var hour = time.getUTCHours() % 12;
if (hour === 0) hour = 12;
var minute = time.getUTCMinutes();
if (minute < 10 ) minute = "0" + minute ;
var second = time.getUTCSeconds();
if (second < 10 ) second = "0" + second ;
svg_time.innerHTML = hour + ":" + minute + ":" + second;
2018-12-31 20:26:36 +11:00
}
2019-01-01 02:32:17 +11:00
function changePlatform() {
var new_plat = parseInt(window.prompt("Enter new platform number:", plat_id));
2019-01-01 14:41:31 +11:00
window.location = "?stop_id=" + stop_id + "& plat_id=" + new_plat + "& template_id=" + template_id;
2019-01-01 02:32:17 +11:00
return false;
}
2019-01-01 14:41:31 +11:00
function changeStyle(new_style) {
window.location = "?stop_id=" + stop_id + "& plat_id=" + plat_id + "& template_id=" + new_style;
return false;
}
// Create SVG
var svg_object = document.createElement("object");
svg_object.setAttribute("id", "mainsvg");
svg_object.setAttribute("data", "static/template" + template_id + ".svg");
svg_object.setAttribute("type", "image/svg+xml");
svg_object.setAttribute("onload", "start();");
2019-01-11 13:25:25 +11:00
document.querySelector("body").insertBefore(svg_object, document.querySelector("#botbar"));
2019-01-01 02:32:17 +11:00
< / script >
2018-12-31 20:26:36 +11:00
< / body >
< / html >
