templates/stop_display.html

<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='30'>
	<style>
	.sarake-määränpää
	{
		text-align: left;
	}
	
	.next-leave
	{
		margin-left: 1vw;
		margin-right: 1vw;
	}
	
	.next-leave td
	{
		height: 12vh;
		vertical-align: middle;
	}
	
	.next-leave-time,
	.next-leave-route
	{
		font-weight: bold;
		font-size: 10vmin;
	}
	
	.next-leave-time
	{
		text-align: left;
	}
	
	.next-leave-route .route-symbol
	{
		border: 0.5vmin solid black;
		border-radius: 100%;
		padding: 8px;
		min-width: 12vmin;
		min-height: 12vmin;
		text-align: center;
		background: #ffd90f;
	} 

	.next-leave, .next-leave table
	{
		width: 100%;
	}
	
	.next-leave-places
	{
		text-align: center;
	}
	
	.next-leave-places li
	{
		list-style: none;
		font-size: 6vmin;
		font-weight: normal;
		float: left;
		padding-left: 10pt;
	}
	
	#other-leaves
	{
		width: 100%;
		position: absolute;
		bottom: 0;
		background: #ccc;
		box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5), inset 0 0 2vw rgba(0, 0, 0, 0.5);
	}
	
	#other-leaves table
	{
		width: 80%;
		margin: auto;
		margin-bottom: 10pt;
		margin-top: 10pt;
	}
	
	#other-leaves table td
	{
		font-size: 4vh;
		height: 5vh;
		text-align: center;
	}
	
	.next-leave-destination
	{
		font-size: 7vh;
		font-weight: bold;
		text-align: left;
	}
	
	.other-leave-time
	{
		width: 30%;
	}
	
	.other-leave-route
	{
		width: 30%;
	}
	
	.other-leave-destination
	{
		width: 40%;
	}

	#stop-name
	{
		width: 100%;
		text-align: center;
	}
	
	h1
	{
		background-color: #ffd90f;
		margin: 0;
		padding-top: 10pt;
		background: #dc9e00;
		background: linear-gradient(to bottom, #ffd90f 0%, #ffd90f 95%, #AA7700 100%);
		color: black;
		vertical-align: middle;
		box-shadow: 0px 0px 1vw rgba(0, 0, 0, 0.5);
	}
	
	h1, h1 span
	{
		font-size: 5vw;
		text-align: center;
		font-weight: bold;
	}
	
	h1 span, h1 img
	{
		vertical-align: middle;
	}
	
	@media screen and (orientation:landscape)
	{
		h1
		{
			height: 12vh;
		}
		
		h1 img
		{
			height: 10vh;
			float: left;
			margin-left: 1%;
		}
		
		#stop-name
		{
			margin-top: 5pt;
			font-size: 8vh;
		}
	}
	
	@media screen and (orientation:portrait)
	{
		h1 img
		{
			height: 10vh;
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
		
		#stop-name
		{
			font-size: 6vw;
		}
	}
	</style>
	<script>
	num_visible_leaves = 3;
	num_imminent_leaves = {{num_imminent_leaves}};
	var imminent_leave_cycle = [];
	var other_leave_cycle = [];
	var max_leaves;
	var current_imminent_leave = 0;
	var current_other_leave = 0;
	var initialized = false;
	function cycle_leaves()
	{
		if (initialized == false)
		{
			for (max_leaves = 0;; max_leaves += 1)
			{
				var i = max_leaves;
				var tr = document.getElementById('leave-' + i);
				if (tr)
				{
					if (i == 0 || i == num_imminent_leaves)
						tr.style.display = 'table-row-group';
					else if (i < num_imminent_leaves)
						imminent_leave_cycle.push(tr);
					else if (i >= num_imminent_leaves + 1)
						other_leave_cycle.push(tr);
				}
				else
					break;
			}
			initialized = true;
			current_imminent_leave = imminent_leave_cycle.length - 1;
			current_other_leave = other_leave_cycle.length - 1;
		}
		if (imminent_leave_cycle)
		{
			current_imminent_leave = (current_imminent_leave + 1) % imminent_leave_cycle.length;
			for (var i = 0; i < imminent_leave_cycle.length; i += 1)
				imminent_leave_cycle[i].style.display = (i == current_imminent_leave) ? 'table-row-group' : 'none';
		}
		if (other_leave_cycle)
		{
			current_other_leave = (current_other_leave + 1) % other_leave_cycle.length;
			for (var i = 0; i < other_leave_cycle.length; i += 1)
				other_leave_cycle[i].style.display = (i == current_other_leave) ? 'table-row-group' : 'none';
		}
		setTimeout(cycle_leaves, 6000);
	}
	</script>
</head>
<body onload='cycle_leaves()'>
	<h1><img src="../static/pysäkki.png" height="128" /><span id='stop-name'>{{ref}} {{name}}</span></h1>
	<div class='next-leave'>
	{% for schedule_entry in schedule[:num_imminent_leaves] %}
	<table>
	<tr>
	<td class='next-leave-time'>
	{% if schedule_entry['imminent'] %}
	<span class='imminent-leave'>{{schedule_entry['time']}}</span>&#8203;
	{% else %}
	{{schedule_entry['time']}}&#8203;
	{% endif %}
	</td>
	<td class='next-leave-route'>
		<span class='route-symbol'>{{schedule_entry['route']}}</span>
	</td>
	</tr>
	
	<tr>
	<td colspan="2" class='next-leave-destination'>{{schedule_entry['sign']['destination']}}</td>
	</tr>
	
	<tr>
	<td>
	<ul class="next-leave-places">
	{% for entry in schedule_entry['sign']['via'] %}
		<li>{{entry}}</li>
	{% endfor %}
	</ul>
	</td>
	</tr>
	</table>
	{% endfor %}
	</div>
	{% if schedule[num_imminent_leaves] %}
	<div id='other-leaves'>
	<table cellspacing="0">
		{% for halt in schedule[num_imminent_leaves:num_imminent_leaves + 2] %}
		<tr id="leave-{{halt['index']}}" style='display: none'>
			<td class='other-leave-time'>{{halt['time']}}</td>
			<td class='other-leave-route'>{{halt['route']}}</td>
			<td class='other-leave-destination'>{{halt['sign']['destination']}}</td>
		</tr>
		{% endfor %}
	</table>
	</div>
	{% endif %}
</body>
</html>