From 7886d019dc9da733167d56e826622fe8f34ac092 Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Fri, 13 Nov 2020 21:42:59 +0000
Subject: [PATCH] [map] Add previous/next trip indicators

---
 map.js     |   65 ++++++++++++++++++++++++++++----
 lang_en.js |    3 +
 lang_pl.js |    3 +
 map.css    |   19 +++++++++
 4 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/lang_en.js b/lang_en.js
index 79c8b42..8b94490 100644
--- a/lang_en.js
+++ b/lang_en.js
@@ -67,6 +67,9 @@
 	departures_for_stop: 'Click for stop departures (and not only this stop point).',
 	departures_for_trams: 'Switch to tram departures.',
 	departures_for_buses: 'Switch to bus departures.',
+	trip_previous: '\u00AB previous',
+	trip_current: 'current',
+	trip_next: 'next \u00BB',
 	
 	tram_type_pattern: '$num $type ($floor)',
 	high_floor: 'high floor',
diff --git a/lang_pl.js b/lang_pl.js
index a51190f..08ca6b1 100644
--- a/lang_pl.js
+++ b/lang_pl.js
@@ -67,6 +67,9 @@
 	departures_for_stop: 'Kliknij, by zobaczyć odjazdy dla całego przystanku (a nie tylko peronu).',
 	departures_for_trams: 'Przełącz na odjazdy tramwajów.',
 	departures_for_buses: 'Przełącz na odjazdy autobusów.',
+	trip_previous: '\u00AB poprzedni',
+	trip_current: 'aktualny',
+	trip_next: 'następny \u00BB',
 	
 	tram_type_pattern: '$num $type ($floor)',
 	high_floor: 'wysokopodłogowy',
diff --git a/map.css b/map.css
index aa9b4de..c7ea862 100644
--- a/map.css
+++ b/map.css
@@ -144,6 +144,25 @@
 	float: right;
 }
 
+.post-nav {
+	display: flex;
+	flex-wrap: wrap;
+}
+.post-nav > * {
+	flex-basis: 0;
+	flex-grow: 1;
+}
+
+.left {
+	text-align: left;
+}
+.center {
+	text-align: center;
+}
+.right {
+	text-align: right;
+}
+
 .icon, .icon-loc, .icon-pin, .icon-zoom {
 	display: inline-block;
 	height: 1em;
diff --git a/map.js b/map.js
index 330093a..223edd5 100644
--- a/map.js
+++ b/map.js
@@ -545,7 +545,7 @@
 	return path_xhr;
 }
 
-function vehicleTable(feature, table) {
+function vehicleTable(feature, table, post, trip) {
 	if(feature_xhr) feature_xhr.abort();
 	if(feature_timer) clearTimeout(feature_timer);
 	
@@ -554,9 +554,13 @@
 	var featureSource = featureDiscriminator.substr(1, 1);
 	var featureStatus = feature.get('status');
 	
+	var isTripCurrent = !trip || feature.get('trip') == trip;
+	
 	feature_xhr = $.get(
-		api_url + '/trip/?type=' + featureSource + '&id=' + feature.get('trip')
-	).done(function(data) {
+		api_url + '/trip/?type=' + featureSource + '&id=' + (trip ? trip : feature.get('trip'))
+	).done(function(results) {
+		var data = results['data'];
+		
 		deleteChildren(table);
 		
 		var tr;
@@ -568,10 +572,12 @@
 			
 			stopsToMark.push(data[i].stop);
 			
-			if(data[i].seq < feature.get('seq')) {
-				tr.className = 'active';
-			} else if(data[i].seq == feature.get('seq') && featureStatus < 2) {
-				tr.className = 'success';
+			if(isTripCurrent) {
+				if(data[i].seq < feature.get('seq')) {
+					tr.className = 'active';
+				} else if(data[i].seq == feature.get('seq') && featureStatus < 2) {
+					tr.className = 'success';
+				}
 			}
 			table.appendChild(tr);
 		}
@@ -584,9 +590,42 @@
 			tr.className = 'active';
 		}
 		
+		deleteChildren(post);
+		
+		if(results['prev']) {
+			tr = addElementWithText(post, 'a', lang.trip_previous);
+			tr.className = 'left';
+			tr.onclick = function() {
+				vehicleTable(feature, table, post, results['prev']);
+			};
+		} else {
+			tr = document.createElement('span');
+			post.appendChild(tr);
+		}
+		if(!isTripCurrent) {
+			tr = addElementWithText(post, 'a', lang.trip_current);
+			tr.className = 'center';
+			tr.onclick = function() {
+				vehicleTable(feature, table, post);
+			};
+		} else {
+			tr = document.createElement('span');
+			post.appendChild(tr);
+		}
+		if(results['next']) {
+			tr = addElementWithText(post, 'a', lang.trip_next);
+			tr.className = 'right';
+			tr.onclick = function() {
+				vehicleTable(feature, table, post, results['next']);
+			};
+		} else {
+			tr = document.createElement('span');
+			post.appendChild(tr);
+		}
+		
 		markStops(stopsToMark, featureSource, true);
 		
-		feature_timer = setTimeout(function() { vehicleTable(feature, table); }, api_refresh);
+		feature_timer = setTimeout(function() { vehicleTable(feature, table, post); }, api_refresh);
 	}).fail(fail_ajax_popup);
 	return feature_xhr;
 }
@@ -661,6 +700,7 @@
 	var tbody = document.createElement('tbody');
 	table.appendChild(thead);
 	table.appendChild(tbody);
+	var post;
 	
 	var tabular_data = true;
 	
@@ -690,7 +730,10 @@
 		addElementWithText(thead, 'th', lang.header_time);
 		addElementWithText(thead, 'th', lang.header_stop);
 		
-		vehicleTable(feature, tbody);
+		post = document.createElement('div');
+		post.className = 'post-nav';
+		
+		vehicleTable(feature, tbody, post);
 		//vehiclePath(feature);
 	}
 	// Stop or stop point
@@ -766,6 +809,10 @@
 		div.appendChild(table);
 	}
 	
+	if(post) {
+		div.appendChild(post);
+	}
+	
 	showOnMapFunction();
 	
 	panel.show(div, function() {

--
Gitblit v1.9.1