Add ability to hide map and expand table to fill window

public_html/index.html

@@ -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">
+								<td style="width: 150px; text-align: center;">
-									[ <span onclick="resetMap();">Reset Map</span> ]
+									<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>

public_html/script.js

@@ -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();
+        }
+    }
+}

public_html/style.css

@@ -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;