AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Show selected plane information in separate panel

Browse source
This commit is contained in:
Carlos Salaverria 2016-08-30 15:07:54 -05:00
parent 3588a47058
commit d5bd164169
3 changed files with 104 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
public_html/index.html
View file

@ -51,64 +51,6 @@
<a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a> <a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a>
<a id="expand_sidebar_button" href="#"></a> <a id="expand_sidebar_button" href="#"></a>
</div> </div>
<div id="sidebar_container">
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
<div id="sidebar_canvas">
<a id="show_map_button" href="#"></a>
<div id="sudo_buttons">
<table style="width: 100%">
<tr>
<td style="width: 150px; text-align: center;">
[ <span class="pointer" onclick="resetMap();">Reset Map</span> ]
</td>
<td style="width: 150px; text-align: center;" class="pointer">
[ <span onclick="selectAllPlanes();">Select All</span> ]
</td>
<td style="width: 150px; text-align: center;" class="pointer">
[ <span onclick="deselectAllPlanes();">Select None</span> ]
</td>
</tr>
</table>
</div> <!-- sudo_buttons -->
<div id="dump1090_infoblock">
<table style="width: 100%">
<tr class="infoblock_heading">
<td>
<b id="infoblock_name">FlightAware dump1090</b>
</td>
<td style="text-align: right">
<a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a>
</td>
</tr>
<tr class="infoblock_body">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="infoblock_body dim">
<td>(no aircraft selected)</td>
<td>&nbsp;</td>
</tr>
<tr class="infoblock_body">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="infoblock_body">
<td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td>
<td>Messages: <span id="dump1090_message_rate">n/a</span>/sec</td>
</tr>
<tr class="infoblock_body">
<td>(with positions): <span id="dump1090_total_ac_positions">n/a</span></td>
<td>History: <span id="dump1090_total_history">n/a</span> positions</td>
</tr>
</table>
</div> <!-- dump1090_infoblock -->
<div id="selected_infoblock" class="hidden"> <div id="selected_infoblock" class="hidden">
<table style="width: 100%"> <table style="width: 100%">
<tr class="infoblock_heading"> <tr class="infoblock_heading">
@ -160,6 +102,51 @@
</tr> </tr>
</table> </table>
</div> <!-- selected_infoblock --> </div> <!-- selected_infoblock -->
<div id="sidebar_container">
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
<div id="sidebar_canvas">
<a id="show_map_button" href="#"></a>
<div id="dump1090_infoblock">
<table style="width: 100%">
<tr class="infoblock_heading">
<td>
<b id="infoblock_name">FlightAware dump1090</b>
</td>
<td style="text-align: right">
<a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a>
</td>
</tr>
<tr class="infoblock_body">
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3">
<div id="sudo_buttons">
<span class="pointer" onclick="resetMap();">[ Reset Map ]</span>
<span class="pointer" onclick="selectAllPlanes();">[ Select All ]</span>
<span class="pointer" onclick="deselectAllPlanes();">[ Select None ]</span>
</div>
</td>
</tr>
<tr class="infoblock_body">
<td>&nbsp;</td>
</tr>
<tr class="infoblock_body">
<td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td>
<td>Messages: <span id="dump1090_message_rate">n/a</span>/sec</td>
</tr>
<tr class="infoblock_body">
<td>(with positions): <span id="dump1090_total_ac_positions">n/a</span></td>
<td>History: <span id="dump1090_total_history">n/a</span> positions</td>
</tr>
</table>
</div> <!-- dump1090_infoblock -->
<div id="units_container"> <div id="units_container">
<label for="units_selector">Units:</label> <label for="units_selector">Units:</label>

22
public_html/script.js
View file

@ -710,8 +710,6 @@ function refreshSelected() {
selected = Planes[SelectedPlane]; selected = Planes[SelectedPlane];
} }
if (!selected) {
$('#selected_infoblock').css('display','none');
$('#dump1090_infoblock').css('display','block'); $('#dump1090_infoblock').css('display','block');
$('#dump1090_version').text(Dump1090Version); $('#dump1090_version').text(Dump1090Version);
$('#dump1090_total_ac').text(TrackedAircraft); $('#dump1090_total_ac').text(TrackedAircraft);
@ -724,12 +722,12 @@ function refreshSelected() {
$('#dump1090_message_rate').text("n/a"); $('#dump1090_message_rate').text("n/a");
} }
setSelectedInfoBlockVisibility();
if (!selected) {
return; return;
} }
$('#dump1090_infoblock').css('display','none');
$('#selected_infoblock').css('display','block');
$('#selected_flightaware_link').attr('href','//flightaware.com/live/modes/'+selected.icao+'/redirect'); $('#selected_flightaware_link').attr('href','//flightaware.com/live/modes/'+selected.icao+'/redirect');
if (selected.flight !== null && selected.flight !== "") { if (selected.flight !== null && selected.flight !== "") {
@ -1114,6 +1112,7 @@ function expandSidebar(e) {
$("#show_map_button").show(); $("#show_map_button").show();
$("#sidebar_container").width("100%"); $("#sidebar_container").width("100%");
setColumnVisibility(); setColumnVisibility();
setSelectedInfoBlockVisibility();
updateMapSize(); updateMapSize();
} }
@ -1125,6 +1124,7 @@ function showMap() {
$("#show_map_button").hide(); $("#show_map_button").hide();
$("#sidebar_container").width("420px"); $("#sidebar_container").width("420px");
setColumnVisibility(); setColumnVisibility();
setSelectedInfoBlockVisibility();
updateMapSize(); updateMapSize();
} }
@ -1156,6 +1156,18 @@ function setColumnVisibility() {
showColumn(infoTable, "#flightaware_photo_link", !mapIsVisible); showColumn(infoTable, "#flightaware_photo_link", !mapIsVisible);
} }
function setSelectedInfoBlockVisibility() {
var mapIsVisible = $("#map_container").is(":visible");
var planeSelected = (typeof SelectedPlane !== 'undefined' && SelectedPlane != null && SelectedPlane != "ICAO");
if (planeSelected && mapIsVisible) {
$('#selected_infoblock').show();
}
else {
$('#selected_infoblock').hide();
}
}
function initializeUnitsSelector() { function initializeUnitsSelector() {
// Get display unit preferences from local storage // Get display unit preferences from local storage
if (!localStorage.getItem('displayUnits')) { if (!localStorage.getItem('displayUnits')) {

19
public_html/style.css
View file

@ -8,6 +8,15 @@ html, body {
height: 100%; height: 100%;
} }
#selected_infoblock {
position: absolute;
background: #ffffff;
padding: 20px;
box-shadow: 4px 4px 10px #444444;
left: 20px;
top: 20px;
}
#map_container { #map_container {
flex: 1 1 auto; flex: 1 1 auto;
position: relative; position: relative;
@ -106,7 +115,14 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
#spinny { width: 128px; height: 128px; position: absolute; top: 50%; left: 50%; margin: -64px 0 0 -64px; } #spinny { width: 128px; height: 128px; position: absolute; top: 50%; left: 50%; margin: -64px 0 0 -64px; }
#loader_progress { width: 250px; height: 20px; position: absolute; top: 50%; left: 50%; margin: 128px 0 0 -125px; } #loader_progress { width: 250px; height: 20px; position: absolute; top: 50%; left: 50%; margin: 128px 0 0 -125px; }
#tableinfo, #sudo_buttons { font-size: x-small; font-family: monospace; } #tableinfo { font-size: x-small; font-family: monospace; }
#sudo_buttons {
display: flex;
padding: 0 40px 0 40px;
justify-content: space-between;
font-size: small;
}
#units_container, #units_container,
#altitude_filter_form { #altitude_filter_form {
@ -151,4 +167,3 @@ select.error, textarea.error, input.error {
.layer-switcher { .layer-switcher {
top: 5em !important; top: 5em !important;
} }