From 733fe2d853cc2aa4f759d2454171e17409551dfb Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
Date: Sat, 16 Nov 2019 15:57:09 +0100
Subject: map: add legend, link to history map from history page

---
 templates/_map.html.ep        | 48 +++++++++++++++++++++++++++++++++++++++++++
 templates/history.html.ep     |  7 +++++++
 templates/history_map.html.ep |  7 +++++++
 templates/map.html.ep         | 41 ------------------------------------
 4 files changed, 62 insertions(+), 41 deletions(-)
 create mode 100644 templates/_map.html.ep
 create mode 100644 templates/history_map.html.ep
 delete mode 100644 templates/map.html.ep

(limited to 'templates')

diff --git a/templates/_map.html.ep b/templates/_map.html.ep
new file mode 100644
index 0000000..cceec01
--- /dev/null
+++ b/templates/_map.html.ep
@@ -0,0 +1,48 @@
+<div class="row">
+	<div class="col s12">
+		<div id="map" style="height: 500px;">
+		</div>
+	</div>
+</div>
+
+<div class="row">
+	<div class="col s12">
+		<span style="color: #f03;">●</span> Ein-/Ausstiegsstation<br/>
+		<span style="color: #f09;">—</span> Luftlinie zwischen Unterwegshalten
+	</div>
+</div>
+
+<script>
+var map = L.map('map').setView([51.306, 9.712], 6);
+
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+var stations = [
+% for my $station ( @{stash('station_coordinates') // [] } ) {
+[[<%= $station->[0][0] %>,<%= $station->[0][1] %>],'<%= $station->[1] %>'],
+% }
+];
+
+var routes = [
+% for my $pair ( @{stash('station_pairs') // [] } ) {
+[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]],
+% }
+];
+
+for (var station_id in stations) {
+	L.circle(stations[station_id][0], {
+		color: '#f03',
+		fillColor: '#f03',
+		fillOpacity: 0.5,
+		radius: 250
+	}).bindPopup(stations[station_id][1]).addTo(map);
+}
+
+var pl = L.polyline(routes, {color: '#f09', opacity: 0.5}).addTo(map);
+if (routes.length) {
+	map.fitBounds(pl.getBounds());
+}
+
+</script>
diff --git a/templates/history.html.ep b/templates/history.html.ep
index 607a356..93fa9f7 100644
--- a/templates/history.html.ep
+++ b/templates/history.html.ep
@@ -27,6 +27,13 @@
 	</div>
 % }
 
+<h2>Auswertungen</h2>
+<div class="row">
+	<div class="col s12 m12 l12 center-align">
+		<a href="/history/map" class="waves-effect waves-light btn"><i class="material-icons left">map</i> Fahrtenkarte</a>
+	</div>
+</div>
+
 <h2>Ausfälle und Verspätungen</h2>
 <div class="row">
 	<div class="col s12 m12 l5 center-align">
diff --git a/templates/history_map.html.ep b/templates/history_map.html.ep
new file mode 100644
index 0000000..808b033
--- /dev/null
+++ b/templates/history_map.html.ep
@@ -0,0 +1,7 @@
+<div class="row">
+	<div class="col s12">
+		Karte aller bisherigen Zugfahrten:
+	</div>
+</div>
+
+%= include '_map', station_coordinates => $station_coordinates, station_pairs => $station_pairs
diff --git a/templates/map.html.ep b/templates/map.html.ep
deleted file mode 100644
index 707b28e..0000000
--- a/templates/map.html.ep
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="row">
-	<div class="col s12">
-		<div id="map" style="height: 500px;">
-		</div>
-	</div>
-</div>
-
-<script>
-var map = L.map('map').setView([51.306, 9.712], 6);
-
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-}).addTo(map);
-
-var stations = [
-% for my $station ( @{stash('station_coordinates') // [] } ) {
-[[<%= $station->[0][0] %>,<%= $station->[0][1] %>],'<%= $station->[1] %>'],
-% }
-];
-
-var routes = [
-% for my $pair ( @{stash('station_pairs') // [] } ) {
-[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]],
-% }
-];
-
-for (var station_id in stations) {
-	L.circle(stations[station_id][0], {
-		color: '#f03',
-		fillColor: '#f03',
-		fillOpacity: 0.5,
-		radius: 250
-	}).bindPopup(stations[station_id][1]).addTo(map);
-}
-
-var pl = L.polyline(routes, {color: '#f09', opacity: 0.5}).addTo(map);
-if (routes.length) {
-	map.fitBounds(pl.getBounds());
-}
-
-</script>
-- 
cgit v1.2.3