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

fix issues with icon coloring in chrome by switching to img tags

Browse Source
This commit is contained in:
Arthur Lu
2025-10-28 18:34:42 +00:00
parent 7db0bea35c
commit 2877f7709a
11 changed files with 115 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/scripts/config.js
View File

@@ -1,4 +1,4 @@
import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setSVGSrc, requestDash } from "./utils.js";
import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setIconSrc, requestDash } from "./utils.js";
import { alert, dialog } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init);
@@ -48,8 +48,8 @@ class VolumeAction extends HTMLElement {
}
async setStatusLoading () {
const svg = document.querySelector(`svg[data-volume="${this.dataset.volume}"]`);
setSVGSrc(svg, "images/status/loading.svg");
const icon = document.querySelector(`img[data-volume="${this.dataset.volume}"]`);
setIconSrc(icon, "images/status/loading.svg");
}
async handleDiskDetach () {
@@ -247,8 +247,8 @@ class NetworkAction extends HTMLElement {
}
async setStatusLoading () {
const svg = document.querySelector(`svg[data-network="${this.dataset.network}"]`);
setSVGSrc(svg, "images/status/loading.svg");
const icon = document.querySelector(`img[data-network="${this.dataset.network}"]`);
setIconSrc(icon, "images/status/loading.svg");
}
async handleNetworkConfig () {
@@ -277,7 +277,7 @@ class NetworkAction extends HTMLElement {
const netID = this.dataset.network;
dialog(this.template, async (result, form) => {
if (result === "confirm") {
setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
setIconSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
const net = `${netID}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
if (result.status !== 200) {
@@ -349,8 +349,8 @@ class DeviceAction extends HTMLElement {
}
async setStatusLoading () {
const svg = document.querySelector(`svg[data-device="${this.dataset.device}"]`);
setSVGSrc(svg, "images/status/loading.svg");
const icon = document.querySelector(`img[data-device="${this.dataset.device}"]`);
setIconSrc(icon, "images/status/loading.svg");
}
async handleDeviceConfig () {

14
web/scripts/dialog.js
View File

@@ -103,7 +103,7 @@ class ErrorDialog extends HTMLElement {
</dialog>
`;
this.dialog = this.shadowRoot.querySelector("dialog");
this.errors = this.shadowRoot.querySelector("#errors")
this.errors = this.shadowRoot.querySelector("#errors");
for (const control of this.shadowRoot.querySelector("#controls").childNodes) {
control.addEventListener("click", async (e) => {
@@ -111,15 +111,15 @@ class ErrorDialog extends HTMLElement {
this.dialog.close(e.target.value);
});
}
this.dialog.addEventListener("close", () => {
if (this.dialog.returnValue == "ok") {}
else if (this.dialog.returnValue == "copy") {
let errors = ""
if (this.dialog.returnValue === "ok") {}
else if (this.dialog.returnValue === "copy") {
let errors = "";
for (const error of this.errors.childNodes) {
errors += `${error.innerText}\n`
errors += `${error.innerText}\n`;
}
navigator.clipboard.writeText(errors)
navigator.clipboard.writeText(errors);
}
this.parentElement.removeChild(this);
});

48
web/scripts/index.js
View File

@@ -1,5 +1,5 @@
import { requestPVE, requestAPI, setAppearance, getSearchSettings, requestDash, setSVGSrc, setSVGAlt } from "./utils.js";
import { alert, dialog } from "./dialog.js";
import { requestPVE, requestAPI, setAppearance, getSearchSettings, requestDash, setIconSrc, setIconAlt } from "./utils.js";
import { alert, dialog, error } from "./dialog.js";
import { setupClientSync } from "./clientsync.js";
import wfaInit from "../modules/wfa.js";
@@ -120,25 +120,29 @@ class InstanceCard extends HTMLElement {
}
const powerButton = this.shadowRoot.querySelector("#power-btn");
if (powerButton.classList.contains("clickable")) {
powerButton.onclick = this.handlePowerButton.bind(this);
powerButton.onkeydown = (event) => {
if (event.key === "Enter") {
event.preventDefault();
this.handlePowerButton();
}
};
if (powerButton !== null) {
if (powerButton.classList.contains("clickable")) {
powerButton.onclick = this.handlePowerButton.bind(this);
powerButton.onkeydown = (event) => {
if (event.key === "Enter") {
event.preventDefault();
this.handlePowerButton();
}
};
}
}
const deleteButton = this.shadowRoot.querySelector("#delete-btn");
if (deleteButton.classList.contains("clickable")) {
deleteButton.onclick = this.handleDeleteButton.bind(this);
deleteButton.onkeydown = (event) => {
if (event.key === "Enter") {
event.preventDefault();
this.handleDeleteButton();
}
};
if (deleteButton !== null) {
if (deleteButton.classList.contains("clickable")) {
deleteButton.onclick = this.handleDeleteButton.bind(this);
deleteButton.onkeydown = (event) => {
if (event.key === "Enter") {
event.preventDefault();
this.handleDeleteButton();
}
};
}
}
}
@@ -146,10 +150,10 @@ class InstanceCard extends HTMLElement {
this.status = "loading";
const statusicon = this.shadowRoot.querySelector("#status");
const powerbtn = this.shadowRoot.querySelector("#power-btn");
setSVGSrc(statusicon, "images/status/loading.svg");
setSVGAlt(statusicon, "instance is loading");
setSVGSrc(powerbtn, "images/status/loading.svg");
setSVGAlt(powerbtn, "");
setIconSrc(statusicon, "images/status/loading.svg");
setIconAlt(statusicon, "instance is loading");
setIconSrc(powerbtn, "images/status/loading.svg");
setIconAlt(powerbtn, "");
}
async handlePowerButton () {

13
web/scripts/utils.js
View File

@@ -192,15 +192,10 @@ export function setAppearance () {
}
// assumes href is path to svg, and id to grab is #symb
export function setSVGSrc (svgElem, href) {
let useElem = svgElem.querySelector("use");
if (!useElem) {
useElem = document.createElementNS("http://www.w3.org/2000/svg", "use");
}
useElem.setAttribute("href", `${href}#symb`);
svgElem.append(useElem);
export function setIconSrc (icon, path) {
icon.setAttribute("src", path);
}
export function setSVGAlt (svgElem, alt) {
svgElem.setAttribute("aria-label", alt);
export function setIconAlt (icon, alt) {
icon.setAttribute("alt", alt);
}