cleanup settings logic

2026-07-15 05:03:07 +00:00
5 changed files with 73 additions and 71 deletions
@@ -20,6 +20,12 @@
 			p:last-child {
 				margin-bottom: 0;
 			}
+			#save.disabled {
+				display: none;
+			}
+			#save.enabled {
+				display: unset;
+			}
 		</style>
 	</head>
 	<body>
@@ -70,7 +76,7 @@
 					</fieldset>
 				</section>
 				<div class="w3-container w3-center" id="form-actions">
-					<button class="w3-button w3-margin" id="save" type="submit">SAVE</button>
+					<button class="w3-button w3-margin disabled" id="save" type="submit">SAVE</button>
 				</div>
 			</form>
 		</main>
@@ -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;
 	}
@@ -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) {
@@ -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") !== Number(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();
 }
@@ -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);
-	}
-	if (!rate) {
-		rate = settingsDefault["sync-rate"];
-		localStorage.setItem("sync-rate", rate);
-	}
-	return { scheme, rate };
+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);
 	}

-export function getSearchSettings () {
-	let searchCriteria = localStorage.getItem("search-criteria");
-	if (!searchCriteria) {
-		searchCriteria = settingsDefault["search-criteria"];
-		localStorage.setItem("search-criteria", searchCriteria);
-	}
-	return searchCriteria;
+	return meta.type(value);
 }

-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);
 }