Set up web UI using web_ui_options embedded directly into HTML, to avoid more complex JS load order faff #102

This commit is contained in:
Ian Renton
2026-01-30 22:24:12 +00:00
parent 2be1c5b3d3
commit 5230fa535f
13 changed files with 81 additions and 122 deletions

View File

@@ -285,17 +285,6 @@ function loadOptions() {
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
generateMultiToggleFilterCard("#source-options", "source", options["alert_sources"]);
// Populate the Display panel
options["web-ui-options"]["alert-count"].forEach(sc => $("#alerts-to-fetch").append($('<option>', {
value: sc,
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
// loading settings, so this needs to be called before that.
@@ -303,6 +292,7 @@ function loadOptions() {
// Load filters from settings storage
loadSettings();
setColorScheme($("#color-scheme option:selected").val());
// Load alerts and set up the timer
loadAlerts();

View File

@@ -228,24 +228,9 @@ function loadOptions() {
// Store options
options = jsonData;
// Populate the Display panel
options["web-ui-options"]["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
value: sc * 60,
text: sc
})));
$("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
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();
setColorScheme($("#color-scheme option:selected").val());
setBandColorScheme($("#band-color-scheme option:selected").val());
// Add CSS for band toggle buttons
@@ -257,7 +242,7 @@ function loadOptions() {
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
generateModesMultiToggleFilterCard(options["modes"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], spotProvidersEnabledByDefault);
// 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

View File

@@ -160,24 +160,9 @@ function loadOptions() {
// Store options
options = jsonData;
// Populate the Display panel
options["web-ui-options"]["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
value: sc * 60,
text: sc
})));
$("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
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();
setColorScheme($("#color-scheme option:selected").val());
setBandColorScheme($("#band-color-scheme option:selected").val());
// Add CSS for band toggle buttons
@@ -189,7 +174,7 @@ function loadOptions() {
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
generateModesMultiToggleFilterCard(options["modes"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], spotProvidersEnabledByDefault);
// 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

View File

@@ -386,24 +386,9 @@ function loadOptions() {
// Store options
options = jsonData;
// Populate the Display panel
options["web-ui-options"]["spot-count"].forEach(sc => $("#spots-to-fetch").append($('<option>', {
value: sc,
text: sc
})));
$("#spots-to-fetch").val(options["web-ui-options"]["spot-count-default"]);
getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
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();
setColorScheme($("#color-scheme option:selected").val());
setBandColorScheme($("#band-color-scheme option:selected").val());
// Add CSS for band toggle buttons
@@ -415,7 +400,7 @@ function loadOptions() {
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
generateModesMultiToggleFilterCard(options["modes"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
generateSourcesMultiToggleFilterCard(options["spot_sources"], spotProvidersEnabledByDefault);
// 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