add action button icons

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
2023-01-19 02:13:07 +00:00
parent 62b4fa40e8
commit 63b2bebf2e
11 changed files with 40 additions and 16 deletions

View File

@@ -3,17 +3,19 @@ import {request, goToPage, getURIData} from "./utils.js";
window.addEventListener("DOMContentLoaded", init);
let diskConfig = {
//actionBarOrder: ["config", "move", "reassign", "resize", "delete_detach_attach"],
actionBarOrder: ["config", "move", "resize", "delete_detach_attach"], // handle reassign later
lxc: {
prefixOrder: ["rootfs", "mp", "unused"],
rootfs: {name: "ROOTFS", icon: "images/resources/drive.svg"},
mp: {name: "MP", icon: "images/resources/drive.svg"},
unused: {name: "UNUSED", icon: "images/resources/drive.svg"}
rootfs: {name: "ROOTFS", icon: "images/resources/drive.svg", actions: ["move", "resize"]},
mp: {name: "MP", icon: "images/resources/drive.svg", actions: ["config", "detach", "move", "reassign", "resize"]},
unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]}
},
qemu: {
prefixOrder: ["ide", "sata", "unused"],
ide: {name: "IDE", icon: "images/resources/disk.svg"},
sata: {name: "SATA", icon: "images/resources/drive.svg"},
unused: {name: "UNUSED", icon: "images/resources/drive.svg"}
ide: {name: "IDE", icon: "images/resources/disk.svg", actions: ["config", "delete"]},
sata: {name: "SATA", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"]},
unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]}
}
}
@@ -52,9 +54,6 @@ async function populateResources () {
if (type === "lxc") {
addResourceLine("resources", "images/resources/swap.svg", "Swap", {type: "number", value: config.data.swap, min: 0, step: 1}, "MiB"); // TODO add max from quota API
/*
let rootfs = config.data.rootfs;
addDiskLine("disks", "mp", "Root FS", null, rootfs);*/
}
for(let i = 0; i < diskConfig[type].prefixOrder.length; i++){
@@ -122,11 +121,29 @@ async function addDiskLine (fieldset, busPrefix, busName, device, disk) {
let actionDiv = document.createElement("div");
actionDiv.classList.add("last-item");
let deleteBtn = document.createElement("img");
deleteBtn.src = "images/actions/delete.svg";
deleteBtn.alt = `Delete disk ${busName} ${device}`;
deleteBtn.classList.add("clickable");
actionDiv.append(deleteBtn);
diskConfig.actionBarOrder.forEach((element) => {
let action = document.createElement("img");
action.classList.add("clickable");
if (element === "delete_detach_attach" && diskConfig[type][busPrefix].actions.includes("attach")){
action.src = "images/actions/attach.svg";
action.title = "Attach Disk";
}
else if (element === "delete_detach_attach" && diskConfig[type][busPrefix].actions.includes("detach")){
action.src = "images/actions/detach.svg";
action.title = "Detach Disk";
}
else if (element === "delete_detach_attach"){
let active = diskConfig[type][busPrefix].actions.includes("delete") ? "active" : "inactive";
action.src = `images/actions/delete-${active}.svg`;
action.title = `Delete Disk`;
}
else {
let active = diskConfig[type][busPrefix].actions.includes(element) ? "active" : "inactive";
action.src = `images/actions/${element}-${active}.svg`;
action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`;
}
actionDiv.append(action);
});
field.append(actionDiv);
}