From 829fe1b5e2996a9f5c10357b395077c94bdbd429 Mon Sep 17 00:00:00 2001
From: eric1tran <eric1tran@gmail.com>
Date: Wed, 9 Dec 2020 23:34:32 +0000
Subject: [PATCH] Filter and Column buttons to expand panels and styling
 cleanup

---
 public_html/index.html | 231 +++++++++++++++++++++--------------------
 public_html/script.js  |  35 ++-----
 public_html/style.css  |  78 ++++----------
 3 files changed, 147 insertions(+), 197 deletions(-)

diff --git a/public_html/index.html b/public_html/index.html
index 17a2151..ad56ad2 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -212,124 +212,125 @@
 										</tr>
 									</table>
 								</div> <!-- dump1090_infoblock -->
-			
+
 								<div class="config_button_row">
-									<button class="accordion">Filters</button>
-										<div class="panel">
-											<form id="altitude_filter_form">
-												<label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
-												<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
-												<label for="minAltitude" class="altitudeUnit"></label>
-												<span> to </span>
-												<input id="altitude_filter_max" name="maxAltitude" type="text" class="altitudeFilterInput" maxlength="5">
-												<label for="maxAltitude" class="altitudeUnit"></label>
-												<button type="submit">Filter</button>
-												<button id="altitude_filter_reset_button">Reset</button>
-											</form>
-											<form id="aircraft_type_filter_form">
-												<label><span class="infoBlockTitleText">Filter by Aircraft Type:</span></label>
-												<input id="aircraft_type_filter" name="aircraftTypeFilter" type="text" class="aircraftFilterInput" maxlength="5">
-												<button type="submit">Filter by Aircraft Type</button>
-												<button id="aircraft_type_filter_reset_button">Reset</button>
-											</form>
-			
-											<form id="aircraft_ident_filter_form">
-												<label><span class="infoBlockTitleText">Filter by Aircraft Ident:</span></label>
-												<input id="aircraft_ident_filter" name="aircraftIdentFilter" type="text" class="aircraftFilterInput" maxlength="10">
-												<button type="submit">Filter by Aircraft Ident</button>
-												<button id="aircraft_ident_filter_reset_button">Reset</button>
-											</form>
-										</div>
-									<button id="column_select">Select Columns</button>
+									<button id="filter_button" class="config_button">Filters</button>
+									<button id="column_select_button" class="config_button">Select Columns</button>
 								</div>
 
-								<div id="column_select_window" class="hidden">
-									<div id="column_select_close_box"></div>
-									<div id="column_select_header">Columns</div>
-									<div class="columnOptionSelectAllContainer">
-										<div class="columnSelectAllCheckbox" id="select_all_column_checkbox"></div>
-										<div class="columnOptionText">Select/Deselect All</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="icao_col_checkbox"></div>
-										<div class="columnOptionText">Icao</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="flag_col_checkbox"></div>
-										<div class="columnOptionText">Flag</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="ident_col_checkbox"></div>
-										<div class="columnOptionText">Ident</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="reg_col_checkbox"></div>
-										<div class="columnOptionText">Registration</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="ac_col_checkbox"></div>
-										<div class="columnOptionText">Aircraft Type</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="squawk_col_checkbox"></div>
-										<div class="columnOptionText">Squawk</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="alt_col_checkbox"></div>
-										<div class="columnOptionText">Altitude</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="speed_col_checkbox"></div>
-										<div class="columnOptionText">Speed</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="vrate_col_checkbox"></div>
-										<div class="columnOptionText">Vertical Rate</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="distance_col_checkbox"></div>
-										<div class="columnOptionText">Distance</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="heading_col_checkbox"></div>
-										<div class="columnOptionText">Heading</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="messages_col_checkbox"></div>
-										<div class="columnOptionText">Messages</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="msg_age_col_checkbox"></div>
-										<div class="columnOptionText">Message Age</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="rssi_col_checkbox"></div>
-										<div class="columnOptionText">RSSI</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="lat_col_checkbox"></div>
-										<div class="columnOptionText">Latitude</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="lon_col_checkbox"></div>
-										<div class="columnOptionText">Longitude</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="datasource_col_checkbox"></div>
-										<div class="columnOptionText">Data Source</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="airframes_col_checkbox"></div>
-										<div class="columnOptionText">Airframes.org</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="fa_modes_link_checkbox"></div>
-										<div class="columnOptionText">FlightAware</div>
-									</div>
-									<div class="columnOptionContainer">
-										<div class="columnSelectCheckbox" id="fa_photo_link_checkbox"></div>
-										<div class="columnOptionText">Photos</div>
-									</div>
+								<div id="filter_panel" class="panel">
+									<form id="altitude_filter_form">
+										<label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
+										<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
+										<label for="minAltitude" class="altitudeUnit"></label>
+										<span> to </span>
+										<input id="altitude_filter_max" name="maxAltitude" type="text" class="altitudeFilterInput" maxlength="5">
+										<label for="maxAltitude" class="altitudeUnit"></label>
+										<button type="submit">Filter</button>
+										<button id="altitude_filter_reset_button">Reset</button>
+									</form>
+									<form id="aircraft_type_filter_form">
+										<label><span class="infoBlockTitleText">Filter by Aircraft Type:</span></label>
+										<input id="aircraft_type_filter" name="aircraftTypeFilter" type="text" class="aircraftFilterInput" maxlength="5">
+										<button type="submit">Filter by Aircraft Type</button>
+										<button id="aircraft_type_filter_reset_button">Reset</button>
+									</form>
+
+									<form id="aircraft_ident_filter_form">
+										<label><span class="infoBlockTitleText">Filter by Aircraft Ident:</span></label>
+										<input id="aircraft_ident_filter" name="aircraftIdentFilter" type="text" class="aircraftFilterInput" maxlength="10">
+										<button type="submit">Filter by Aircraft Ident</button>
+										<button id="aircraft_ident_filter_reset_button">Reset</button>
+									</form>
+								</div>
+
+								<div id="column_select_panel" class="panel">
+										<div class="columnOptionSelectAllContainer">
+											<div class="columnSelectAllCheckbox" id="select_all_column_checkbox"></div>
+											<div class="columnOptionText">Select/Deselect All</div>
+										</div>
+										<div class="wrapper">
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="icao_col_checkbox"></div>
+												<div class="columnOptionText">Icao</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="flag_col_checkbox"></div>
+												<div class="columnOptionText">Flag</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="ident_col_checkbox"></div>
+												<div class="columnOptionText">Ident</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="reg_col_checkbox"></div>
+												<div class="columnOptionText">Registration</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="ac_col_checkbox"></div>
+												<div class="columnOptionText">Aircraft Type</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="squawk_col_checkbox"></div>
+												<div class="columnOptionText">Squawk</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="alt_col_checkbox"></div>
+												<div class="columnOptionText">Altitude</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="speed_col_checkbox"></div>
+												<div class="columnOptionText">Speed</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="vrate_col_checkbox"></div>
+												<div class="columnOptionText">Vertical Rate</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="distance_col_checkbox"></div>
+												<div class="columnOptionText">Distance</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="heading_col_checkbox"></div>
+												<div class="columnOptionText">Heading</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="messages_col_checkbox"></div>
+												<div class="columnOptionText">Messages</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="msg_age_col_checkbox"></div>
+												<div class="columnOptionText">Message Age</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="rssi_col_checkbox"></div>
+												<div class="columnOptionText">RSSI</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="lat_col_checkbox"></div>
+												<div class="columnOptionText">Latitude</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="lon_col_checkbox"></div>
+												<div class="columnOptionText">Longitude</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="datasource_col_checkbox"></div>
+												<div class="columnOptionText">Data Source</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="airframes_col_checkbox"></div>
+												<div class="columnOptionText">Airframes.org</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="fa_modes_link_checkbox"></div>
+												<div class="columnOptionText">FlightAware</div>
+											</div>
+											<div class="columnOptionContainer">
+												<div class="columnSelectCheckbox" id="fa_photo_link_checkbox"></div>
+												<div class="columnOptionText">Photos</div>
+											</div>
+										</div>
 								</div>
 
 								<div id="planes_table_container">
diff --git a/public_html/script.js b/public_html/script.js
index b8aec7d..b5628de 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -320,25 +320,7 @@ function initialize() {
             customAltitudeColors = false;
         }
 
-        // Accordian display logic for additional config buttons
-        var acc = document.getElementsByClassName("accordion");
-        var i;
 
-        for (i = 0; i < acc.length; i++) {
-          acc[i].addEventListener("click", function() {
-            /* Toggle between adding and removing the "active" class,
-            to highlight the button that controls the panel */
-            this.classList.toggle("active");
-
-            /* Toggle between hiding and showing the active panel */
-            var panel = this.nextElementSibling;
-            if (panel.style.display === "block") {
-              panel.style.display = "none";
-            } else {
-              panel.style.display = "block";
-            }
-          });
-        }
 
         $("#altitude_filter_reset_button").click(onResetAltitudeFilter);
 
@@ -354,14 +336,6 @@ function initialize() {
         	$('#settings_infoblock').toggle();
         });
 
-        $('#column_select').on('click', function() {
-                $('#column_select_window').toggle();
-        });
-
-        $('#column_select_close_box').on('click', function() {
-                $('#column_select_window').hide();
-        });
-
         $('#settings_close').on('click', function() {
             $('#settings_infoblock').hide();
         });
@@ -416,6 +390,15 @@ function initialize() {
                 refreshDataSourceFilters();
         })
 
+        $('#column_select_button').on('click', function() {
+                $('#column_select_panel').toggle();
+        });
+
+
+        $('#filter_button').on('click', function() {
+                $('#filter_panel').toggle();
+        });
+
         // Event handlers for to column checkboxes
         checkbox_div_map.forEach(function (checkbox, div) {
                 $(div).on('click', function() {
diff --git a/public_html/style.css b/public_html/style.css
index 472fc09..cf72855 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -55,48 +55,6 @@ html, body {
     overflow-x: scroll;
 }
 
-#column_select {
-    position: relative;
-    float: right;
-    background-color: #002F5D;
-    color: #FFFFFF;
-    width: 125px;
-}
-
-#column_select_window {
-    position: absolute;
-    right: 1px;
-    top: 80px;
-    width: 150px;
-    min-height: 180px;
-    background: #ffffff;
-    box-shadow: 4px 4px 10px #444444;
-    padding: 20px;
-    z-index: 9999;
-    display: none;
-}
-
-#column_select_header {
-    display: table;
-    background-color: #002F5D;
-    color: #ffffff;
-    font-size: smaller;
-    padding: 5px;
-    text-align: center;
-    width: 120px;
-}
-
-#column_select_close_box {
-    position: absolute;
-    right: 15px;
-    top: 21px;
-    background-image: url('images/close-settings.png');
-    background-size: cover;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-}
-
 .columnOptionContainer {
     position: relative;
     display: table;
@@ -887,28 +845,36 @@ select.error, textarea.error, input.error {
     }
 }
 
-/* Style the buttons that are used to open and close the accordion panel */
-.accordion {
+.config_button {
     position: relative;
-    background-color: #002F5D;
-    color: #FFFFFF;
+    background-color: #FEBC11;
+    color: #002F5D;
     cursor: pointer;
     text-align: center;
     width: 125px;
 }
 
-.active, .accordion:hover, #column_select:hover {
+.config_button:hover {
     background-color: #abcad8;
 }
 
-  /* Style the accordion panel. Note: hidden by default */
-.panel {
-    padding: 0 2px;
-    background-color: #E5F6FC;
-    display: none;
-    overflow: hidden;
+.config_button_row {
+    position: relative;
+    margin-top: 5px;
+    padding: 3px 0 3px 0;
+
 }
 
-.config_button_row {
-      margin-top: 5px;
-}
\ No newline at end of file
+.panel {
+    position: relative;
+    padding: 3px 3px 6px 3px;
+    display: none;
+    margin-bottom: 5px;
+    border: solid;
+    border-color: #002F5D;
+}
+
+.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
\ No newline at end of file