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: 175pt;
	}
	
	.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();
	};
	
	function timeConverter(UNIX_timestamp)
	{
		const d = new Date();
		const now = (d.getTime() + d.getTimezoneOffset()) / 1000;
		var a = new Date(UNIX_timestamp * 1000);
		var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
		var weekdays = ['Su', 'Mo', 'Tu', 'Wed', 'Th', 'Fr', 'Sa'];
		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 = '';
		
		if (date != d.getDate())
		{
			if (UNIX_timestamp - 7 * 24 * 60 * 60 < now)
				time = weekdays[a.getDay()] + ' ';
			else
				time = '' + date + '.' + (a.getMonth() + 1) + '. ';
		}
		time += hour + ':' + (min < 10 ? '0' : '') + min;
		return time;
	}
	
	function epoch()
	{
		var d = new Date();
		if (d.getHours() < 4)
			d.setDate(d.getDate() - 1);
		d.setHours(0);
		d.setMinutes(0);
		d.setSeconds(0);
		return Math.floor(d.getTime() / 1000);
	}
	
	function primarykey(data)
	{
		var key = data['blockref'] + '-';
		key += (data['originaimeddeparturetime'] - epoch()).toString() + '-';
		key += data['visitnumber'];
		return key;
	}
	
	function updateTime(key, time)
	{
		const d = new Date();
		const now = (d.getTime() + d.getTimezoneOffset()) / 1000;
		row = document.getElementById(key);
		timeCell = document.getElementById(key + '-time');
		t0 = parseInt(document.getElementById(key + '-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('https://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'];
				var key = primarykey(data['result'][i]);
				updateTime(key, expecteddeparturetime);
			}
		});
	</script>
</body>
</html>