templates/stop.html

{% from "macros.html" import route_rep %}
<html>
<head>
	<link rel="icon" type="image/png" href="../static/favicon.png" />
	<link rel="stylesheet" type="text/css" href="../static/style.css" />
	<meta charset='UTF-8' />
	<title>{{name}}</title>
	<meta http-equiv='refresh' content='60'>
	<style>
	.sarake-määränpää
	{
		text-align: left;
	}
	
	.dataentry
	{
		display: none;
	}
	
	.sarake-aika
	{
		width: 150pt;
	}
	
	.gone
	{
		background-color: #666;
		color: silver;
		font-style: italic;
		display: none;
	}
	
	tbody tr:nth-child(even).gone
	{
		background-color: #585858;
	}
	</style>
	<script>
	var getJSON = function(url, callback) {
		var xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		xhr.responseType = 'json';
		xhr.onload = function() {
			var status = xhr.status;
			if (status === 200) {
				callback(xhr.response);
			}
		};
		xhr.send();
	};
	
	var getUuid = function(blockref, originaimeddeparturetime, data, callback) {
		var xhr = new XMLHttpRequest();
		var url = "../find_halt/{{ref}}/" + blockref + "/" + originaimeddeparturetime.toString();
		xhr.open('GET', url, true);
		xhr.responseType = 'json';
		xhr.onload = function() {
			var status = xhr.status;
			if (status === 200) {
				callback(xhr.response['id'], data);
			}
		};
		xhr.send();
	};
	
	function timeConverter(UNIX_timestamp){
		var a = new Date(UNIX_timestamp * 1000);
		var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
		var year = a.getFullYear();
		var month = months[a.getMonth()];
		var date = a.getDate();
		var hour = a.getHours();
		var min = a.getMinutes();
		var sec = a.getSeconds();
		var time = hour + ':' + (min < 10 ? '0' : '') + min;
		return time;
	}
	
	function updateTime(uuid, time) {
		const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
		const d = new Date();
		const now = (d.getTime() + d.getTimezoneOffset()) / 1000;
		row = document.getElementById(uuid);
		timeCell = document.getElementById(uuid + '-time');
		t0 = parseInt(document.getElementById(uuid + '-stamp').innerHTML);
		if (Math.abs(time - t0) > 90) {
			oldTime = timeConverter(t0);
			newTime = timeConverter(time);
			timeCell.innerHTML = '<s style="color:gray">' + oldTime + '</s> ⟶ <b>' + newTime + '</b>';
		}
		if (time + 15 > now)
			row.classList.remove('gone');
		else
			row.classList.add('gone');
	}
	</script>
</head>
<body>
	<table class='aikataulu service-{{service}}' cellspacing="0">
	<thead>
		<tr>
			<th colspan='4' class='primary-heading'>
			<span><img src="../static/{{typename}}.png" height="96" /> {{name}}</span>
			</th>
		</tr>
		<tr class='headings'>
			<th class='sarake-aika'>{{tr('time', 'headings')}}</th>
			<th class='sarake-linja'>{{tr('route', 'headings')}}</th>
			<th class='sarake-määränpää'>{{tr('destination', 'headings')}}</th>
			<th>
				<span class='actions'>
				<a class="pysäkki-sijainti" href="{{link_to_map}}" target="_blank">📌</a>
				{% if cluster %}
				<a href="../stop_cluster/{{cluster}}">🞊</a>
				{% endif %}
				<a href='../stop_week/{{ref}}'>&#9636;</a>
			</th>
		</tr>
	</thead>
	<tbody id='departures-table'>
		{% for halt in schedule %}
		<tr class="{% if halt['night'] %} yö {% endif %}{% if halt['gone'] %}gone{% endif %}" id="{{halt['id']}}">
			<td class='sarake-aika'>
				<!--
				{% if halt['imminent'] %}
				<span class='imminent-leave'>●</span>
				{% endif %}
				-->
				<span id="{{halt['id']}}-time"></span>
				<span class='dataentry' id="{{halt['id']}}-stamp">{{halt['timestamp']}}</span>
				<!--{{halt['time']}}--></td>
			<td class='sarake-linja linja'>
				<a href="../trip/{{halt['trip']}}">{{route_rep(halt['route-splice'])}}</a>
			</td>
			<td class='sarake-määränpää' colspan='2'>
				<a href="../trip/{{halt['trip']}}">{{halt['sign']}}</a>
			</td>
		</tr>
		{% endfor %}
	</tbody>
	</table>
	<script>
		var list = document.getElementById('departures-table').children;
		for (var i = 0; i < list.length; i += 1) {
			id = list[i].id;
			timestamp = parseInt(document.getElementById(id + '-stamp').innerHTML);
			document.getElementById(id + '-time').innerHTML = timeConverter(timestamp);
		}
		//updateTime('fbf6f367-069c-4f8d-831b-bd36cd643f3b', 1544092500);
		getJSON('http://data.foli.fi/siri/sm/{{ref}}', function(data){
			var arrayLength = data['result'].length;
			for (var i = 0; i < arrayLength; i++) {
				var blockref = data['result'][i]['blockref'];
				var originaimeddeparturetime = data['result'][i]['originaimeddeparturetime'];
				var expecteddeparturetime = data['result'][i]['expecteddeparturetime'];
				getUuid(blockref, originaimeddeparturetime, expecteddeparturetime, function(id, expecteddeparturetime) {
					updateTime(id, expecteddeparturetime);
				});
			}
		});
	</script>
</body>
</html>