From a8e311db12630d95c1bc66a488a36e84fd76e1b0 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Tue, 14 Jul 2026 22:13:23 +0000 Subject: [PATCH] cleanup settings logic --- web/html/settings.html | 8 ++++- web/scripts/clientsync.js | 5 +-- web/scripts/index.js | 4 +-- web/scripts/settings.js | 64 +++++++++++++++++++++++++++------------ web/scripts/utils.js | 63 ++++++++++---------------------------- 5 files changed, 73 insertions(+), 71 deletions(-) diff --git a/web/html/settings.html b/web/html/settings.html index 3640b98..3aaa1b3 100644 --- a/web/html/settings.html +++ b/web/html/settings.html @@ -20,6 +20,12 @@ p:last-child { margin-bottom: 0; } + #save.disabled { + display: none; + } + #save.enabled { + display: unset; + } @@ -70,7 +76,7 @@
- +
diff --git a/web/scripts/clientsync.js b/web/scripts/clientsync.js index 43994d7..4d7f333 100644 --- a/web/scripts/clientsync.js +++ b/web/scripts/clientsync.js @@ -1,7 +1,8 @@ -import { getSyncSettings, requestAPI } from "./utils.js"; +import { getSetting, requestAPI } from "./utils.js"; export async function setupClientSync (callback) { - const { scheme, rate } = getSyncSettings(); + const scheme = getSetting("sync-scheme"); + const rate = getSetting("sync-rate"); if (scheme === "never") { return; } diff --git a/web/scripts/index.js b/web/scripts/index.js index 6b395a8..c58433e 100644 --- a/web/scripts/index.js +++ b/web/scripts/index.js @@ -1,4 +1,4 @@ -import { requestPVE, requestAPI, setAppearance, getSearchSettings, requestDash, setIconSrc, setIconAlt } from "./utils.js"; +import { requestPVE, requestAPI, setAppearance, getSetting, requestDash, setIconSrc, setIconAlt } from "./utils.js"; import { alert, dialog, error } from "./dialog.js"; import { setupClientSync } from "./clientsync.js"; import wfaInit from "../modules/wfa.js"; @@ -243,7 +243,7 @@ function initInstances () { } function sortInstances () { - const searchCriteria = getSearchSettings(); + const searchCriteria = getSetting("search-criteria"); const searchQuery = document.querySelector("#search").value || null; let criteria; if (!searchQuery) { diff --git a/web/scripts/settings.js b/web/scripts/settings.js index 08756d2..0941d3f 100644 --- a/web/scripts/settings.js +++ b/web/scripts/settings.js @@ -1,36 +1,62 @@ -import { setAppearance, getSyncSettings, getSearchSettings, getThemeSettings, setSyncSettings, setSearchSettings, setThemeSettings } from "./utils.js"; +import { setAppearance, getSetting, setSetting } from "./utils.js"; window.addEventListener("DOMContentLoaded", init); function init () { setAppearance(); - const { scheme, rate } = getSyncSettings(); - if (scheme) { - document.querySelector(`#sync-${scheme}`).checked = true; - } - if (rate) { - document.querySelector("#sync-rate").value = rate; - } + document.querySelectorAll("[id^=sync-]").forEach((v) => { + v.addEventListener("change", handleSettingsChange); + }); + document.querySelector(`#sync-${getSetting("sync-scheme")}`).checked = true; + document.querySelector("#sync-rate").value = getSetting("sync-rate"); - const search = getSearchSettings(); - if (search) { - document.querySelector(`#search-${search}`).checked = true; - } + document.querySelectorAll("[id^=search-]").forEach((v) => { + v.addEventListener("change", handleSettingsChange); + }); + document.querySelector(`#search-${getSetting("search-criteria")}`).checked = true; - const theme = getThemeSettings(); - if (theme) { - document.querySelector("#appearance-theme").value = theme; - } + document.querySelector("#appearance-theme").addEventListener("change", handleSettingsChange); + document.querySelector("#appearance-theme").value = getSetting("appearance-theme"); document.querySelector("#settings").addEventListener("submit", handleSaveSettings, false); } +function handleSettingsChange (event) { + event.preventDefault(); + const form = new FormData(document.querySelector("#settings")); + const saveBtn = document.querySelector("#save"); + if (getSetting("sync-scheme") !== form.get("sync-scheme")) { + saveBtn.classList.remove("disabled"); + saveBtn.classList.add("enabled"); + } + else if (getSetting("sync-rate") !== form.get("sync-rate")) { + saveBtn.classList.remove("disabled"); + saveBtn.classList.add("enabled"); + } + else if (getSetting("search-criteria") !== form.get("search-criteria")) { + saveBtn.classList.remove("disabled"); + saveBtn.classList.add("enabled"); + } + else if (getSetting("appearance-theme") !== form.get("appearance-theme")) { + saveBtn.classList.remove("disabled"); + saveBtn.classList.add("enabled"); + } + else { + saveBtn.classList.remove("enabled"); + saveBtn.classList.add("disabled"); + } +} + function handleSaveSettings (event) { event.preventDefault(); const form = new FormData(document.querySelector("#settings")); - setSyncSettings(form.get("sync-scheme"), form.get("sync-rate")); - setSearchSettings(form.get("search-criteria")); - setThemeSettings(form.get("appearance-theme")); + const saveBtn = document.querySelector("#save"); + setSetting("sync-scheme", form.get("sync-scheme")); + setSetting("sync-rate", Number(form.get("sync-rate"))); + setSetting("search-criteria", form.get("search-criteria")); + setSetting("appearance-theme", form.get("appearance-theme")); + saveBtn.classList.remove("enabled"); + saveBtn.classList.add("disabled"); init(); } diff --git a/web/scripts/utils.js b/web/scripts/utils.js index 5685e8d..051316a 100644 --- a/web/scripts/utils.js +++ b/web/scripts/utils.js @@ -125,60 +125,30 @@ export function getURIData () { return Object.fromEntries(url.searchParams); } -const settingsDefault = { - "sync-scheme": "always", - "sync-rate": 5, - "search-criteria": "fuzzy", - "appearance-theme": "auto" +const settings = { + "sync-scheme": {"type": String, "default": "always"}, + "sync-rate": {"type": Number, "default": 5}, + "search-criteria": {"type": String, "default": "fuzzy"}, + "appearance-theme": {"type": String, "default": "auto"} }; -export function getSyncSettings () { - let scheme = localStorage.getItem("sync-scheme"); - let rate = Number(localStorage.getItem("sync-rate")); - if (!scheme) { - scheme = settingsDefault["sync-scheme"]; - localStorage.setItem("sync-scheme", scheme); +export function getSetting (key) { + const meta = settings[key]; + let value = localStorage.getItem(key); + if (value === null || meta === null) { + value = meta.default; + localStorage.setItem(key, meta.default); } - if (!rate) { - rate = settingsDefault["sync-rate"]; - localStorage.setItem("sync-rate", rate); - } - return { scheme, rate }; + + return meta.type(value); } -export function getSearchSettings () { - let searchCriteria = localStorage.getItem("search-criteria"); - if (!searchCriteria) { - searchCriteria = settingsDefault["search-criteria"]; - localStorage.setItem("search-criteria", searchCriteria); - } - return searchCriteria; -} - -export function getThemeSettings () { - let theme = localStorage.getItem("appearance-theme"); - if (!theme) { - theme = settingsDefault["appearance-theme"]; - localStorage.setItem("appearance-theme", theme); - } - return theme; -} - -export function setSyncSettings (scheme, rate) { - localStorage.setItem("sync-scheme", scheme); - localStorage.setItem("sync-rate", rate); -} - -export function setSearchSettings (criteria) { - localStorage.setItem("search-criteria", criteria); -} - -export function setThemeSettings (theme) { - localStorage.setItem("appearance-theme", theme); +export function setSetting (key, value) { + localStorage.setItem(key, value); } export function setAppearance () { - const theme = getThemeSettings(); + const theme = getSetting("appearance-theme"); if (theme === "auto") { document.querySelector(":root").classList.remove("dark-theme", "light-theme"); } @@ -192,7 +162,6 @@ export function setAppearance () { } } -// assumes href is path to svg, and id to grab is #symb export function setIconSrc (icon, path) { icon.setAttribute("src", path); }