From f64858ea0fb3ce263ad2f2316041cd77c3771281 Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Wed, 13 Mar 2019 00:19:40 +0000 Subject: [PATCH] Update line numbers on existing icons --- index.js | 451 +++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 282 insertions(+), 169 deletions(-) diff --git a/index.js b/index.js index f6c900c..3d5d73c 100644 --- a/index.js +++ b/index.js @@ -1,25 +1,33 @@ -//var ttss_base = 'http://www.ttss.krakow.pl/internetservice/services'; -var ttss_base = '/proxy.php'; +"use strict"; + var ttss_refresh = 20000; // 20 seconds -var stop_id; +var page_title = document.getElementsByTagName('title')[0]; +var ignore_hashchange = false; + +var language = 'pl'; +var lang_select = document.getElementById('lang-select'); + +var stop_id = ''; var stop_name = document.getElementById('stop-name'); var stop_name_form = stop_name.form; var stop_name_autocomplete = document.getElementById('stop-name-autocomplete'); var stop_name_autocomplete_xhr; +var stop_name_autocomplete_timer; var times_xhr; var times_timer; var times_stop_name = document.getElementById('times-stop-name'); var times_alerts = document.getElementById('times-alerts'); var times_table = document.getElementById('times-table'); -var times_lines = document.getElementById('times-lines'); +//var times_lines = document.getElementById('times-lines'); -/* +var route_id; 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'); @@ -30,84 +38,17 @@ var alert_text = document.getElementById('alert-text'); var alert_close = document.getElementById('alert-close'); -var parseStatusBoarding = '>>>'; -function parseStatus(status) { - switch(status.status) { - case 'STOPPING': - return parseStatusBoarding; - case 'PREDICTED': - if(status.actualRelativeTime <= 0) - return parseStatusBoarding; - if(status.actualRelativeTime >= 60) - return Math.floor(status.actualRelativeTime / 60) + ' min'; - return status.actualRelativeTime + ' s'; - case 'DEPARTED': - return Math.floor(-status.actualRelativeTime / 60) + ' min ago'; - default: - return status.mixedTime; - } -} - -function parseTime(date, time) { - var result = new Date(date.getFullYear(), date.getMonth(), date.getDay()); - var time_split = time.split(':'); - result.setHours(time_split[0]); - result.setMinutes(time_split[1]); - - if(result.getTime() - date.getTime() > 72000000) { - result.setTime(result.getTime() - 86400000); - } - - if(date.getTime() - result.getTime() > 72000000) { - result.setTime(result.getTime() + 86400000); - } - - return result; -} - -function parseDelay(status) { - if(!status.actualTime) return '?'; - if(!status.plannedTime) return '?'; - - var now = new Date(); - var actual = parseTime(now, status.actualTime); - var planned = parseTime(now, status.plannedTime); - - return ((actual.getTime() - planned.getTime()) / 1000 / 60) + ' min'; -} - -function deleteChildren(element) { - while(element.lastChild) element.removeChild(element.lastChild); -} - -function addElementWithText(parent, element, text) { - var elem = document.createElement(element); - elem.appendChild(document.createTextNode(text)); - parent.appendChild(elem); - return elem; -} - -function addCellWithText(parent, text) { - return addElementWithText(parent, 'td', text); -} - -function addParaWithText(parent, text) { - return addElementWithText(parent, 'p', text); -} - -function setText(element, text) { - deleteChildren(element); - element.appendChild(document.createTextNode(text)); -} +var nav = document.getElementsByTagName('nav')[0]; +var vehicle_data = document.getElementById('vehicle-data'); +var vehicle_data_style = document.getElementById('vehicle-data-style'); function fail(message, more) { - if(refresh_timer) clearInterval(refresh_timer); if(times_timer) clearTimeout(times_timer); setText(alert_text, message); alert.style.display = 'block'; - console.log(message + ' More details follow.'); + console.log(message + (more ? ' More details follow.' : '')); if(more) console.log(more); } @@ -116,135 +57,203 @@ if(data.readyState == 0 && data.statusText == 'abort') return; if(data.status == 0) { - fail('Request failed - please check your network connectivity.', data); + fail(lang.error_request_failed_connectivity, data); } else if (data.statusText) { - fail('Internet request failed with error: ' + data.statusText + '.', data); + fail(lang.error_request_failed_status.replace('$status', data.statusText), data); } else { - fail('Internet request failed.', data); + fail(lang.error_request_failed, data); } } -function loadTimes(stopId = null, clearRoute = false) { +function fail_hide() { + alert.style.display = 'none'; +} + +function loading_start() { + nav.className += ' loading'; +} + +function loading_end() { + nav.className = nav.className.replace(' loading', ''); +} + +function loadTimes(stopId) { if(!stopId) stopId = stop_id; if(!stopId) return; if(times_timer) clearTimeout(times_timer); if(times_xhr) times_xhr.abort(); + console.log('loadTimes(' + stopId + ')'); + + loading_start(); + + var url = ttss_trams_base; + var stop = stopId.substr(1); + var prefix = 't'; + if(stopId.startsWith('b')) { + url = ttss_buses_base; + stop = stopId.substr(1); + prefix = 'b'; + } + + stop_id = stopId; + + ignore_hashchange = true; + window.location.hash = '#!' + language + stopId; refresh_button.removeAttribute('disabled'); times_xhr = $.get( - ttss_base + '/passageInfo/stopPassages/stop' - + '?stop=' + encodeURIComponent(stopId) + url + '/services/passageInfo/stopPassages/stop' + + '?stop=' + encodeURIComponent(stop) + '&mode=departure' ).done(function(data) { setText(times_stop_name, data.stopName); + setText(page_title, lang.page_title_stop_name.replace('$stop', data.stopName)); deleteChildren(times_alerts); deleteChildren(times_table); - deleteChildren(times_lines); - /* - if(clearRoute) { - deleteChildren(route_line); - deleteChildren(route_table); - } - */ + //deleteChildren(times_lines); for(var i = 0, il = data.generalAlerts.length; i < il; i++) { - addParaWithText(times_alerts, data.generalAlerts[i]); + addParaWithText(times_alerts, data.generalAlerts[i].title); } for(var i = 0, il = data.old.length; i < il; i++) { var tr = document.createElement('tr'); addCellWithText(tr, data.old[i].patternText); - addCellWithText(tr, data.old[i].direction); + var dir_cell = addCellWithText(tr, data.old[i].direction); + var vehicle = parseVehicle(prefix + 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, vehicleInfo) { + return function(){ loadRoute(tripId, vehicleInfo); } + }(prefix + data.old[i].tripId, vehicle)); times_table.appendChild(tr); } for(var i = 0, il = data.actual.length; i < il; i++) { var tr = document.createElement('tr'); addCellWithText(tr, data.actual[i].patternText); - addCellWithText(tr, data.actual[i].direction); + var dir_cell = addCellWithText(tr, data.actual[i].direction); + var vehicle = parseVehicle(prefix + 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]); var delay_cell = addCellWithText(tr, delay); - if(status == parseStatusBoarding) { + if(data.actual[i].status == 'STOPPING') { tr.className = 'success'; - status_cell.className = 'status-boarding'; + if (data.actual[i].actualRelativeTime <= 0) { + status_cell.className = 'status-boarding'; + } } else if(parseInt(delay) > 9) { tr.className = 'danger'; delay_cell.className = 'status-delayed'; } else if(parseInt(delay) > 3) { tr.className = 'warning'; } + + tr.addEventListener('click', function(tripId, vehicleInfo) { + return function(){ loadRoute(tripId, vehicleInfo); } + }(prefix + data.actual[i].tripId, vehicle)); times_table.appendChild(tr); } + /* for(var i = 0, il = data.routes.length; i < il; i++) { var tr = document.createElement('tr'); addCellWithText(tr, data.routes[i].name); addCellWithText(tr, data.routes[i].directions.join(' - ')); addCellWithText(tr, data.routes[i].authority); - - /* - tr.addEventListener('click', function(routeId, routeTr){ return function(e) { - var trs = tr.parentNode; - for(var i = 0; i < trs.childNodes.length; i++) { - trs.childNodes[i].removeAttribute('class'); - } - routeTr.className = 'warning'; - - if(route_xhr) route_xhr.abort(); - route_xhr = $.get( - ttss_base + '/routeInfo/routeStops' - + '?routeId=' + encodeURIComponent(routeId) - ).done(function(data) { - setText(route_line, data.route.name + ': ' - + data.route.directions.join(' - ')); - deleteChildren(route_table); - - routeTr.className = 'success'; - - for(var i = 0, il = data.stops.length; i < il; i++) { - var tr = document.createElement('tr'); - addCellWithText(tr, data.stops[i].name); - route_table.appendChild(tr); - } - }).fail(fail_ajax); - }}(data.routes[i].id, tr)); - */ - times_lines.appendChild(tr); - - for(var j = 0, jl = data.routes[i].alerts.length; j < jl; j++) { - addParaWithText( - times_alerts, - 'Line ' + data.routes[i].name + ': ' - + data.routes[i].alerts[j] - ); - } } + */ startTimer(new Date()); + fail_hide(); - times_timer = setTimeout(function(){ loadTimes(); }, ttss_refresh); - }).fail(fail_ajax); + times_timer = setTimeout(function(){ loadTimes(); loadRoute(); }, ttss_refresh); + }).fail(fail_ajax).always(loading_end); } -function declinate(num, singular, plural) { - if(num == 1) return num + ' ' + singular; - return num + ' ' + plural; +function loadRoute(tripId, vehicleInfo) { + if(!tripId) tripId = route_id; + if(!tripId) return; + + if(vehicleInfo === undefined) vehicleInfo = route_vehicle_info; + + console.log('loadRoute(' + tripId + ')'); + + var url = ttss_trams_base; + var trip = tripId.substr(1); + var prefix = 't'; + if(tripId.startsWith('b')) { + url = ttss_buses_base; + trip = tripId.substr(1); + prefix = 'b'; + } + + route_id = tripId; + route_vehicle_info = vehicleInfo; + + if(route_xhr) route_xhr.abort(); + route_xhr = $.get( + url + '/services/tripInfo/tripPassages' + + '?tripId=' + encodeURIComponent(trip) + + '&mode=departure' + ).done(function(data) { + if(!data.routeName || !data.directionText || data.old.length + data.actual.length == 0) { + route_id = null; + return; + } + + 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++) { + var tr = document.createElement('tr'); + addCellWithText(tr, data.old[i].actualTime || data.old[i].plannedTime); + addCellWithText(tr, data.old[i].stop_seq_num + '. ' + data.old[i].stop.name); + + tr.className = 'active'; + tr.addEventListener('click', function(stopId){ return function(){ loadTimes(stopId); } }(prefix + data.old[i].stop.shortName) ); + route_table.appendChild(tr); + } + + for(var i = 0, il = data.actual.length; i < il; i++) { + var tr = document.createElement('tr'); + addCellWithText(tr, data.actual[i].actualTime || data.actual[i].plannedTime); + addCellWithText(tr, data.actual[i].stop_seq_num + '. ' + data.actual[i].stop.name); + + if(data.actual[i].status == 'STOPPING') { + tr.className = 'success'; + } + tr.addEventListener('click', function(stopId){ return function(){ loadTimes(stopId); } }(prefix + data.actual[i].stop.shortName) ); + route_table.appendChild(tr); + } + }).fail(fail_ajax); } function startTimer(date) { if(date) { - setText(refresh_text, 'Last refreshed: just now') + setText(refresh_text, lang.last_refreshed.replace('$time', lang.time_now)); refresh_time = date; } if(!refresh_time) return; @@ -261,69 +270,173 @@ var ms = now.getTime() - refresh_time.getTime(); if(ms >= 120000) { - setText(refresh_text, 'Last refreshed: ' - + declinate(Math.floor(ms / 60000), 'minute ago', 'minutes ago')); + setText(refresh_text, lang.last_refreshed.replace( + '$time', + lang.time_minutes_ago_prefix + Math.floor(ms / 60000) + + lang.time_minutes_ago_suffix + )); startTimer(); } else { - setText(refresh_text, 'Last refreshed: ' - + declinate(Math.floor(ms / 1000), 'second ago', 'seconds ago')); + setText(refresh_text, lang.last_refreshed.replace( + '$time', + lang.time_seconds_ago_prefix + Math.floor(ms / 1000) + + lang.time_seconds_ago_suffix + )); } }, interval); } -var decodeEntitiesTextArea = document.createElement('textarea'); -function decodeEntities(text) { - decodeEntitiesTextArea.innerHTML = text; - return decodeEntitiesTextArea.value; +function translate() { + var elements = document.querySelectorAll('*[data-translate]'); + + var text_name; + for(var i = 0; i < elements.length; i++) { + text_name = elements[i].dataset.translate; + if(lang[text_name] == undefined) { + console.log('Missing translation: ' + text_name); + continue; + } + setText(elements[i], lang[text_name]); + } + + stop_name.setAttribute('placeholder', lang.stop_name_placeholder); + + if(stop_name_autocomplete.value) { + setText(refresh_text, lang.select_stop_click_go); + } else { + setText(refresh_text, lang.enter_stop_name_to_begin); + } + + setText(page_title, lang.page_title); + + if(!stop_id) return; + + loadTimes(); + loadRoute(); +} + +function change_language(lang) { + if(!lang || lang.length != 2) return false; + if(lang == language) return false; + lang_select.value = lang; + if(!lang_select.value) { + lang_select.value = language; + return; + } + language = lang; + + var script = document.createElement('script'); + script.type = 'text/javascript'; + script.src = 'lang_' + lang + '.js'; + script.id = 'lang_script'; + script.onload = translate; + + document.body.removeChild(document.getElementById('lang_script')); + document.body.appendChild(script); + + ignore_hashchange = true; + window.location.hash = '#!' + language + stop_id; + + return true; +} + +function hash() { + if(ignore_hashchange) { + ignore_hashchange = false; + return; + } + + if(window.location.hash.match(/^#![0-9]+$/)) { + loadTimes('t' + window.location.hash.substr(2)); + } else if(window.location.hash.match(/^#![bt][0-9]+$/)) { + loadTimes(window.location.hash.substr(2)); + } else if(window.location.hash.match(/^#![a-z]{2}[0-9]*$/)) { + var stop = 't' + window.location.hash.substr(4); + if(stop) stop_id = stop; + + if(!change_language(window.location.hash.substr(2, 2))) { + loadTimes(stop); + } + } else if(window.location.hash.match(/^#![a-z]{2}[bt][0-9]*$/)) { + var stop = window.location.hash.substr(4); + if(stop) stop_id = stop; + + if(!change_language(window.location.hash.substr(2, 2))) { + loadTimes(stop); + } + } +} + +function stop_autocomplete() { + if(stop_name_autocomplete_xhr) stop_name_autocomplete_xhr.abort(); + + stop_name_autocomplete_xhr = $.get( + 'stops/?query=' + encodeURIComponent(stop_name.value) + ).done(function(data) { + deleteChildren(stop_name_autocomplete); + for(var i = 0, il = data.length; i < il; i++) { + var opt = document.createElement('option'); + opt.value = data[i].id; + setText(opt, data[i].id.substr(0,1) == 'b' ? lang.select_stop_bus.replace('$stop', data[i].name) : lang.select_stop_tram.replace('$stop', data[i].name)); + stop_name_autocomplete.appendChild(opt); + } + + if(!stop_id) setText(refresh_text, lang.select_stop_click_go); + }).fail(fail_ajax); } function init() { if(!window.jQuery) { - fail('Required JavaScript jQuery library failed to load. You may try refreshing the page.'); + fail(lang.jquery_not_loaded); return; } $.ajaxSetup({ dataType: 'json', - timeout: 3000, + timeout: 10000, + }); + + lang_select.addEventListener('input', function(e) { + change_language(lang_select.value); }); stop_name.addEventListener('input', function(e) { if(!stop_name.value) return; - if(stop_name_autocomplete_xhr) stop_name_autocomplete_xhr.abort(); + if(stop_name_autocomplete_timer) clearTimeout(stop_name_autocomplete_timer); - stop_name_autocomplete_xhr = $.get( - ttss_base + '/lookup/autocomplete/json' - + '?query=' + encodeURIComponent(stop_name.value) - ).done(function(data) { - deleteChildren(stop_name_autocomplete); - for(var i = 1, il = data.length; i < il; i++) { - var opt = document.createElement('option'); - opt.value = data[i].id; - setText(opt, decodeEntities(data[i].name)); - stop_name_autocomplete.appendChild(opt); - } - - if(!stop_id) setText(refresh_text, 'Select the stop and click "Go"'); - }).fail(fail_ajax); + stop_name_autocomplete_timer = setTimeout(stop_autocomplete, 100); }); - setText(refresh_text, 'Enter the stop name to begin'); + setText(refresh_text, lang.enter_stop_name_to_begin); stop_name_form.addEventListener('submit', function(e) { e.preventDefault(); if(!stop_name_autocomplete.value) return; - stop_id = stop_name_autocomplete.value; - loadTimes(stop_id, true); + loadTimes(stop_name_autocomplete.value); }); - refresh_button.addEventListener('click', function(e) { - loadTimes(stop_id); + 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; }') + }); + + updateVehicleInfo() + + hash(); + + window.addEventListener('hashchange', hash); + + checkVersionInit(); } init(); -- Gitblit v1.9.1