tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add color theme option

Browse Source
This commit is contained in:
Arthur Lu
2024-06-14 06:17:15 +00:00
parent d2cfbdb2a2
commit d3281fc27f
8 changed files with 115 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
scripts/account.js
View File

@@ -1,5 +1,5 @@
import { dialog } from "./dialog.js";
import { requestAPI, goToPage, getCookie, setTitleAndHeader } from "./utils.js";
import { requestAPI, goToPage, getCookie, setTitleAndHeader, setAppearance } from "./utils.js";
window.addEventListener("DOMContentLoaded", init);
@@ -21,6 +21,7 @@ const prefixes = {
};
async function init () {
setAppearance();
setTitleAndHeader();
const cookie = document.cookie;
if (cookie === "") {

9
scripts/index.js
View File

@@ -1,13 +1,14 @@
import { requestPVE, requestAPI, goToPage, setTitleAndHeader } from "./utils.js";
import { requestPVE, requestAPI, goToPage, setTitleAndHeader, setAppearance } from "./utils.js";
import { alert, dialog } from "./dialog.js";
import { setupClientSync } from "./clientsync.js";
import wf_align from "../modules/wfa.js";
import wfAlign from "../modules/wfa.js";
window.addEventListener("DOMContentLoaded", init);
let instances = [];
async function init () {
setAppearance();
setTitleAndHeader();
const cookie = document.cookie;
if (cookie === "") {
@@ -78,9 +79,9 @@ async function populateInstances () {
};
criteria = (a, b) => {
// lower is better
const aAlign = wf_align(a.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
const aAlign = wfAlign(a.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
const aScore = aAlign.score / a.name.length;
const bAlign = wf_align(b.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
const bAlign = wfAlign(b.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
const bScore = bAlign.score / b.name.length;
if (aScore === bScore) {
return a.vmid > b.vmid ? 1 : -1;

3
scripts/login.js
View File

@@ -1,9 +1,10 @@
import { requestTicket, goToPage, deleteAllCookies, requestPVE, setTitleAndHeader } from "./utils.js";
import { requestTicket, goToPage, deleteAllCookies, requestPVE, setTitleAndHeader, setAppearance } from "./utils.js";
import { alert } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init);
async function init () {
setAppearance();
setTitleAndHeader();
await deleteAllCookies();
const formSubmitButton = document.querySelector("#submit");

8
scripts/settings.js
View File

@@ -1,8 +1,9 @@
import { setTitleAndHeader } from "./utils.js";
import { setTitleAndHeader, setAppearance } from "./utils.js";
window.addEventListener("DOMContentLoaded", init);
function init () {
setAppearance();
setTitleAndHeader();
const scheme = localStorage.getItem("sync-scheme");
if (scheme) {
@@ -16,6 +17,10 @@ function init () {
if (search) {
document.querySelector(`#search-${search}`).checked = true;
}
const theme = localStorage.getItem("appearance-theme");
if (theme) {
document.querySelector("#appearance-theme").value = theme;
}
document.querySelector("#settings").addEventListener("submit", handleSaveSettings, false);
}
@@ -25,5 +30,6 @@ function handleSaveSettings (event) {
localStorage.setItem("sync-scheme", form.get("sync-scheme"));
localStorage.setItem("sync-rate", form.get("sync-rate"));
localStorage.setItem("search-criteria", form.get("search-criteria"));
localStorage.setItem("appearance-theme", form.get("appearance-theme"));
window.location.reload();
}

20
scripts/utils.js
View File

@@ -267,3 +267,23 @@ export function setTitleAndHeader () {
document.title = `${organization} - dashboard`;
document.querySelector("h1").innerText = organization;
}
export function setAppearance () {
let theme = localStorage.getItem("appearance-theme");
if (!theme) {
theme = "auto";
localStorage.setItem("appearance-theme", "auto");
}
if (theme === "auto") {
document.querySelector(":root").classList.remove("dark-theme", "light-theme");
}
else if (theme === "dark") {
document.querySelector(":root").classList.remove("light-theme");
document.querySelector(":root").classList.add("dark-theme");
}
else if (theme === "light") {
document.querySelector(":root").classList.add("light-theme");
document.querySelector(":root").classList.remove("dark-theme");
}
}