From 2be1c5b3d3044b44e6fe563662d8efcdfbf0d48f Mon Sep 17 00:00:00 2001 From: Ian Renton Date: Fri, 30 Jan 2026 21:31:13 +0000 Subject: [PATCH] Make default colour schemes for the web UI configurable on the server side #102 --- config-example.yml | 4 +++- templates/about.html | 2 +- templates/add_spot.html | 4 ++-- templates/alerts.html | 6 +++--- templates/bands.html | 8 ++++---- templates/base.html | 8 ++++---- templates/map.html | 8 ++++---- templates/spots.html | 8 ++++---- templates/status.html | 4 ++-- webassets/js/alerts.js | 4 ++++ webassets/js/bands.js | 5 +++++ webassets/js/common.js | 10 +++++++--- webassets/js/map.js | 5 +++++ webassets/js/spots.js | 5 +++++ 14 files changed, 53 insertions(+), 28 deletions(-) diff --git a/config-example.yml b/config-example.yml index cff388d..5dc3aaf 100644 --- a/config-example.yml +++ b/config-example.yml @@ -188,4 +188,6 @@ web-ui-options: max-spot-age: [5, 10, 30, 60] max-spot-age-default: 30 alert-count: [25, 50, 100, 200, 500] - alert-count-default: 100 \ No newline at end of file + alert-count-default: 100 + default-color-scheme: "auto" + default-band-color-scheme: "PSK Reporter (Adjusted)" \ No newline at end of file diff --git a/templates/about.html b/templates/about.html index 3efbc39..8531b4f 100644 --- a/templates/about.html +++ b/templates/about.html @@ -63,7 +63,7 @@

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.

- + {% end %} \ No newline at end of file diff --git a/templates/add_spot.html b/templates/add_spot.html index 5a9c281..c95d720 100644 --- a/templates/add_spot.html +++ b/templates/add_spot.html @@ -69,8 +69,8 @@ - - + + {% end %} \ No newline at end of file diff --git a/templates/alerts.html b/templates/alerts.html index fb24224..57a2d69 100644 --- a/templates/alerts.html +++ b/templates/alerts.html @@ -115,7 +115,7 @@

@@ -170,8 +170,8 @@ - - + + {% end %} \ No newline at end of file diff --git a/templates/bands.html b/templates/bands.html index 630bd36..36533e8 100644 --- a/templates/bands.html +++ b/templates/bands.html @@ -115,7 +115,7 @@

@@ -136,9 +136,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index b51e85e..a575d2b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -46,10 +46,10 @@ crossorigin="anonymous"> - - - - + + + + diff --git a/templates/map.html b/templates/map.html index 07de81f..9b5b7a2 100644 --- a/templates/map.html +++ b/templates/map.html @@ -127,7 +127,7 @@

@@ -154,9 +154,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/spots.html b/templates/spots.html index 1ad3673..8379eac 100644 --- a/templates/spots.html +++ b/templates/spots.html @@ -158,7 +158,7 @@

@@ -226,9 +226,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/status.html b/templates/status.html index 9ecb6d7..821eb64 100644 --- a/templates/status.html +++ b/templates/status.html @@ -3,8 +3,8 @@

- - + + {% end %} \ No newline at end of file diff --git a/webassets/js/alerts.js b/webassets/js/alerts.js index 3d3d0cd..7716f9e 100644 --- a/webassets/js/alerts.js +++ b/webassets/js/alerts.js @@ -291,6 +291,10 @@ function loadOptions() { text: sc }))); $("#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 // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress diff --git a/webassets/js/bands.js b/webassets/js/bands.js index 35fdff7..1bdb17a 100644 --- a/webassets/js/bands.js +++ b/webassets/js/bands.js @@ -238,6 +238,11 @@ function loadOptions() { value: 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 loadSettings(); diff --git a/webassets/js/common.js b/webassets/js/common.js index c9e2957..d74e458 100644 --- a/webassets/js/common.js +++ b/webassets/js/common.js @@ -144,8 +144,11 @@ function columnsUpdated() { // Function to set the colour scheme based on the state of the UI select box function setColorSchemeFromUI() { - setColorScheme($("#color-scheme option:selected").val()); - saveSettings(); + let theme = $("#color-scheme option:selected").val(); + if (theme != "") { + setColorScheme(theme); + saveSettings(); + } } // 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 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". + // 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"); if (val != null) { setColorScheme(JSON.parse(val)); diff --git a/webassets/js/map.js b/webassets/js/map.js index 3c83a99..55a3282 100644 --- a/webassets/js/map.js +++ b/webassets/js/map.js @@ -170,6 +170,11 @@ function loadOptions() { value: 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 loadSettings(); diff --git a/webassets/js/spots.js b/webassets/js/spots.js index 0e852af..8a72320 100644 --- a/webassets/js/spots.js +++ b/webassets/js/spots.js @@ -396,6 +396,11 @@ function loadOptions() { value: 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 loadSettings();