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..345760a 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") !== 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();
}
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);
}