From cfb8caddc4b4a79c77a7345df2f61b5f0db7733f Mon Sep 17 00:00:00 2001
From: Vlad Kirienko <vkirienko@yahoo.com>
Date: Fri, 30 Oct 2020 20:42:43 -0400
Subject: [PATCH] Allow columns selection in planes table in runtime

---
 html/early.js   |  21 ++++----
 html/index.html |  43 ++++++++++-------
 html/script.js  | 124 ++++++++++++++++++++++++++++++++++--------------
 html/style.css  |   7 ++-
 4 files changed, 135 insertions(+), 60 deletions(-)

diff --git a/html/early.js b/html/early.js
index 62736ad..9d7f63b 100644
--- a/html/early.js
+++ b/html/early.js
@@ -338,21 +338,22 @@ function get_history_item(i) {
     deferHistory.push(request);
 }
 
-let toggles = {};
+const toggles = {};
 
 function Toggle(arg) {
-
     this.key = arg.key;
-    toggles[this.key] = this;
     this.state = (arg.init ? true : false);
     this.doStuff = arg.toggle;
     this.checkbox = '#' + this.key + '_cb';
     this.display = arg.display;
     this.container = arg.container;
+
+    toggles[this.key] = this;
+
     this.init();
 }
-Toggle.prototype.init = function() {
 
+Toggle.prototype.init = function() {
     $(this.container).append((
         '<div class="settingsOptionContainer">'
         + '<div class="settingsCheckbox" id="' + this.key + '_cb' + '"></div>'
@@ -361,9 +362,9 @@ Toggle.prototype.init = function() {
 
     $(this.checkbox).on('click', this.toggle.bind(this));
 
-    if (localStorage[this.key] == "true")
+    if (localStorage[this.key] == 'true')
         this.state = true;
-    if (localStorage[this.key] == "false")
+    if (localStorage[this.key] == 'false')
         this.state = false
 
     this.toggle(this.state);
@@ -378,11 +379,11 @@ Toggle.prototype.toggle = function(override) {
         this.state = !this.state;
 
     if (this.state == false) {
-        localStorage[this.key] = "false";
+        localStorage[this.key] = 'false';
         $(this.checkbox).removeClass('settingsCheckboxChecked');
     }
     if (this.state == true) {
-        localStorage[this.key] = "true";
+        localStorage[this.key] = 'true';
         $(this.checkbox).addClass('settingsCheckboxChecked');
     }
 
@@ -390,6 +391,10 @@ Toggle.prototype.toggle = function(override) {
         this.doStuff(this.state);
 }
 
+Toggle.prototype.hide = function () {
+    $(this.checkbox).parent().hide();
+}
+
 // Set the name of the hidden property and the change event for visibility
 let hidden, visibilityChange;
 if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
diff --git a/html/index.html b/html/index.html
index 37aafc3..ed69f27 100644
--- a/html/index.html
+++ b/html/index.html
@@ -670,18 +670,22 @@
 
         </div>
       </div> <!-- selected_infoblock -->
+
       <div id="map_container">
         <div id="map_canvas"></div>
         <div id="settings_infoblock">
           <div id="settings_close" class="settingsCloseBox"></div>
           <div class="settingsOptionContainer">
-            <label for="units_selector"><span class="infoBlockTitleText">Units: </span></label>
+            <label for="units_selector"><span class="infoBlockTitleText">Units:&nbsp;&nbsp;</span></label>
             <select name="units_selector" id="units_selector">
               <option value="nautical">Aeronautical</option>
               <option value="metric">Metric</option>
               <option value="imperial">Imperial</option>
             </select>
           </div>
+          <div class="infoRowSpacer">
+            <hr />
+          </div>
           <div id="settingsLeft" class="settingsColumn">
             <div class="settingsOptionContainer">
               <div class="infoBlockTitleText">Overlay Toggles</div>
@@ -716,6 +720,20 @@
               <div class="settingsText">Group by Data Type</div>
             </div>
           </div>
+          <div class="infoRowSpacer">
+            <hr />
+          </div>
+          <div>
+            <button id="columnsButton" type="button" class="collapseButton">Select Columns</button>
+            <div class="collapse collapseSettings">
+              <div id="settingsLeft" class="settingsColumn">
+                <div id="columns_block1"></div>
+              </div>
+              <div id="settingsRight" class="settingsColumn">
+                <div id="columns_block2"></div>
+              </div>
+            </div>
+          </div>
         </div>
         <div id="toggle_sidebar_control" class="ol-unselectable ol-control">
           <button id="toggle_sidebar_button" class="hide_sidebar" title="Toggle Sidebar"></button>
@@ -796,7 +814,7 @@
                 </td>
               </tr>
               <tr class="infoRowSpacer">
-                  <td></td>
+                <td></td>
               </tr>
               <tr>
                 <td>
@@ -814,7 +832,7 @@
               </tr>
 
               <tr class="infoRowSpacer">
-                  <td></td>
+                <td></td>
               </tr>
               <tr class="infoblock_heading">
                 <td>
@@ -829,7 +847,7 @@
                       </td>
                       <td style="width: 50%">
                         <form id="jump_form">
-                          <span class="infoBlockTitleText">Jump to airport:</span>
+                          <span class="infoBlockTitleText">Jump to Airport:</span>
                           <br>
                           <input id="jump_input" name="jumpBox" type="text" class="searchInput" maxlength="4">
                         </form>
@@ -840,7 +858,7 @@
               </tr>
 
               <tr class="infoRowSpacer">
-                  <td></td>
+                <td></td>
               </tr>
             </table>
 
@@ -870,7 +888,7 @@
               </form>
 
               <form id="type_filter_form">
-                <label><span title="ICAO type code (A320, B738, etc.)"class="infoBlockTitleText">Filter by type code:</span></label>
+                <label><span title="ICAO type code (A320, B738, etc.)" class="infoBlockTitleText">Filter by type code:</span></label>
                 <br>
                 <input id="type_filter" name="type" type="text" class="searchInput" maxlength="1024">
                 <button class="formButton" type="submit">Filter</button>
@@ -896,7 +914,6 @@
 
               </form>
 
-
             </div> <!-- filter_block -->
 
             <div id="planes_table">
@@ -904,7 +921,7 @@
                 <thead class="aircraft_table_header">
                   <tr>
                     <td id="icao" onclick="TAR.planesTable.sortByICAO();">ICAO</td>
-                    <td id="flag" onclick="TAR.planesTable.sortByCountry()"><!-- column for flag image --></td>
+                    <td id="flag" onclick="TAR.planesTable.sortByCountry()" style="width: 20px"><!-- column for flag image --></td>
                     <td id="flight" onclick="TAR.planesTable.sortByFlight();">&nbsp&nbsp&nbsp&nbsp&nbspIdent&nbsp&nbsp&nbsp&nbsp&nbsp</td>
                     <td id="registration" onclick="TAR.planesTable.sortByRegistration();">Registration</td>
                     <td id="aircraft_type" onclick="TAR.planesTable.sortByAircraftType();">Type</td>
@@ -915,7 +932,7 @@
                     <td id="distance" onclick="TAR.planesTable.sortByDistance();">Dist. (<span class="distanceUnit"></span>)</td>
                     <td id="track" onclick="TAR.planesTable.sortByTrack();">Heading</td>
                     <td id="msgs" onclick="TAR.planesTable.sortByMsgs();">Msgs</td>
-                    <td id="seen" onclick="TAR.planesTable.sortBySeen();">Age</td>
+                    <td id="seen" onclick="TAR.planesTable.sortBySeen();">Seen</td>
                     <td id="rssi" onclick="TAR.planesTable.sortByRssi();">RSSI</td>
                     <td id="lat" onclick="TAR.planesTable.sortByLatitude();">Latitude</td>
                     <td id="lon" onclick="TAR.planesTable.sortByLongitude();">Longitude</td>
@@ -956,16 +973,10 @@
             </div> <!-- planes_table -->
           </div>
 
-
-
         </div> <!-- sidebar_canvas -->	
 
-
-
-
-
-
       </div> <!-- sidebar_container -->
+
     </div> <!-- layout_container -->
 
     <div id="update_error" class="hidden error_box">
diff --git a/html/script.js b/html/script.js
index 16d035e..ffac917 100644
--- a/html/script.js
+++ b/html/script.js
@@ -817,7 +817,7 @@ function init_page() {
             lastLeg = state;
             if (SelectedPlane && !showTrace)
                 SelectedPlane.processTrace();
-        },
+        }
     });
 
     if (onMobile) {
@@ -846,7 +846,7 @@ function init_page() {
         toggle: function(state) {
             debugTracks = state;
             remakeTrails();
-        },
+        }
     });
 
     new Toggle({
@@ -859,7 +859,7 @@ function init_page() {
                 debugAll = true;
             else
                 debugAll = false;
-        },
+        }
     });
 
     new Toggle({
@@ -874,7 +874,7 @@ function init_page() {
                 monochromeMarkers = "#EEEEEE";
 
             refreshFeatures();
-        },
+        }
     });
 
     new Toggle({
@@ -889,7 +889,7 @@ function init_page() {
                 monochromeTracks = "#000000";
 
             remakeTrails();
-        },
+        }
     });
 
     $('#selectall_checkbox').on('click', function() {
@@ -1410,7 +1410,7 @@ function initialize_map() {
             }
             OLMap.render();
             buttonActive('#B', state);
-        },
+        }
     });
 
     window.addEventListener('keydown', function(e) {
@@ -2074,46 +2074,76 @@ function refreshFeatures() {
 (function (global, $, TAR) {
     let planesTable = TAR.planesTable = TAR.planesTable || {};
 
+    const columns = [
+        { id: '#icao', text: 'ICAO' },
+        { id: '#flag', text: 'Flag' },
+        { id: '#flight', text: 'Ident' },
+        { id: '#registration', text: 'Registration' },
+        { id: '#aircraft_type', text: 'Aircraft Type' },
+        { id: '#squawk', text: 'Squawk' },
+        { id: '#altitude', text: 'Altitude' },
+        { id: '#speed', text: 'Speed' },
+        { id: '#vert_rate', text: 'Vertical Rate' },
+        { id: '#distance', text: 'Distance' },
+        { id: '#track', text: 'Heading' },
+        { id: '#msgs', text: 'Messages' },
+        { id: '#seen', text: 'Seen' },
+        { id: '#rssi', text: 'RSSI' },
+        { id: '#lat', text: 'Latitude' },
+        { id: '#lon', text: 'Longitude' },
+        { id: '#data_source', text: 'Source' }
+    ];
+
     let planeRowTemplate = null;
     let lastRealExtent = null;
     let lastRenderExtent = null;
+    let initializing = true;
 
     planesTable.init = function () {
-        planeRowTemplate = document.getElementById("plane_row_template");
+        planeRowTemplate = document.getElementById('plane_row_template');
 
-        if (!ShowFlags) { 
-            planesTable.hideColumn('#flag', true);
+        // initialize columns
+        for (let col of columns) {
+            col.visible = true;
+            col.toggleKey = col.id.replace('#', 'column_');
+
+            if (HideCols.includes(col.id)) {
+                planesTable.showColumn(col.id, false);
+            }
         }
 
+        createColumnToggles();
+
+        if (!ShowFlags) {
+            planesTable.removeColumn('#flag');
+        }
+
+        initializing = false;
+
         applyColumnVisibility();
     }
 
-    planesTable.showColumn = function (col, accumulateChanges) {
-        HideCols = HideCols.filter(c => c !== col);
-        if (accumulateChanges !== true) {
-            applyColumnVisibility();
-        }
+    planesTable.showColumn = function (col, visible) {
+        const column = columns.find(c => c.id === col);
+        column.visible = visible;
+
+        applyColumnVisibility();
+
+        return column;
     }
 
-    planesTable.hideColumn = function (col, accumulateChanges) {
-        HideCols.push(col);
-        if (!accumulateChanges) {
-            applyColumnVisibility();
-        }
-    }
+    planesTable.removeColumn = function (col) {
+        const column = planesTable.showColumn(col, false);
 
-    planesTable.toggleColumn = function (col) {
-        if (HideCols.includes(col)) {
-            showColumn(col);
-        }
-        else {
-            hideColumn(col);
+        const toggle = toggles[column.toggleKey];
+        if (toggle) {
+            toggle.hide();
         }
     }
 
     // Refreshes the larger table of all the planes
     planesTable.refresh = function () {
-        if (pTracks)
+        if (initializing || pTracks)
             return;
 
         global.refreshPageTitle();
@@ -2130,7 +2160,7 @@ function refreshFeatures() {
         let nPlanes = 0;
         let nMapPlanes = 0;
 
-        if (mapIsVisible || lastRealExtent == null) {
+        if (mapIsVisible || lastRealExtent === null) {
             const mapSize = OLMap.getSize();
             lastRealExtent = myExtent(OLMap.getView().calculateExtent(mapSize));
 
@@ -2163,8 +2193,6 @@ function refreshFeatures() {
 
             plane.showInTable = false;
 
-            let classes = "plane_table_row";
-
             if (tableInView && plane.visible &&
                 (plane.inView || (plane.selected && !SelectedAllPlanes))
             ) {
@@ -2188,6 +2216,8 @@ function refreshFeatures() {
                 continue;
             }
 
+            let classes = "plane_table_row";
+
             if (plane.showInTable) {
                 nPlanes++;
 
@@ -2433,7 +2463,10 @@ function refreshFeatures() {
         }
     }
 
-    function applyColumnVisibility () {
+    function applyColumnVisibility() {
+        if (initializing)
+            return;
+
         const infoTable = $("#tableinfo");
         const tbody = document.getElementById('tableinfo').tBodies[0];
 
@@ -2448,8 +2481,8 @@ function refreshFeatures() {
             }
         }
 
-        for (let col in HideCols) {
-            renderColumn(infoTable, HideCols[col], !mapIsVisible);
+        for (let col of columns) {
+            renderColumn(infoTable, col.id, col.visible);
         }
     }
 
@@ -2464,6 +2497,27 @@ function refreshFeatures() {
         }
     }
 
+    function createColumnToggles() {
+        let container = '#columns_block1';
+
+        for (let col of columns) {
+            if (col.id === '#distance') {
+                container = '#columns_block2';
+            }
+
+            new Toggle({
+                key: col.toggleKey,
+                display: col.text,
+                container: container,
+                init: col.visible,
+                toggle: function (state) {
+                    planesTable.showColumn(col.id, state);
+                    planesTable.refresh();
+                }
+            });
+        }
+    }
+
     return TAR;
 }(window, jQuery, TAR || {}));
 //
@@ -2953,7 +3007,7 @@ function dim(evt) {
             display: "Altitude Chart",
             container: "#settingsLeft",
             init: (onMobile ? false : true),
-            toggle: altitudeChart.render,
+            toggle: altitudeChart.render
         });
     }
 
@@ -4111,7 +4165,7 @@ function initSitePos() {
         // Add home marker if requested
         createSiteCircleFeatures();
     } else {
-        TAR.planesTable.hideColumn('#distance');
+        TAR.planesTable.removeColumn('#distance');
     }
 
     if (SitePosition && !onMobile) {
diff --git a/html/style.css b/html/style.css
index 6814fad..d97cf65 100644
--- a/html/style.css
+++ b/html/style.css
@@ -576,7 +576,8 @@ table.infoTable tr td {
 }
 .settingsOptionContainer {
     display: table;
-    padding-bottom: calc( 10px * var(--SCALE));
+    padding-top: calc( 5px * var(--SCALE));
+    padding-bottom: calc( 5px * var(--SCALE));
 }
 
 .settingsCheckbox {
@@ -747,6 +748,10 @@ table.infoTable tr td {
   margin-bottom: calc( 8px * var(--SCALE));
 }
 
+.collapseSettings {
+  padding: 0;
+}
+
 .collapseButton:after {
   content: '\02795\FE0E'; /* Unicode character for "plus" sign (+) */
   float: right;