From 126ebcb8b280012bf86ba7df96658837b48ececa Mon Sep 17 00:00:00 2001 From: Ian Renton Date: Sat, 28 Mar 2026 10:50:38 +0000 Subject: [PATCH] UI groundwork for conditions display #92 --- templates/about.html | 2 +- templates/add_spot.html | 4 +- templates/alerts.html | 8 +++- templates/bands.html | 10 +++-- templates/base.html | 8 ++-- templates/map.html | 10 +++-- templates/spots.html | 10 +++-- templates/status.html | 4 +- templates/widgets/conditions-area-header.html | 10 +++++ webassets/css/style.css | 7 ++++ webassets/js/alerts.js | 27 ------------- webassets/js/bands.js | 27 ------------- webassets/js/common.js | 38 +++++++++++++++++++ webassets/js/map.js | 27 ------------- webassets/js/spots.js | 27 ------------- 15 files changed, 91 insertions(+), 128 deletions(-) create mode 100644 templates/widgets/conditions-area-header.html diff --git a/templates/about.html b/templates/about.html index 8923dd2..8ff4aff 100644 --- a/templates/about.html +++ b/templates/about.html @@ -67,7 +67,7 @@

This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.

- + {% end %} \ No newline at end of file diff --git a/templates/add_spot.html b/templates/add_spot.html index 5cf875b..0a65c2d 100644 --- a/templates/add_spot.html +++ b/templates/add_spot.html @@ -69,8 +69,8 @@ - - + + {% end %} \ No newline at end of file diff --git a/templates/alerts.html b/templates/alerts.html index ba3a25d..f5caee3 100644 --- a/templates/alerts.html +++ b/templates/alerts.html @@ -50,14 +50,18 @@ +
+ {% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %} +
+
- - + + {% end %} \ No newline at end of file diff --git a/templates/bands.html b/templates/bands.html index 4ee4211..1c9e7f0 100644 --- a/templates/bands.html +++ b/templates/bands.html @@ -55,6 +55,10 @@ +
+ {% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %} +
+
@@ -62,9 +66,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index fb06721..eb96968 100644 --- a/templates/base.html +++ b/templates/base.html @@ -46,10 +46,10 @@ crossorigin="anonymous"> - - - - + + + + diff --git a/templates/map.html b/templates/map.html index ccffb1f..6849c4c 100644 --- a/templates/map.html +++ b/templates/map.html @@ -56,6 +56,10 @@ + +
+ {% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %} +
@@ -70,9 +74,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/spots.html b/templates/spots.html index d198b5b..cbccc69 100644 --- a/templates/spots.html +++ b/templates/spots.html @@ -78,6 +78,10 @@ +
+ {% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %} +
+
@@ -87,9 +91,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/status.html b/templates/status.html index 75c19d2..b9bc25c 100644 --- a/templates/status.html +++ b/templates/status.html @@ -3,8 +3,8 @@
- - + + {% end %} \ No newline at end of file diff --git a/templates/widgets/conditions-area-header.html b/templates/widgets/conditions-area-header.html new file mode 100644 index 0000000..942413e --- /dev/null +++ b/templates/widgets/conditions-area-header.html @@ -0,0 +1,10 @@ +
+
+
+ Conditions +
+
+ +
+
+
diff --git a/webassets/css/style.css b/webassets/css/style.css index da7d1f8..b9cd5b6 100644 --- a/webassets/css/style.css +++ b/webassets/css/style.css @@ -206,6 +206,13 @@ tr.new td { } +/* TABLE */ +#table-container { + border-radius: 3px; + overflow: hidden; +} + + /* MAP */ div#map { width: auto; diff --git a/webassets/js/alerts.js b/webassets/js/alerts.js index 646e4c0..b32ae55 100644 --- a/webassets/js/alerts.js +++ b/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. diff --git a/webassets/js/bands.js b/webassets/js/bands.js index 67707d7..9c227df 100644 --- a/webassets/js/bands.js +++ b/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. diff --git a/webassets/js/common.js b/webassets/js/common.js index 6906f26..d3b3f4d 100644 --- a/webassets/js/common.js +++ b/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(); diff --git a/webassets/js/map.js b/webassets/js/map.js index d4c8ce8..c09cc82 100644 --- a/webassets/js/map.js +++ b/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 diff --git a/webassets/js/spots.js b/webassets/js/spots.js index 727193d..aea499b 100644 --- a/webassets/js/spots.js +++ b/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) {