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

Make default colour schemes for the web UI configurable on the server side #102

Browse Source
This commit is contained in:
Ian Renton
2026-01-30 21:31:13 +00:00
parent 221fade44b
commit 2be1c5b3d3
14 changed files with 53 additions and 28 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)"

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 %}

8
templates/base.html
View File

@@ -46,10 +46,10 @@
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>
</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

@@ -291,6 +291,10 @@ function loadOptions() {
text: sc text: sc
}))); })));
$("#alerts-to-fetch").val(options["web-ui-options"]["alert-count-default"]); $("#alerts-to-fetch").val(options["web-ui-options"]["alert-count-default"]);
if ($("#color-scheme option:selected").val() == "") {
$("#color-scheme").val(options["web-ui-options"]["default-color-scheme"]);
setColorScheme(options["web-ui-options"]["default-color-scheme"]);
}
// 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

5
webassets/js/bands.js
View File

@@ -238,6 +238,11 @@ function loadOptions() {
value: sc, value: sc,
text: sc text: sc
}))); })));
$("#band-color-scheme").val(options["web-ui-options"]["default-band-color-scheme"]);
if ($("#color-scheme option:selected").val() == "") {
$("#color-scheme").val(options["web-ui-options"]["default-color-scheme"]);
setColorScheme(options["web-ui-options"]["default-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();

8
webassets/js/common.js
View File

@@ -144,8 +144,11 @@ function columnsUpdated() {
// Function to set the colour scheme based on the state of the UI select box // Function to set the colour scheme based on the state of the UI select box
function setColorSchemeFromUI() { function setColorSchemeFromUI() {
setColorScheme($("#color-scheme option:selected").val()); let theme = $("#color-scheme option:selected").val();
if (theme != "") {
setColorScheme(theme);
saveSettings(); saveSettings();
}
} }
// Function to set the color scheme. Supported values: "dark", "light", "auto" // Function to set the color scheme. Supported values: "dark", "light", "auto"
@@ -164,7 +167,8 @@ 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() {
// 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 stay with nothing selected, so that the server sets it to whatever the
// server's default is when the options call is retrieved.
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));

5
webassets/js/map.js
View File

@@ -170,6 +170,11 @@ function loadOptions() {
value: sc, value: sc,
text: sc text: sc
}))); })));
$("#band-color-scheme").val(options["web-ui-options"]["default-band-color-scheme"]);
if ($("#color-scheme option:selected").val() == "") {
$("#color-scheme").val(options["web-ui-options"]["default-color-scheme"]);
setColorScheme(options["web-ui-options"]["default-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();

5
webassets/js/spots.js
View File

@@ -396,6 +396,11 @@ function loadOptions() {
value: sc, value: sc,
text: sc text: sc
}))); })));
$("#band-color-scheme").val(options["web-ui-options"]["default-band-color-scheme"]);
if ($("#color-scheme option:selected").val() == "") {
$("#color-scheme").val(options["web-ui-options"]["default-color-scheme"]);
setColorScheme(options["web-ui-options"]["default-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();