From d5bd164169d31422e5fba0609ee7649162856cc3 Mon Sep 17 00:00:00 2001
From: Carlos Salaverria <carlos.salaverria@flightaware.com>
Date: Tue, 30 Aug 2016 15:07:54 -0500
Subject: [PATCH] Show selected plane information in separate panel

---
 public_html/index.html | 131 +++++++++++++++++++----------------------
 public_html/script.js  |  44 +++++++++-----
 public_html/style.css  |  19 +++++-
 3 files changed, 104 insertions(+), 90 deletions(-)

diff --git a/public_html/index.html b/public_html/index.html
index 7edfdeb..f4e0794 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -51,25 +51,61 @@
 				<a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a>
 				<a id="expand_sidebar_button" href="#"></a>
 			</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">&#x21D2;</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="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%">
@@ -84,17 +120,20 @@
 
 							<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>
+								<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>
-								<td>&nbsp;</td>
 							</tr>
 
 							<tr class="infoblock_body">
@@ -109,58 +148,6 @@
 						</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">&#x21D2;</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">
 						<label for="units_selector">Units:</label>
 						<select name="units_selector" id="units_selector">
diff --git a/public_html/script.js b/public_html/script.js
index b42b06a..7d059b9 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -710,25 +710,23 @@ function refreshSelected() {
     	        selected = Planes[SelectedPlane];
         }
         
+        $('#dump1090_infoblock').css('display','block');
+        $('#dump1090_version').text(Dump1090Version);
+        $('#dump1090_total_ac').text(TrackedAircraft);
+        $('#dump1090_total_ac_positions').text(TrackedAircraftPositions);
+        $('#dump1090_total_history').text(TrackedHistorySize);
+
+        if (MessageRate !== null) {
+                $('#dump1090_message_rate').text(MessageRate.toFixed(1));
+        } else {
+                $('#dump1090_message_rate').text("n/a");
+        }
+
+        setSelectedInfoBlockVisibility();
+
         if (!selected) {
-                $('#selected_infoblock').css('display','none');
-                $('#dump1090_infoblock').css('display','block');
-                $('#dump1090_version').text(Dump1090Version);
-                $('#dump1090_total_ac').text(TrackedAircraft);
-                $('#dump1090_total_ac_positions').text(TrackedAircraftPositions);
-                $('#dump1090_total_history').text(TrackedHistorySize);
-
-                if (MessageRate !== null) {
-                        $('#dump1090_message_rate').text(MessageRate.toFixed(1));
-                } else {
-                        $('#dump1090_message_rate').text("n/a");
-                }
-
                 return;
         }
-        
-        $('#dump1090_infoblock').css('display','none');
-        $('#selected_infoblock').css('display','block');
 
         $('#selected_flightaware_link').attr('href','//flightaware.com/live/modes/'+selected.icao+'/redirect');
         
@@ -1114,6 +1112,7 @@ function expandSidebar(e) {
     $("#show_map_button").show();
     $("#sidebar_container").width("100%");
     setColumnVisibility();
+    setSelectedInfoBlockVisibility();
     updateMapSize();
 }
 
@@ -1125,6 +1124,7 @@ function showMap() {
     $("#show_map_button").hide();
     $("#sidebar_container").width("420px");
     setColumnVisibility();
+    setSelectedInfoBlockVisibility();
     updateMapSize();    
 }
 
@@ -1156,6 +1156,18 @@ function setColumnVisibility() {
     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() {
     // Get display unit preferences from local storage
     if (!localStorage.getItem('displayUnits')) {
diff --git a/public_html/style.css b/public_html/style.css
index ab75a89..cd9d4c1 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -8,6 +8,15 @@ html, body {
     height: 100%;
 }
 
+#selected_infoblock {
+    position: absolute;
+    background: #ffffff;
+    padding: 20px;
+    box-shadow: 4px 4px 10px #444444;
+    left: 20px;
+    top: 20px;
+}
+
 #map_container {
     flex: 1 1 auto;
     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; }
 #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,
 #altitude_filter_form {
@@ -151,4 +167,3 @@ select.error, textarea.error, input.error {
 .layer-switcher {
     top: 5em !important;
 }
-