Improved www.ttss.krakow.pl
Jacek Kowalski
2021-07-28 d98c5a9e39c312424fa2586d1fe846f2999d49f5
commit | author | age
7e7221 1 'use strict';
f4a54f 2
f36d1f 3 var ttss_refresh = 10000; // 10 seconds
4bfa36 4 var ttss_position_type = 'RAW';
57b8d3 5
a4d011 6 var geolocation = null;
JK 7 var geolocation_set = 0;
8 var geolocation_button = null;
9 var geolocation_feature = null;
10 var geolocation_accuracy = null;
11 var geolocation_source = null;
12 var geolocation_layer = null;
13
4bfa36 14 var vehicles_xhr = {};
JK 15 var vehicles_timer = {};
16 var vehicles_last_update = {};
17 var vehicles_source = {};
18 var vehicles_layer = {};
eafc1c 19
f0bae0 20 var vehicles_info = {};
57b8d3 21
JK 22 var stops_xhr = null;
0748d2 23 var stops_ignored = ['131', '744', '1263', '3039'];
88a24c 24 var stops_style = {
JK 25     'sb': new ol.style.Style({
26         image: new ol.style.Circle({
27             fill: new ol.style.Fill({color: '#07F'}),
28             stroke: new ol.style.Stroke({color: '#05B', width: 2}),
29             radius: 3,
30         }),
31     }),
32     'st': new ol.style.Style({
33         image: new ol.style.Circle({
34             fill: new ol.style.Fill({color: '#FA0'}),
35             stroke: new ol.style.Stroke({color: '#B70', width: 2}),
36             radius: 3,
37         }),
38     }),
39     'pb': new ol.style.Style({
40         image: new ol.style.Circle({
41             fill: new ol.style.Fill({color: '#07F'}),
42             stroke: new ol.style.Stroke({color: '#05B', width: 1}),
43             radius: 3,
44         }),
45     }),
46     'pt': new ol.style.Style({
47         image: new ol.style.Circle({
48             fill: new ol.style.Fill({color: '#FA0'}),
49             stroke: new ol.style.Stroke({color: '#B70', width: 1}),
50             radius: 3,
51         }),
52     }),
53 };
54 var stops_type = ['st', 'sb', 'pt', 'pb'];
1b7c52 55 var stops_mapping = {};
88a24c 56 var stops_source = {};
JK 57 var stops_layer = {};
f4a54f 58
JK 59 var stop_selected_source = null;
60 var stop_selected_layer = null;
57b8d3 61
1d4785 62 var feature_clicked = null;
8b6250 63 var feature_xhr = null;
JK 64 var feature_timer = null;
9dd2e1 65 var path_xhr = null;
1d4785 66
JK 67 var route_source = null;
68 var route_layer = null;
07c714 69
57b8d3 70 var map = null;
d29c06 71
JK 72 var panel = null;
5be662 73 var find = null;
d29c06 74
57b8d3 75 var fail_element = document.getElementById('fail');
a4d011 76 var fail_text = document.querySelector('#fail span');
57b8d3 77
7ca6a1 78 var ignore_hashchange = false;
JK 79
d29c06 80
JK 81 function Panel(element) {
82     this._element = element;
83     this._element.classList.add('panel');
84     
ae5170 85     this._hide = addElementWithText(this._element, 'a', '▶');
d29c06 86     this._hide.title = lang.action_collapse;
JK 87     this._hide.className = 'hide';
88     this._hide.addEventListener('click', this.toggleExpanded.bind(this));
89     
4bf9a4 90     this._container = document.createElement('div');
JK 91     this._container.className = 'panel-container';
92     
93     this._close = addElementWithText(this._container, 'a', '×');
d29c06 94     this._close.title = lang.action_close;
JK 95     this._close.className = 'close';
96     this._close.addEventListener('click', this.close.bind(this));
97     
98     this._content = document.createElement('div');
4bf9a4 99     this._container.appendChild(this._content);
JK 100     this._element.appendChild(this._container);
d5e919 101 }
d29c06 102 Panel.prototype = {
JK 103     _element: null,
104     _hide: null,
4bf9a4 105     _container: null,
d29c06 106     _close: null,
JK 107     _content: null,
108     
109     _closeCallback: null,
110     _runCallback: function() {
111         var callback = this.closeCallback;
112         this.closeCallback = null;
113         if(callback) callback();
114     },
115     
116     expand: function() {
117         this._element.classList.add('expanded');
118         setText(this._hide, '▶');
119         this._hide.title = lang.action_collapse;
120     },
121     collapse: function() {
122         this._element.classList.remove('expanded');
123         setText(this._hide, '◀');
124         this._hide.title = lang.action_expand;
125     },
126     toggleExpanded: function() {
127         if(this._element.classList.contains('expanded')) {
128             this.collapse();
129         } else {
130             this.expand();
131         }
132     },
133     fail: function(message) {
134         addParaWithText(this._content, message).className = 'error';
135     },
136     show: function(contents, closeCallback) {
137         this._runCallback();
138         this.closeCallback = closeCallback;
139         
140         deleteChildren(this._content);
141         
142         this._content.appendChild(contents);
143         this._element.classList.add('enabled');
144         setTimeout(this.expand.bind(this), 1);
145     },
146     close: function() {
147         this._runCallback();
148         this._element.classList.remove('expanded');
149         this._element.classList.remove('enabled');
150     },
151 };
5be662 152
JK 153
154 function Find() {
155     this.div = document.createElement('div');
156     
157     this.form = document.createElement('form');
158     this.div.appendChild(this.form);
159     
160     var para = addParaWithText(this.form, lang.enter_query);
161     para.appendChild(document.createElement('br'));
162     this.input = document.createElement('input');
163     this.input.type = 'text';
164     this.input.style.width = '80%';
165     para.appendChild(this.input);
166     para.appendChild(document.createElement('hr'));
167     
168     this.results = document.createElement('div');
169     this.div.appendChild(this.results);
170     
171     this.input.addEventListener('keyup', this.findDelay.bind(this));
172     this.form.addEventListener('submit', this.findDelay.bind(this));
173 }
174 Find.prototype = {
175     query: '',
176     timeout: null,
177     
178     div: null,
179     form: null,
180     input: null,
181     results: null,
182     
183     find: function() {
184         var query = this.input.value.toUpperCase();
185         if(query === this.query) return;
186         this.query = query;
187         
94177c 188         if(query === '') {
JK 189             deleteChildren(this.results);
190             return;
191         }
192         
5be662 193         var features = [];
JK 194         stops_type.forEach(function(stop_type) {
195             if(stop_type.substr(0,1) === 'p') return;
196             stops_source[stop_type].forEachFeature(function(feature) {
197                 if(feature.get('name').toUpperCase().indexOf(query) > -1) {
198                     features.push(feature);
199                 }
200             });
201         });
202         
203         ttss_types.forEach(function(ttss_type) {
204             vehicles_source[ttss_type].forEachFeature(function(feature) {
205                 if(feature.get('vehicle_type') && feature.get('vehicle_type').num.indexOf(query) > -1) {
206                     features.push(feature);
207                 }
208             });
209         });
210         
211         deleteChildren(this.results);
212         this.results.appendChild(listFeatures(features));
213     },
214     findDelay: function(e) {
215         e.preventDefault();
216         if(this.timeout) clearTimeout(this.timeout);
217         this.timeout = setTimeout(this.find.bind(this), 100);
218     },
219     open: function(panel) {
220         ignore_hashchange = true;
221         window.location.hash = '#!f';
222         
223         panel.show(this.div, this.close.bind(this));
224         this.input.focus();
225     },
226     close: function() {
227         if(this.timeout) clearTimeout(this.timeout);
228     },
229 };
230
d29c06 231
57b8d3 232 function fail(msg) {
a4d011 233     setText(fail_text, msg);
57b8d3 234     fail_element.style.top = '0.5em';
8b6250 235 }
JK 236
237 function fail_ajax_generic(data, fnc) {
57b8d3 238     // abort() is not a failure
faad2a 239     if(data.readyState === 0) return;
57b8d3 240     
faad2a 241     if(data.status === 0) {
8b6250 242         fnc(lang.error_request_failed_connectivity, data);
57b8d3 243     } else if (data.statusText) {
8b6250 244         fnc(lang.error_request_failed_status.replace('$status', data.statusText), data);
57b8d3 245     } else {
8b6250 246         fnc(lang.error_request_failed, data);
57b8d3 247     }
8b6250 248 }
JK 249
250 function fail_ajax(data) {
251     fail_ajax_generic(data, fail);
252 }
253
254 function fail_ajax_popup(data) {
d29c06 255     fail_ajax_generic(data, panel.fail.bind(panel));
57b8d3 256 }
JK 257
258 function getGeometry(object) {
07c714 259     return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0]));
57b8d3 260 }
JK 261
1d4785 262 function styleVehicle(vehicle, selected) {
JK 263     var color_type = 'black';
264     if(vehicle.get('vehicle_type')) {
265         switch(vehicle.get('vehicle_type').low) {
125626 266             case 0:
1d4785 267                 color_type = 'orange';
JK 268             break;
125626 269             case 1:
JK 270             case 2:
1d4785 271                 color_type = 'green';
JK 272             break;
273         }
274     }
275     
3d2caa 276     var fill = '#B70';
6cb525 277     if(vehicle.getId().startsWith('b')) {
JK 278         fill = '#05B';
279     }
280     if(selected) {
ae3207 281         fill = '#922';
6cb525 282     }
1d4785 283     
fe3a67 284     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>';
1d4785 285     
f4a54f 286     vehicle.setStyle(new ol.style.Style({
1d4785 287         image: new ol.style.Icon({
JK 288             src: 'data:image/svg+xml;base64,' + btoa(image),
fe3a67 289             imgSize: [20,30],
a8a6d1 290             rotation: Math.PI * parseFloat(vehicle.get('heading') ? vehicle.get('heading') : 0) / 180.0,
1d4785 291         }),
JK 292         text: new ol.style.Text({
293             font: 'bold 10px sans-serif',
294             text: vehicle.get('line'),
295             fill: new ol.style.Fill({color: 'white'}),
296         }),
f4a54f 297     }));
1d4785 298 }
JK 299
4bfa36 300 function markStops(stops, ttss_type, routeStyle) {
f4a54f 301     stop_selected_source.clear();
ba6e87 302     
4bfa36 303     var style = stops_layer['s' + ttss_type].getStyle().clone();
f4a54f 304     
JK 305     if(routeStyle) {
306         style.getImage().setRadius(5);
307     } else {
308         style.getImage().getStroke().setWidth(2);
309         style.getImage().getStroke().setColor('#F00');
310         style.getImage().setRadius(5);
ba6e87 311     }
1d4785 312     
f4a54f 313     stop_selected_layer.setStyle(style);
JK 314     
db4410 315     var feature, prefix;
f4a54f 316     for(var i = 0; i < stops.length; i++) {
JK 317         if(stops[i].getId) {
318             feature = stops[i];
319         } else {
320             prefix = stops[i].substr(0,2);
88a24c 321             feature = stops_source[prefix].getFeatureById(stops[i]);
f4a54f 322         }
JK 323         if(feature) {
324             stop_selected_source.addFeature(feature);
325         }
1d4785 326     }
JK 327     
f4a54f 328     stop_selected_layer.setVisible(true);
1d4785 329 }
JK 330
331 function unstyleSelectedFeatures() {
f4a54f 332     stop_selected_source.clear();
JK 333     route_source.clear();
2b6454 334     if(feature_clicked && ttss_types.includes(feature_clicked.getId().substr(0, 1))) {
f4a54f 335         styleVehicle(feature_clicked);
1d4785 336     }
JK 337 }
338
4bfa36 339 function updateVehicles(prefix) {
JK 340     if(vehicles_timer[prefix]) clearTimeout(vehicles_timer[prefix]);
341     if(vehicles_xhr[prefix]) vehicles_xhr[prefix].abort();
342     vehicles_xhr[prefix] = $.get(
343         ttss_urls[prefix] + '/geoserviceDispatcher/services/vehicleinfo/vehicles'
a8a6d1 344             + '?positionType=' + ttss_position_type
57b8d3 345             + '&colorType=ROUTE_BASED'
4bfa36 346             + '&lastUpdate=' + encodeURIComponent(vehicles_last_update[prefix])
57b8d3 347     ).done(function(data) {
4bfa36 348         vehicles_last_update[prefix] = data.lastUpdate;
57b8d3 349         
JK 350         for(var i = 0; i < data.vehicles.length; i++) {
351             var vehicle = data.vehicles[i];
352             
4bfa36 353             var vehicle_feature = vehicles_source[prefix].getFeatureById(prefix + vehicle.id);
JK 354             if(vehicle.isDeleted || !vehicle.latitude || !vehicle.longitude) {
57b8d3 355                 if(vehicle_feature) {
4bfa36 356                     vehicles_source[prefix].removeFeature(vehicle_feature);
745cfd 357                     if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) {
4185fa 358                         panel.close();
57b8d3 359                     }
JK 360                 }
361                 continue;
362             }
363             
364             var vehicle_name_space = vehicle.name.indexOf(' ');
365             vehicle.line = vehicle.name.substr(0, vehicle_name_space);
ca42d3 366             vehicle.direction = normalizeName(vehicle.name.substr(vehicle_name_space+1));
57b8d3 367             if(special_directions[vehicle.direction]) {
JK 368                 vehicle.line = special_directions[vehicle.direction];
369             }
370             
371             vehicle.geometry = getGeometry(vehicle);
4bfa36 372             vehicle.vehicle_type = parseVehicle(prefix + vehicle.id);
57b8d3 373             
JK 374             if(!vehicle_feature) {
375                 vehicle_feature = new ol.Feature(vehicle);
4bfa36 376                 vehicle_feature.setId(prefix + vehicle.id);
57b8d3 377                 
f4a54f 378                 styleVehicle(vehicle_feature);
4bfa36 379                 vehicles_source[prefix].addFeature(vehicle_feature);
57b8d3 380             } else {
JK 381                 vehicle_feature.setProperties(vehicle);
a8a6d1 382                 vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading ? vehicle.heading : 0) / 180.0);
f64858 383                 vehicle_feature.getStyle().getText().setText(vehicle.line);
57b8d3 384             }
JK 385         }
386         
4bfa36 387         vehicles_timer[prefix] = setTimeout(function() {
JK 388             updateVehicles(prefix);
57b8d3 389         }, ttss_refresh);
JK 390     }).fail(fail_ajax);
7ca6a1 391     
4bfa36 392     return vehicles_xhr[prefix];
57b8d3 393 }
JK 394
88a24c 395 function updateStopSource(stops, prefix) {
JK 396     var source = stops_source[prefix];
1b7c52 397     var mapping = stops_mapping[prefix];
7e7221 398     var stop;
57b8d3 399     for(var i = 0; i < stops.length; i++) {
7e7221 400         stop = stops[i];
e61357 401         
JK 402         if(stop.category == 'other') continue;
2b6454 403         if(stops_ignored.includes(stop.shortName)) continue;
e61357 404         
57b8d3 405         stop.geometry = getGeometry(stop);
JK 406         var stop_feature = new ol.Feature(stop);
1b7c52 407         
JK 408         if(prefix.startsWith('p')) {
409             mapping[stop.stopPoint] = stop_feature;
410         } else {
411             mapping[stop.shortName] = stop_feature;
412         }
57b8d3 413         
JK 414         stop_feature.setId(prefix + stop.id);
415         
416         source.addFeature(stop_feature);
417     }
418 }
419
4bfa36 420 function updateStops(stop_type, ttss_type) {
JK 421     var methods = {
422         's': 'stops',
423         'p': 'stopPoints',
424     };
7ca6a1 425     return $.get(
4bfa36 426         ttss_urls[ttss_type] + '/geoserviceDispatcher/services/stopinfo/' + methods[stop_type]
57b8d3 427             + '?left=-648000000'
JK 428             + '&bottom=-324000000'
429             + '&right=648000000'
430             + '&top=324000000'
431     ).done(function(data) {
4bfa36 432         updateStopSource(data[methods[stop_type]], stop_type + ttss_type);
57b8d3 433     }).fail(fail_ajax);
7ca6a1 434 }
JK 435
7e7221 436 function vehiclePath(feature) {
9dd2e1 437     if(path_xhr) path_xhr.abort();
JK 438     
439     var featureId = feature.getId();
4bfa36 440     var ttss_type = featureId.substr(0, 1);
eafc1c 441     
9dd2e1 442     path_xhr = $.get(
4bfa36 443         ttss_urls[ttss_type] + '/geoserviceDispatcher/services/pathinfo/vehicle'
JK 444             + '?id=' + encodeURIComponent(featureId.substr(1))
9dd2e1 445     ).done(function(data) {
JK 446         if(!data || !data.paths || !data.paths[0] || !data.paths[0].wayPoints) return;
447         
db4410 448         var point;
9dd2e1 449         var points = [];
JK 450         for(var i = 0; i < data.paths[0].wayPoints.length; i++) {
451             point = data.paths[0].wayPoints[i];
452             points.push(ol.proj.fromLonLat([
453                 point.lon / 3600000.0,
454                 point.lat / 3600000.0,
455             ]));
456         }
457         
458         route_source.addFeature(new ol.Feature({
459             geometry: new ol.geom.LineString(points)
460         }));
461         route_layer.setVisible(true);
462     });
2b6454 463     return path_xhr;
9dd2e1 464 }
JK 465
466 function vehicleTable(feature, table) {
467     if(feature_xhr) feature_xhr.abort();
468     if(feature_timer) clearTimeout(feature_timer);
469     
470     var featureId = feature.getId();
4bfa36 471     var ttss_type = featureId.substr(0, 1);
eafc1c 472     
8b6250 473     feature_xhr = $.get(
4bfa36 474         ttss_urls[ttss_type] + '/services/tripInfo/tripPassages'
9dd2e1 475             + '?tripId=' + encodeURIComponent(feature.get('tripId'))
8b6250 476             + '&mode=departure'
JK 477     ).done(function(data) {
b6f8e3 478         if(typeof data.old === "undefined" || typeof data.actual === "undefined") {
8b6250 479             return;
JK 480         }
481         
482         deleteChildren(table);
483         
cb5a77 484         var all_departures = data.old.concat(data.actual);
db4410 485         var tr;
f4a54f 486         var stopsToMark = [];
cb5a77 487         for(var i = 0, il = all_departures.length; i < il; i++) {
db4410 488             tr = document.createElement('tr');
cb5a77 489             addCellWithText(tr, all_departures[i].actualTime || all_departures[i].plannedTime);
ca42d3 490             addCellWithText(tr, all_departures[i].stop_seq_num + '. ' + normalizeName(all_departures[i].stop.name));
1d4785 491             
cb5a77 492             if(i >= data.old.length) {
JK 493                 stopsToMark.push('s' + ttss_type + all_departures[i].stop.id);
494             }
8b6250 495             
cb5a77 496             if(i < data.old.length) {
JK 497                 tr.className = 'active';
498             } else if(all_departures[i].status === 'STOPPING') {
8b6250 499                 tr.className = 'success';
JK 500             }
501             table.appendChild(tr);
502         }
f4a54f 503         
b6f8e3 504         if(all_departures.length === 0) {
JK 505             tr = document.createElement('tr');
506             table.appendChild(tr);
507             tr = addCellWithText(tr, lang.no_data);
508             tr.colSpan = '2';
509             tr.className = 'active';
510         }
511         
4bfa36 512         markStops(stopsToMark, ttss_type, true);
8b6250 513         
9dd2e1 514         feature_timer = setTimeout(function() { vehicleTable(feature, table); }, ttss_refresh);
8b6250 515     }).fail(fail_ajax_popup);
2b6454 516     return feature_xhr;
8b6250 517 }
JK 518
0ba749 519 function stopTable(stopType, stopId, table, ttss_type) {
8b6250 520     if(feature_xhr) feature_xhr.abort();
JK 521     if(feature_timer) clearTimeout(feature_timer);
eafc1c 522     
8b6250 523     feature_xhr = $.get(
4bfa36 524         ttss_urls[ttss_type] + '/services/passageInfo/stopPassages/' + stopType
8b6250 525             + '?' + stopType + '=' + encodeURIComponent(stopId)
JK 526             + '&mode=departure'
527     ).done(function(data) {
528         deleteChildren(table);
529         
cb5a77 530         var all_departures = data.old.concat(data.actual);
db4410 531         var tr, dir_cell, vehicle, status, status_cell, delay, delay_cell;
cb5a77 532         for(var i = 0, il = all_departures.length; i < il; i++) {
db4410 533             tr = document.createElement('tr');
cb5a77 534             addCellWithText(tr, all_departures[i].patternText);
ca42d3 535             dir_cell = addCellWithText(tr, normalizeName(all_departures[i].direction));
cb5a77 536             vehicle = parseVehicle(all_departures[i].vehicleId);
8b6250 537             dir_cell.appendChild(displayVehicle(vehicle));
cb5a77 538             status = parseStatus(all_departures[i]);
db4410 539             status_cell = addCellWithText(tr, status);
cb5a77 540             delay = parseDelay(all_departures[i]);
db4410 541             delay_cell = addCellWithText(tr, delay);
8b6250 542             
cb5a77 543             if(i < data.old.length) {
db4410 544                 tr.className = 'active';
cb5a77 545             } else if(status === lang.boarding_sign) {
8b6250 546                 tr.className = 'success';
JK 547                 status_cell.className = 'status-boarding';
548             } else if(parseInt(delay) > 9) {
549                 tr.className = 'danger';
550                 delay_cell.className = 'status-delayed';
551             } else if(parseInt(delay) > 3) {
552                 tr.className = 'warning';
553             }
554             
555             table.appendChild(tr);
556         }
557         
0ba749 558         feature_timer = setTimeout(function() { stopTable(stopType, stopId, table, ttss_type); }, ttss_refresh);
8b6250 559     }).fail(fail_ajax_popup);
2b6454 560     return feature_xhr;
8b6250 561 }
JK 562
7ca6a1 563 function featureClicked(feature) {
1d4785 564     if(feature && !feature.getId()) return;
JK 565     
566     unstyleSelectedFeatures();
567     
7ca6a1 568     if(!feature) {
d29c06 569         panel.close();
7ca6a1 570         return;
JK 571     }
572     
9f0f6a 573     var div = document.createElement('div');
8b6250 574     
ca42d3 575     var name = normalizeName(feature.get('name'));
07c714 576     var additional;
8b6250 577     var table = document.createElement('table');
JK 578     var thead = document.createElement('thead');
579     var tbody = document.createElement('tbody');
580     table.appendChild(thead);
581     table.appendChild(tbody);
07c714 582     
a4d011 583     var tabular_data = true;
JK 584     
4bfa36 585     var type = feature.getId().substr(0, 1);
76f5c4 586     var full_type = feature.getId().match(/^[a-z]+/)[0];
JK 587     var typeName = lang.types[full_type];
588     if(typeof typeName === 'undefined') {
589         typeName = '';
590     }
591     
4bfa36 592     // Location
JK 593     if(type == 'l') {
594         tabular_data = false;
76f5c4 595         name = typeName;
4bfa36 596         typeName = '';
JK 597     }
598     // Vehicle
2b6454 599     else if(ttss_types.includes(type)) {
d5e919 600         styleVehicle(feature, true);
JK 601         
4bfa36 602         var span = displayVehicle(feature.get('vehicle_type'));
JK 603         
604         additional = document.createElement('p');
605         if(span.title) {
606             setText(additional, span.title);
607         } else {
608             setText(additional, feature.getId());
609         }
610         additional.insertBefore(span, additional.firstChild);
611         
612         addElementWithText(thead, 'th', lang.header_time);
613         addElementWithText(thead, 'th', lang.header_stop);
614         
615         vehicleTable(feature, tbody);
616         vehiclePath(feature);
617     }
618     // Stop or stop point
2b6454 619     else if(['s', 'p'].includes(type)) {
0ba749 620         var ttss_type = feature.getId().substr(1, 1);
4bfa36 621         if(type == 's') {
1b7c52 622             var second_type = lang.departures_for_buses;
JK 623             var mapping = stops_mapping['sb'];
4bfa36 624             
0ba749 625             if(ttss_type == 'b') {
1b7c52 626                 second_type = lang.departures_for_trams;
JK 627                 mapping = stops_mapping['st'];
628             }
0ba749 629             
JK 630             stopTable('stop', feature.get('shortName'), tbody, ttss_type);
1b7c52 631             
JK 632             if(mapping[feature.get('shortName')]) {
633                 additional = document.createElement('p');
634                 additional.className = 'small';
635                 addElementWithText(additional, 'a', second_type).addEventListener(
636                     'click',
637                     function() {
638                         featureClicked(mapping[feature.get('shortName')]);
639                     }
640                 );
a83099 641             }
4bfa36 642         } else {
0ba749 643             stopTable('stopPoint', feature.get('stopPoint'), tbody, ttss_type);
8b6250 644             
JK 645             additional = document.createElement('p');
646             additional.className = 'small';
647             addElementWithText(additional, 'a', lang.departures_for_stop).addEventListener(
648                 'click',
649                 function() {
0ba749 650                     var mapping = stops_mapping['s' + ttss_type];
1b7c52 651                     featureClicked(mapping[feature.get('shortName')]);
8b6250 652                 }
JK 653             );
4bfa36 654         }
JK 655         
656         addElementWithText(thead, 'th', lang.header_line);
657         addElementWithText(thead, 'th', lang.header_direction);
658         addElementWithText(thead, 'th', lang.header_time);
659         addElementWithText(thead, 'th', lang.header_delay);
660         
661         markStops([feature], feature.getId().substr(1,1));
662     } else {
663         panel.close();
664         return;
07c714 665     }
8b6250 666     
JK 667     var loader = addElementWithText(tbody, 'td', lang.loading);
668     loader.className = 'active';
ee4e7c 669     loader.colSpan = thead.childNodes.length;
07c714 670     
4bfa36 671     addParaWithText(div, typeName).className = 'type';
ae3207 672     
JK 673     var nameElement = addParaWithText(div, name + ' ');
674     nameElement.className = 'name';
675     
676     var showOnMapElement = addElementWithText(nameElement, 'a', lang.show_on_map);
677     var showOnMapFunction = function() {
678         setTimeout(function () {map.getView().animate({
679             center: feature.getGeometry().getCoordinates(),
680         })}, 10);
681     };
682     showOnMapElement.addEventListener('click', showOnMapFunction);
20d39d 683     showOnMapElement.className = 'icon icon-pin';
ae3207 684     showOnMapElement.title = lang.show_on_map;
07c714 685     
JK 686     if(additional) {
9f0f6a 687         div.appendChild(additional);
7ca6a1 688     }
JK 689     
a4d011 690     if(tabular_data) {
JK 691         div.appendChild(table);
692         ignore_hashchange = true;
693         window.location.hash = '#!' + feature.getId();
694     }
7ca6a1 695     
ae3207 696     showOnMapFunction();
9f0f6a 697     
d29c06 698     panel.show(div, function() {
9f0f6a 699         if(!ignore_hashchange) {
JK 700             ignore_hashchange = true;
701             window.location.hash = '';
702             
703             unstyleSelectedFeatures();
d29c06 704             feature_clicked = null;
9f0f6a 705             
9dd2e1 706             if(path_xhr) path_xhr.abort();
9f0f6a 707             if(feature_xhr) feature_xhr.abort();
JK 708             if(feature_timer) clearTimeout(feature_timer);
709         }
710     });
07c714 711     
1d4785 712     feature_clicked = feature;
a4d011 713 }
JK 714
5be662 715 function listFeatures(features) {
JK 716     var div = document.createElement('div');
717     
d5e919 718     if(features.length === 0) {
94177c 719         addParaWithText(div, lang.no_results);
JK 720         return div;
721     }
722     
5be662 723     addParaWithText(div, lang.select_feature);
JK 724     
725     var feature, p, a, full_type, typeName;
726     for(var i = 0; i < features.length; i++) {
727         feature = features[i];
728         
729         p = document.createElement('p');
730         a = document.createElement('a');
731         p.appendChild(a);
732         a.addEventListener('click', function(feature) { return function() {
733             featureClicked(feature);
734         }}(feature));
735         
736         full_type = feature.getId().match(/^[a-z]+/)[0];
737         typeName = lang.types[full_type];
738         if(typeof typeName === 'undefined') {
739             typeName = '';
740         }
741         if(feature.get('vehicle_type')) {
742             typeName += ' ' + feature.get('vehicle_type').num;
743         }
744         
745         addElementWithText(a, 'span', typeName).className = 'small';
746         a.appendChild(document.createTextNode(' '));
747         addElementWithText(a, 'span', normalizeName(feature.get('name')));
748         
749         div.appendChild(p);
750     }
751     
752     return div;
753 }
754
a4d011 755 function mapClicked(e) {
JK 756     var point = e.coordinate;
757     var features = [];
758     map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
759         if(layer == stop_selected_layer) return;
760         if(feature.getId()) features.push(feature);
761     });
762     
7e7221 763     var feature = features[0];
JK 764     
a4d011 765     if(features.length > 1) {
5be662 766         panel.show(listFeatures(features));
a4d011 767         return;
JK 768     }
769     
770     if(!feature) {
88a24c 771         stops_type.forEach(function(type) {
JK 772             if(stops_layer[type].getVisible()) {
773                 feature = returnClosest(point, feature, stops_source[type].getClosestFeatureToCoordinate(point));
774             }
775         });
4bfa36 776         ttss_types.forEach(function(type) {
JK 777             if(vehicles_layer[type].getVisible()) {
778                 feature = returnClosest(point, feature, vehicles_source[type].getClosestFeatureToCoordinate(point));
779             }
780         });
a4d011 781         
JK 782         if(getDistance(point, feature) > map.getView().getResolution() * 20) {
783             feature = null;
784         }
785     }
786     
787     featureClicked(feature);
788 }
789
790 function trackingStop() {
d29c06 791     geolocation_button.classList.remove('clicked');
a4d011 792     geolocation.setTracking(false);
JK 793     
794     geolocation_source.clear();
795 }
796 function trackingStart() {
797     geolocation_set = 0;
d29c06 798     geolocation_button.classList.add('clicked');
a4d011 799     geolocation_feature.setGeometry(new ol.geom.Point(map.getView().getCenter()));
JK 800     geolocation_accuracy.setGeometry(new ol.geom.Circle(map.getView().getCenter(), 100000));
801     
802     geolocation_source.addFeature(geolocation_feature);
803     geolocation_source.addFeature(geolocation_accuracy);
804     
805     geolocation.setTracking(true);
806 }
807 function trackingToggle() {
808     if(geolocation.getTracking()) {
809         trackingStop();
810     } else {
811         trackingStart();
812     }
7ca6a1 813 }
JK 814
5be662 815
7ca6a1 816 function hash() {
JK 817     if(ignore_hashchange) {
818         ignore_hashchange = false;
819         return;
820     }
821     
822     var feature = null;
f4a54f 823     var vehicleId = null;
JK 824     var stopId = null;
7ca6a1 825     
JK 826     if(window.location.hash.match(/^#!t[0-9]{3}$/)) {
f4a54f 827         vehicleId = depotIdToVehicleId(window.location.hash.substr(3), 't');
JK 828     } else if(window.location.hash.match(/^#!b[0-9]{3}$/)) {
829         vehicleId = depotIdToVehicleId(window.location.hash.substr(3), 'b');
7ca6a1 830     } else if(window.location.hash.match(/^#![A-Za-z]{2}[0-9]{3}$/)) {
f4a54f 831         vehicleId = depotIdToVehicleId(window.location.hash.substr(2));
439d60 832     } else if(window.location.hash.match(/^#!v-?[0-9]+$/)) {
f4a54f 833         vehicleId = 't' + window.location.hash.substr(3);
JK 834     } else if(window.location.hash.match(/^#![tb]-?[0-9]+$/)) {
835         vehicleId = window.location.hash.substr(2);
836     } else if(window.location.hash.match(/^#![sp]-?[0-9]+$/)) {
837         stopId = window.location.hash.substr(2,1) + 't' + window.location.hash.substr(3);
838     } else if(window.location.hash.match(/^#![sp][tb]-?[0-9]+$/)) {
839         stopId = window.location.hash.substr(2);
5be662 840     } else if(window.location.hash.match(/^#!f$/)) {
JK 841         find.open(panel);
842         return;
7ca6a1 843     }
JK 844     
f4a54f 845     if(vehicleId) {
4bfa36 846         feature = vehicles_source[vehicleId.substr(0, 1)].getFeatureById(vehicleId);
7ca6a1 847     } else if(stopId) {
88a24c 848         feature = stops_source[stopId.substr(0,2)].getFeatureById(stopId);
7ca6a1 849     }
JK 850     
851     featureClicked(feature);
57b8d3 852 }
JK 853
0e60d1 854 function getDistance(c1, c2) {
JK 855     if(c1.getGeometry) {
856         c1 = c1.getGeometry().getCoordinates();
857     }
858     if(c2.getGeometry) {
859         c2 = c2.getGeometry().getCoordinates();
860     }
861     
862     var c1 = ol.proj.transform(c1, 'EPSG:3857', 'EPSG:4326');
863     var c2 = ol.proj.transform(c2, 'EPSG:3857', 'EPSG:4326');
a8a6d1 864     return ol.sphere.getDistance(c1, c2);
0e60d1 865 }
JK 866
867 function returnClosest(point, f1, f2) {
868     if(!f1) return f2;
869     if(!f2) return f1;
870     
1b7c52 871     return (getDistance(point, f1) <= getDistance(point, f2)) ? f1 : f2;
0e60d1 872 }
JK 873
57b8d3 874 function init() {
d29c06 875     panel = new Panel(document.getElementById('panel'));
5be662 876     find = new Find();
57b8d3 877     
4bfa36 878     route_source = new ol.source.Vector({
JK 879         features: [],
880     });
881     route_layer = new ol.layer.Vector({
882         source: route_source,
883         style: new ol.style.Style({
884             stroke: new ol.style.Stroke({ color: [255, 153, 0, .8], width: 5 })
885         }),
886     });
887     
88a24c 888     stops_type.forEach(function(type) {
JK 889         stops_source[type] = new ol.source.Vector({
890             features: [],
891         });
892         stops_layer[type] = new ol.layer.Vector({
893             source: stops_source[type],
894             renderMode: 'image',
895             style: stops_style[type],
896         });
1b7c52 897         stops_mapping[type] = {};
f4a54f 898     });
JK 899     
900     stop_selected_source = new ol.source.Vector({
901         features: [],
902     });
903     stop_selected_layer = new ol.layer.Vector({
904         source: stop_selected_source,
57b8d3 905         visible: false,
JK 906     });
907     
4bfa36 908     ttss_types.forEach(function(type) {
JK 909         vehicles_source[type] = new ol.source.Vector({
910             features: [],
911         });
912         vehicles_layer[type] = new ol.layer.Vector({
913             source: vehicles_source[type],
1e2d27 914             renderMode: 'image',
4bfa36 915         });
JK 916         vehicles_last_update[type] = 0;
1d4785 917     });
JK 918     
a4d011 919     geolocation_feature = new ol.Feature({
JK 920         name: '',
921         style: new ol.style.Style({
922             image: new ol.style.Circle({
923                 fill: new ol.style.Fill({color: '#39C'}),
924                 stroke: new ol.style.Stroke({color: '#FFF', width: 2}),
925                 radius: 5,
926             }),
927         }),
928     });
929     geolocation_feature.setId('location_point');
930     geolocation_accuracy = new ol.Feature();
931     geolocation_source = new ol.source.Vector({
932         features: [],
933     });
934     geolocation_layer = new ol.layer.Vector({
935         source: geolocation_source,
936     });
19a338 937     geolocation_button = document.querySelector('#track');
a4d011 938     if(!navigator.geolocation) {
19a338 939         geolocation_button.remove();
a4d011 940     }
JK 941     
376c6e 942     geolocation = new ol.Geolocation({projection: 'EPSG:3857'});
a4d011 943     geolocation.on('change:position', function() {
JK 944         var coordinates = geolocation.getPosition();
945         geolocation_feature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
946         if(geolocation_set < 1) {
947             geolocation_set = 1;
948             map.getView().animate({
949                 center: coordinates,
950             })
951         }
952     });
953     geolocation.on('change:accuracyGeometry', function() {
954         var accuracy = geolocation.getAccuracyGeometry();
955         geolocation_accuracy.setGeometry(accuracy);
956         if(geolocation_set < 2) {
957             geolocation_set = 2;
958             map.getView().fit(accuracy);
959         }
960     });
961     geolocation.on('error', function(error) {
962         fail(lang.error_location + ' ' + error.message);
963         trackingStop();
19a338 964         geolocation_button.remove();
a4d011 965     });
JK 966     geolocation_button.addEventListener('click', trackingToggle);
967     
5be662 968     document.getElementById('find').addEventListener('click', find.open.bind(find, panel));
JK 969     
4bfa36 970     var layers = [
JK 971         new ol.layer.Tile({
428023 972             source: new ol.source.OSM({
JK 973                 url: 'https://tiles.ttss.pl/{z}/{x}/{y}.png',
974             }),
4bfa36 975         }),
JK 976         route_layer,
977         geolocation_layer,
978     ];
979     stops_type.forEach(function(type) {
980         layers.push(stops_layer[type]);
981     });
982     layers.push(stop_selected_layer);
983     ttss_types.forEach(function(type) {
984         layers.push(vehicles_layer[type]);
985     });
57b8d3 986     map = new ol.Map({
JK 987         target: 'map',
4bfa36 988         layers: layers,
57b8d3 989         view: new ol.View({
JK 990             center: ol.proj.fromLonLat([19.94, 50.06]),
a4d011 991             zoom: 14,
JK 992             maxZoom: 19,
57b8d3 993         }),
JK 994         controls: ol.control.defaults({
995             attributionOptions: ({
996                 collapsible: false,
997             })
998         }).extend([
999             new ol.control.Control({
1000                 element: document.getElementById('title'),
1001             }),
1002             new ol.control.Control({
1003                 element: fail_element,
a4d011 1004             }),
JK 1005             new ol.control.Control({
19a338 1006                 element: document.getElementById('menu'),
a4d011 1007             }),
57b8d3 1008         ]),
f4a54f 1009         loadTilesWhileAnimating: false,
57b8d3 1010     });
JK 1011     
1012     // Display popup on click
a4d011 1013     map.on('singleclick', mapClicked);
9f0f6a 1014     
JK 1015     fail_element.addEventListener('click', function() {
1016         fail_element.style.top = '-10em';
1017     });
f0bae0 1018     
57b8d3 1019     // Change mouse cursor when over marker
JK 1020     map.on('pointermove', function(e) {
1021         var hit = map.hasFeatureAtPixel(e.pixel);
1022         var target = map.getTargetElement();
1023         target.style.cursor = hit ? 'pointer' : '';
1024     });
1025     
1026     // Change layer visibility on zoom
7e7221 1027     var change_resolution = function() {
88a24c 1028         stops_type.forEach(function(type) {
JK 1029             if(type.startsWith('p')) {
1030                 stops_layer[type].setVisible(map.getView().getZoom() >= 16);
1031                 stops_layer[type].setVisible(map.getView().getZoom() >= 16);
1032             }
1033         });
1034     };
1035     map.getView().on('change:resolution', change_resolution);
1036     change_resolution();
57b8d3 1037     
4bfa36 1038     var future_requests = [
3d2caa 1039         updateVehicleInfo(),
4bfa36 1040     ];
JK 1041     ttss_types.forEach(function(type) {
1042         future_requests.push(updateVehicles(type));
7ca6a1 1043     });
4bfa36 1044     stops_type.forEach(function(type) {
JK 1045         future_requests.push(updateStops(type.substr(0,1), type.substr(1,1)));
1046     });
2b6454 1047     Deferred.all(future_requests).done(hash);
7ca6a1 1048     
JK 1049     window.addEventListener('hashchange', hash);
57b8d3 1050     
JK 1051     setTimeout(function() {
ae3207 1052         ttss_types.forEach(function(type) {
JK 1053             if(vehicles_xhr[type]) {
1054                 vehicles_xhr[type].abort();
1055             }
1056             if(vehicles_timer[type]) {
1057                 clearTimeout(vehicles_timer[type]);
1058             }
1059         });
1060         
57b8d3 1061         fail(lang.error_refresh);
JK 1062     }, 1800000);
1063 }
1064
1065 init();