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

Add ability to hide map and expand table to fill window

Browse source
This commit is contained in:
Carlos Salaverria 2016-08-19 10:58:48 -05:00
parent fe2f837217
commit 8bb5b42a02
3 changed files with 75 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public_html/index.html
View file

@ -48,6 +48,7 @@
<div id="map_container">
<div id="map_canvas"></div>
<a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a>
<a id="expand_sidebar_button" href="#"></a>
</div>
<div id="sidebar_container">
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
@ -55,8 +56,9 @@
<div id="sudo_buttons">
<table style="width: 100%">
<tr>
<td style="width: 150px; text-align: center;" class="pointer">
[ <span onclick="resetMap();">Reset Map</span> ]
<td style="width: 150px; text-align: center;">
<span id="reset_map_button" class="pointer" onclick="resetMap();">[ Reset Map ]</span>
<span id="show_map_button" class="pointer" onclick="showMap();">[ Show Map ]</span>
</td>
</tr>
</table>
@ -166,6 +168,7 @@
<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>
</tr>
</thead>
<tbody>
@ -180,6 +183,7 @@
<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>
</tr>
</tbody>
</table>

48
public_html/script.js
View file

@ -200,9 +200,16 @@ function initialize() {
// Set up map/sidebar splitter
$("#sidebar_container").resizable({handles: {w: '#splitter'}});
// Set up event handler for expand/collapse sidebar button
// Set up event handler for show/hide sidebar button
$("#toggle_sidebar_button").click(toggleSidebarVisibility);
// Set up event handler for expand sidebar button
$("#expand_sidebar_button").click(expandSidebar);
$("#show_map_button").hide();
var infoTable = $("#tableinfo");
showColumn(infoTable, "#rssi", false);
// Force map to redraw if sidebar container is resized - use a timer to debounce
var mapResizeTimeout;
$("#sidebar_container").on("resize", function() {
@ -789,6 +796,7 @@ function refreshTableInfo() {
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.className = classes;
}
}
@ -950,7 +958,45 @@ function updateMapSize() {
function toggleSidebarVisibility(e) {
e.preventDefault();
$("#sidebar_container").toggle();
$("#expand_sidebar_button").toggle();
$("#toggle_sidebar_button").toggleClass("show_sidebar");
$("#toggle_sidebar_button").toggleClass("hide_sidebar");
updateMapSize();
}
function expandSidebar(e) {
e.preventDefault();
$("#map_container").hide()
$("#toggle_sidebar_button").hide();
$("#splitter").hide();
$("#reset_map_button").hide();
$("#show_map_button").show();
$("#sidebar_container").width("100%");
var infoTable = $("#tableinfo");
showColumn(infoTable, "#rssi", true);
updateMapSize();
}
function showMap() {
$("#map_container").show()
$("#toggle_sidebar_button").show();
$("#splitter").show();
$("#reset_map_button").show();
$("#show_map_button").hide();
$("#sidebar_container").width("410px");
var infoTable = $("#tableinfo");
showColumn(infoTable, "#rssi", false);
updateMapSize();
}
function showColumn(table, columnId, visible) {
var index = $(columnId).index();
if (index >= 0) {
var cells = $(table).find("td:nth-child(" + (index + 1).toString() + ")");
if (visible) {
cells.show();
} else {
cells.hide();
}
}
}

28
public_html/style.css
View file

@ -24,30 +24,45 @@ html, body {
width: 48px;
height: 40px;
position: absolute;
top: 6px;
bottom: 150px;
right: 6px;
}
#toggle_sidebar_button.show_sidebar {
background-image: url("images/show_sidebar_inactive_48x40.png")
background-image: url("images/show_sidebar_inactive_48x40.png");
}
#toggle_sidebar_button.show_sidebar:hover {
background-image: url("images/show_sidebar_active_48x40.png")
background-image: url("images/show_sidebar_active_48x40.png");
}
#toggle_sidebar_button.hide_sidebar {
background-image: url("images/hide_sidebar_inactive_48x40.png")
background-image: url("images/hide_sidebar_inactive_48x40.png");
}
#toggle_sidebar_button.hide_sidebar:hover {
background-image: url("images/hide_sidebar_active_48x40.png")
background-image: url("images/hide_sidebar_active_48x40.png");
}
#expand_sidebar_button {
width: 48px;
height: 40px;
position: absolute;
bottom: 100px;
right: 6px;
}
#expand_sidebar_button {
background-image: url("images/show_sidebar_inactive_48x40.png");
}
#expand_sidebar_button:hover {
background-image: url("images/show_sidebar_active_48x40.png");
}
#sidebar_container {
display: flex;
width: 410px;
padding-left: 10px;
left: 0 !important;
}
@ -60,6 +75,7 @@ html, body {
#sidebar_canvas {
flex: 1 1 auto;
padding: 10px;
}
div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;