w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-12-16 00:53:39 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Enable embedded-mode support for filters

Browse Source
This commit is contained in:
Ian Renton
2025-11-30 16:46:19 +00:00
parent 03af6858b4
commit 210a0564aa
4 changed files with 76 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
webassets/css/style.css
View File

@@ -20,6 +20,8 @@ whole of #header, the map vertical sizing breaks. */
background: var(--bs-body-bg);
border-radius: 1em 0 0 0;
font-size: 0.9em;
border-top: 1px solid grey;
border-left: 1px solid grey;
}
[embedded-mode=true] #embeddedModeFooter {
display: block;
@@ -100,13 +102,6 @@ button#add-spot-button {
/* SPOTS/ALERTS PAGES, MAIN TABLE */
/* Fudge apply our own "dark primary" background as Bootstrap do this itself */
[data-bs-theme=dark] tr.table-primary {
--bs-table-bg: #053680;
--bs-table-border-color: #021b42;
--bs-table-color: white;
}
td.nowrap, span.nowrap {
text-wrap: nowrap;
}
@@ -179,6 +174,18 @@ tr.table-faded td span {
text-decoration: line-through !important;
}
/* Fudge apply our own "dark primary" and "dark danger" backgrounds as Bootstrap doesn't do this itself */
[data-bs-theme=dark] tr.table-primary {
--bs-table-bg: #053680;
--bs-table-border-color: #021b42;
--bs-table-color: white;
}
[data-bs-theme=dark] tr.table-danger {
--bs-table-bg: #74272e;
--bs-table-border-color: #530208;
--bs-table-color: white;
}
/* MAP */
div#map {

47
webassets/js/common.js
View File

@@ -22,10 +22,49 @@ function loadURLParams() {
$("html").attr("embedded-mode", "true");
}
// Handle dark mode.
let dark = params.get("dark-mode");
if (dark != null) {
enableDarkMode(dark === "true");
// Handle other params
updateCheckboxFromParam(params, "dark-mode", "darkMode");
enableDarkMode($("#darkMode")[0].checked);
updateSelectFromParam(params, "time-zone", "timeZone"); // Only on Spots and Alerts pages
updateSelectFromParam(params, "limit", "spots-to-fetch"); // Only on Spots page
updateSelectFromParam(params, "limit", "alerts-to-fetch"); // Only on Alerts page
updateSelectFromParam(params, "max_age", "max-spot-age"); // Only on Map & Bands pages
updateFilterFromParam(params, "band", "band");
updateFilterFromParam(params, "sig", "sig");
updateFilterFromParam(params, "source", "source");
updateFilterFromParam(params, "mode_type", "mode_type");
updateFilterFromParam(params, "dx_continent", "dx_continent");
updateFilterFromParam(params, "de_continent", "de_continent");
}
// Update an HTML checkbox element so that its selected matches the given parameter (which must have a true or false value)
function updateCheckboxFromParam(params, paramName, checkboxID) {
let v = params.get(paramName);
if (v != null) {
$("#" + checkboxID).prop("checked", (v === "true") ? true : false);
}
}
// Update an HTML select element so that its value matches the given parameter
function updateSelectFromParam(params, paramName, selectID) {
let v = params.get(paramName);
if (v != null) {
$("#" + selectID).prop("value", v);
}
}
// Update a set of HTML checkbox elements describing a filter of the given name, so that any items named in the
// parameter (as a comma-separated list) will be enabled, and all others disabled. e.g. if paramName is
// "filter-band" and the params contain "filter-band=20m,40m", and prefix is "band", then #filter-button-band-30m
// would be disabled but #filter-button-band-20m and #filter-button-band-40m would be enabled.
function updateFilterFromParam(params, paramName, filterName) {
let v = params.get(paramName);
if (v != null) {
// First uncheck all options for the filter
$(".filter-button-" + filterName).prop("checked", false);
// Now find out which ones should be enabled
let s = v.split(",");
s.forEach(val => $("#filter-button-" + filterName + "-" + val).prop("checked", true));
}
}