From 1f672e16e6ca6e76a700803da627e494644ad261 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Tue, 28 Jul 2026 20:41:01 +0000 Subject: [PATCH] remove alert interface and use new error interface --- web/scripts/account.js | 4 ++-- web/scripts/backups.js | 18 +++++++---------- web/scripts/clientsync.js | 5 +++-- web/scripts/config.js | 42 +++++++++++++++++++-------------------- web/scripts/dialog.js | 30 +--------------------------- web/scripts/index.js | 14 +++++-------- web/scripts/login.js | 10 ++++------ 7 files changed, 43 insertions(+), 80 deletions(-) diff --git a/web/scripts/account.js b/web/scripts/account.js index 638e4f9..f1d3cca 100644 --- a/web/scripts/account.js +++ b/web/scripts/account.js @@ -1,5 +1,5 @@ import { requestAPI, setAppearance } from "./utils.js"; -import { dialog } from "./dialog.js"; +import { dialog, error } from "./dialog.js"; window.addEventListener("DOMContentLoaded", init); @@ -15,7 +15,7 @@ function handlePasswordChangeButton () { if (result === "confirm") { const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") }); if (result.status !== 200) { - alert(`Attempted to change password but got: ${result.error}`); + error(`Attempted to change password but got: ${result.error}`); } } }); diff --git a/web/scripts/backups.js b/web/scripts/backups.js index 0d71c07..e84a7ef 100644 --- a/web/scripts/backups.js +++ b/web/scripts/backups.js @@ -1,5 +1,5 @@ import { requestAPI, getURIData, setAppearance, requestDash } from "./utils.js"; -import { alert, dialog } from "./dialog.js"; +import { error, dialog } from "./dialog.js"; window.addEventListener("DOMContentLoaded", init); @@ -74,7 +74,7 @@ class BackupCard extends HTMLElement { }; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/notes`, "POST", body); if (result.status !== 200) { - alert(`Attempted to edit backup but got: ${result.error}`); + error(`Attempted to edit backup but got: ${result.error}`); } refreshBackups(); } @@ -90,7 +90,7 @@ class BackupCard extends HTMLElement { }; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "DELETE", body); if (result.status !== 200) { - alert(`Attempted to delete backup but got: ${result.error}`); + error(`Attempted to delete backup but got: ${result.error}`); } refreshBackups(); } @@ -106,7 +106,7 @@ class BackupCard extends HTMLElement { }; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/restore`, "POST", body); if (result.status !== 200) { - alert(`Attempted to delete backup but got: ${result.error}`); + error(`Attempted to delete backup but got: ${result.error}`); } refreshBackups(); } @@ -116,14 +116,10 @@ class BackupCard extends HTMLElement { customElements.define("backup-card", BackupCard); -async function getBackupsFragment () { - return await requestDash(`/backups/backups?node=${node}&type=${type}&vmid=${vmid}`, "GET"); -} - async function refreshBackups () { - let backups = await getBackupsFragment(); + let backups = await requestDash(`/backups/backups?node=${node}&type=${type}&vmid=${vmid}`, "GET"); if (backups.status !== 200) { - alert("Error fetching backups."); + error("Error fetching backups."); } else { backups = backups.data; @@ -141,7 +137,7 @@ async function handleBackupAddButton () { }; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "POST", body); if (result.status !== 200) { - alert(`Attempted to create backup but got: ${result.error}`); + error(`Attempted to create backup but got: ${result.error}`); } refreshBackups(); } diff --git a/web/scripts/clientsync.js b/web/scripts/clientsync.js index 4d7f333..1a8fd91 100644 --- a/web/scripts/clientsync.js +++ b/web/scripts/clientsync.js @@ -1,4 +1,5 @@ import { getSetting, requestAPI } from "./utils.js"; +import { error } from "./dialog.js"; export async function setupClientSync (callback) { const scheme = getSetting("sync-scheme"); @@ -31,12 +32,12 @@ export async function setupClientSync (callback) { callback(); } else { - console.error("clientsync: recieved unexpected message from server, closing socket."); + error("clientsync: recieved unexpected message from server, closing socket."); socket.close(); } }); } else { - console.error(`clientsync: unsupported scheme ${scheme} selected.`); + error(`clientsync: unsupported scheme ${scheme} selected.`); } } diff --git a/web/scripts/config.js b/web/scripts/config.js index 50e8a13..0005863 100644 --- a/web/scripts/config.js +++ b/web/scripts/config.js @@ -1,5 +1,5 @@ import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setIconSrc, requestDash } from "./utils.js"; -import { alert, dialog } from "./dialog.js"; +import { error, dialog } from "./dialog.js"; window.addEventListener("DOMContentLoaded", init); @@ -59,7 +59,7 @@ class VolumeAction extends HTMLElement { this.setStatusLoading(); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/detach`, "POST"); if (result.status !== 200) { - alert(`Attempted to detach ${disk} but got: ${result.error}`); + error(`Attempted to detach ${disk} but got: ${result.error}`); } refreshVolumes(); refreshBoot(); @@ -80,7 +80,7 @@ class VolumeAction extends HTMLElement { const disk = `${prefix}${device}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/attach`, "POST", body); if (result.status !== 200) { - alert(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`); + error(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`); } refreshVolumes(); refreshBoot(); @@ -98,7 +98,7 @@ class VolumeAction extends HTMLElement { }; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/resize`, "POST", body); if (result.status !== 200) { - alert(`Attempted to resize ${disk} but got: ${result.error}`); + error(`Attempted to resize ${disk} but got: ${result.error}`); } refreshVolumes(); refreshBoot(); @@ -117,7 +117,7 @@ class VolumeAction extends HTMLElement { }; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/move`, "POST", body); if (result.status !== 200) { - alert(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`); + error(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`); } refreshVolumes(); refreshBoot(); @@ -141,7 +141,7 @@ class VolumeAction extends HTMLElement { this.setStatusLoading(); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/delete`, "DELETE"); if (result.status !== 200) { - alert(`Attempted to delete ${disk} but got: ${result.error}`); + error(`Attempted to delete ${disk} but got: ${result.error}`); } refreshVolumes(); refreshBoot(); @@ -162,7 +162,7 @@ async function initVolumes () { async function refreshVolumes () { let volumes = await requestDash(`/config/volumes?node=${node}&type=${type}&vmid=${vmid}`, "GET"); if (volumes.status !== 200) { - alert("Error fetching instance volumes."); + error("Error fetching instance volumes."); } else { volumes = volumes.data; @@ -186,7 +186,7 @@ async function handleDiskAdd () { const disk = `${prefix}${id}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body); if (result.status !== 200) { - alert(`Attempted to create ${disk} but got: ${result.error}`); + error(`Attempted to create ${disk} but got: ${result.error}`); } refreshVolumes(); refreshBoot(); @@ -214,7 +214,7 @@ async function handleCDAdd () { const disk = `ide${form.get("device")}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body); if (result.status !== 200) { - alert(`Attempted to mount ${body.iso} to ${disk} but got: result.error`); + error(`Attempted to mount ${body.iso} to ${disk} but got: result.error`); } refreshVolumes(); refreshBoot(); @@ -263,7 +263,7 @@ class NetworkAction extends HTMLElement { const net = `${netID}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/modify`, "POST", body); if (result.status !== 200) { - alert(`Attempted to change ${net} but got: ${result.error}`); + error(`Attempted to change ${net} but got: ${result.error}`); } refreshNetworks(); refreshBoot(); @@ -281,7 +281,7 @@ class NetworkAction extends HTMLElement { const net = `${netID}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE"); if (result.status !== 200) { - alert(`Attempted to delete ${net} but got: ${result.error}`); + error(`Attempted to delete ${net} but got: ${result.error}`); } refreshNetworks(); refreshBoot(); @@ -299,7 +299,7 @@ async function initNetworks () { async function refreshNetworks () { let nets = await requestDash(`/config/nets?node=${node}&type=${type}&vmid=${vmid}`, "GET"); if (nets.status !== 200) { - alert("Error fetching instance nets."); + error("Error fetching instance nets."); } else { nets = nets.data; @@ -324,7 +324,7 @@ async function handleNetworkAdd () { const net = `net${id}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/create`, "POST", body); if (result.status !== 200) { - alert(`Attempted to create ${net} but got: ${result.error}`); + error(`Attempted to create ${net} but got: ${result.error}`); } refreshNetworks(); refreshBoot(); @@ -367,7 +367,7 @@ class DeviceAction extends HTMLElement { const device = `${deviceID}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/modify`, "POST", body); if (result.status !== 200) { - alert(`Attempted to add ${device} but got: ${result.error}`); + error(`Attempted to add ${device} but got: ${result.error}`); } refreshDevices(); } @@ -389,7 +389,7 @@ class DeviceAction extends HTMLElement { const device = `${deviceID}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/delete`, "DELETE"); if (result.status !== 200) { - alert(`Attempted to delete ${device} but got: ${result.error}`); + error(`Attempted to delete ${device} but got: ${result.error}`); } refreshDevices(); } @@ -408,7 +408,7 @@ async function initDevices () { async function refreshDevices () { let devices = await requestDash(`/config/devices?node=${node}&type=${type}&vmid=${vmid}`, "GET"); if (devices.status !== 200) { - alert("Error fetching instance devices."); + error("Error fetching instance devices."); } else { devices = devices.data; @@ -431,7 +431,7 @@ async function handleDeviceAdd () { const deviceID = `hostpci${hostpci}`; const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${deviceID}/create`, "POST", body); if (result.status !== 200) { - alert(`Attempted to add ${body.device} but got: ${result.error}`); + error(`Attempted to add ${body.device} but got: ${result.error}`); } refreshDevices(); } @@ -447,12 +447,12 @@ async function handleDeviceAdd () { async function refreshBoot () { let boot = await requestDash(`/config/boot?node=${node}&type=${type}&vmid=${vmid}`, "GET"); if (boot.status !== 200) { - alert("Error fetching instance boot order."); + error("Error fetching instance boot order."); } else if (type === "qemu") { boot = boot.data; - const order = document.querySelector("#boot-order"); - order.setHTMLUnsafe(boot); + const container = document.querySelector("#boot-order"); + container.setHTMLUnsafe(boot); } } @@ -474,6 +474,6 @@ async function handleFormExit (event) { goToPage("index"); } else { - alert(`Attempted to set basic resources but got: ${result.error}`); + error(`Attempted to set basic resources but got: ${result.error}`); } } diff --git a/web/scripts/dialog.js b/web/scripts/dialog.js index 4453b32..be8a6c3 100644 --- a/web/scripts/dialog.js +++ b/web/scripts/dialog.js @@ -41,34 +41,6 @@ export function dialog (template, onclose = async (_result, _form) => { }) { return dialog; } -export function alert (message) { - const dialog = document.querySelector("#alert-dialog"); - if (dialog == null) { - const dialog = document.createElement("dialog"); - dialog.id = "alert-dialog"; - dialog.innerHTML = ` -
-

Alert

-

${message}

-
- -
-
- `; - dialog.className = "w3-container w3-card w3-border-0"; - document.body.append(dialog); - dialog.showModal(); - dialog.addEventListener("close", () => { - dialog.parentElement.removeChild(dialog); - }); - return dialog; - } - else { - console.error("Attempted to create a new alert while one already exists!"); - return null; - } -} - class ErrorDialog extends HTMLElement { shadowRoot = null; dialog = null; @@ -141,7 +113,7 @@ customElements.define("error-dialog", ErrorDialog); export function error (message) { let dialog = document.querySelector("error-dialog"); - if (dialog == null) { + if (dialog === null) { dialog = document.createElement("error-dialog"); document.body.append(dialog); dialog.appendError(message); diff --git a/web/scripts/index.js b/web/scripts/index.js index c58433e..2c58403 100644 --- a/web/scripts/index.js +++ b/web/scripts/index.js @@ -1,5 +1,5 @@ import { requestPVE, requestAPI, setAppearance, getSetting, requestDash, setIconSrc, setIconAlt } from "./utils.js"; -import { alert, dialog, error } from "./dialog.js"; +import { dialog, error } from "./dialog.js"; import { setupClientSync } from "./clientsync.js"; import wfaInit from "../modules/wfa.js"; @@ -175,7 +175,7 @@ class InstanceCard extends HTMLElement { break; } else if (taskStatus.data.status === "stopped") { // task stopped but was not successful - alert(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`); + error(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`); break; } else { // task has not stopped @@ -203,7 +203,7 @@ class InstanceCard extends HTMLElement { const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE"); if (result.status !== 200) { - alert(`Attempted to delete ${this.vmid} but got: ${result.error}`); + error(`Attempted to delete ${this.vmid} but got: ${result.error}`); } this.actionLock = false; @@ -216,12 +216,8 @@ class InstanceCard extends HTMLElement { customElements.define("instance-card", InstanceCard); -async function getInstancesFragment () { - return await requestDash("/index/instances", "GET"); -} - async function refreshInstances () { - let instances = await getInstancesFragment(); + let instances = await requestDash("/index/instances", "GET"); if (instances.status !== 200) { error(`Error fetching instances: ${instances.status} ${instances.error !== undefined ? instances.error : ""}`); } @@ -337,7 +333,7 @@ async function handleInstanceAddButton () { refreshInstances(); } else { - alert(`Attempted to create new instance ${vmid} but got: ${result.error}`); + error(`Attempted to create new instance ${vmid} but got: ${result.error}`); refreshInstances(); } } diff --git a/web/scripts/login.js b/web/scripts/login.js index 764b031..a6b779b 100644 --- a/web/scripts/login.js +++ b/web/scripts/login.js @@ -1,5 +1,5 @@ import { goToPage, setAppearance, requestAPI } from "./utils.js"; -import { alert } from "./dialog.js"; +import { error } from "./dialog.js"; window.addEventListener("DOMContentLoaded", init); @@ -19,18 +19,16 @@ async function init () { goToPage("index"); } else if (ticket.status === 401) { - alert("Authenticaton failed."); + error("Authenticaton failed."); formSubmitButton.innerText = "LOGIN"; } else if (ticket.status === 408) { - alert("Network error."); + error("Network error."); formSubmitButton.innerText = "LOGIN"; } else { - alert("An error occured."); - console.error(ticket); + error(`An error occured: ${JSON.stringify(ticket)}`); formSubmitButton.innerText = "LOGIN"; - console.error(ticket.error); } }); }