w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-04-29 18:25:58 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

UI groundwork for conditions display #92

Browse Source
This commit is contained in:
Ian Renton
2026-03-28 10:50:38 +00:00
parent 2a5e0db5bc
commit 126ebcb8b2
15 changed files with 91 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/about.html
View File

@@ -67,7 +67,7 @@
<p>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.</p> <p>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.</p>
</div> </div>
<script src="/js/common.js?v=1774694366"></script> <script src="/js/common.js?v=1774695038"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/add_spot.html
View File

@@ -69,8 +69,8 @@
</div> </div>
<script src="/js/common.js?v=1774694366"></script> <script src="/js/common.js?v=1774695038"></script>
<script src="/js/add-spot.js?v=1774694366"></script> <script src="/js/add-spot.js?v=1774695038"></script>
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

8
templates/alerts.html
View File

@@ -50,14 +50,18 @@
</div> </div>
</div> </div>
<div id="conditions-area" class="appearing-panel card mb-3">
{% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %}
</div>
<div id="table-container"> <div id="table-container">
<table id="table" class="table"><thead><tr class="table-primary"></tr></thead><tbody></tbody></table> <table id="table" class="table"><thead><tr class="table-primary"></tr></thead><tbody></tbody></table>
</div> </div>
</div> </div>
<script src="/js/common.js?v=1774694367"></script> <script src="/js/common.js?v=1774695038"></script>
<script src="/js/alerts.js?v=1774694367"></script> <script src="/js/alerts.js?v=1774695038"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

10
templates/bands.html
View File

@@ -55,6 +55,10 @@
</div> </div>
</div> </div>
<div id="conditions-area" class="appearing-panel card mb-3">
{% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %}
</div>
<div id="bands-container"></div> <div id="bands-container"></div>
</div> </div>
@@ -62,9 +66,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1774694366"></script> <script src="/js/common.js?v=1774695038"></script>
<script src="/js/spotsbandsandmap.js?v=1774694366"></script> <script src="/js/spotsbandsandmap.js?v=1774695038"></script>
<script src="/js/bands.js?v=1774694366"></script> <script src="/js/bands.js?v=1774695038"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

8
templates/base.html
View File

@@ -46,10 +46,10 @@
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1774694366"></script> <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1774695038"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774694366"></script> <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774695038"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774694366"></script> <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774695038"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774694366"></script> <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774695038"></script>
</head> </head>
<body> <body>

10
templates/map.html
View File

@@ -56,6 +56,10 @@
</div> </div>
</div> </div>
</div> </div>
<div id="conditions-area" class="appearing-panel card mb-3">
{% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %}
</div>
</div> </div>
</div> </div>
@@ -70,9 +74,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1774694367"></script> <script src="/js/common.js?v=1774695038"></script>
<script src="/js/spotsbandsandmap.js?v=1774694367"></script> <script src="/js/spotsbandsandmap.js?v=1774695038"></script>
<script src="/js/map.js?v=1774694367"></script> <script src="/js/map.js?v=1774695038"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

10
templates/spots.html
View File

@@ -78,6 +78,10 @@
</div> </div>
</div> </div>
<div id="conditions-area" class="appearing-panel card mb-3">
{% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %}
</div>
<div id="table-container"> <div id="table-container">
<table id="table" class="table"><thead><tr class="table-primary"></tr></thead><tbody></tbody></table> <table id="table" class="table"><thead><tr class="table-primary"></tr></thead><tbody></tbody></table>
</div> </div>
@@ -87,9 +91,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1774694366"></script> <script src="/js/common.js?v=1774695038"></script>
<script src="/js/spotsbandsandmap.js?v=1774694366"></script> <script src="/js/spotsbandsandmap.js?v=1774695038"></script>
<script src="/js/spots.js?v=1774694366"></script> <script src="/js/spots.js?v=1774695038"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/status.html
View File

@@ -3,8 +3,8 @@
<div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div> <div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div>
<script src="/js/common.js?v=1774694366"></script> <script src="/js/common.js?v=1774695038"></script>
<script src="/js/status.js?v=1774694366"></script> <script src="/js/status.js?v=1774695038"></script>
<script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

10
templates/widgets/conditions-area-header.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="card-header">
<div class="row">
<div class="col-auto me-auto">
Conditions
</div>
<div class="col-auto d-inline-flex">
<button id="close-conditions-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeConditionsPanel();"></button>
</div>
</div>
</div>

7
webassets/css/style.css
View File

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

27
webassets/js/alerts.js
View File

@@ -306,33 +306,6 @@ function filtersUpdated() {
saveSettings(); 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 // Startup
$(document).ready(function() { $(document).ready(function() {
// Call loadOptions(), this will then trigger loading alerts and setting up timers. // Call loadOptions(), this will then trigger loading alerts and setting up timers.

27
webassets/js/bands.js
View File

@@ -265,33 +265,6 @@ function displayUpdated() {
saveSettings(); 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 // Startup
$(document).ready(function() { $(document).ready(function() {
// Call loadOptions(), this will then trigger loading spots and setting up timers. // Call loadOptions(), this will then trigger loading spots and setting up timers.

38
webassets/js/common.js
View File

@@ -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 // Startup
$(document).ready(function() { $(document).ready(function() {
usePreferredTheme(); usePreferredTheme();

27
webassets/js/map.js
View File

@@ -196,33 +196,6 @@ function displayUpdated() {
saveSettings(); 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 // Set up the map
function setUpMap() { function setUpMap() {
// Create map // Create map

27
webassets/js/spots.js
View File

@@ -462,33 +462,6 @@ function userGridUpdated() {
saveSettings(); 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. // Display the intro box, unless the user has already dismissed it once.
function displayIntroBox() { function displayIntroBox() {
if (localStorage.getItem("intro-box-dismissed") == null) { if (localStorage.getItem("intro-box-dismissed") == null) {