templates/trip.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' />
	<meta http-equiv='refresh' content='60'>
	<style>
	.sarake-alue
	{
		text-align: left;
	}
	.sarake-aika
	{
		width: 0;
	}
	td.folded table
	{
		display: none;
	}
	td.unfolded a.region-name
	{
		font-weight: bold;
	}
	.nested-schedule td
	{
		margin-left: 0;
		margin-right: 0;
		padding-left: 5px;
		padding-right: 5px;
	}
	.nested-schedule
	{
		border-radius: 10px;
		margin-top: 10px;
	}
	
	.sarake-matkapituus
	{
		text-align: right;
	}
	
	.aikataulu
	{
		margin-top: 30pt;
	}
	</style>
	<script>
	function toggle_fold(id)
	{
		element = document.getElementById(id);
		if (element.className.indexOf(" folded") !== -1)
			element.className = element.className.replace(" folded", "") + " unfolded";
		else
			element.className = element.className.replace(" unfolded", "") + " folded";
	}
	</script>
	<title>{{route}} {{description}}</title>
</head>
<body>
	<h1>
	{% if night %}
	&#127769;&nbsp;
	{% endif %}
	🚍 {{route}} {{description}}</h1>
	<table class='aikataulu' cellspacing='0'>
		<tr>
			<th class='sarake-aika'>Aika</th>
			<th class='sarake-alue'>Alue</th>
			<th class='sarake-matkapituus'>{{'%.1f' % length}}km</th>
		</tr>
		{% for entry in schedule %}
		<tr>
			<td class='sarake-aika' style='vertical-align: top'>{{entry['time']}}</td>
			<td class='sarake-alue folded' id="region-schedule-{{entry['index']}}" colspan='2'>
				<a class="region-name" href="javascript:toggle_fold('region-schedule-{{entry['index']}}')">{{entry['name']}}</a>
				<table class="nested-schedule" cellspacing="0">
				{% for halt in entry['stops'] %}
				<tr>
					<td>{{halt['time']}}</td>
					<td><a href="../stop/{{halt['id']}}"><img src='../static/pysäkki.png' height='24' />&nbsp;{{halt['code']}}</a></td>
					<td><a href="../stop/{{halt['id']}}">{{halt['name']}}</a></td>
				</tr>
				{% endfor %}
				</table>
			</td>
		</tr>
		{% endfor %}
	</table>
</body>
</html>