ttss/mpk-ttss - git.Jacekk.net

commits
diff

2017-04-17

Jacek Kowalski

Add vehicle info before schedule table

0f11d0

diff | tree

2017-04-17

Jacek Kowalski

Add separate column for vehicle number (hidden by default)

4b0eda

diff | tree

5 files modified

	index.css	13 ●●●●● patch \| view \| raw \| blame \| history
	index.html	9 ●●●●● patch \| view \| raw \| blame \| history
	index.js	42 ●●●●● patch \| view \| raw \| blame \| history
	lang_en.js	1 ●●●●● patch \| view \| raw \| blame \| history
	lang_pl.js	1 ●●●●● patch \| view \| raw \| blame \| history

 index.css

@@ -35,13 +35,24 @@
}

.vehicleInfo {
    font-size: 21px;
}
#times-table .vehicleInfo {
    float: right;
    margin: -5px 0;
    font-size: 21px;
}
#route-vehicle .vehicleInfo {
    margin-right: .5em;
}
#vehicle-data {
    float: right;
}
.bigger {
    font-size: 21px;
}
.vehicleData {
    display: none;
}

/* Change navbar behavior for low media width */
.navbar-nav {

 index.html

@@ -7,6 +7,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="index.css">
        <style type="text/css" id="vehicle-data-style"></style>
    </head>
    <body>
        <nav class="navbar navbar-default">
@@ -63,7 +64,11 @@
                        <thead>
                            <tr>
                                <th data-translate="header_line">Linia</th>
                                <th data-translate="header_direction">Kierunek</th>
                                <th>
                                    <span data-translate="header_direction">Kierunek</span>
                                    <a id="vehicle-data" data-translate="header_vehicle">Pojazd</span>
                                </th>
                                <th data-translate="header_vehicle" class="vehicleData">Pojazd</th>
                                <th data-translate="header_time">Czas</th>
                                <th data-translate="header_delay">Opóźn.</th>
                            </tr>
@@ -93,6 +98,8 @@
                    
                    <h3 id="route-line"></h3>
                    
                    <p id="route-vehicle"></p>
					
                    <table class="table table-condensed">
                        <thead>
                            <tr>

 index.js

@@ -26,6 +26,7 @@
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 refresh_button = document.getElementById('refresh');
var refresh_text = document.getElementById('refresh-text');
@@ -37,6 +38,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) {
@@ -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.actual[i].vehicleId);
            dir_cell.appendChild(displayVehicle(vehicle));
            addCellWithText(tr, 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.actual[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.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) 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,14 @@
        }
        
        setText(route_line, data.routeName + ' ' + data.directionText);
		
        deleteChildren(route_vehicle);
        if(vehicleInfo) {
            var span = displayVehicle(vehicleInfo);
            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++) {
@@ -425,15 +447,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);

 lang_en.js

@@ -17,6 +17,7 @@
    
    header_line: 'Line',
    header_direction: 'Direction',
    header_vehicle: 'Vehicle',
    header_time: 'Time',
    header_delay: 'Delay',
    header_lines: 'Lines',

 lang_pl.js

@@ -17,6 +17,7 @@
    
    header_line: 'Linia',
    header_direction: 'Kierunek',
    header_vehicle: 'Pojazd',
    header_time: 'Odjazd',
    header_delay: 'Opóźn.',
    header_lines: 'Linie',

			@@ -35,13 +35,24 @@
			}

			.vehicleInfo {
			font-size: 21px;
			}
			#times-table .vehicleInfo {
			float: right;
			margin: -5px 0;
			font-size: 21px;
			}
			#route-vehicle .vehicleInfo {
			margin-right: .5em;
			}
			#vehicle-data {
			float: right;
			}
			.bigger {
			font-size: 21px;
			}
			.vehicleData {
			display: none;
			}

			/* Change navbar behavior for low media width */
			.navbar-nav {

			@@ -7,6 +7,7 @@
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
			<link rel="stylesheet" type="text/css" href="index.css">
			<style type="text/css" id="vehicle-data-style"></style>
			</head>
			<body>
			<nav class="navbar navbar-default">
			@@ -63,7 +64,11 @@
			<thead>
			<tr>
			<th data-translate="header_line">Linia</th>
			<th data-translate="header_direction">Kierunek</th>
			<th>
			<span data-translate="header_direction">Kierunek</span>
			<a id="vehicle-data" data-translate="header_vehicle">Pojazd</span>
			</th>
			<th data-translate="header_vehicle" class="vehicleData">Pojazd</th>
			<th data-translate="header_time">Czas</th>
			<th data-translate="header_delay">Opóźn.</th>
			</tr>
			@@ -93,6 +98,8 @@

			<h3 id="route-line"></h3>

			<p id="route-vehicle"></p>

			<table class="table table-condensed">
			<thead>
			<tr>

			@@ -26,6 +26,7 @@
			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 refresh_button = document.getElementById('refresh');
			var refresh_text = document.getElementById('refresh-text');
			@@ -37,6 +38,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) {
			@@ -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.actual[i].vehicleId);
			dir_cell.appendChild(displayVehicle(vehicle));
			addCellWithText(tr, 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.actual[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.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) 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,14 @@
			}

			setText(route_line, data.routeName + ' ' + data.directionText);

			deleteChildren(route_vehicle);
			if(vehicleInfo) {
			var span = displayVehicle(vehicleInfo);
			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++) {
			@@ -425,15 +447,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);

			@@ -17,6 +17,7 @@

			header_line: 'Line',
			header_direction: 'Direction',
			header_vehicle: 'Vehicle',
			header_time: 'Time',
			header_delay: 'Delay',
			header_lines: 'Lines',

			@@ -17,6 +17,7 @@

			header_line: 'Linia',
			header_direction: 'Kierunek',
			header_vehicle: 'Pojazd',
			header_time: 'Odjazd',
			header_delay: 'Opóźn.',
			header_lines: 'Linie',