Show selected plane information in separate panel
This commit is contained in:
parent
3588a47058
commit
d5bd164169
|
@ -51,25 +51,61 @@
|
||||||
<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="selected_infoblock" class="hidden">
|
||||||
|
<table style="width: 100%">
|
||||||
|
<tr class="infoblock_heading">
|
||||||
|
<td colspan="2">
|
||||||
|
<b>
|
||||||
|
<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span>
|
||||||
|
</b>
|
||||||
|
<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">⇒</span>
|
||||||
|
|
||||||
|
<span id="selected_flag">
|
||||||
|
<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
|
||||||
|
<span id="selected_icao"></span>
|
||||||
|
</a>
|
||||||
|
<span id="selected_registration"></span>
|
||||||
|
<span id="selected_icaotype"></span>
|
||||||
|
<span id="selected_emergency"></span>
|
||||||
|
<a id="selected_flightaware_link" href="" target="_blank">[FlightAware]</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr id="infoblock_country" class="infoblock_body">
|
||||||
|
<td colspan="2">Country of registration: <span id="selected_country">n/a</span></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="infoblock_body">
|
||||||
|
<td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
|
||||||
|
<td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="infoblock_body">
|
||||||
|
<td>Speed: <span id="selected_speed">n/a</span></td>
|
||||||
|
<td>RSSI: <span id="selected_rssi">n/a</span></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="infoblock_body">
|
||||||
|
<td>Track: <span id="selected_track">n/a</span></td>
|
||||||
|
<td>Last seen: <span id="selected_seen">n/a</span></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="infoblock_body">
|
||||||
|
<td colspan="2">Position: <span id="selected_position">n/a</span></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="infoblock_body">
|
||||||
|
<td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div> <!-- selected_infoblock -->
|
||||||
<div id="sidebar_container">
|
<div id="sidebar_container">
|
||||||
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
|
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
|
||||||
<div id="sidebar_canvas">
|
<div id="sidebar_canvas">
|
||||||
<a id="show_map_button" href="#"></a>
|
<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">
|
<div id="dump1090_infoblock">
|
||||||
<table style="width: 100%">
|
<table style="width: 100%">
|
||||||
|
@ -84,17 +120,20 @@
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
<tr class="infoblock_body">
|
||||||
<td> </td>
|
<td> </td>
|
||||||
<td> </td>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr class="infoblock_body dim">
|
<tr>
|
||||||
<td>(no aircraft selected)</td>
|
<td colspan="3">
|
||||||
<td> </td>
|
<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>
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
<tr class="infoblock_body">
|
||||||
<td> </td>
|
<td> </td>
|
||||||
<td> </td>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
<tr class="infoblock_body">
|
||||||
|
@ -109,58 +148,6 @@
|
||||||
</table>
|
</table>
|
||||||
</div> <!-- dump1090_infoblock -->
|
</div> <!-- dump1090_infoblock -->
|
||||||
|
|
||||||
<div id="selected_infoblock" class="hidden">
|
|
||||||
<table style="width: 100%">
|
|
||||||
<tr class="infoblock_heading">
|
|
||||||
<td colspan="2">
|
|
||||||
<b>
|
|
||||||
<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span>
|
|
||||||
</b>
|
|
||||||
<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">⇒</span>
|
|
||||||
|
|
||||||
<span id="selected_flag">
|
|
||||||
<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
|
|
||||||
<span id="selected_icao"></span>
|
|
||||||
</a>
|
|
||||||
<span id="selected_registration"></span>
|
|
||||||
<span id="selected_icaotype"></span>
|
|
||||||
<span id="selected_emergency"></span>
|
|
||||||
<a id="selected_flightaware_link" href="" target="_blank">[FlightAware]</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr id="infoblock_country" class="infoblock_body">
|
|
||||||
<td colspan="2">Country of registration: <span id="selected_country">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
|
|
||||||
<td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td>Speed: <span id="selected_speed">n/a</span></td>
|
|
||||||
<td>RSSI: <span id="selected_rssi">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td>Track: <span id="selected_track">n/a</span></td>
|
|
||||||
<td>Last seen: <span id="selected_seen">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td colspan="2">Position: <span id="selected_position">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div> <!-- selected_infoblock -->
|
|
||||||
|
|
||||||
<div id="units_container">
|
<div id="units_container">
|
||||||
<label for="units_selector">Units:</label>
|
<label for="units_selector">Units:</label>
|
||||||
<select name="units_selector" id="units_selector">
|
<select name="units_selector" id="units_selector">
|
||||||
|
|
|
@ -710,25 +710,23 @@ function refreshSelected() {
|
||||||
selected = Planes[SelectedPlane];
|
selected = Planes[SelectedPlane];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!selected) {
|
$('#dump1090_infoblock').css('display','block');
|
||||||
$('#selected_infoblock').css('display','none');
|
$('#dump1090_version').text(Dump1090Version);
|
||||||
$('#dump1090_infoblock').css('display','block');
|
$('#dump1090_total_ac').text(TrackedAircraft);
|
||||||
$('#dump1090_version').text(Dump1090Version);
|
$('#dump1090_total_ac_positions').text(TrackedAircraftPositions);
|
||||||
$('#dump1090_total_ac').text(TrackedAircraft);
|
$('#dump1090_total_history').text(TrackedHistorySize);
|
||||||
$('#dump1090_total_ac_positions').text(TrackedAircraftPositions);
|
|
||||||
$('#dump1090_total_history').text(TrackedHistorySize);
|
|
||||||
|
|
||||||
if (MessageRate !== null) {
|
if (MessageRate !== null) {
|
||||||
$('#dump1090_message_rate').text(MessageRate.toFixed(1));
|
$('#dump1090_message_rate').text(MessageRate.toFixed(1));
|
||||||
} else {
|
} else {
|
||||||
$('#dump1090_message_rate').text("n/a");
|
$('#dump1090_message_rate').text("n/a");
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#dump1090_infoblock').css('display','none');
|
setSelectedInfoBlockVisibility();
|
||||||
$('#selected_infoblock').css('display','block');
|
|
||||||
|
if (!selected) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
$('#selected_flightaware_link').attr('href','//flightaware.com/live/modes/'+selected.icao+'/redirect');
|
$('#selected_flightaware_link').attr('href','//flightaware.com/live/modes/'+selected.icao+'/redirect');
|
||||||
|
|
||||||
|
@ -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')) {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue