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
	{
		background: rgba(0, 0, 0, 0.25)
	}
	.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;
	}
	</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>
	<table class='aikataulu service-{{service}}' cellspacing='0'>
	<thead>
		<tr>
			<th class='primary-heading' colspan='3'>
			<span class='primary-heading-symbols'>
			{% if night %}
			&#127769;&nbsp;
			{% endif %}
			{% if service == 'ferry' %}
			⛴
			{% else %}
			&#128653;
			{% endif %}
			</span>
			<span>{{route}} {{description}}</span>
			</th>
		</tr>
		<tr>
			<th class='sarake-aika'>Aika</th>
			<th class='sarake-alue'>Alue</th>
			<th class='sarake-matkapituus'>{{'%.1f' % length}}km</th>
		</tr>
	</thead>
	<tbody>
		{% 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/{{halt['typename']}}.png" height='24' />&nbsp;{{halt['code']}}</a></td>
					<td><a href="../stop/{{halt['id']}}">{{halt['name']}}</a></td>
				</tr>
				{% endfor %}
				</table>
			</td>
		</tr>
		{% endfor %}
	</tbody>
	</table>
</body>
</html>