Show additional columns when table is fully expanded

This commit is contained in:
Carlos Salaverria 2016-08-19 17:37:43 -05:00
parent 876e6874b4
commit 1c2bea38df
4 changed files with 87 additions and 16 deletions

View file

@ -170,3 +170,18 @@ function format_distance_long(dist) {
function format_latlng(p) {
return p[1].toFixed(3) + DEGREES + "," + NBSP + p[0].toFixed(3) + DEGREES;
}
function format_data_source(source) {
switch (source) {
case 'mlat':
return "MLAT";
case 'adsb':
return "ADSB";
case 'mode_s':
return "Mode S";
case 'mode_ac':
return "Mode A/C";
}
return "";
}

View file

@ -166,15 +166,21 @@
<tr>
<td id="icao" onclick="sortByICAO();">ICAO</td>
<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
<td id="flight" onclick="sortByFlight();">Flight</td>
<td id="flight" onclick="sortByFlight();">Ident</td>
<td id="registration" onclick="sortByRegistration();">Registration</td>
<td id="aircraft_type" onclick="sortByAircraftType();"> Aircraft type</td>
<td id="squawk" onclick="sortBySquawk();" style="text-align: right">Squawk</td>
<td id="altitude" onclick="sortByAltitude();" style="text-align: right">Altitude</td>
<td id="speed" onclick="sortBySpeed();" style="text-align: right">Speed</td>
<td id="vert_rate" onclick="sortByVerticalRate();" style="text-align: right">Vertical Rate</td>
<td id="distance" onclick="sortByDistance();" style="text-align: right">Distance</td>
<td id="track" onclick="sortByTrack();" style="text-align: right">Track</td>
<td id="msgs" onclick="sortByMsgs();" style="text-align: right">Msgs</td>
<td id="seen" onclick="sortBySeen();" style="text-align: right">Age</td>
<td id="rssi" style="text-align: right">RSSI</td>
<td id="rssi" onclick="sortByRssi();" style="text-align: right">RSSI</td>
<td id="lat" onclick="sortByLatitude();" style="text-align: right">Latitude</td>
<td id="lon" onclick="sortByLongitude();" style="text-align: right">Longitude</td>
<td id="data_source" onclick="sortByDataSource();" style="text-align: right">Data Source</td>
</tr>
</thead>
<tbody>
@ -182,14 +188,20 @@
<td>ICAO</td>
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
<td>FLIGHT</td>
<td>REGISTRATION</td>
<td>AIRCRAFT_TYPE</td>
<td style="text-align: right">SQUAWK</td>
<td style="text-align: right">ALTITUDE</td>
<td style="text-align: right">SPEED</td>
<td style="text-align: right">VERT_RATE</td>
<td style="text-align: right">DISTANCE</td>
<td style="text-align: right">TRACK</td>
<td style="text-align: right">MSGS</td>
<td style="text-align: right">SEEN</td>
<td style="text-align: right">RSSI</td>
<td style="text-align: right">LAT</td>
<td style="text-align: right">LON</td>
<td style="text-align: right">DATA_SOURCE</td>
</tr>
</tbody>
</table>

View file

@ -178,6 +178,27 @@ PlaneObject.prototype.clearLines = function() {
}
};
PlaneObject.prototype.getDataSource = function() {
// MLAT
if (this.position_from_mlat) {
return 'mlat';
}
// Not MLAT, but position reported - ADSB
if (this.position !== null) {
return 'adsb';
}
var emptyHexRegex = /^0*$/;
// No position and no ICAO hex code - Mode A/C
if (this.hex === null || emptyHexRegex.test(this.hex)) {
return 'mode_ac';
}
// No position and ICAO hex code present - Mode S
return 'mode_s';
};
PlaneObject.prototype.getMarkerIconType = function() {
var lookup = {
'A1' : 'light',

View file

@ -209,8 +209,7 @@ function initialize() {
$("#expand_sidebar_button").click(expandSidebar);
$("#show_map_button").hide();
var infoTable = $("#tableinfo");
showColumn(infoTable, "#rssi", false);
setColumnVisibility();
// Force map to redraw if sidebar container is resized - use a timer to debounce
var mapResizeTimeout;
@ -791,14 +790,20 @@ function refreshTableInfo() {
// ICAO doesn't change
tableplane.tr.cells[2].textContent = (tableplane.flight !== null ? tableplane.flight : "");
tableplane.tr.cells[3].textContent = (tableplane.squawk !== null ? tableplane.squawk : "");
tableplane.tr.cells[4].textContent = format_altitude_brief(tableplane.altitude, tableplane.vert_rate);
tableplane.tr.cells[5].textContent = format_speed_brief(tableplane.speed);
tableplane.tr.cells[6].textContent = format_distance_brief(tableplane.sitedist);
tableplane.tr.cells[7].textContent = format_track_brief(tableplane.track);
tableplane.tr.cells[8].textContent = tableplane.messages;
tableplane.tr.cells[9].textContent = tableplane.seen.toFixed(0);
tableplane.tr.cells[10].textContent = tableplane.rssi;
tableplane.tr.cells[3].textContent = (tableplane.registration !== null ? tableplane.registration : "");
tableplane.tr.cells[4].textContent = (tableplane.icaotype !== null ? tableplane.icaotype : "");
tableplane.tr.cells[5].textContent = (tableplane.squawk !== null ? tableplane.squawk : "");
tableplane.tr.cells[6].textContent = format_altitude_brief(tableplane.altitude, tableplane.vert_rate);
tableplane.tr.cells[7].textContent = format_speed_brief(tableplane.speed);
tableplane.tr.cells[8].textContent = (tableplane.vert_rate !== null ? tableplane.vert_rate : "");
tableplane.tr.cells[9].textContent = format_distance_brief(tableplane.sitedist);
tableplane.tr.cells[10].textContent = format_track_brief(tableplane.track);
tableplane.tr.cells[11].textContent = tableplane.messages;
tableplane.tr.cells[12].textContent = tableplane.seen.toFixed(0);
tableplane.tr.cells[13].textContent = (tableplane.rssi !== null ? tableplane.rssi : "");
tableplane.tr.cells[14].textContent = (tableplane.position !== null ? tableplane.position[1] : "");
tableplane.tr.cells[15].textContent = (tableplane.position !== null ? tableplane.position[0] : "");
tableplane.tr.cells[16].textContent = format_data_source(tableplane.getDataSource());
tableplane.tr.className = classes;
}
}
@ -833,14 +838,21 @@ function compareNumeric(xf,yf) {
function sortByICAO() { sortBy('icao', compareAlpha, function(x) { return x.icao; }); }
function sortByFlight() { sortBy('flight', compareAlpha, function(x) { return x.flight; }); }
function sortByRegistration() { sortBy('registration', compareAlpha, function(x) { return x.registration; }); }
function sortByAircraftType() { sortBy('icaotype', compareAlpha, function(x) { return x.icaotype; }); }
function sortBySquawk() { sortBy('squawk', compareAlpha, function(x) { return x.squawk; }); }
function sortByAltitude() { sortBy('altitude',compareNumeric, function(x) { return (x.altitude == "ground" ? -1e9 : x.altitude); }); }
function sortBySpeed() { sortBy('speed', compareNumeric, function(x) { return x.speed; }); }
function sortByVerticalRate() { sortBy('vert_rate', compareNumeric, function(x) { return x.vert_rate; }); }
function sortByDistance() { sortBy('sitedist',compareNumeric, function(x) { return x.sitedist; }); }
function sortByTrack() { sortBy('track', compareNumeric, function(x) { return x.track; }); }
function sortByMsgs() { sortBy('msgs', compareNumeric, function(x) { return x.messages; }); }
function sortBySeen() { sortBy('seen', compareNumeric, function(x) { return x.seen; }); }
function sortByCountry() { sortBy('country', compareAlpha, function(x) { return x.icaorange.country; }); }
function sortByRssi() { sortBy('rssi', compareNumeric, function(x) { return x.rssi }); }
function sortByLatitude() { sortBy('lat', compareNumeric, function(x) { return (x.position !== null ? x.position[1] : null) }); }
function sortByLongitude() { sortBy('lon', compareNumeric, function(x) { return (x.position !== null ? x.position[0] : null) }); }
function sortByDataSource() { sortBy('data_source', compareAlpha, function(x) { return x.getDataSource() } ); }
var sortId = '';
var sortCompare = null;
@ -1040,8 +1052,7 @@ function expandSidebar(e) {
$("#reset_map_button").hide();
$("#show_map_button").show();
$("#sidebar_container").width("100%");
var infoTable = $("#tableinfo");
showColumn(infoTable, "#rssi", true);
setColumnVisibility();
updateMapSize();
}
@ -1052,8 +1063,7 @@ function showMap() {
$("#reset_map_button").show();
$("#show_map_button").hide();
$("#sidebar_container").width("410px");
var infoTable = $("#tableinfo");
showColumn(infoTable, "#rssi", false);
setColumnVisibility();
updateMapSize();
}
@ -1068,3 +1078,16 @@ function showColumn(table, columnId, visible) {
}
}
}
function setColumnVisibility() {
var mapIsVisible = $("#map_container").is(":visible");
var infoTable = $("#tableinfo");
showColumn(infoTable, "#registration", !mapIsVisible);
showColumn(infoTable, "#aircraft_type", !mapIsVisible);
showColumn(infoTable, "#vert_rate", !mapIsVisible);
showColumn(infoTable, "#rssi", !mapIsVisible);
showColumn(infoTable, "#lat", !mapIsVisible);
showColumn(infoTable, "#lon", !mapIsVisible);
showColumn(infoTable, "#data_source", !mapIsVisible);
}