From d80109132d362199e6d9e370d5f54bd0d6554126 Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Thu, 29 Jul 2021 22:40:29 +0000
Subject: [PATCH] [map] Allow zero-prefixed stop identifiers (fix for bus stops)

---
 map.js |  756 ++++++++++++++++++++++++++++++++++-----------------------
 1 files changed, 445 insertions(+), 311 deletions(-)

diff --git a/map.js b/map.js
index 6f628c9..456edaa 100644
--- a/map.js
+++ b/map.js
@@ -1,7 +1,7 @@
 'use strict';
 
-var ttss_refresh = 10000; // 10 seconds
-var ttss_position_type = 'RAW';
+var api_refresh = 10000; // 10 seconds
+var api_url = 'https://api.ttss.pl';
 
 var geolocation = null;
 var geolocation_set = 0;
@@ -11,16 +11,9 @@
 var geolocation_source = null;
 var geolocation_layer = null;
 
-var vehicles_xhr = {};
-var vehicles_timer = {};
-var vehicles_last_update = {};
-var vehicles_source = {};
-var vehicles_layer = {};
+var vehicles = {};
+var hash = null;
 
-var vehicles_info = {};
-
-var stops_xhr = null;
-var stops_ignored = ['131', '744', '1263', '3039'];
 var stops_style = {
 	'sb': new ol.style.Style({
 		image: new ol.style.Circle({
@@ -59,7 +52,6 @@
 var stop_selected_source = null;
 var stop_selected_layer = null;
 
-var feature_clicked = null;
 var feature_xhr = null;
 var feature_timer = null;
 var path_xhr = null;
@@ -74,8 +66,6 @@
 
 var fail_element = document.getElementById('fail');
 var fail_text = document.querySelector('#fail span');
-
-var ignore_hashchange = false;
 
 
 function Panel(element) {
@@ -128,7 +118,9 @@
 	fail: function(message) {
 		addParaWithText(this._content, message).className = 'error';
 	},
-	show: function(contents, closeCallback) {
+	show: function(contents, closeCallback, hashValue) {
+		hash.set(hashValue ? hashValue : '');
+		
 		this._runCallback();
 		this.closeCallback = closeCallback;
 		
@@ -196,8 +188,8 @@
 		});
 		
 		ttss_types.forEach(function(ttss_type) {
-			vehicles_source[ttss_type].forEachFeature(function(feature) {
-				if(feature.get('vehicle_type') && feature.get('vehicle_type').num.indexOf(query) > -1) {
+			vehicles[ttss_type].source.forEachFeature(function(feature) {
+				if(feature.get('type') && feature.get('type').num.indexOf(query) > -1) {
 					features.push(feature);
 				}
 			});
@@ -212,10 +204,7 @@
 		this.timeout = setTimeout(this.find.bind(this), 100);
 	},
 	open: function(panel) {
-		ignore_hashchange = true;
-		window.location.hash = '#!f';
-		
-		panel.show(this.div, this.close.bind(this));
+		panel.show(this.div, this.close.bind(this), 'f');
 		this.input.focus();
 	},
 	close: function() {
@@ -223,6 +212,207 @@
 	},
 };
 
+function Vehicles(prefix) {
+	this.prefix = prefix;
+	this.source = new ol.source.Vector({
+		features: [],
+	});
+	this.layer = new ol.layer.Vector({
+		source: this.source,
+	});
+}
+Vehicles.prototype = {
+	prefix: '',
+	
+	layer: null,
+	source: null,
+	
+	lastUpdate: 0,
+	xhr: null,
+	es: null,
+	
+	selectedFeatureId: null,
+	deselectCallback: null,
+	
+	style: function(feature, clicked) {
+		var color_type = 'black';
+		
+		var vehicleType = feature.get('type');
+		if(vehicleType) {
+			switch(vehicleType.low) {
+				case 0:
+					color_type = 'orange';
+				break;
+				case 1:
+				case 2:
+					color_type = 'green';
+				break;
+			}
+		}
+		
+		var fill = '#B70';
+		if(this.prefix === 'b') {
+			fill = '#05B';
+		}
+		if(clicked) {
+			fill = '#922';
+		}
+		
+		var image = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:3"/></svg>';
+		
+		feature.setStyle(new ol.style.Style({
+			image: new ol.style.Icon({
+				src: 'data:image/svg+xml;base64,' + btoa(image),
+				imgSize: [20,30],
+				rotation: Math.PI * feature.get('angle') / 180.0,
+			}),
+			text: new ol.style.Text({
+				font: 'bold 10px sans-serif',
+				text: feature.get('line'),
+				fill: new ol.style.Fill({color: 'white'}),
+			}),
+		}));
+	},
+	select: function(feature) {
+		if(feature instanceof ol.Feature) {
+			feature = feature.getId();
+		}
+		feature = this.source.getFeatureById(feature);
+		if(!feature) {
+			this.deselect();
+			return;
+		}
+		this.style(feature, true);
+		
+		this.selectedFeatureId = feature.getId();
+	},
+	deselect: function() {
+		if(!this.selectedFeatureId) return false;
+		var feature = this.source.getFeatureById(this.selectedFeatureId);
+		this.style(feature);
+		this.selectedFeatureId = null;
+	},
+
+	typesUpdated: function() {
+		this.source.forEachFeature(function (feature) {
+			this.style(feature);
+		}.bind(this));
+	},
+
+	_newFeature: function(id, data) {
+		var feature = new ol.Feature(data);
+		feature.set('_', 'v' + this.prefix);
+		feature.setId(id);
+		feature.setGeometry(getGeometryFeature(feature));
+		this.style(feature);
+		return feature;
+	},
+	_updateFeature: function(feature, vehicle) {
+		Object.keys(vehicle).forEach(function (key) {
+			feature.set(key, deepMerge(feature.get(key), vehicle[key]));
+			if(key === 'lon' || key === 'lat') {
+				feature.setGeometry(getGeometryFeature(feature));
+			} else if(key === 'angle') {
+				feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.angle ? vehicle.angle : 0) / 180.0);
+			} else if(key === 'line') {
+				// TODO: Special directions
+				feature.getStyle().getText().setText(vehicle.line);
+			}
+		});
+	},
+	_removeFeature: function(feature) {
+		if(!feature) return;
+		if(this.selectedFeatureId === feature.getId()) {
+			this.deselect();
+		}
+		this.source.removeFeature(feature);
+	},
+	loadFullData: function(data) {
+		var self = this;
+		var features = [];
+		for(var id in data) {
+			var feature = this.source.getFeatureById(id);
+			if(feature) {
+				this._updateFeature(feature, data[id]);
+			} else {
+				features.push(this._newFeature(id, data[id]));
+			}
+		}
+		this.source.addFeatures(features);
+		this.source.forEachFeature(function(feature) {
+			if(!data[feature.getId()]) {
+				self._removeFeature(feature);
+			}
+		});
+		
+		if(this.selectedFeatureId) {
+			this.select(this.selectedFeatureId);
+		}
+	},
+	loadDiffData: function(data) {
+		for(var id in data) {
+			var feature = this.source.getFeatureById(id);
+			var vehicle = data[id];
+			
+			if(vehicle === null) {
+				this._removeFeature(feature);
+			} else if(feature) {
+				this._updateFeature(feature, vehicle);
+			} else {
+				this.source.addFeature(this._newFeature(id, data[id]));
+			}
+		}
+	},
+	
+	fetch: function() {
+		var self = this;
+		var result = this.fetchXhr();
+		
+		// TODO: updates (EventSource)
+		// TODO: error ahandling (reconnect)
+		// TODO: error handling (indicator)
+		
+		return result;
+	},
+	fetchXhr: function() {
+		var self = this;
+		this.xhr = $.get(
+			api_url + '/positions/?type=' + this.prefix + '&last=' + this.lastUpdate
+		).done(function(data) {
+			try {
+				if(data['date'] < self.lastUpdate) {
+					console.log('Data older than lastUpdate!');
+				}
+				if(data['type'] == 'full') {
+					self.loadFullData(data['pos']);
+				} else {
+					self.loadDiffData(data['pos']);
+				}
+				self.lastUpdate = data['date'];
+				setTimeout(self.fetchXhr.bind(self), api_refresh);
+			} catch(e) {
+				console.log(e);
+				throw e;
+			}
+		}).fail(this.failXhr.bind(this));
+		return this.xhr;
+	},
+	
+	failXhr: function(result) {
+		// abort() is not a failure
+		if(result.readyState === 0) return;
+		
+		if(result.status === 0) {
+			fail(lang.error_request_failed_connectivity, result);
+		} else if(result.status === 304) {
+			fail(lang.error_request_failed_no_data, result);
+		} else if(result.statusText) {
+			fail(lang.error_request_failed_status.replace('$status', result.statusText), result);
+		} else {
+			fail(lang.error_request_failed, result);
+		}
+	},
+};
 
 function fail(msg) {
 	setText(fail_text, msg);
@@ -250,52 +440,20 @@
 	fail_ajax_generic(data, panel.fail.bind(panel));
 }
 
+function getGeometryFeature(feature) {
+	return getGeometryPair([feature.get('lon'), feature.get('lat')]);
+}
+function getGeometryPair(pair) {
+	return new ol.geom.Point(ol.proj.fromLonLat(pair));
+}
 function getGeometry(object) {
-	return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0]));
+	return getGeometryPair([object.longitude / 3600000.0, object.latitude / 3600000.0]);
 }
 
-function styleVehicle(vehicle, selected) {
-	var color_type = 'black';
-	if(vehicle.get('vehicle_type')) {
-		switch(vehicle.get('vehicle_type').low) {
-			case 0:
-				color_type = 'orange';
-			break;
-			case 1:
-			case 2:
-				color_type = 'green';
-			break;
-		}
-	}
-	
-	var fill = '#B70';
-	if(vehicle.getId().startsWith('b')) {
-		fill = '#05B';
-	}
-	if(selected) {
-		fill = '#922';
-	}
-	
-	var image = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:3"/></svg>';
-	
-	vehicle.setStyle(new ol.style.Style({
-		image: new ol.style.Icon({
-			src: 'data:image/svg+xml;base64,' + btoa(image),
-			imgSize: [20,30],
-			rotation: Math.PI * parseFloat(vehicle.get('heading') ? vehicle.get('heading') : 0) / 180.0,
-		}),
-		text: new ol.style.Text({
-			font: 'bold 10px sans-serif',
-			text: vehicle.get('line'),
-			fill: new ol.style.Fill({color: 'white'}),
-		}),
-	}));
-}
-
-function markStops(stops, ttss_type, routeStyle) {
+function markStops(stops, featureSource, routeStyle) {
 	stop_selected_source.clear();
 	
-	var style = stops_layer['s' + ttss_type].getStyle().clone();
+	var style = stops_layer['s' + featureSource].getStyle().clone();
 	
 	if(routeStyle) {
 		style.getImage().setRadius(5);
@@ -312,8 +470,7 @@
 		if(stops[i].getId) {
 			feature = stops[i];
 		} else {
-			prefix = stops[i].substr(0,2);
-			feature = stops_source[prefix].getFeatureById(stops[i]);
+			feature = stops_source['s' + featureSource].getFeatureById(stops[i]);
 		}
 		if(feature) {
 			stop_selected_source.addFeature(feature);
@@ -326,105 +483,35 @@
 function unstyleSelectedFeatures() {
 	stop_selected_source.clear();
 	route_source.clear();
-	if(feature_clicked && ttss_types.includes(feature_clicked.getId().substr(0, 1))) {
-		styleVehicle(feature_clicked);
-	}
-}
-
-function updateVehicles(prefix) {
-	if(vehicles_timer[prefix]) clearTimeout(vehicles_timer[prefix]);
-	if(vehicles_xhr[prefix]) vehicles_xhr[prefix].abort();
-	vehicles_xhr[prefix] = $.get(
-		ttss_urls[prefix] + '/geoserviceDispatcher/services/vehicleinfo/vehicles'
-			+ '?positionType=' + ttss_position_type
-			+ '&colorType=ROUTE_BASED'
-			+ '&lastUpdate=' + encodeURIComponent(vehicles_last_update[prefix])
-	).done(function(data) {
-		vehicles_last_update[prefix] = data.lastUpdate;
-		
-		for(var i = 0; i < data.vehicles.length; i++) {
-			var vehicle = data.vehicles[i];
-			
-			var vehicle_feature = vehicles_source[prefix].getFeatureById(prefix + vehicle.id);
-			if(vehicle.isDeleted || !vehicle.latitude || !vehicle.longitude) {
-				if(vehicle_feature) {
-					vehicles_source[prefix].removeFeature(vehicle_feature);
-					if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) {
-						panel.close();
-					}
-				}
-				continue;
-			}
-			
-			var vehicle_name_space = vehicle.name.indexOf(' ');
-			vehicle.line = vehicle.name.substr(0, vehicle_name_space);
-			vehicle.direction = normalizeName(vehicle.name.substr(vehicle_name_space+1));
-			if(special_directions[vehicle.direction]) {
-				vehicle.line = special_directions[vehicle.direction];
-			}
-			
-			vehicle.geometry = getGeometry(vehicle);
-			vehicle.vehicle_type = parseVehicle(prefix + vehicle.id);
-			
-			if(!vehicle_feature) {
-				vehicle_feature = new ol.Feature(vehicle);
-				vehicle_feature.setId(prefix + vehicle.id);
-				
-				styleVehicle(vehicle_feature);
-				vehicles_source[prefix].addFeature(vehicle_feature);
-			} else {
-				vehicle_feature.setProperties(vehicle);
-				vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading ? vehicle.heading : 0) / 180.0);
-				vehicle_feature.getStyle().getText().setText(vehicle.line);
-			}
-		}
-		
-		vehicles_timer[prefix] = setTimeout(function() {
-			updateVehicles(prefix);
-		}, ttss_refresh);
-	}).fail(fail_ajax);
-	
-	return vehicles_xhr[prefix];
+	ttss_types.forEach(function(type) {
+		vehicles[type].deselect();
+	});
 }
 
 function updateStopSource(stops, prefix) {
-	var source = stops_source[prefix];
-	var mapping = stops_mapping[prefix];
 	var stop;
 	for(var i = 0; i < stops.length; i++) {
 		stop = stops[i];
 		
-		if(stop.category == 'other') continue;
-		if(stops_ignored.includes(stop.shortName)) continue;
+		var feature = new ol.Feature(stop);
+		feature.setId(stop.id.replace(/^0+/, ''));
+		feature.setGeometry(getGeometryFeature(feature));
 		
-		stop.geometry = getGeometry(stop);
-		var stop_feature = new ol.Feature(stop);
-		
-		if(prefix.startsWith('p')) {
-			mapping[stop.stopPoint] = stop_feature;
+		if(feature.get('parent') === null) {
+			feature.set('_', 's' + prefix);
+			stops_source['s' + prefix].addFeature(feature);
 		} else {
-			mapping[stop.shortName] = stop_feature;
+			feature.set('_', 'p' + prefix);
+			stops_source['p' + prefix].addFeature(feature);
 		}
-		
-		stop_feature.setId(prefix + stop.id);
-		
-		source.addFeature(stop_feature);
 	}
 }
 
-function updateStops(stop_type, ttss_type) {
-	var methods = {
-		's': 'stops',
-		'p': 'stopPoints',
-	};
+function updateStops(ttss_type) {
 	return $.get(
-		ttss_urls[ttss_type] + '/geoserviceDispatcher/services/stopinfo/' + methods[stop_type]
-			+ '?left=-648000000'
-			+ '&bottom=-324000000'
-			+ '&right=648000000'
-			+ '&top=324000000'
+		api_url + '/stops/?type=' + ttss_type
 	).done(function(data) {
-		updateStopSource(data[methods[stop_type]], stop_type + ttss_type);
+		updateStopSource(data, ttss_type);
 	}).fail(fail_ajax);
 }
 
@@ -458,45 +545,44 @@
 	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);
 	
-	var featureId = feature.getId();
-	var ttss_type = featureId.substr(0, 1);
+	var featureDiscriminator = feature.get('_');
+	var featureType = featureDiscriminator.substr(0, 1);
+	var featureSource = featureDiscriminator.substr(1, 1);
+	var featureStatus = feature.get('status');
+	
+	var isTripCurrent = !trip || feature.get('trip') == trip;
 	
 	feature_xhr = $.get(
-		ttss_urls[ttss_type] + '/services/tripInfo/tripPassages'
-			+ '?tripId=' + encodeURIComponent(feature.get('tripId'))
-			+ '&mode=departure'
-	).done(function(data) {
-		if(typeof data.old === "undefined" || typeof data.actual === "undefined") {
-			return;
-		}
+		api_url + '/trip/?type=' + featureSource + '&id=' + (trip ? trip : feature.get('trip'))
+	).done(function(results) {
+		var data = results['data'];
 		
 		deleteChildren(table);
 		
-		var all_departures = data.old.concat(data.actual);
 		var tr;
 		var stopsToMark = [];
-		for(var i = 0, il = all_departures.length; i < il; i++) {
+		for(var i = 0, il = data.length; i < il; i++) {
 			tr = document.createElement('tr');
-			addCellWithText(tr, all_departures[i].actualTime || all_departures[i].plannedTime);
-			addCellWithText(tr, all_departures[i].stop_seq_num + '. ' + normalizeName(all_departures[i].stop.name));
+			addCellWithText(tr, data[i].time);
+			addCellWithText(tr, (i+1) + '. ' + normalizeName(data[i].name));
 			
-			if(i >= data.old.length) {
-				stopsToMark.push('s' + ttss_type + all_departures[i].stop.id);
-			}
+			stopsToMark.push(data[i].stop);
 			
-			if(i < data.old.length) {
-				tr.className = 'active';
-			} else if(all_departures[i].status === 'STOPPING') {
-				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);
 		}
 		
-		if(all_departures.length === 0) {
+		if(data.length === 0) {
 			tr = document.createElement('tr');
 			table.appendChild(tr);
 			tr = addCellWithText(tr, lang.no_data);
@@ -504,37 +590,71 @@
 			tr.className = 'active';
 		}
 		
-		markStops(stopsToMark, ttss_type, true);
+		deleteChildren(post);
 		
-		feature_timer = setTimeout(function() { vehicleTable(feature, table); }, ttss_refresh);
+		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, post, trip); }, api_refresh);
 	}).fail(fail_ajax_popup);
 	return feature_xhr;
 }
 
-function stopTable(stopType, stopId, table, ttss_type) {
+function stopTable(feature, table) {
 	if(feature_xhr) feature_xhr.abort();
 	if(feature_timer) clearTimeout(feature_timer);
 	
+	var featureDiscriminator = feature.get('_');
+	var featureType = featureDiscriminator.substr(0, 1);
+	var featureSource = featureDiscriminator.substr(1, 1);
+	
 	feature_xhr = $.get(
-		ttss_urls[ttss_type] + '/services/passageInfo/stopPassages/' + stopType
-			+ '?' + stopType + '=' + encodeURIComponent(stopId)
-			+ '&mode=departure'
+		api_url + '/schedule/?type=' + featureSource + '&id=' + feature.getId()
 	).done(function(data) {
 		deleteChildren(table);
 		
-		var all_departures = data.old.concat(data.actual);
 		var tr, dir_cell, vehicle, status, status_cell, delay, delay_cell;
-		for(var i = 0, il = all_departures.length; i < il; i++) {
+		for(var i = 0, il = data.length; i < il; i++) {
 			tr = document.createElement('tr');
-			addCellWithText(tr, all_departures[i].patternText);
-			dir_cell = addCellWithText(tr, normalizeName(all_departures[i].direction));
-			vehicle = parseVehicle(all_departures[i].vehicleId);
-			dir_cell.appendChild(displayVehicle(vehicle));
-			status = parseStatus(all_departures[i]);
-			status_cell = addCellWithText(tr, status);
-			delay = parseDelay(all_departures[i]);
-			delay_cell = addCellWithText(tr, delay);
-			
+			addCellWithText(tr, data[i].line);
+			dir_cell = addCellWithText(tr, data[i].direction);
+			//vehicle = vehicles_info.getParsed(all_departures[i].vehicleId);
+			//dir_cell.appendChild(displayVehicle(vehicle));
+			//status = parseStatus(all_departures[i]);
+			status_cell = addCellWithText(tr, data[i].time);
+			//delay = parseDelay(all_departures[i]);
+			delay_cell = addCellWithText(tr, '');
+			/*
 			if(i < data.old.length) {
 				tr.className = 'active';
 			} else if(status === lang.boarding_sign) {
@@ -546,17 +666,19 @@
 			} else if(parseInt(delay) > 3) {
 				tr.className = 'warning';
 			}
-			
+			*/
 			table.appendChild(tr);
 		}
 		
-		feature_timer = setTimeout(function() { stopTable(stopType, stopId, table, ttss_type); }, ttss_refresh);
+		feature_timer = setTimeout(function() { stopTable(feature, table); }, api_refresh);
 	}).fail(fail_ajax_popup);
 	return feature_xhr;
 }
 
 function featureClicked(feature) {
-	if(feature && !feature.getId()) return;
+	if(!feature || !feature.getId() || !feature.get('_')) {
+		feature = null;
+	}
 	
 	unstyleSelectedFeatures();
 	
@@ -565,36 +687,37 @@
 		return;
 	}
 	
+	var featureDiscriminator = feature.get('_');
+	var featureType = featureDiscriminator.substr(0, 1);
+	var featureSource = featureDiscriminator.substr(1, 1);
+	
 	var div = document.createElement('div');
 	
-	var name = normalizeName(feature.get('name'));
+	var name = normalizeName(feature.get('name') ? feature.get('name') : feature.get('line') + ' ' + feature.get('dir'));
 	var additional;
 	var table = document.createElement('table');
 	var thead = document.createElement('thead');
 	var tbody = document.createElement('tbody');
 	table.appendChild(thead);
 	table.appendChild(tbody);
+	var post;
 	
 	var tabular_data = true;
 	
-	var type = feature.getId().substr(0, 1);
-	var full_type = feature.getId().match(/^[a-z]+/)[0];
-	var typeName = lang.types[full_type];
+	var typeName = lang.types[featureDiscriminator];
 	if(typeof typeName === 'undefined') {
 		typeName = '';
 	}
 	
 	// Location
-	if(type == 'l') {
+	if(featureType == 'l') {
 		tabular_data = false;
 		name = typeName;
 		typeName = '';
 	}
 	// Vehicle
-	else if(ttss_types.includes(type)) {
-		styleVehicle(feature, true);
-		
-		var span = displayVehicle(feature.get('vehicle_type'));
+	else if(featureType == 'v') {
+		var span = displayVehicle(feature.get('type'));
 		
 		additional = document.createElement('p');
 		if(span.title) {
@@ -607,43 +730,45 @@
 		addElementWithText(thead, 'th', lang.header_time);
 		addElementWithText(thead, 'th', lang.header_stop);
 		
-		vehicleTable(feature, tbody);
-		vehiclePath(feature);
+		post = document.createElement('div');
+		post.className = 'post-nav';
+		
+		vehicleTable(feature, tbody, post);
+		//vehiclePath(feature);
 	}
 	// Stop or stop point
-	else if(['s', 'p'].includes(type)) {
-		var ttss_type = feature.getId().substr(1, 1);
-		if(type == 's') {
+	else if(['s', 'p'].includes(featureType)) {
+		if(featureType == 's') {
 			var second_type = lang.departures_for_buses;
-			var mapping = stops_mapping['sb'];
+			var source = stops_source['sb'];
 			
-			if(ttss_type == 'b') {
+			if(featureSource == 'b') {
 				second_type = lang.departures_for_trams;
-				mapping = stops_mapping['st'];
+				source = stops_source['st'];
 			}
 			
-			stopTable('stop', feature.get('shortName'), tbody, ttss_type);
+			stopTable(feature, tbody);
 			
-			if(mapping[feature.get('shortName')]) {
+			var second = source.getFeatureById(feature.get('id'));
+			if(second) {
 				additional = document.createElement('p');
 				additional.className = 'small';
 				addElementWithText(additional, 'a', second_type).addEventListener(
 					'click',
 					function() {
-						featureClicked(mapping[feature.get('shortName')]);
+						featureClicked(second);
 					}
 				);
 			}
 		} else {
-			stopTable('stopPoint', feature.get('stopPoint'), tbody, ttss_type);
+			stopTable(feature, tbody);
 			
 			additional = document.createElement('p');
 			additional.className = 'small';
 			addElementWithText(additional, 'a', lang.departures_for_stop).addEventListener(
 				'click',
 				function() {
-					var mapping = stops_mapping['s' + ttss_type];
-					featureClicked(mapping[feature.get('shortName')]);
+					featureClicked(stops_source['s' + featureSource].getFeatureById(feature.get('parent')));
 				}
 			);
 		}
@@ -652,8 +777,6 @@
 		addElementWithText(thead, 'th', lang.header_direction);
 		addElementWithText(thead, 'th', lang.header_time);
 		addElementWithText(thead, 'th', lang.header_delay);
-		
-		markStops([feature], feature.getId().substr(1,1));
 	} else {
 		panel.close();
 		return;
@@ -684,27 +807,27 @@
 	
 	if(tabular_data) {
 		div.appendChild(table);
-		ignore_hashchange = true;
-		window.location.hash = '#!' + feature.getId();
+	}
+	
+	if(post) {
+		div.appendChild(post);
 	}
 	
 	showOnMapFunction();
 	
 	panel.show(div, function() {
-		if(!ignore_hashchange) {
-			ignore_hashchange = true;
-			window.location.hash = '';
-			
-			unstyleSelectedFeatures();
-			feature_clicked = null;
-			
-			if(path_xhr) path_xhr.abort();
-			if(feature_xhr) feature_xhr.abort();
-			if(feature_timer) clearTimeout(feature_timer);
-		}
-	});
+		unstyleSelectedFeatures();
+		
+		if(path_xhr) path_xhr.abort();
+		if(feature_xhr) feature_xhr.abort();
+		if(feature_timer) clearTimeout(feature_timer);
+	}, tabular_data ? featureDiscriminator + feature.getId() : '');
 	
-	feature_clicked = feature;
+	if(featureType == 'v') {
+		vehicles[featureSource].select(feature);
+	} else if(['s', 'p'].includes(featureType)) {
+		markStops([feature], featureSource);
+	}
 }
 
 function listFeatures(features) {
@@ -717,7 +840,7 @@
 	
 	addParaWithText(div, lang.select_feature);
 	
-	var feature, p, a, full_type, typeName;
+	var feature, p, a, featureDiscriminator, typeName;
 	for(var i = 0; i < features.length; i++) {
 		feature = features[i];
 		
@@ -728,18 +851,18 @@
 			featureClicked(feature);
 		}}(feature));
 		
-		full_type = feature.getId().match(/^[a-z]+/)[0];
-		typeName = lang.types[full_type];
+		featureDiscriminator = feature.get('_');
+		typeName = lang.types[featureDiscriminator];
 		if(typeof typeName === 'undefined') {
 			typeName = '';
 		}
-		if(feature.get('vehicle_type')) {
-			typeName += ' ' + feature.get('vehicle_type').num;
+		if(feature.get('type')) {
+			typeName += ' ' + feature.get('type').num;
 		}
 		
 		addElementWithText(a, 'span', typeName).className = 'small';
 		a.appendChild(document.createTextNode(' '));
-		addElementWithText(a, 'span', normalizeName(feature.get('name')));
+		addElementWithText(a, 'span', normalizeName(feature.get('name') ? feature.get('name') : feature.get('line') + ' ' + feature.get('dir')));
 		
 		div.appendChild(p);
 	}
@@ -769,8 +892,8 @@
 			}
 		});
 		ttss_types.forEach(function(type) {
-			if(vehicles_layer[type].getVisible()) {
-				feature = returnClosest(point, feature, vehicles_source[type].getClosestFeatureToCoordinate(point));
+			if(vehicles[type].layer.getVisible()) {
+				feature = returnClosest(point, feature, vehicles[type].source.getClosestFeatureToCoordinate(point));
 			}
 		});
 		
@@ -807,44 +930,72 @@
 	}
 }
 
-
-function hash() {
-	if(ignore_hashchange) {
-		ignore_hashchange = false;
-		return;
-	}
-	
-	var feature = null;
-	var vehicleId = null;
-	var stopId = null;
-	
-	if(window.location.hash.match(/^#!t[0-9]{3}$/)) {
-		vehicleId = depotIdToVehicleId(window.location.hash.substr(3), 't');
-	} else if(window.location.hash.match(/^#!b[0-9]{3}$/)) {
-		vehicleId = depotIdToVehicleId(window.location.hash.substr(3), 'b');
-	} else if(window.location.hash.match(/^#![A-Za-z]{2}[0-9]{3}$/)) {
-		vehicleId = depotIdToVehicleId(window.location.hash.substr(2));
-	} else if(window.location.hash.match(/^#!v-?[0-9]+$/)) {
-		vehicleId = 't' + window.location.hash.substr(3);
-	} else if(window.location.hash.match(/^#![tb]-?[0-9]+$/)) {
-		vehicleId = window.location.hash.substr(2);
-	} else if(window.location.hash.match(/^#![sp]-?[0-9]+$/)) {
-		stopId = window.location.hash.substr(2,1) + 't' + window.location.hash.substr(3);
-	} else if(window.location.hash.match(/^#![sp][tb]-?[0-9]+$/)) {
-		stopId = window.location.hash.substr(2);
-	} else if(window.location.hash.match(/^#!f$/)) {
-		find.open(panel);
-		return;
-	}
-	
-	if(vehicleId) {
-		feature = vehicles_source[vehicleId.substr(0, 1)].getFeatureById(vehicleId);
-	} else if(stopId) {
-		feature = stops_source[stopId.substr(0,2)].getFeatureById(stopId);
-	}
-	
-	featureClicked(feature);
+function Hash() {
 }
+Hash.prototype = {
+	_ignoreChange: false,
+	
+	_set: function(id) {
+		var value = '#!' + id;
+		if(value !== window.location.hash) {
+			window.location.hash = value;
+			return true;
+		}
+		return false;
+	},
+	_updateOld: function() {
+		if(window.location.hash.match(/^#![bt][0-9]{3}$/)) {
+			this.go('v' + window.location.hash.substr(2));
+		} else if(window.location.hash.match(/^#![RHrh][A-Za-z][0-9]{3}$/)) {
+			this.go('vt'+ window.location.hash.substr(4));
+		} else if(window.location.hash.match(/^#![BDPbdp][A-Za-z][0-9]{3}$/)) {
+			this.go('vb'+ window.location.hash.substr(4));
+		}
+	},
+	ready: function() {
+		this._updateOld();
+		this.changed();
+		window.addEventListener('hashchange', this.changed.bind(this), false);
+	},
+	go: function(id) {
+		this._ignoreChange = false;
+		return this._set(id);
+	},
+	set: function(id) {
+		this._ignoreChange = true;
+		return this._set(id);
+	},
+	changed: function() {
+		if(this._ignoreChange) {
+			this._ignoreChange = false;
+			return false;
+		}
+		
+		var feature = null;
+		var source = null;
+		var vehicleId = null;
+		var stopId = null;
+		
+		if(window.location.hash.match(/^#!v[tb][0-9]+$/)) {
+			vehicleId = window.location.hash.substr(3);
+		} else if(window.location.hash.match(/^#![sp][tb][0-9a-z_]+$/)) {
+			stopId = window.location.hash.substr(2);
+		} else if(window.location.hash.match(/^#!f$/)) {
+			find.open(panel);
+			return;
+		}
+		
+		if(vehicleId) {
+			feature = vehicles[vehicleId.substr(0,1)].source.getFeatureById(vehicleId.substr(1));
+		} else if(stopId) {
+			feature = stops_source[stopId.substr(0,2)].getFeatureById(stopId.substr(2));
+		}
+		
+		featureClicked(feature);
+		
+		return true;
+	},
+};
 
 function getDistance(c1, c2) {
 	if(c1.getGeometry) {
@@ -854,8 +1005,8 @@
 		c2 = c2.getGeometry().getCoordinates();
 	}
 	
-	var c1 = ol.proj.transform(c1, 'EPSG:3857', 'EPSG:4326');
-	var c2 = ol.proj.transform(c2, 'EPSG:3857', 'EPSG:4326');
+	c1 = ol.proj.transform(c1, 'EPSG:3857', 'EPSG:4326');
+	c2 = ol.proj.transform(c2, 'EPSG:3857', 'EPSG:4326');
 	return ol.sphere.getDistance(c1, c2);
 }
 
@@ -871,6 +1022,7 @@
 	find = new Find();
 	
 	route_source = new ol.source.Vector({
+		attributions: [lang.help_data_attribution],
 		features: [],
 	});
 	route_layer = new ol.layer.Vector({
@@ -901,14 +1053,7 @@
 	});
 	
 	ttss_types.forEach(function(type) {
-		vehicles_source[type] = new ol.source.Vector({
-			features: [],
-		});
-		vehicles_layer[type] = new ol.layer.Vector({
-			source: vehicles_source[type],
-			renderMode: 'image',
-		});
-		vehicles_last_update[type] = 0;
+		vehicles[type] = new Vehicles(type);
 	});
 	
 	geolocation_feature = new ol.Feature({
@@ -961,11 +1106,16 @@
 	geolocation_button.addEventListener('click', trackingToggle);
 	
 	document.getElementById('find').addEventListener('click', find.open.bind(find, panel));
-	
+
+	var pixelRatio = ol.has.DEVICE_PIXEL_RATIO > 1 ? 2 : 1;
 	var layers = [
 		new ol.layer.Tile({
-			source: new ol.source.OSM({
-				url: 'https://tiles.ttss.pl/{z}/{x}/{y}.png',
+			source: new ol.source.XYZ({
+				attributions: [ol.source.OSM.ATTRIBUTION],
+				url: 'https://tiles.ttss.pl/x' + pixelRatio + '/{z}/{x}/{y}.png',
+				maxZoom: 19,
+				tilePixelRatio: pixelRatio,
+				opaque: false,
 			}),
 		}),
 		route_layer,
@@ -976,7 +1126,7 @@
 	});
 	layers.push(stop_selected_layer);
 	ttss_types.forEach(function(type) {
-		layers.push(vehicles_layer[type]);
+		layers.push(vehicles[type].layer);
 	});
 	map = new ol.Map({
 		target: 'map',
@@ -985,6 +1135,7 @@
 			center: ol.proj.fromLonLat([19.94, 50.06]),
 			zoom: 14,
 			maxZoom: 19,
+			constrainResolution: true,
 		}),
 		controls: ol.control.defaults({
 			attributionOptions: ({
@@ -1030,31 +1181,14 @@
 	map.getView().on('change:resolution', change_resolution);
 	change_resolution();
 	
-	var future_requests = [
-		updateVehicleInfo(),
-	];
+	var future_requests = [];
 	ttss_types.forEach(function(type) {
-		future_requests.push(updateVehicles(type));
+		future_requests.push(vehicles[type].fetch());
+		future_requests.push(updateStops(type));
 	});
-	stops_type.forEach(function(type) {
-		future_requests.push(updateStops(type.substr(0,1), type.substr(1,1)));
-	});
-	Deferred.all(future_requests).done(hash);
 	
-	window.addEventListener('hashchange', hash);
-	
-	setTimeout(function() {
-		ttss_types.forEach(function(type) {
-			if(vehicles_xhr[type]) {
-				vehicles_xhr[type].abort();
-			}
-			if(vehicles_timer[type]) {
-				clearTimeout(vehicles_timer[type]);
-			}
-		});
-		
-		fail(lang.error_refresh);
-	}, 1800000);
+	hash = new Hash();
+	Deferred.all(future_requests).done(hash.ready.bind(hash));
 }
 
 init();

--
Gitblit v1.9.1