From 20d39de5e834bbff7a891c1d131691aae5c00797 Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Sun, 07 Jul 2019 19:53:13 +0000
Subject: [PATCH] Fix icons styling, remove redundant CSS entries
---
map.js | 390 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 229 insertions(+), 161 deletions(-)
diff --git a/map.js b/map.js
index a92594a..979cdd9 100644
--- a/map.js
+++ b/map.js
@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
var ttss_refresh = 10000; // 10 seconds
var ttss_position_type = 'RAW';
@@ -20,7 +20,7 @@
var vehicles_info = {};
var stops_xhr = null;
-var stops_ignored = ['131'];
+var stops_ignored = ['131', '744', '1263', '3039'];
var stops_style = {
'sb': new ol.style.Style({
image: new ol.style.Circle({
@@ -70,6 +70,7 @@
var map = null;
var panel = null;
+var find = null;
var fail_element = document.getElementById('fail');
var fail_text = document.querySelector('#fail span');
@@ -93,7 +94,7 @@
this._content = document.createElement('div');
this._element.appendChild(this._content);
-};
+}
Panel.prototype = {
_element: null,
_hide: null,
@@ -144,6 +145,85 @@
},
};
+
+function Find() {
+ this.div = document.createElement('div');
+
+ this.form = document.createElement('form');
+ this.div.appendChild(this.form);
+
+ var para = addParaWithText(this.form, lang.enter_query);
+ para.appendChild(document.createElement('br'));
+ this.input = document.createElement('input');
+ this.input.type = 'text';
+ this.input.style.width = '80%';
+ para.appendChild(this.input);
+ para.appendChild(document.createElement('hr'));
+
+ this.results = document.createElement('div');
+ this.div.appendChild(this.results);
+
+ this.input.addEventListener('keyup', this.findDelay.bind(this));
+ this.form.addEventListener('submit', this.findDelay.bind(this));
+}
+Find.prototype = {
+ query: '',
+ timeout: null,
+
+ div: null,
+ form: null,
+ input: null,
+ results: null,
+
+ find: function() {
+ var query = this.input.value.toUpperCase();
+ if(query === this.query) return;
+ this.query = query;
+
+ if(query === '') {
+ deleteChildren(this.results);
+ return;
+ }
+
+ var features = [];
+ stops_type.forEach(function(stop_type) {
+ if(stop_type.substr(0,1) === 'p') return;
+ stops_source[stop_type].forEachFeature(function(feature) {
+ if(feature.get('name').toUpperCase().indexOf(query) > -1) {
+ features.push(feature);
+ }
+ });
+ });
+
+ 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) {
+ features.push(feature);
+ }
+ });
+ });
+
+ deleteChildren(this.results);
+ this.results.appendChild(listFeatures(features));
+ },
+ findDelay: function(e) {
+ e.preventDefault();
+ if(this.timeout) clearTimeout(this.timeout);
+ 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));
+ this.input.focus();
+ },
+ close: function() {
+ if(this.timeout) clearTimeout(this.timeout);
+ },
+};
+
+
function fail(msg) {
setText(fail_text, msg);
fail_element.style.top = '0.5em';
@@ -151,9 +231,9 @@
function fail_ajax_generic(data, fnc) {
// abort() is not a failure
- if(data.readyState == 0 && data.statusText == 'abort') return;
+ if(data.readyState === 0) return;
- if(data.status == 0) {
+ if(data.status === 0) {
fnc(lang.error_request_failed_connectivity, data);
} else if (data.statusText) {
fnc(lang.error_request_failed_status.replace('$status', data.statusText), data);
@@ -193,14 +273,15 @@
fill = '#05B';
}
if(selected) {
- fill = '#292';
+ fill = '#922';
}
- var image = '<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:3" /></svg>';
+ 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({
@@ -226,10 +307,8 @@
stop_selected_layer.setStyle(style);
- var feature = null;
- var prefix = null;
+ var feature, prefix;
for(var i = 0; i < stops.length; i++) {
- feature = null;
if(stops[i].getId) {
feature = stops[i];
} else {
@@ -247,7 +326,7 @@
function unstyleSelectedFeatures() {
stop_selected_source.clear();
route_source.clear();
- if(feature_clicked && ttss_types.indexOf(feature_clicked.getId().substr(0, 1)) >= 0) {
+ if(feature_clicked && ttss_types.includes(feature_clicked.getId().substr(0, 1))) {
styleVehicle(feature_clicked);
}
}
@@ -271,7 +350,7 @@
if(vehicle_feature) {
vehicles_source[prefix].removeFeature(vehicle_feature);
if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) {
- featureClicked();
+ panel.close();
}
}
continue;
@@ -279,7 +358,7 @@
var vehicle_name_space = vehicle.name.indexOf(' ');
vehicle.line = vehicle.name.substr(0, vehicle_name_space);
- vehicle.direction = vehicle.name.substr(vehicle_name_space+1);
+ vehicle.direction = normalizeName(vehicle.name.substr(vehicle_name_space+1));
if(special_directions[vehicle.direction]) {
vehicle.line = special_directions[vehicle.direction];
}
@@ -311,11 +390,12 @@
function updateStopSource(stops, prefix) {
var source = stops_source[prefix];
var mapping = stops_mapping[prefix];
+ var stop;
for(var i = 0; i < stops.length; i++) {
- var stop = stops[i];
+ stop = stops[i];
if(stop.category == 'other') continue;
- if(stops_ignored.indexOf(stop.shortName) >= 0) continue;
+ if(stops_ignored.includes(stop.shortName)) continue;
stop.geometry = getGeometry(stop);
var stop_feature = new ol.Feature(stop);
@@ -348,7 +428,7 @@
}).fail(fail_ajax);
}
-function vehiclePath(feature, tripId) {
+function vehiclePath(feature) {
if(path_xhr) path_xhr.abort();
var featureId = feature.getId();
@@ -360,7 +440,7 @@
).done(function(data) {
if(!data || !data.paths || !data.paths[0] || !data.paths[0].wayPoints) return;
- var point = null;
+ var point;
var points = [];
for(var i = 0; i < data.paths[0].wayPoints.length; i++) {
point = data.paths[0].wayPoints[i];
@@ -375,6 +455,7 @@
}));
route_layer.setVisible(true);
});
+ return path_xhr;
}
function vehicleTable(feature, table) {
@@ -389,40 +470,45 @@
+ '?tripId=' + encodeURIComponent(feature.get('tripId'))
+ '&mode=departure'
).done(function(data) {
- if(!data.routeName || !data.directionText) {
+ if(typeof data.old === "undefined" || typeof data.actual === "undefined") {
return;
}
deleteChildren(table);
- for(var i = 0, il = data.old.length; i < il; i++) {
- var tr = document.createElement('tr');
- addCellWithText(tr, data.old[i].actualTime || data.old[i].plannedTime);
- addCellWithText(tr, data.old[i].stop_seq_num + '. ' + data.old[i].stop.name);
-
- tr.className = 'active';
- table.appendChild(tr);
- }
-
+ var all_departures = data.old.concat(data.actual);
+ var tr;
var stopsToMark = [];
-
- for(var i = 0, il = data.actual.length; i < il; i++) {
- var tr = document.createElement('tr');
- addCellWithText(tr, data.actual[i].actualTime || data.actual[i].plannedTime);
- addCellWithText(tr, data.actual[i].stop_seq_num + '. ' + data.actual[i].stop.name);
+ for(var i = 0, il = all_departures.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));
- stopsToMark.push('s' + ttss_type + data.actual[i].stop.id);
+ if(i >= data.old.length) {
+ stopsToMark.push('s' + ttss_type + all_departures[i].stop.id);
+ }
- if(data.actual[i].status == 'STOPPING') {
+ if(i < data.old.length) {
+ tr.className = 'active';
+ } else if(all_departures[i].status === 'STOPPING') {
tr.className = 'success';
}
table.appendChild(tr);
+ }
+
+ if(all_departures.length === 0) {
+ tr = document.createElement('tr');
+ table.appendChild(tr);
+ tr = addCellWithText(tr, lang.no_data);
+ tr.colSpan = '2';
+ tr.className = 'active';
}
markStops(stopsToMark, ttss_type, true);
feature_timer = setTimeout(function() { vehicleTable(feature, table); }, ttss_refresh);
}).fail(fail_ajax_popup);
+ return feature_xhr;
}
function stopTable(stopType, stopId, table, ttss_type) {
@@ -436,32 +522,22 @@
).done(function(data) {
deleteChildren(table);
- for(var i = 0, il = data.old.length; i < il; i++) {
- var tr = document.createElement('tr');
- addCellWithText(tr, data.old[i].patternText);
- var dir_cell = addCellWithText(tr, data.old[i].direction);
- var vehicle = parseVehicle(data.old[i].vehicleId);
+ 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++) {
+ 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));
- var status = parseStatus(data.old[i]);
- addCellWithText(tr, status);
- addCellWithText(tr, '');
+ status = parseStatus(all_departures[i]);
+ status_cell = addCellWithText(tr, status);
+ delay = parseDelay(all_departures[i]);
+ delay_cell = addCellWithText(tr, delay);
- tr.className = 'active';
- table.appendChild(tr);
- }
-
- for(var i = 0, il = data.actual.length; i < il; i++) {
- var tr = document.createElement('tr');
- addCellWithText(tr, data.actual[i].patternText);
- var dir_cell = addCellWithText(tr, data.actual[i].direction);
- var vehicle = parseVehicle(data.actual[i].vehicleId);
- dir_cell.appendChild(displayVehicle(vehicle));
- var status = parseStatus(data.actual[i]);
- var status_cell = addCellWithText(tr, status);
- var delay = parseDelay(data.actual[i]);
- var delay_cell = addCellWithText(tr, delay);
-
- if(status == lang.boarding_sign) {
+ if(i < data.old.length) {
+ tr.className = 'active';
+ } else if(status === lang.boarding_sign) {
tr.className = 'success';
status_cell.className = 'status-boarding';
} else if(parseInt(delay) > 9) {
@@ -476,6 +552,7 @@
feature_timer = setTimeout(function() { stopTable(stopType, stopId, table, ttss_type); }, ttss_refresh);
}).fail(fail_ajax_popup);
+ return feature_xhr;
}
function featureClicked(feature) {
@@ -488,12 +565,9 @@
return;
}
- var coordinates = feature.getGeometry().getCoordinates();
-
var div = document.createElement('div');
- var typeName;
- var name = feature.get('name');
+ var name = normalizeName(feature.get('name'));
var additional;
var table = document.createElement('table');
var thead = document.createElement('thead');
@@ -504,18 +578,21 @@
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];
+ if(typeof typeName === 'undefined') {
+ typeName = '';
+ }
+
// Location
if(type == 'l') {
tabular_data = false;
+ name = typeName;
typeName = '';
- name = lang.type_location;
}
// Vehicle
- else if(ttss_types.indexOf(type) >= 0) {
- typeName = lang.type_bus;
- if(type == 't') {
- typeName = lang.type_tram;
- }
+ else if(ttss_types.includes(type)) {
+ styleVehicle(feature, true);
var span = displayVehicle(feature.get('vehicle_type'));
@@ -532,19 +609,15 @@
vehicleTable(feature, tbody);
vehiclePath(feature);
-
- styleVehicle(feature, true);
}
// Stop or stop point
- else if(['s', 'p'].indexOf(type) >= 0) {
+ else if(['s', 'p'].includes(type)) {
var ttss_type = feature.getId().substr(1, 1);
if(type == 's') {
- typeName = lang.type_stop_tram;
var second_type = lang.departures_for_buses;
var mapping = stops_mapping['sb'];
if(ttss_type == 'b') {
- typeName = lang.type_stop_bus;
second_type = lang.departures_for_trams;
mapping = stops_mapping['st'];
}
@@ -562,12 +635,6 @@
);
}
} else {
- typeName = lang.type_stoppoint_tram;
-
- if(ttss_type == 'b') {
- typeName = lang.type_stoppoint_bus;
- }
-
stopTable('stopPoint', feature.get('stopPoint'), tbody, ttss_type);
additional = document.createElement('p');
@@ -597,7 +664,19 @@
loader.colSpan = thead.childNodes.length;
addParaWithText(div, typeName).className = 'type';
- addParaWithText(div, name).className = 'name';
+
+ var nameElement = addParaWithText(div, name + ' ');
+ nameElement.className = 'name';
+
+ var showOnMapElement = addElementWithText(nameElement, 'a', lang.show_on_map);
+ var showOnMapFunction = function() {
+ setTimeout(function () {map.getView().animate({
+ center: feature.getGeometry().getCoordinates(),
+ })}, 10);
+ };
+ showOnMapElement.addEventListener('click', showOnMapFunction);
+ showOnMapElement.className = 'icon icon-pin';
+ showOnMapElement.title = lang.show_on_map;
if(additional) {
div.appendChild(additional);
@@ -609,10 +688,7 @@
window.location.hash = '#!' + feature.getId();
}
- setTimeout(function () {map.getView().animate({
- center: feature.getGeometry().getCoordinates(),
- }) }, 10);
-
+ showOnMapFunction();
panel.show(div, function() {
if(!ignore_hashchange) {
@@ -631,6 +707,46 @@
feature_clicked = feature;
}
+function listFeatures(features) {
+ var div = document.createElement('div');
+
+ if(features.length === 0) {
+ addParaWithText(div, lang.no_results);
+ return div;
+ }
+
+ addParaWithText(div, lang.select_feature);
+
+ var feature, p, a, full_type, typeName;
+ for(var i = 0; i < features.length; i++) {
+ feature = features[i];
+
+ p = document.createElement('p');
+ a = document.createElement('a');
+ p.appendChild(a);
+ a.addEventListener('click', function(feature) { return function() {
+ featureClicked(feature);
+ }}(feature));
+
+ full_type = feature.getId().match(/^[a-z]+/)[0];
+ typeName = lang.types[full_type];
+ if(typeof typeName === 'undefined') {
+ typeName = '';
+ }
+ if(feature.get('vehicle_type')) {
+ typeName += ' ' + feature.get('vehicle_type').num;
+ }
+
+ addElementWithText(a, 'span', typeName).className = 'small';
+ a.appendChild(document.createTextNode(' '));
+ addElementWithText(a, 'span', normalizeName(feature.get('name')));
+
+ div.appendChild(p);
+ }
+
+ return div;
+}
+
function mapClicked(e) {
var point = e.coordinate;
var features = [];
@@ -639,63 +755,13 @@
if(feature.getId()) features.push(feature);
});
+ var feature = features[0];
+
if(features.length > 1) {
- featureClicked();
-
- var div = document.createElement('div');
-
- addParaWithText(div, lang.select_feature);
-
- for(var i = 0; i < features.length; i++) {
- var feature = features[i];
-
- var p = document.createElement('p');
- var a = document.createElement('a');
- p.appendChild(a);
- a.addEventListener('click', function(feature) { return function() {
- featureClicked(feature);
- }}(feature));
-
- var type = feature.getId().substr(0, 1);
- var typeName = '';
- if(type == 'l') {
- typeName = '';
- name = lang.type_location;
- } else if(ttss_types.indexOf(type) >= 0) {
- typeName = lang.type_bus;
- if(type == 't') {
- typeName = lang.type_tram;
- }
- if(feature.get('vehicle_type').num) {
- typeName += ' ' + feature.get('vehicle_type').num;
- }
- } else if(type == 's') {
- typeName = lang.type_stop_tram;
- if(feature.getId().startsWith('sb')) {
- typeName = lang.type_stop_bus;
- }
- } else if (type == 'p') {
- typeName = lang.type_stoppoint_tram;
- if(feature.getId().startsWith('pb')) {
- typeName = lang.type_stoppoint_bus;
- }
- } else {
- continue;
- }
-
- addElementWithText(a, 'span', typeName).className = 'small';
- a.appendChild(document.createTextNode(' '));
- addElementWithText(a, 'span', feature.get('name'));
-
- div.appendChild(p);
- }
-
- panel.show(div);
-
+ panel.show(listFeatures(features));
return;
}
- var feature = features[0];
if(!feature) {
stops_type.forEach(function(type) {
if(stops_layer[type].getVisible()) {
@@ -741,6 +807,7 @@
}
}
+
function hash() {
if(ignore_hashchange) {
ignore_hashchange = false;
@@ -765,6 +832,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) {
@@ -797,17 +867,8 @@
}
function init() {
- if(!window.jQuery) {
- fail(lang.jquery_not_loaded);
- return;
- }
-
- $.ajaxSetup({
- dataType: 'json',
- timeout: 10000,
- });
-
panel = new Panel(document.getElementById('panel'));
+ find = new Find();
route_source = new ol.source.Vector({
features: [],
@@ -845,11 +906,10 @@
});
vehicles_layer[type] = new ol.layer.Vector({
source: vehicles_source[type],
+ renderMode: 'image',
});
vehicles_last_update[type] = 0;
});
-
- ol.style.IconImageCache.shared.setSize(512);
geolocation_feature = new ol.Feature({
name: '',
@@ -869,9 +929,9 @@
geolocation_layer = new ol.layer.Vector({
source: geolocation_source,
});
- geolocation_button = document.querySelector('#track button');
+ geolocation_button = document.querySelector('#track');
if(!navigator.geolocation) {
- geolocation_button.classList.add('hidden');
+ geolocation_button.remove();
}
geolocation = new ol.Geolocation({projection: 'EPSG:3857'});
@@ -896,13 +956,17 @@
geolocation.on('error', function(error) {
fail(lang.error_location + ' ' + error.message);
trackingStop();
- geolocation_button.classList.add('hidden');
+ geolocation_button.remove();
});
geolocation_button.addEventListener('click', trackingToggle);
+ document.getElementById('find').addEventListener('click', find.open.bind(find, panel));
+
var layers = [
new ol.layer.Tile({
- source: new ol.source.OSM(),
+ source: new ol.source.OSM({
+ url: 'https://tiles.ttss.pl/{z}/{x}/{y}.png',
+ }),
}),
route_layer,
geolocation_layer,
@@ -934,7 +998,7 @@
element: fail_element,
}),
new ol.control.Control({
- element: document.getElementById('track'),
+ element: document.getElementById('menu'),
}),
]),
loadTilesWhileAnimating: false,
@@ -955,7 +1019,7 @@
});
// Change layer visibility on zoom
- var change_resolution = function(e) {
+ var change_resolution = function() {
stops_type.forEach(function(type) {
if(type.startsWith('p')) {
stops_layer[type].setVisible(map.getView().getZoom() >= 16);
@@ -975,16 +1039,20 @@
stops_type.forEach(function(type) {
future_requests.push(updateStops(type.substr(0,1), type.substr(1,1)));
});
- $.when(future_requests).done(hash);
+ Deferred.all(future_requests).done(hash);
window.addEventListener('hashchange', hash);
setTimeout(function() {
- if(trams_xhr) trams_xhr.abort();
- if(trams_timer) clearTimeout(trams_timer);
- if(buses_xhr) buses_xhr.abort();
- if(buses_timer) clearTimeout(buses_timer);
-
+ 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);
}
--
Gitblit v1.9.1