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

Allow users to return to "Automatic" colour scheme. #102

Browse Source
This commit is contained in:
Ian Renton
2026-01-30 17:12:57 +00:00
parent edb8dd5e0e
commit 721d345332
8 changed files with 96 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@@ -34,20 +34,20 @@ These are supplied with the URL to the page you want to embed, for example for a
The supported parameters are as follows. Generally these match the equivalent parameters in the real Spothole API, where a mapping exists. 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 | | Name | Allowed Values | Default | Example | Description |
|----------------|-----------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| |----------------|-------------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `embedded` | `true`, `false` | `false` | `?embedded=true` | Enables embedded mode. | | `embedded` | `true`, `false` | `false` | `?embedded=true` | Enables embedded mode. |
| `dark-mode` | `true`, `false` | `false` | `?dark-mode=true` | Enables dark mode. | | `color-scheme` | `light`, `dark`, `auto` | `auto` | `?color-scheme=dark` | Forces light or dark mode in preference to the operating system default. |
| `time-zone` | `UTC`, `local` | `UTC` | `?time-zone=local` | Sets times to be in UTC or local time. | | `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` | 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 | | `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. | | `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. | | `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. | | `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. | | `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. | | `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. | | `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. | | `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. More will be added soon to allow customisation of filters and other display properties.

14
templates/alerts.html
View File

@@ -112,12 +112,14 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Theme</h5> <h5 class="card-title">Theme</h5>
<div class="form-group"> <p class="card-text spothole-card-text">
<div class="form-check form-check-inline"> <label class="form-check-label" for="color-scheme">UI color scheme</label>
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();"> <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<label class="form-check-label" for="darkMode">Dark mode</label> <option value="auto" selected>Automatic</option>
</div> <option value="light">Light</option>
</div> <option value="dark">Dark</option>
</select>
</p>
</div> </div>
</div> </div>
</div> </div>

24
templates/bands.html
View File

@@ -112,17 +112,19 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Theme</h5> <h5 class="card-title">Theme</h5>
<div class="form-group"> <p class="card-text spothole-card-text">
<div class="form-check form-check-inline"> <label class="form-check-label" for="color-scheme">UI color scheme</label>
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();"> <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<label class="form-check-label" for="darkMode">Dark mode</label> <option value="auto" selected>Automatic</option>
</div> <option value="light">Light</option>
<p class="card-text spothole-card-text"> <option value="dark">Dark</option>
Band color scheme<br/> </select>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;"> </p>
</select> <p class="card-text spothole-card-text">
</p> <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
</div> <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
</select>
</p>
</div> </div>
</div> </div>
</div> </div>

24
templates/map.html
View File

@@ -124,17 +124,19 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Theme</h5> <h5 class="card-title">Theme</h5>
<div class="form-group"> <p class="card-text spothole-card-text">
<div class="form-check form-check-inline"> <label class="form-check-label" for="color-scheme">UI color scheme</label>
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();"> <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<label class="form-check-label" for="darkMode">Dark mode</label> <option value="auto" selected>Automatic</option>
</div> <option value="light">Light</option>
<p class="card-text spothole-card-text"> <option value="dark">Dark</option>
Band color scheme<br/> </select>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;"> </p>
</select> <p class="card-text spothole-card-text">
</p> <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
</div> <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
</select>
</p>
</div> </div>
</div> </div>
</div> </div>

16
templates/spots.html
View File

@@ -155,14 +155,16 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Theme</h5> <h5 class="card-title">Theme</h5>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
<label class="form-check-label" for="darkMode">Dark mode</label>
</div>
</div>
<p class="card-text spothole-card-text"> <p class="card-text spothole-card-text">
Band color scheme<br/> <label class="form-check-label" for="color-scheme">UI color scheme</label>
<select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<option value="auto" selected>Automatic</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</p>
<p class="card-text spothole-card-text">
<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;"> <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
</select> </select>
</p> </p>

6
webassets/js/alerts.js
View File

@@ -312,12 +312,6 @@ function filtersUpdated() {
saveSettings(); saveSettings();
} }
// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
function toggleDarkMode() {
enableDarkMode($("#darkMode")[0].checked);
saveSettings();
}
// React to toggling/closing panels // React to toggling/closing panels
function toggleFiltersPanel() { function toggleFiltersPanel() {
// If we are going to display the filters panel, hide the display panel // If we are going to display the filters panel, hide the display panel

63
webassets/js/common.js
View File

@@ -20,8 +20,8 @@ function loadURLParams() {
} }
// Handle other params // Handle other params
updateCheckboxFromParam(params, "dark-mode", "darkMode"); updateSelectFromParam(params, "color-scheme", "color-scheme");
updateSelectFromParam(params, "time-zone", "timeZone"); // Only on Spots and Alerts pages updateSelectFromParam(params, "time-zone", "time-zone"); // Only on Spots and Alerts pages
updateSelectFromParam(params, "limit", "spots-to-fetch"); // Only on Spots page updateSelectFromParam(params, "limit", "spots-to-fetch"); // Only on Spots page
updateSelectFromParam(params, "limit", "alerts-to-fetch"); // Only on Alerts page updateSelectFromParam(params, "limit", "alerts-to-fetch"); // Only on Alerts page
updateSelectFromParam(params, "max_age", "max-spot-age"); // Only on Map & Bands pages updateSelectFromParam(params, "max_age", "max-spot-age"); // Only on Map & Bands pages
@@ -38,10 +38,6 @@ function updateCheckboxFromParam(params, paramName, checkboxID) {
let v = params.get(paramName); let v = params.get(paramName);
if (v != null) { if (v != null) {
$("#" + checkboxID).prop("checked", (v === "true") ? true : false); $("#" + checkboxID).prop("checked", (v === "true") ? true : false);
// Extra check if this is the "dark mode" toggle
if (checkboxID == "darkMode") {
enableDarkMode((v === "true") ? true : false);
}
} }
} }
@@ -50,6 +46,10 @@ function updateSelectFromParam(params, paramName, selectID) {
let v = params.get(paramName); let v = params.get(paramName);
if (v != null) { if (v != null) {
$("#" + selectID).prop("value", v); $("#" + selectID).prop("value", v);
// Extra check if this is the "color scheme" select
if (selectID == "color-scheme") {
setColorScheme(v);
}
} }
} }
@@ -142,30 +142,45 @@ function columnsUpdated() {
saveSettings(); saveSettings();
} }
// Function to set dark mode on or off // Function to set the colour scheme based on the state of the UI select box
function enableDarkMode(dark) { function setColorSchemeFromUI() {
$("html").attr("data-bs-theme", dark ? "dark" : "light"); setColorScheme($("#color-scheme option:selected").val());
const metaThemeColor = document.querySelector("meta[name=theme-color]"); saveSettings();
metaThemeColor.setAttribute("content", dark ? "black" : "white");
const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
metaAppleStatusBarStyle.setAttribute("content", dark ? "black-translucent" : "white-translucent");
} }
// Startup function to determine whether to use light or dark mode // Function to set the color scheme. Supported values: "dark", "light", "auto"
function usePreferredTheme() { function setColorScheme(mode) {
// First, work out if we have ever explicitly saved the value of our toggle let effectiveModeDark = mode == "dark";
let val = localStorage.getItem("#darkMode:checked"); if (mode == "auto") {
if (val != null) { effectiveModeDark = window.matchMedia('(prefers-color-scheme: dark)').matches
enableDarkMode(JSON.parse(val));
} else {
// Never set it before, so use the system default theme and set the toggle up to match
let dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
enableDarkMode(dark);
$("#darkMode").prop('checked', dark);
} }
$("html").attr("data-bs-theme", effectiveModeDark ? "dark" : "light");
const metaThemeColor = document.querySelector("meta[name=theme-color]");
metaThemeColor.setAttribute("content", effectiveModeDark ? "black" : "white");
const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
metaAppleStatusBarStyle.setAttribute("content", effectiveModeDark ? "black-translucent" : "white-translucent");
}
// Startup function to determine whether to use light or dark mode, or leave as auto
function usePreferredTheme() {
// Work out if we have ever explicitly saved the value of our select box. If so, we set our colour scheme now based
// on that. If not, we let the select retain its default value of "auto".
let val = localStorage.getItem("#color-scheme:value");
if (val != null) {
setColorScheme(JSON.parse(val));
}
}
// Sets up a listener on the OS light-dark theme change. If the Spothole user theme is set to Auto, the UI will be
// updated, otherwise if the Spothole user theme is forced to light or dark, that preference will remain.
function listenForOSThemeChange() {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
setColorScheme($("#color-scheme option:selected").val());
});
} }
// Startup // Startup
$(document).ready(function() { $(document).ready(function() {
usePreferredTheme(); usePreferredTheme();
listenForOSThemeChange();
}); });

6
webassets/js/spotsbandsandmap.js
View File

@@ -110,12 +110,6 @@ function filtersUpdated() {
saveSettings(); saveSettings();
} }
// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
function toggleDarkMode() {
enableDarkMode($("#darkMode")[0].checked);
saveSettings();
}
// Function to update the band colour scheme in spots, bands and map pages // Function to update the band colour scheme in spots, bands and map pages
function setBandColorSchemeFromUI() { function setBandColorSchemeFromUI() {
setBandColorScheme($("#band-color-scheme option:selected").val()); setBandColorScheme($("#band-color-scheme option:selected").val());