w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-12-13 07:33: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

24
README.md
View File

@@ -28,14 +28,26 @@ You can embed Spothole in another website, e.g. for use as part of a ham radio c
URL parameters can be used to trigger an "embedded" mode which hides the headers, footers and settings. In this mode, you provide configuration for the various filter and display options via additional URL parameters. Any settings that the user has set for Spothole are ignored. This is so that the embedding site can select, for example, their choice of dark mode or SIG filters, which will not impact how Spothole appears when the user accesses it directly. Effectively, it becomes separate to their normal Spothole settings.
These are supplied with the URL to the page you want to embed, for example for an embedded version of the band map in dark mode, use `https://spothole.com/bands?embedded=true&dark-mode=true`. For an embedded version of the main spots/home page in the system light/dark mode, use `https://spothole.com/?embedded=true`. Providing no URL params causes the page to be loaded in the normal way it would when accessed directly in the user's browser.
Setting `embedded` to true is important for the rest of the settings to be applied; otherwise, the user's defaults will be used in preference to the URL params.
The supported parameters are:
These are supplied with the URL to the page you want to embed, for example for an embedded version of the band map in dark mode, use `https://spothole.com/bands?embedded=true&dark-mode=true`. For an embedded version of the main spots/home page in the system light/dark mode, use `https://spothole.com/?embedded=true`. For dark mode showing 70cm TOTA spots only, use `https://spothole.com/?embedded=true&dark-mode=true&filter-sigs=TOTA&filter-bands=70cm`. Providing no URL params causes the page to be loaded in the normal way it would when accessed directly in the user's browser.
| Name | Allowed Values | Default | Example | Description |
|-------------|-----------------|---------|-------------------|------------------------|
| `embedded` | `true`, `false` | `false` | `?embedded=true` | Enables embedded mode. |
| `dark-mode` | `true`, `false` | `false` | `?dark-mode=true` | Enables dark mode. |
The supported parameters are as follows. Generally these match the equivalent parameters in the real Spothole API, where a mapping exists.
| Name | Allowed Values | Default | Example | Description |
|----------------|-----------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `embedded` | `true`, `false` | `false` | `?embedded=true` | Enables embedded mode. |
| `dark-mode` | `true`, `false` | `false` | `?dark-mode=true` | Enables dark mode. |
| `time-zone` | `UTC`, `local` | `UTC` | `?time-zone=local` | Sets times to be in UTC or local time. |
| `limit` | 10, 25, 50, 100 | 50 | `?limit=50` | Sets the number of spots that will be displayed on the main spots page |
| `limit` | 25, 50, 100, 200, 500 | 100 | `?limit=100` | Sets the number of alerts that will be displayed on the alerts page |
| `max_age` | 300, 600, 1800, 3600 | 1800 | `?max_age=1800` | Sets the maximum age of spots displayed on the map and bands pages, in seconds. |
| `band` | Comma-separated list | (all) | `?band=20m,40m` | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
| `sig` | Comma-separated list | (all) | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
| `source` | Comma-separated list | (all) | `?source=Cluster` | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
| `mode_type` | Comma-separated list | (all) | `?mode_type=PHONE,CW` | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
| `dx_continent` | Comma-separated list | (all) | `?dx_continent=NA,SA` | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface. |
| `de_continent` | Comma-separated list | (all) | `?de_continent=EU` | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
More will be added soon to allow customisation of filters and other display properties.

2
views/webpage_base.tpl
View File

@@ -99,7 +99,7 @@
</div>
</div>
<div id="embeddedModeFooter" class="text-body-secondary pt-2 px-2 pb-1">Powered by <img src="/img/logo.png" class="logo" width="96" height="30" alt="Spothole"></div>
<div id="embeddedModeFooter" class="text-body-secondary pt-2 px-3 pb-1">Powered by <img src="/img/logo.png" class="logo" width="96" height="30" alt="Spothole"></div>
</body>
</html>

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));
}
}