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