Add stop departures and vehicle route to pane

 common.js

@@ -31,6 +31,52 @@
    setInterval(checkVersion, 3600000);
}

/* Parsing of received JSON parts */
function parseStatus(status) {
    switch(status.status) {
        case 'STOPPING':
            return lang.boarding_sign;
        case 'PREDICTED':
            if(status.actualRelativeTime <= 0)
                return lang.boarding_sign;
            if(status.actualRelativeTime >= 60)
                return lang.time_minutes_prefix + Math.floor(status.actualRelativeTime / 60) + lang.time_minutes_suffix;
            return lang.time_seconds_prefix + status.actualRelativeTime + lang.time_seconds_suffix;
        case 'DEPARTED':
            return lang.time_minutes_ago_prefix + Math.floor(-status.actualRelativeTime / 60) + lang.time_minutes_ago_suffix;
        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 lang.unknown_sign;
    if(!status.plannedTime) return lang.unknown_sign;
	
    var now = new Date();
    var actual = parseTime(now, status.actualTime);
    var planned = parseTime(now, status.plannedTime);
	
    return lang.time_minutes_prefix + ((actual.getTime() - planned.getTime()) / 1000 / 60) + lang.time_minutes_suffix;
}

// Webservice-related functions
function parseVehicle(vehicleId) {
    if(!vehicleId) return false;

 index.js

@@ -42,51 +42,6 @@
var vehicle_data = document.getElementById('vehicle-data');
var vehicle_data_style = document.getElementById('vehicle-data-style');

function parseStatus(status) {
    switch(status.status) {
        case 'STOPPING':
            return lang.boarding_sign;
        case 'PREDICTED':
            if(status.actualRelativeTime <= 0)
                return lang.boarding_sign;
            if(status.actualRelativeTime >= 60)
                return lang.time_minutes_prefix + Math.floor(status.actualRelativeTime / 60) + lang.time_minutes_suffix;
            return lang.time_seconds_prefix + status.actualRelativeTime + lang.time_seconds_suffix;
        case 'DEPARTED':
            return lang.time_minutes_ago_prefix + Math.floor(-status.actualRelativeTime / 60) + lang.time_minutes_ago_suffix;
        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 lang.unknown_sign;
    if(!status.plannedTime) return lang.unknown_sign;
	
    var now = new Date();
    var actual = parseTime(now, status.actualTime);
    var planned = parseTime(now, status.plannedTime);
	
    return lang.time_minutes_prefix + ((actual.getTime() - planned.getTime()) / 1000 / 60) + lang.time_minutes_suffix;
}

function fail(message, more) {
    if(times_timer) clearTimeout(times_timer);
    

 lang_en.js

@@ -12,6 +12,7 @@
    go_button: 'Go',
    refresh_button: '\u27f3 Refresh',
    last_refreshed: 'Last refreshed: $time',
    loading: 'Loading...',
    
    line_alert_pattern: 'Line $line: $alert',
    
@@ -42,6 +43,8 @@
    type_stop: 'Stop',
    type_stoppoint: 'Stop point',
    
    departures_for_stop: 'Click for stop departures (and not only this stop point).',
	
    tram_type_pattern: '$num $type ($floor)',
    high_floor: 'high floor',
    high_floor_sign: '\u2010\u00A0',

 lang_pl.js

@@ -12,6 +12,7 @@
    go_button: 'Dalej',
    refresh_button: '\u27f3 Odśwież',
    last_refreshed: 'Ostatnio odświeżone $time',
    loading: 'Ładowanie...',
    
    line_alert_pattern: 'Linia $line: $alert',
    
@@ -42,6 +43,8 @@
    type_stop: 'Przystanek',
    type_stoppoint: 'Punkt przystankowy',
    
    departures_for_stop: 'Kliknij, by zobaczyć odjazdy dla całego przystanku (a nie tylko punktu przystankowego).',
	
    tram_type_pattern: '$num $type ($floor)',
    high_floor: 'wysokopodłogowy',
    high_floor_sign: '\u2010\u00A0',

 map.css

@@ -33,7 +33,9 @@
    transition: right .4s;
    transition: width .4s;
    
    opacity: .8;
    opacity: .85;
	
    overflow-y: auto;
}

#popup.show {
@@ -51,6 +53,11 @@
    }
}

#popup .close {
    float: right;
    cursor: pointer;
    font-size: 20px;
}
#popup .type {
    padding-bottom: 0;
    color: #444;
@@ -65,6 +72,37 @@
}
#popup .vehicleInfo {
    font-size: 21px;
    margin: -4px 0 -5px;
}
#popup table {
    margin-top: 3px;
    border-top: 1px solid gray;
    width: 100%;
    border-collapse: collapse;
}
#popup table th {
    text-align: left;
    border-bottom: 1px solid #999;
    padding-top: 5px;
}
#popup table td {
    vertical-align: top;
}
#popup .active {
    background: #f5f5f5;
    color: gray;
}
#popup .success {
    background: #dff0d8;
}
#popup .warning {
    background: #fcf8e3;
}
#popup .danger {
    background: #f2dede;
}
#popup table .vehicleInfo {
    float: right;
}

#title {
@@ -74,13 +112,16 @@
    font-weight: bold;
    background-color: rgba(255,255,255,.6);
}
#fail {
    top: -10em;
    right: 0.5em;

#fail, #popup .error {
    background: red;
    color: white;
    font-weight: bold;
    padding: 5px;
}
#fail {
    top: -10em;
    right: 0.5em;
}
.ol-zoom {
    top: 2.2em;
@@ -89,7 +130,12 @@
a {
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    text-decoration: underline;
}

.small {
    font-size: 80%;
}

 map.js

@@ -1,5 +1,5 @@
//var ttss_base = 'http://www.ttss.krakow.pl/internetservice';
var ttss_base = '/proxy.php';
var ttss_base = 'proxy.php';
var ttss_refresh = 10000; // 10 seconds

var vehicles_xhr = null;
@@ -15,6 +15,8 @@
var stop_points_layer = null;

var feature_id = null;
var feature_xhr = null;
var feature_timer = null;

var map = null;
var popup_element = document.getElementById('popup');
@@ -29,17 +31,29 @@
    fail_element.style.top = '0.5em';
}

function fail_ajax(data) {
function fail_popup(msg) {
    addElementWithText(popup_element, 'p', msg).className = 'error';
}

function fail_ajax_generic(data, fnc) {
    // abort() is not a failure
    if(data.readyState == 0 && data.statusText == 'abort') return;
    
    if(data.status == 0) {
        fail(lang.error_request_failed_connectivity, data);
        fnc(lang.error_request_failed_connectivity, data);
    } else if (data.statusText) {
        fail(lang.error_request_failed_status.replace('$status', data.statusText), data);
        fnc(lang.error_request_failed_status.replace('$status', data.statusText), data);
    } else {
        fail(lang.error_request_failed, data);
        fnc(lang.error_request_failed, data);
    }
}

function fail_ajax(data) {
    fail_ajax_generic(data, fail);
}

function fail_ajax_popup(data) {
    fail_ajax_generic(data, fail_popup);
}

function getGeometry(object) {
@@ -175,6 +189,98 @@
    }).fail(fail_ajax);
}

function vehicleTable(tripId, table) {
    if(feature_xhr) feature_xhr.abort();
    if(feature_timer) clearTimeout(feature_timer);
	
    feature_xhr = $.get(
        ttss_base + '/services/tripInfo/tripPassages'
            + '?tripId=' + encodeURIComponent(tripId)
            + '&mode=departure'
    ).done(function(data) {
        if(!data.routeName || !data.directionText || data.old.length + data.actual.length == 0) {
            return;
        }
		
        deleteChildren(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';
            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';
            }
            table.appendChild(tr);
        }
		
        feature_timer = setTimeout(function() { vehicleTable(tripId, table); }, ttss_refresh);
    }).fail(fail_ajax_popup);
}

function stopTable(stopType, stopId, table) {
    if(feature_xhr) feature_xhr.abort();
    if(feature_timer) clearTimeout(feature_timer);
	
    feature_xhr = $.get(
        ttss_base + '/services/passageInfo/stopPassages/' + stopType
            + '?' + stopType + '=' + encodeURIComponent(stopId)
            + '&mode=departure'
    ).done(function(data) {
        deleteChildren(table);
		
        for(var i = 0, il = data.old.length; i < il; i++) {
            var tr = document.createElement('tr');
            addCellWithText(tr, data.old[i].patternText);
            var dir_cell = addCellWithText(tr, data.old[i].direction);
            var vehicle = parseVehicle(data.old[i].vehicleId);
            dir_cell.appendChild(displayVehicle(vehicle));
            var status = parseStatus(data.old[i]);
            addCellWithText(tr, status);
            addCellWithText(tr, '');
			
            tr.className = 'active';
            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);
            var dir_cell = addCellWithText(tr, data.actual[i].direction);
            var vehicle = parseVehicle(data.actual[i].vehicleId);
            dir_cell.appendChild(displayVehicle(vehicle));
            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 == lang.boarding_sign) {
                tr.className = 'success';
                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';
            }
			
            table.appendChild(tr);
        }
		
        feature_timer = setTimeout(function() { stopTable(stopType, stopId, table); }, ttss_refresh);
    }).fail(fail_ajax_popup);
}

function featureClicked(feature) {
    if(!feature) {
        feature_id = null;
@@ -191,9 +297,18 @@
    
    deleteChildren(popup_element);
    
    var close = addParaWithText(popup_element, '×');
    close.className = 'close';
    close.addEventListener('click', function() { featureClicked(); });
	
    var type;
    var name = feature.get('name');
    var additional;
    var table = document.createElement('table');
    var thead = document.createElement('thead');
    var tbody = document.createElement('tbody');
    table.appendChild(thead);
    table.appendChild(tbody);
    
    switch(feature.getId().substr(0, 1)) {
        case 'v':
@@ -208,14 +323,50 @@
            additional = document.createElement('p');
            setText(additional, span.title);
            additional.insertBefore(span, additional.firstChild);
			
            addElementWithText(thead, 'th', lang.header_time);
            addElementWithText(thead, 'th', lang.header_stop);
			
            vehicleTable(feature.get('tripId'), tbody);
        break;
        case 's':
            type = lang.type_stop;
			
            addElementWithText(thead, 'th', lang.header_line);
            addElementWithText(thead, 'th', lang.header_direction);
            addElementWithText(thead, 'th', lang.header_time);
            addElementWithText(thead, 'th', lang.header_delay);
			
            stopTable('stop', feature.get('shortName'), tbody);
        break;
        case 'p':
            type = lang.type_stoppoint;
			
            additional = document.createElement('p');
            additional.className = 'small';
            addElementWithText(additional, 'a', lang.departures_for_stop).addEventListener(
                'click',
                function() {
                    featureClicked(stops_source.forEachFeature(function(stop_feature) {
                        if(stop_feature.get('shortName') == feature.get('shortName')) {
                            return stop_feature;
                        }
                    }));
                }
            );
			
            addElementWithText(thead, 'th', lang.header_line);
            addElementWithText(thead, 'th', lang.header_direction);
            addElementWithText(thead, 'th', lang.header_time);
            addElementWithText(thead, 'th', lang.header_delay);
			
            stopTable('stopPoint', feature.get('stopPoint'), tbody);
        break;
    }
	
    var loader = addElementWithText(tbody, 'td', lang.loading);
    loader.className = 'active';
    loader.colspan = thead.childNodes.length;
    
    addParaWithText(popup_element, type).className = 'type';
    addParaWithText(popup_element, name).className = 'name';
@@ -224,6 +375,8 @@
        popup_element.appendChild(additional);
    }
    
    popup_element.appendChild(table);
	
    ignore_hashchange = true;
    window.location.hash = '#!' + feature.getId();