diff --git a/README.md b/README.md index 9e377cf..89f8100 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/views/webpage_base.tpl b/views/webpage_base.tpl index a471c0b..adafc3a 100644 --- a/views/webpage_base.tpl +++ b/views/webpage_base.tpl @@ -99,7 +99,7 @@ -
Powered by
+
Powered by
diff --git a/webassets/css/style.css b/webassets/css/style.css index 69e1c79..dd7f314 100644 --- a/webassets/css/style.css +++ b/webassets/css/style.css @@ -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 { diff --git a/webassets/js/common.js b/webassets/js/common.js index c3bb784..a631b72 100644 --- a/webassets/js/common.js +++ b/webassets/js/common.js @@ -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)); } }