templates/trip.html

<html>
<head>
	<base href=".." />
	<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'>-->
	<link
	rel="stylesheet"
	href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
	integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
	crossorigin=""
	/>
	<script
		src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
		integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
		crossorigin=""
	></script>
	<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;
	}
	.bus_stop_ref
	{
		padding: 2px;
		border: 1px solid #888;
		background-color: #e0e0e0;
		border-radius: 3px;
	}
	.popup
	{
		font-size: 16pt;
	}
	#mapid { height: 50vh; }
	</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>
	<tr>
	<td colspan="9100">
	<div id="mapid"></div>
	</td>
	</tr>
	</tbody>
	<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>
<script>
var osm = L.tileLayer(
	'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	{
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
		maxZoom: 19,
	}
);
var tiles = {
	"OpenStreetMap (Carto)": osm,
	"MML Peruskartta": L.tileLayer(
		'http://tiles.kartat.kapsi.fi/peruskartta/{z}/{x}/{y}.jpg',
		{
			attribution: 'Map data &copy; Maanmittauslaitos',
			maxZoom: 19,
		}
	),
	"MML Taustakartta": L.tileLayer(
		'http://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg',
		{
			attribution: 'Map data &copy; Maanmittauslaitos',
			maxZoom: 19,
		}
	),
	"MML Ortokuva": L.tileLayer(
		'http://tiles.kartat.kapsi.fi/ortokuva/{z}/{x}/{y}.jpg',
		{
			attribution: 'Map data &copy; Maanmittauslaitos',
			maxZoom: 19,
		}
	),
	"OpenTopoMap": L.tileLayer(
		'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
		{
			attribution: 'Map data &copy; Maanmittauslaitos',
			maxZoom: 18,
		}
	),
}

var route = [{{shape}}];
var mymap = L.map('mapid', {layers: [osm]}).setView([60.45175, 22.26705], 13);
var myIcon = L.icon({
    iconUrl: '/static/favicon.png',
    iconSize: [16, 16],
    iconAnchor: [8, 8],
    popupAnchor: [-3, -76],
});

L.control.layers(tiles).addTo(mymap);
var polyline = L.polyline(route, {
	color: 'black',
	dashArray: [3, 5],
}).addTo(mymap);
// zoom the map to the polyline
mymap.fitBounds(polyline.getBounds());

{% for entry in schedule %}
{% for halt in entry['stops'] %}
marker = L.circleMarker([{{halt["location"]}}], {
	radius: 12,
	color: 'black',
	fillColor: 'yellow',
	fillOpacity: 1,
	title: "{{halt['ref']}} {{halt['name']}}",
	_my_bus_stop_url: "/stop/{{halt['ref']}}",
}).addTo(mymap);
popupmsg = "<span class='popup'><h3><a href='stop/{{halt['ref']}}'><span class='bus_stop_ref'>{{halt['ref']}}</span> {{halt['name']}}</a></h3>";
	
{% if halt['arrival_time'] != halt['departure_time'] %}
	popupmsg += "<p><ul><li>Saapuu: {{halt['arrival_time']}}</li><li>Lähtee: {{halt['departure_time']}}</li></ul></p></span>";
{% else %}
	popupmsg += "<p><ul><li>Pysähtyy: {{halt['arrival_time']}}</li></ul></p></span>";
{% endif %}
marker.bindPopup(popupmsg);
{% endfor %}
{% endfor %}
</script>
</body>
</html>