From 47e4df2b7bdbd46c9cb7c9d51b46212f99e2aa56 Mon Sep 17 00:00:00 2001
From: eric1tran <eric1tran@gmail.com>
Date: Wed, 9 Dec 2020 18:22:15 +0000
Subject: [PATCH] Put filters into an accordion style dropdown

---
 public_html/index.html | 51 +++++++++++++++++++++---------------------
 public_html/script.js  | 19 ++++++++++++++++
 public_html/style.css  | 27 ++++++++++++++++++++++
 3 files changed, 72 insertions(+), 25 deletions(-)

diff --git a/public_html/index.html b/public_html/index.html
index 7c03c37..17a2151 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -213,32 +213,33 @@
 									</table>
 								</div> <!-- dump1090_infoblock -->
 			
-								<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 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>
 			
-								<div>
+											<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>
 								</div>
 
diff --git a/public_html/script.js b/public_html/script.js
index a0044c7..b8aec7d 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -320,6 +320,25 @@ 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);
 
diff --git a/public_html/style.css b/public_html/style.css
index 98254f1..472fc09 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -60,6 +60,7 @@ html, body {
     float: right;
     background-color: #002F5D;
     color: #FFFFFF;
+    width: 125px;
 }
 
 #column_select_window {
@@ -885,3 +886,29 @@ select.error, textarea.error, input.error {
         background-image: url("images/map-icon@3x.png");
     }
 }
+
+/* Style the buttons that are used to open and close the accordion panel */
+.accordion {
+    position: relative;
+    background-color: #002F5D;
+    color: #FFFFFF;
+    cursor: pointer;
+    text-align: center;
+    width: 125px;
+}
+
+.active, .accordion:hover, #column_select: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 {
+      margin-top: 5px;
+}
\ No newline at end of file