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

Web UI options faff

Browse Source
This commit is contained in:
Ian Renton
2026-01-30 20:56:18 +00:00
parent 221fade44b
commit 6ed0eed10b
17 changed files with 64 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config-example.yml
View File

@@ -189,3 +189,5 @@ web-ui-options:
max-spot-age-default: 30 max-spot-age-default: 30
alert-count: [25, 50, 100, 200, 500] alert-count: [25, 50, 100, 200, 500]
alert-count-default: 100 alert-count-default: 100
default-color-scheme: "auto"
default-band-color-scheme: "PSK Reporter (Adjusted)"

4
core/config.py
View File

@@ -24,3 +24,7 @@ WEB_UI_OPTIONS = config["web-ui-options"]
# but for consistency we provide this to the front-end in web-ui-options because it has no impact outside of the web UI. # but for consistency we provide this to the front-end in web-ui-options because it has no impact outside of the web UI.
WEB_UI_OPTIONS["spot-providers-enabled-by-default"] = [p["name"] for p in config["spot-providers"] if p["enabled"] and ( WEB_UI_OPTIONS["spot-providers-enabled-by-default"] = [p["name"] for p in config["spot-providers"] if p["enabled"] and (
"enabled-by-default-in-web-ui" not in p or p["enabled-by-default-in-web-ui"] == True)] "enabled-by-default-in-web-ui" not in p or p["enabled-by-default-in-web-ui"] == True)]
# If spotting to this server is enabled, "API" is another valid spot source even though it does not come from
# one of our proviers. We set that to also be enabled by default.
if ALLOW_SPOTTING:
WEB_UI_OPTIONS["spot-providers-enabled-by-default"].append("API")

4
server/handlers/api/options.py
View File

@@ -34,13 +34,11 @@ class APIOptionsHandler(tornado.web.RequestHandler):
map(lambda p: p["name"], filter(lambda p: p["enabled"], self.status_data["alert_providers"]))), map(lambda p: p["name"], filter(lambda p: p["enabled"], self.status_data["alert_providers"]))),
"continents": CONTINENTS, "continents": CONTINENTS,
"max_spot_age": MAX_SPOT_AGE, "max_spot_age": MAX_SPOT_AGE,
"spot_allowed": ALLOW_SPOTTING, "spot_allowed": ALLOW_SPOTTING}
"web-ui-options": WEB_UI_OPTIONS}
# If spotting to this server is enabled, "API" is another valid spot source even though it does not come from # If spotting to this server is enabled, "API" is another valid spot source even though it does not come from
# one of our proviers. # one of our proviers.
if ALLOW_SPOTTING: if ALLOW_SPOTTING:
options["spot_sources"].append("API") options["spot_sources"].append("API")
options["web-ui-options"]["spot-providers-enabled-by-default"].append("API")
self.write(json.dumps(options, default=serialize_everything)) self.write(json.dumps(options, default=serialize_everything))
self.set_status(200) self.set_status(200)

6
server/handlers/pagetemplate.py
View File

@@ -2,8 +2,9 @@ from datetime import datetime
import pytz import pytz
import tornado import tornado
import json
from core.config import ALLOW_SPOTTING from core.config import ALLOW_SPOTTING, WEB_UI_OPTIONS
from core.constants import SOFTWARE_VERSION from core.constants import SOFTWARE_VERSION
from core.prometheus_metrics_handler import page_requests_counter from core.prometheus_metrics_handler import page_requests_counter
@@ -22,5 +23,6 @@ class PageTemplateHandler(tornado.web.RequestHandler):
page_requests_counter.inc() page_requests_counter.inc()
# Load named template, and provide variables used in templates # Load named template, and provide variables used in templates
self.render(self.template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING) self.render(self.template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING,
web_ui_options=json.dumps(WEB_UI_OPTIONS))

2
templates/about.html
View File

@@ -63,7 +63,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=6"></script> <script src="/js/common.js?v=7"></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=6"></script> <script src="/js/common.js?v=7"></script>
<script src="/js/add-spot.js?v=6"></script> <script src="/js/add-spot.js?v=7"></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 %}

6
templates/alerts.html
View File

@@ -115,7 +115,7 @@
<p class="card-text spothole-card-text"> <p class="card-text spothole-card-text">
<label class="form-check-label" for="color-scheme">UI color scheme</label> <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;"> <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="auto">Automatic</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
</select> </select>
@@ -170,8 +170,8 @@
</div> </div>
<script src="/js/common.js?v=6"></script> <script src="/js/common.js?v=7"></script>
<script src="/js/alerts.js?v=6"></script> <script src="/js/alerts.js?v=7"></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 %}

8
templates/bands.html
View File

@@ -115,7 +115,7 @@
<p class="card-text spothole-card-text"> <p class="card-text spothole-card-text">
<label class="form-check-label" for="color-scheme">UI color scheme</label> <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;"> <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="auto">Automatic</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
</select> </select>
@@ -136,9 +136,9 @@
</div> </div>
<script src="/js/common.js?v=6"></script> <script src="/js/common.js?v=7"></script>
<script src="/js/spotsbandsandmap.js?v=6"></script> <script src="/js/spotsbandsandmap.js?v=7"></script>
<script src="/js/bands.js?v=6"></script> <script src="/js/bands.js?v=7"></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 %}

12
templates/base.html
View File

@@ -46,10 +46,14 @@
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=6"></script> <script src="https://misc.ianrenton.com/jsutils/utils.js?v=7"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=6"></script> <script src="https://misc.ianrenton.com/jsutils/storage.js?v=7"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=6"></script> <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=7"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=6"></script> <script src="https://misc.ianrenton.com/jsutils/geo.js?v=7"></script>
<script>
// Get Web UI Options from the backend to the frontend as a JS object.
let web_ui_options = JSON.parse('{{ web_ui_options }}'.replace(/&quot;/g, '\"'));
</script>
</head> </head>
<body> <body>

8
templates/map.html
View File

@@ -127,7 +127,7 @@
<p class="card-text spothole-card-text"> <p class="card-text spothole-card-text">
<label class="form-check-label" for="color-scheme">UI color scheme</label> <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;"> <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="auto">Automatic</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
</select> </select>
@@ -154,9 +154,9 @@
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
<script src="/js/common.js?v=6"></script> <script src="/js/common.js?v=7"></script>
<script src="/js/spotsbandsandmap.js?v=6"></script> <script src="/js/spotsbandsandmap.js?v=7"></script>
<script src="/js/map.js?v=6"></script> <script src="/js/map.js?v=7"></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 %}

8
templates/spots.html
View File

@@ -158,7 +158,7 @@
<p class="card-text spothole-card-text"> <p class="card-text spothole-card-text">
<label class="form-check-label" for="color-scheme">UI color scheme</label> <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;"> <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="auto">Automatic</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
</select> </select>
@@ -226,9 +226,9 @@
</div> </div>
<script src="/js/common.js?v=6"></script> <script src="/js/common.js?v=7"></script>
<script src="/js/spotsbandsandmap.js?v=6"></script> <script src="/js/spotsbandsandmap.js?v=7"></script>
<script src="/js/spots.js?v=6"></script> <script src="/js/spots.js?v=7"></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=6"></script> <script src="/js/common.js?v=7"></script>
<script src="/js/status.js?v=6"></script> <script src="/js/status.js?v=7"></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 %}

4
webassets/js/alerts.js
View File

@@ -286,11 +286,11 @@ function loadOptions() {
generateMultiToggleFilterCard("#source-options", "source", options["alert_sources"]); generateMultiToggleFilterCard("#source-options", "source", options["alert_sources"]);
// Populate the Display panel // Populate the Display panel
options["web-ui-options"]["alert-count"].forEach(sc => $("#alerts-to-fetch").append($('<option>', { web_ui_options["alert-count"].forEach(sc => $("#alerts-to-fetch").append($('<option>', {
value: sc, value: sc,
text: sc text: sc
}))); })));
$("#alerts-to-fetch").val(options["web-ui-options"]["alert-count-default"]); $("#alerts-to-fetch").val(web_ui_options["alert-count-default"]);
// Load URL params. These may select things from the various filter & display options, so the function needs // Load URL params. These may select things from the various filter & display options, so the function needs
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress

7
webassets/js/bands.js
View File

@@ -229,15 +229,16 @@ function loadOptions() {
options = jsonData; options = jsonData;
// Populate the Display panel // Populate the Display panel
options["web-ui-options"]["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', { web_ui_options["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
value: sc * 60, value: sc * 60,
text: sc text: sc
}))); })));
$("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60); $("#max-spot-age").val(web_ui_options["max-spot-age-default"] * 60);
getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', { getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
value: sc, value: sc,
text: sc text: sc
}))); })));
$("#band-color-scheme").val(web_ui_options["default-band-color-scheme"]);
// First pass loading settings, so we can load the band colour scheme before the filters that need to use it // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
loadSettings(); loadSettings();
@@ -252,7 +253,7 @@ function loadOptions() {
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]); generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]); generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
generateModesMultiToggleFilterCard(options["modes"]); generateModesMultiToggleFilterCard(options["modes"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]); generateSourcesMultiToggleFilterCard(options["spot_sources"], web_ui_options["spot-providers-enabled-by-default"]);
// Load URL params. These may select things from the various filter & display options, so the function needs // Load URL params. These may select things from the various filter & display options, so the function needs
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress

7
webassets/js/common.js
View File

@@ -163,11 +163,16 @@ function setColorScheme(mode) {
// Startup function to determine whether to use light or dark mode, or leave as auto // Startup function to determine whether to use light or dark mode, or leave as auto
function usePreferredTheme() { function usePreferredTheme() {
// Set the value of the select box to the server's default
$("#color-scheme").val(web_ui_options["default-color-scheme"]);
// Work out if we have ever explicitly saved the value of our select box. If so, we set our colour scheme now based // 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". // on that. If not, we let the select retain its default value from Spothole config and apply that.
let val = localStorage.getItem("#color-scheme:value"); let val = localStorage.getItem("#color-scheme:value");
if (val != null) { if (val != null) {
setColorScheme(JSON.parse(val)); setColorScheme(JSON.parse(val));
} else {
setColorSchemeFromUI();
} }
} }

7
webassets/js/map.js
View File

@@ -161,15 +161,16 @@ function loadOptions() {
options = jsonData; options = jsonData;
// Populate the Display panel // Populate the Display panel
options["web-ui-options"]["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', { web_ui_options["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
value: sc * 60, value: sc * 60,
text: sc text: sc
}))); })));
$("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60); $("#max-spot-age").val(web_ui_options["max-spot-age-default"] * 60);
getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', { getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
value: sc, value: sc,
text: sc text: sc
}))); })));
$("#band-color-scheme").val(web_ui_options["default-band-color-scheme"]);
// First pass loading settings, so we can load the band colour scheme before the filters that need to use it // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
loadSettings(); loadSettings();
@@ -184,7 +185,7 @@ function loadOptions() {
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]); generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]); generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
generateModesMultiToggleFilterCard(options["modes"]); generateModesMultiToggleFilterCard(options["modes"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]); generateSourcesMultiToggleFilterCard(options["spot_sources"], web_ui_options["spot-providers-enabled-by-default"]);
// Load URL params. These may select things from the various filter & display options, so the function needs // Load URL params. These may select things from the various filter & display options, so the function needs
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress

10
webassets/js/spots.js
View File

@@ -387,15 +387,17 @@ function loadOptions() {
options = jsonData; options = jsonData;
// Populate the Display panel // Populate the Display panel
options["web-ui-options"]["spot-count"].forEach(sc => $("#spots-to-fetch").append($('<option>', { web_ui_options["spot-count"].forEach(sc => $("#spots-to-fetch").append($('<option>', {
value: sc, value: sc,
text: sc text: sc,
selected: sc == web_ui_options["spot-count-default"] // todo remove this?
}))); })));
$("#spots-to-fetch").val(options["web-ui-options"]["spot-count-default"]); $("#spots-to-fetch").val(web_ui_options["spot-count-default"]); // todo setting val doesn't update UI?
getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', { getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
value: sc, value: sc,
text: sc text: sc
}))); })));
$("#band-color-scheme").val(web_ui_options["default-band-color-scheme"]);
// First pass loading settings, so we can load the band colour scheme before the filters that need to use it // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
loadSettings(); loadSettings();
@@ -410,7 +412,7 @@ function loadOptions() {
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]); generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]); generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
generateModesMultiToggleFilterCard(options["modes"]); generateModesMultiToggleFilterCard(options["modes"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]); generateSourcesMultiToggleFilterCard(options["spot_sources"], web_ui_options["spot-providers-enabled-by-default"]);
// Load URL params. These may select things from the various filter & display options, so the function needs // Load URL params. These may select things from the various filter & display options, so the function needs
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress