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