UI groundwork for conditions display #92

webassets/css/style.css

@@ -206,6 +206,13 @@ tr.new td {
 }
 
 
+/* TABLE */
+#table-container {
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+
 /* MAP */
 div#map {
     width: auto;

webassets/js/alerts.js

@@ -306,33 +306,6 @@ function filtersUpdated() {
     saveSettings();
 }
 
-// React to toggling/closing panels
-function toggleFiltersPanel() {
-    // If we are going to display the filters panel, hide the display panel
-    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
-        $("#display-area").hide();
-        $("#display-button").button("toggle");
-    }
-    $("#filters-area").toggle();
-}
-function closeFiltersPanel() {
-    $("#filters-button").button("toggle");
-    $("#filters-area").hide();
-}
-
-function toggleDisplayPanel() {
-    // If we are going to display status, load the data for the status panel, and hide the filters panel
-    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
-        $("#filters-area").hide();
-        $("#filters-button").button("toggle");
-    }
-    $("#display-area").toggle();
-}
-function closeDisplayPanel() {
-    $("#display-button").button("toggle");
-    $("#display-area").hide();
-}
-
 // Startup
 $(document).ready(function() {
     // Call loadOptions(), this will then trigger loading alerts and setting up timers.

webassets/js/bands.js

@@ -265,33 +265,6 @@ function displayUpdated() {
     saveSettings();
 }
 
-// React to toggling/closing panels
-function toggleFiltersPanel() {
-    // If we are going to show the filters panel, hide the display panel
-    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
-        $("#display-area").hide();
-        $("#display-button").button("toggle");
-    }
-    $("#filters-area").toggle();
-}
-function closeFiltersPanel() {
-    $("#filters-button").button("toggle");
-    $("#filters-area").hide();
-}
-
-function toggleDisplayPanel() {
-    // If we are going to show the display panel, hide the filters panel
-    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
-        $("#filters-area").hide();
-        $("#filters-button").button("toggle");
-    }
-    $("#display-area").toggle();
-}
-function closeDisplayPanel() {
-    $("#display-button").button("toggle");
-    $("#display-area").hide();
-}
-
 // Startup
 $(document).ready(function() {
     // Call loadOptions(), this will then trigger loading spots and setting up timers.

webassets/js/common.js

@@ -183,6 +183,44 @@ function listenForOSThemeChange() {
     });
 }
 
+// Panel toggle functions.
+// PANELS is the single registry of all collapsible panels. To add a new panel, add an entry here
+// and provide named wrappers below. The toggle logic will automatically handle hiding other panels.
+const PANELS = [
+    { area: "#filters-area",    button: "#filters-button" },
+    { area: "#display-area",    button: "#display-button" },
+    { area: "#conditions-area", button: "#conditions-button" },
+];
+
+// Toggle a panel open or closed. If opening, all other visible panels are closed first.
+// areaId is the jQuery selector for the panel's content area, e.g. "#filters-area".
+function togglePanel(areaId) {
+    if (!$(areaId).is(":visible")) {
+        PANELS.forEach(p => {
+            if (p.area !== areaId && $(p.area).is(":visible")) {
+                $(p.area).hide();
+                $(p.button).button("toggle");
+            }
+        });
+    }
+    $(areaId).toggle();
+}
+
+// Close a panel and deactivate its toggle button.
+function closePanel(areaId) {
+    const panel = PANELS.find(p => p.area === areaId);
+    if (panel) { $(panel.button).button("toggle"); }
+    $(areaId).hide();
+}
+
+function toggleFiltersPanel()    { togglePanel("#filters-area"); }
+function closeFiltersPanel()     { closePanel("#filters-area"); }
+function toggleDisplayPanel()    { togglePanel("#display-area"); }
+function closeDisplayPanel()     { closePanel("#display-area"); }
+function toggleConditionsPanel() { togglePanel("#conditions-area"); }
+function closeConditionsPanel()  { closePanel("#conditions-area"); }
+
+
 // Startup
 $(document).ready(function() {
     usePreferredTheme();

webassets/js/map.js

@@ -196,33 +196,6 @@ function displayUpdated() {
     saveSettings();
 }
 
-// React to toggling/closing panels
-function toggleFiltersPanel() {
-    // If we are going to show the filters panel, hide the display panel
-    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
-        $("#display-area").hide();
-        $("#display-button").button("toggle");
-    }
-    $("#filters-area").toggle();
-}
-function closeFiltersPanel() {
-    $("#filters-button").button("toggle");
-    $("#filters-area").hide();
-}
-
-function toggleDisplayPanel() {
-    // If we are going to show the display panel, hide the filters panel
-    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
-        $("#filters-area").hide();
-        $("#filters-button").button("toggle");
-    }
-    $("#display-area").toggle();
-}
-function closeDisplayPanel() {
-    $("#display-button").button("toggle");
-    $("#display-area").hide();
-}
-
 // Set up the map
 function setUpMap() {
     // Create map

webassets/js/spots.js

@@ -462,33 +462,6 @@ function userGridUpdated() {
     saveSettings();
 }
 
-// React to toggling/closing panels
-function toggleFiltersPanel() {
-    // If we are going to show the filters panel, hide the display and add spot panels
-    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
-        $("#display-area").hide();
-        $("#display-button").button("toggle");
-    }
-    $("#filters-area").toggle();
-}
-function closeFiltersPanel() {
-    $("#filters-button").button("toggle");
-    $("#filters-area").hide();
-}
-
-function toggleDisplayPanel() {
-    // If we are going to show the display panel, hide the filters and add spot panels
-    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
-        $("#filters-area").hide();
-        $("#filters-button").button("toggle");
-    }
-    $("#display-area").toggle();
-}
-function closeDisplayPanel() {
-    $("#display-button").button("toggle");
-    $("#display-area").hide();
-}
-
 // Display the intro box, unless the user has already dismissed it once.
 function displayIntroBox() {
     if (localStorage.getItem("intro-box-dismissed") == null) {