From 7a2fc1b6a2e7baee8c61fb70b5d5a38cad55b218 Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Sat, 22 Apr 2017 21:47:05 +0000 Subject: [PATCH] Mark front of the vehicle (closes #7) --- index.js | 69 ++++++++++++++++++++++++++-------- 1 files changed, 53 insertions(+), 16 deletions(-) diff --git a/index.js b/index.js index b76cb16..551d035 100644 --- a/index.js +++ b/index.js @@ -5,7 +5,7 @@ var page_title = document.getElementsByTagName('title')[0]; var ignore_hashchange = false; -var language = 'en'; +var language = 'pl'; var lang_select = document.getElementById('lang-select'); var stop_id = ''; @@ -26,6 +26,8 @@ var route_xhr; var route_line = document.getElementById('route-line'); var route_table = document.getElementById('route-table'); +var route_vehicle = document.getElementById('route-vehicle'); +var route_vehicle_info; var refresh_button = document.getElementById('refresh'); var refresh_text = document.getElementById('refresh-text'); @@ -37,6 +39,8 @@ var alert_close = document.getElementById('alert-close'); var nav = document.getElementsByTagName('nav')[0]; +var vehicle_data = document.getElementById('vehicle-data'); +var vehicle_data_style = document.getElementById('vehicle-data-style'); function parseStatus(status) { switch(status.status) { @@ -156,7 +160,6 @@ ignore_hashchange = true; window.location.hash = '#!' + language + stopId; - ignore_hashchange = false; refresh_button.removeAttribute('disabled'); loading_start(); @@ -179,13 +182,17 @@ var tr = document.createElement('tr'); addCellWithText(tr, data.old[i].patternText); var dir_cell = addCellWithText(tr, data.old[i].direction); - dir_cell.appendChild(displayVehicle(parseVehicle(data.old[i].vehicleId))); + var vehicle = parseVehicle(data.old[i].vehicleId); + dir_cell.appendChild(displayVehicle(vehicle)); + addCellWithText(tr, (vehicle ? vehicle.num : '')).className = 'vehicleData'; var status = parseStatus(data.old[i]); addCellWithText(tr, status); addCellWithText(tr, ''); tr.className = 'active'; - tr.addEventListener('click', function(tripId){ return function(){ loadRoute(tripId); } }(data.old[i].tripId) ); + tr.addEventListener('click', function(tripId, vehicleInfo) { + return function(){ loadRoute(tripId, vehicleInfo); } + }(data.old[i].tripId, vehicle)); times_table.appendChild(tr); } @@ -193,7 +200,9 @@ var tr = document.createElement('tr'); addCellWithText(tr, data.actual[i].patternText); var dir_cell = addCellWithText(tr, data.actual[i].direction); - dir_cell.appendChild(displayVehicle(parseVehicle(data.actual[i].vehicleId))); + var vehicle = parseVehicle(data.actual[i].vehicleId); + dir_cell.appendChild(displayVehicle(vehicle)); + addCellWithText(tr, (vehicle ? vehicle.num : '')).className = 'vehicleData'; var status = parseStatus(data.actual[i]); var status_cell = addCellWithText(tr, status); var delay = parseDelay(data.actual[i]); @@ -209,7 +218,9 @@ tr.className = 'warning'; } - tr.addEventListener('click', function(tripId){ return function(){ loadRoute(tripId); } }(data.actual[i].tripId) ); + tr.addEventListener('click', function(tripId, vehicleInfo) { + return function(){ loadRoute(tripId, vehicleInfo); } + }(data.actual[i].tripId, vehicle)); times_table.appendChild(tr); } @@ -230,12 +241,15 @@ }).fail(fail_ajax).always(loading_end); } -function loadRoute(tripId) { +function loadRoute(tripId, vehicleInfo) { if(!tripId) tripId = route_id; if(!tripId) return; + if(vehicleInfo === undefined) vehicleInfo = route_vehicle_info; + console.log('loadRoute(' + tripId + ')'); route_id = tripId; + route_vehicle_info = vehicleInfo; if(route_xhr) route_xhr.abort(); route_xhr = $.get( @@ -249,6 +263,16 @@ } setText(route_line, data.routeName + ' ' + data.directionText); + + deleteChildren(route_vehicle); + if(vehicleInfo) { + var span = displayVehicle(vehicleInfo); + if(span) { + setText(route_vehicle, span.title); + } + route_vehicle.insertBefore(span, route_vehicle.firstChild); + } + deleteChildren(route_table); for(var i = 0, il = data.old.length; i < il; i++) { @@ -331,17 +355,17 @@ setText(refresh_text, lang.enter_stop_name_to_begin); } - if(!stop_id) return; - setText(page_title, lang.page_title); + + if(!stop_id) return; loadTimes(); loadRoute(); } function change_language(lang) { - if(!lang || lang.length != 2) return; - if(lang == language) return; + if(!lang || lang.length != 2) return false; + if(lang == language) return false; lang_select.value = lang; if(!lang_select.value) { lang_select.value = language; @@ -360,18 +384,25 @@ ignore_hashchange = true; window.location.hash = '#!' + language + stop_id; - ignore_hashchange = false; + + return true; } function hash() { - if(ignore_hashchange) return; + if(ignore_hashchange) { + ignore_hashchange = false; + return; + } if(window.location.hash.match(/^#![0-9]+$/)) { loadTimes(parseInt(window.location.hash.substr(2))); } else if(window.location.hash.match(/^#![a-z]{2}[0-9]*$/)) { var stop = parseInt(window.location.hash.substr(4)); if(stop) stop_id = stop; - change_language(window.location.hash.substr(2, 2)); + + if(!change_language(window.location.hash.substr(2, 2))) { + loadTimes(parseInt(window.location.hash.substr(2))); + } } } @@ -425,15 +456,21 @@ loadTimes(stop_name_autocomplete.value); }); - refresh_button.addEventListener('click', function(e) { + refresh_button.addEventListener('click', function() { loadTimes(); loadRoute(); }); - alert_close.addEventListener('click', function(e) { + alert_close.addEventListener('click', function() { alert.style.display = 'none'; }); + vehicle_data.addEventListener('click', function(e) { + e.preventDefault(); + vehicle_data.style.display = 'none'; + setText(vehicle_data_style, '.vehicleData { display: table-cell; }') + }); + hash(); window.addEventListener('hashchange', hash); -- Gitblit v1.9.1