Add buttons to expand/collapse/resize data table
This commit is contained in:
Carlos Salaverria
parent
56397d6d78
commit
fe2f837217
BIN
public_html/images/hide_sidebar_active_48x40.png
Normal file
BIN
public_html/images/hide_sidebar_active_48x40.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public_html/images/hide_sidebar_inactive_48x40.png
Normal file
BIN
public_html/images/hide_sidebar_inactive_48x40.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public_html/images/show_sidebar_active_48x40.png
Normal file
BIN
public_html/images/show_sidebar_active_48x40.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
public_html/images/show_sidebar_inactive_48x40.png
Normal file
BIN
public_html/images/show_sidebar_inactive_48x40.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -44,147 +44,150 @@
|
||||||
<input type="hidden" name="submit" value="submit">
|
<input type="hidden" name="submit" value="submit">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div id="map_container">
|
<div id="layout_container">
|
||||||
<div id="map_canvas"></div>
|
<div id="map_container">
|
||||||
</div>
|
<div id="map_canvas"></div>
|
||||||
|
<a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a>
|
||||||
<div id="sidebar_container">
|
</div>
|
||||||
<div id="sidebar_canvas">
|
<div id="sidebar_container">
|
||||||
<div id="sudo_buttons">
|
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
|
||||||
<table style="width: 100%">
|
<div id="sidebar_canvas">
|
||||||
<tr>
|
<div id="sudo_buttons">
|
||||||
<td style="width: 150px; text-align: center;" class="pointer">
|
<table style="width: 100%">
|
||||||
[ <span onclick="resetMap();">Reset Map</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> </td>
|
|
||||||
<td> </td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body dim">
|
|
||||||
<td>(no aircraft selected)</td>
|
|
||||||
<td> </td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td> </td>
|
|
||||||
<td> </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">
|
|
||||||
<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="planes_table">
|
|
||||||
<table id="tableinfo" style="width: 100%">
|
|
||||||
<thead style="background-color: #BBBBBB; cursor: pointer;">
|
|
||||||
<tr>
|
<tr>
|
||||||
<td id="icao" onclick="sortByICAO();">ICAO</td>
|
<td style="width: 150px; text-align: center;" class="pointer">
|
||||||
<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
|
[ <span onclick="resetMap();">Reset Map</span> ]
|
||||||
<td id="flight" onclick="sortByFlight();">Flight</td>
|
</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="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>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</table>
|
||||||
<tbody>
|
</div> <!-- sudo_buttons -->
|
||||||
<tr id="plane_row_template" class="plane_table_row hidden">
|
|
||||||
<td>ICAO</td>
|
|
||||||
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
|
|
||||||
<td>FLIGHT</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">DISTANCE</td>
|
|
||||||
<td style="text-align: right">TRACK</td>
|
|
||||||
<td style="text-align: right">MSGS</td>
|
|
||||||
<td style="text-align: right">SEEN</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div> <!-- planes_table -->
|
|
||||||
|
|
||||||
</div> <!-- sidebar_canvas -->
|
<div id="dump1090_infoblock">
|
||||||
</div> <!-- sidebar_container -->
|
<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> </td>
|
||||||
|
<td> </td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="infoblock_body dim">
|
||||||
|
<td>(no aircraft selected)</td>
|
||||||
|
<td> </td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="infoblock_body">
|
||||||
|
<td> </td>
|
||||||
|
<td> </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">
|
||||||
|
<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="planes_table">
|
||||||
|
<table id="tableinfo" style="width: 100%">
|
||||||
|
<thead style="background-color: #BBBBBB; cursor: pointer;">
|
||||||
|
<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="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="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>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr id="plane_row_template" class="plane_table_row hidden">
|
||||||
|
<td>ICAO</td>
|
||||||
|
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
|
||||||
|
<td>FLIGHT</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">DISTANCE</td>
|
||||||
|
<td style="text-align: right">TRACK</td>
|
||||||
|
<td style="text-align: right">MSGS</td>
|
||||||
|
<td style="text-align: right">SEEN</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div> <!-- planes_table -->
|
||||||
|
|
||||||
|
</div> <!-- sidebar_canvas -->
|
||||||
|
</div> <!-- sidebar_container -->
|
||||||
|
</div> <!-- layout_container -->
|
||||||
|
|
||||||
<div id="SpecialSquawkWarning" class="hidden">
|
<div id="SpecialSquawkWarning" class="hidden">
|
||||||
<b>Squawk 7x00 is reported and shown.</b><br>
|
<b>Squawk 7x00 is reported and shown.</b><br>
|
||||||
|
|
|
||||||
|
|
@ -197,6 +197,19 @@ function initialize() {
|
||||||
|
|
||||||
$("#loader").removeClass("hidden");
|
$("#loader").removeClass("hidden");
|
||||||
|
|
||||||
|
// Set up map/sidebar splitter
|
||||||
|
$("#sidebar_container").resizable({handles: {w: '#splitter'}});
|
||||||
|
|
||||||
|
// Set up event handler for expand/collapse sidebar button
|
||||||
|
$("#toggle_sidebar_button").click(toggleSidebarVisibility);
|
||||||
|
|
||||||
|
// Force map to redraw if sidebar container is resized - use a timer to debounce
|
||||||
|
var mapResizeTimeout;
|
||||||
|
$("#sidebar_container").on("resize", function() {
|
||||||
|
clearTimeout(mapResizeTimeout);
|
||||||
|
mapResizeTimeout = setTimeout(updateMapSize, 50);
|
||||||
|
});
|
||||||
|
|
||||||
// Get receiver metadata, reconfigure using it, then continue
|
// Get receiver metadata, reconfigure using it, then continue
|
||||||
// with initialization
|
// with initialization
|
||||||
$.ajax({ url: 'data/receiver.json',
|
$.ajax({ url: 'data/receiver.json',
|
||||||
|
|
@ -929,3 +942,15 @@ function resetMap() {
|
||||||
|
|
||||||
selectPlaneByHex(null,false);
|
selectPlaneByHex(null,false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateMapSize() {
|
||||||
|
OLMap.updateSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSidebarVisibility(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$("#sidebar_container").toggle();
|
||||||
|
$("#toggle_sidebar_button").toggleClass("show_sidebar");
|
||||||
|
$("#toggle_sidebar_button").toggleClass("hide_sidebar");
|
||||||
|
updateMapSize();
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,65 @@ html, body {
|
||||||
margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
|
margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
|
||||||
font-size: 10pt; overflow: auto; height: 100%;
|
font-size: 10pt; overflow: auto; height: 100%;
|
||||||
}
|
}
|
||||||
div#map_container { float: left; width: 100%; height: 100%; }
|
|
||||||
div#map_canvas { height: 100%; margin-right: 420px; }
|
|
||||||
|
|
||||||
div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; }
|
#layout_container {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map_container {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map_canvas {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle_sidebar_button {
|
||||||
|
width: 48px;
|
||||||
|
height: 40px;
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle_sidebar_button.show_sidebar {
|
||||||
|
background-image: url("images/show_sidebar_inactive_48x40.png")
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle_sidebar_button.show_sidebar:hover {
|
||||||
|
background-image: url("images/show_sidebar_active_48x40.png")
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle_sidebar_button.hide_sidebar {
|
||||||
|
background-image: url("images/hide_sidebar_inactive_48x40.png")
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle_sidebar_button.hide_sidebar:hover {
|
||||||
|
background-image: url("images/hide_sidebar_active_48x40.png")
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar_container {
|
||||||
|
display: flex;
|
||||||
|
width: 410px;
|
||||||
|
padding-left: 10px;
|
||||||
|
left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#splitter {
|
||||||
|
flex: 0 0 6px;
|
||||||
|
cursor: col-resize;
|
||||||
|
background-color: #bbbbbb;
|
||||||
|
left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar_canvas {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;
|
div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;
|
||||||
background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;
|
background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue