diff --git a/scripts/clientsync.js b/scripts/clientsync.js new file mode 100644 index 0000000..6d4bf69 --- /dev/null +++ b/scripts/clientsync.js @@ -0,0 +1,26 @@ +import { requestAPI } from "./utils.js"; + +export async function setupClientSync (scheme, rate, callback) { + if (scheme === "always") { + callback(); + window.setInterval(callback, rate); + } + else if (scheme === "hash") { + const newHash = (await requestAPI("/sync/hash")).data; + localStorage.setItem("sync-current-hash", newHash); + callback(); + window.setInterval(async () => { + const newHash = (await requestAPI("/sync/hash")).data; + if (localStorage.getItem("sync-current-hash") !== newHash) { + localStorage.setItem("sync-current-hash", newHash); + callback(); + } + }, rate); + } + else if (scheme === "interrupt") { + + } + else { + + } +} \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index ff708d5..18a01b6 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,37 +1,24 @@ import { requestPVE, requestAPI, goToPage, goToURL, instancesConfig, nodesConfig, setTitleAndHeader } from "./utils.js"; import { alert, dialog } from "./dialog.js"; import { PVE } from "../vars.js"; +import { setupClientSync } from "./clientsync.js" window.addEventListener("DOMContentLoaded", init); -let currentHash; -const refreshRate = 5000; - async function init () { setTitleAndHeader(); const cookie = document.cookie; if (cookie === "") { goToPage("login.html"); } - - currentHash = (await requestAPI("/sync/hash")).data; - await populateInstances(); - + const addInstanceBtn = document.querySelector("#instance-add"); addInstanceBtn.addEventListener("click", handleInstanceAdd); - window.setInterval(async () => { - const newHash = (await requestAPI("/sync/hash")).data; - if (currentHash !== newHash) { - currentHash = newHash; - populateInstances(); - } - }, refreshRate); + setupClientSync(localStorage.getItem("sync-scheme"), Number(localStorage.getItem("sync-rate")) * 1000, populateInstances); } async function populateInstances () { - const newHash = (await requestAPI("/sync/hash")).data; - currentHash = newHash; const resources = await requestPVE("/cluster/resources", "GET"); const instanceContainer = document.getElementById("instance-container"); const instances = []; diff --git a/scripts/settings.js b/scripts/settings.js index e69de29..163aca3 100644 --- a/scripts/settings.js +++ b/scripts/settings.js @@ -0,0 +1,22 @@ +window.addEventListener("DOMContentLoaded", init); + +function init () { + let scheme = localStorage.getItem("sync-scheme"); + if (scheme) { + document.querySelector(`#sync-${scheme}`).checked = true; + } + let rate = localStorage.getItem("sync-rate"); + if (rate) { + document.querySelector(`#sync-rate`).value = rate; + } + document.querySelector("#settings").addEventListener("submit", handleSaveSettings, false); +} + +function handleSaveSettings (event) { + event.preventDefault(); + const form = new FormData(document.querySelector("#settings")); + console.log(form.get("sync-scheme")) + localStorage.setItem("sync-scheme", form.get("sync-scheme")); + localStorage.setItem("sync-rate", form.get("sync-rate")); + window.location.reload(); +} diff --git a/settings.html b/settings.html index e8cd619..9f5458a 100644 --- a/settings.html +++ b/settings.html @@ -10,6 +10,16 @@ +
@@ -26,35 +36,29 @@

Settings

-
+

Synchronization Settings

App Sync Method -
- - -

App will periodically synchronize with Proxmox

-

High resource usage

- - -

App will periodically synchronize only if there have been change

-

Medium resource usage.

- - -

App will react to changes and synchronize when changes are made.

-

Low resource usage.

+
+ +

App will periodically synchronize with Proxmox. High resource usage.

+ +

App will periodically synchronize only if there have been change. Medium resource usage.

+ +

App will react to changes and synchronize when changes are made. Low resource usage.

App Sync Frequency
-

Sync every

Second(s)

+

Sync every

Second(s)

- +