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

remove clickable from inactive action buttons

Browse Source
This commit is contained in:
Arthur Lu 2023-06-13 03:13:22 +00:00
parent b87b80f9dd
commit d34874ca02
3 changed files with 127 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
scripts/config.js
View File

@ -140,16 +140,17 @@ function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
let actionDiv = document.createElement("div"); let actionDiv = document.createElement("div");
diskMetaData.actionBarOrder.forEach((element) => { diskMetaData.actionBarOrder.forEach((element) => {
let action = document.createElement("img"); let action = document.createElement("img");
action.classList.add("clickable");
if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")) { // attach if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")) { // attach
action.src = "images/actions/disk/attach.svg"; action.src = "images/actions/disk/attach.svg";
action.title = "Attach Disk"; action.title = "Attach Disk";
action.addEventListener("click", handleDiskAttach); action.addEventListener("click", handleDiskAttach);
action.classList.add("clickable");
} }
else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")) { // detach else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")) { // detach
action.src = "images/actions/disk/detach.svg"; action.src = "images/actions/disk/detach.svg";
action.title = "Detach Disk"; action.title = "Detach Disk";
action.addEventListener("click", handleDiskDetach); action.addEventListener("click", handleDiskDetach);
action.classList.add("clickable");
} }
else if (element === "delete") { else if (element === "delete") {
let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
@ -157,6 +158,7 @@ function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
action.title = "Delete Disk"; action.title = "Delete Disk";
if (active === "active") { if (active === "active") {
action.addEventListener("click", handleDiskDelete); action.addEventListener("click", handleDiskDelete);
action.classList.add("clickable");
} }
} }
else { else {
@ -170,6 +172,7 @@ function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
else if (element === "resize") { else if (element === "resize") {
action.addEventListener("click", handleDiskResize); action.addEventListener("click", handleDiskResize);
} }
action.classList.add("clickable");
} }
} }
action.dataset.disk = diskID; action.dataset.disk = diskID;

60
scripts/index.js
View File

@ -224,10 +224,10 @@ class Instance {
<p id="node-status"></p> <p id="node-status"></p>
</div> </div>
<div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh; margin-top: 15px; margin-bottom: 15px;"> <div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh; margin-top: 15px; margin-bottom: 15px;">
<img id="power-btn" class="clickable"> <img id="power-btn">
<img id="console-btn" class="clickable"> <img id="console-btn">
<img id="configure-btn" class="clickable"> <img id="configure-btn">
<img id="delete-btn" class="clickable"> <img id="delete-btn">
</div> </div>
`; `;
@ -261,8 +261,8 @@ class Instance {
statusParagraph.innerText = this.status; statusParagraph.innerText = this.status;
let statusIcon = this.shadowElement.querySelector("#instance-status-icon"); let statusIcon = this.shadowElement.querySelector("#instance-status-icon");
statusIcon.src = instances_config[this.status].statusSrc; statusIcon.src = instances_config[this.status].status.src;
statusIcon.alt = instances_config[this.status].statusAlt; statusIcon.alt = instances_config[this.status].status.alt;
let nodeNameParagraph = this.shadowElement.querySelector("#node-name"); let nodeNameParagraph = this.shadowElement.querySelector("#node-name");
nodeNameParagraph.innerText = this.node.name; nodeNameParagraph.innerText = this.node.name;
@ -271,32 +271,44 @@ class Instance {
nodeStatusParagraph.innerText = this.node.status; nodeStatusParagraph.innerText = this.node.status;
let nodeStatusIcon = this.shadowElement.querySelector("#node-status-icon"); let nodeStatusIcon = this.shadowElement.querySelector("#node-status-icon");
nodeStatusIcon.src = nodes_config[this.node.status].statusSrc; nodeStatusIcon.src = nodes_config[this.node.status].status.src;
nodeStatusIcon.alt = nodes_config[this.node.status].statusAlt; nodeStatusIcon.alt = nodes_config[this.node.status].status.src;
let powerButton = this.shadowElement.querySelector("#power-btn"); let powerButton = this.shadowElement.querySelector("#power-btn");
powerButton.src = instances_config[this.status].powerButtonSrc; powerButton.src = instances_config[this.status].power.src;
powerButton.alt = instances_config[this.status].powerButtonAlt; powerButton.alt = instances_config[this.status].power.alt;
powerButton.title = instances_config[this.status].powerButtonAlt; powerButton.title = instances_config[this.status].power.alt;
powerButton.onclick = this.handlePowerButton.bind(this) if (instances_config[this.status].power.clickable) {
powerButton.classList.add("clickable");
powerButton.onclick = this.handlePowerButton.bind(this)
}
let configButton = this.shadowElement.querySelector("#configure-btn"); let configButton = this.shadowElement.querySelector("#configure-btn");
configButton.src = instances_config[this.status].configButtonSrc; configButton.src = instances_config[this.status].config.src;
configButton.alt = instances_config[this.status].configButtonAlt; configButton.alt = instances_config[this.status].config.alt;
configButton.title = instances_config[this.status].configButtonAlt; configButton.title = instances_config[this.status].config.alt;
configButton.onclick = this.handleConfigButton.bind(this); if (instances_config[this.status].config.clickable) {
configButton.classList.add("clickable");
configButton.onclick = this.handleConfigButton.bind(this);
}
let consoleButton = this.shadowElement.querySelector("#console-btn"); let consoleButton = this.shadowElement.querySelector("#console-btn");
consoleButton.src = instances_config[this.status].consoleButtonSrc; consoleButton.src = instances_config[this.status].console.src;
consoleButton.alt = instances_config[this.status].consoleButtonAlt; consoleButton.alt = instances_config[this.status].console.alt;
consoleButton.title = instances_config[this.status].consoleButtonAlt; consoleButton.title = instances_config[this.status].console.alt;
consoleButton.onclick = this.handleConsoleButton.bind(this); if (instances_config[this.status].console.clickable) {
consoleButton.classList.add("clickable");
consoleButton.onclick = this.handleConsoleButton.bind(this);
}
let deleteButton = this.shadowElement.querySelector("#delete-btn"); let deleteButton = this.shadowElement.querySelector("#delete-btn");
deleteButton.src = instances_config[this.status].deleteButtonSrc; deleteButton.src = instances_config[this.status].delete.src;
deleteButton.alt = instances_config[this.status].deleteButtonAlt; deleteButton.alt = instances_config[this.status].delete.alt;
deleteButton.title = instances_config[this.status].deleteButtonAlt; deleteButton.title = instances_config[this.status].delete.alt;
deleteButton.onclick = this.handleDeleteButton.bind(this); if (instances_config[this.status].delete.clickable) {
deleteButton.classList.add("clickable");
deleteButton.onclick = this.handleDeleteButton.bind(this);
}
if (this.node.status !== "online") { if (this.node.status !== "online") {
powerButton.classList.add("hidden"); powerButton.classList.add("hidden");

123
scripts/utils.js
View File

@ -26,55 +26,106 @@ export const resources_config = {
export const instances_config = { export const instances_config = {
running: { running: {
statusSrc: "images/status/active.svg", status: {
statusAlt: "Instance is running", src: "images/status/active.svg",
powerButtonSrc: "images/actions/instance/stop.svg", alt: "Instance is running",
powerButtonAlt: "Shutdown Instance", clickable: false
configButtonSrc: "images/actions/instance/config-inactive.svg", },
configButtonAlt: "Change Configuration (Inactive)", power: {
consoleButtonSrc: "images/actions/instance/console-active.svg", src: "images/actions/instance/stop.svg",
consoleButtonAlt: "Open Console", alt: "Shutdown Instance",
deleteButtonSrc: "images/actions/delete-inactive.svg", clickable: true,
deleteButtonAlt: "Delete Instance (Inactive)" },
config: {
src: "images/actions/instance/config-inactive.svg",
alt: "Change Configuration (Inactive)",
clickable: false,
},
console: {
src: "images/actions/instance/console-active.svg",
alt: "Open Console",
clickable: true,
},
delete: {
src: "images/actions/delete-inactive.svg",
alt: "Delete Instance (Inactive)",
clickable: false,
}
}, },
stopped: { stopped: {
statusSrc: "images/status/inactive.svg", status: {
statusAlt: "Instance is stopped", src: "images/status/inactive.svg",
powerButtonSrc: "images/actions/instance/start.svg", alt: "Instance is stopped",
powerButtonAlt: "Start Instance", clickable: false
configButtonSrc: "images/actions/instance/config-active.svg", },
configButtonAlt: "Change Configuration", power: {
consoleButtonSrc: "images/actions/instance/console-inactive.svg", src: "images/actions/instance/start.svg",
consoleButtonAlt: "Open Console (Inactive)", alt: "Start Instance",
deleteButtonSrc: "images/actions/delete-active.svg", clickable: true,
deleteButtonAlt: "Delete Instance" },
config: {
src: "images/actions/instance/config-active.svg",
alt: "Change Configuration",
clickable: true,
},
console: {
src: "images/actions/instance/console-inactive.svg",
alt: "Open Console (Inactive)",
clickable: false,
},
delete: {
src: "images/actions/delete-active.svg",
alt: "Delete Instance",
clickable: true,
}
}, },
loading: { loading: {
statusSrc: "images/status/loading.svg", status: {
statusAlt: "Instance is loading", src: "images/status/loading.svg",
powerButtonSrc: "images/status/loading.svg", alt: "Instance is loading",
powerButtonAlt: "Loading Instance", clickable: false
configButtonSrc: "images/actions/instance/config-inactive.svg", },
configButtonAlt: "Change Configuration (Inactive)", power: {
consoleButtonSrc: "images/actions/instance/console-inactive.svg", src: "images/status/loading.svg",
consoleButtonAlt: "Open Console (Inactive)", alt: "Loading Instance",
deleteButtonSrc: "images/actions/delete-inactive.svg", clickable: false,
deleteButtonAlt: "Delete Instance (Inactive)" },
config: {
src: "images/actions/instance/config-inactive.svg",
alt: "Change Configuration (Inactive)",
clickable: false,
},
console: {
src: "images/actions/instance/console-inactive.svg",
alt: "Open Console (Inactive)",
clickable: false,
},
delete: {
src: "images/actions/delete-inactive.svg",
alt: "Delete Instance (Inactive)",
clickable: false,
}
} }
} }
export const nodes_config = { export const nodes_config = {
online: { online: {
statusSrc: "images/status/active.svg", status: {
statusAlt: "Node is online", src: "images/status/active.svg",
alt: "Node is online"
}
}, },
offline: { offline: {
statusSrc: "images/status/inactive.svg", status: {
statusAlt: "Node is offline", src: "images/status/inactive.svg",
alt: "Node is offline"
}
}, },
uknown: { uknown: {
statusSrc: "images/status/inactive.svg", status: {
statusAlt: "Node status is unknown", src: "images/status/inactive.svg",
alt: "Node is offline"
}
} }
} }