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 7c3ba9b1ed
commit 7c1c3fbb8b
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");
diskMetaData.actionBarOrder.forEach((element) => {
let action = document.createElement("img");
action.classList.add("clickable");
if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")) { // attach
action.src = "images/actions/disk/attach.svg";
action.title = "Attach Disk";
action.addEventListener("click", handleDiskAttach);
action.classList.add("clickable");
}
else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")) { // detach
action.src = "images/actions/disk/detach.svg";
action.title = "Detach Disk";
action.addEventListener("click", handleDiskDetach);
action.classList.add("clickable");
}
else if (element === "delete") {
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";
if (active === "active") {
action.addEventListener("click", handleDiskDelete);
action.classList.add("clickable");
}
}
else {
@ -170,6 +172,7 @@ function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
else if (element === "resize") {
action.addEventListener("click", handleDiskResize);
}
action.classList.add("clickable");
}
}
action.dataset.disk = diskID;

52
scripts/index.js
View File

@ -224,10 +224,10 @@ class Instance {
<p id="node-status"></p>
</div>
<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="console-btn" class="clickable">
<img id="configure-btn" class="clickable">
<img id="delete-btn" class="clickable">
<img id="power-btn">
<img id="console-btn">
<img id="configure-btn">
<img id="delete-btn">
</div>
`;
@ -261,8 +261,8 @@ class Instance {
statusParagraph.innerText = this.status;
let statusIcon = this.shadowElement.querySelector("#instance-status-icon");
statusIcon.src = instances_config[this.status].statusSrc;
statusIcon.alt = instances_config[this.status].statusAlt;
statusIcon.src = instances_config[this.status].status.src;
statusIcon.alt = instances_config[this.status].status.alt;
let nodeNameParagraph = this.shadowElement.querySelector("#node-name");
nodeNameParagraph.innerText = this.node.name;
@ -271,32 +271,44 @@ class Instance {
nodeStatusParagraph.innerText = this.node.status;
let nodeStatusIcon = this.shadowElement.querySelector("#node-status-icon");
nodeStatusIcon.src = nodes_config[this.node.status].statusSrc;
nodeStatusIcon.alt = nodes_config[this.node.status].statusAlt;
nodeStatusIcon.src = nodes_config[this.node.status].status.src;
nodeStatusIcon.alt = nodes_config[this.node.status].status.src;
let powerButton = this.shadowElement.querySelector("#power-btn");
powerButton.src = instances_config[this.status].powerButtonSrc;
powerButton.alt = instances_config[this.status].powerButtonAlt;
powerButton.title = instances_config[this.status].powerButtonAlt;
powerButton.src = instances_config[this.status].power.src;
powerButton.alt = instances_config[this.status].power.alt;
powerButton.title = instances_config[this.status].power.alt;
if (instances_config[this.status].power.clickable) {
powerButton.classList.add("clickable");
powerButton.onclick = this.handlePowerButton.bind(this)
}
let configButton = this.shadowElement.querySelector("#configure-btn");
configButton.src = instances_config[this.status].configButtonSrc;
configButton.alt = instances_config[this.status].configButtonAlt;
configButton.title = instances_config[this.status].configButtonAlt;
configButton.src = instances_config[this.status].config.src;
configButton.alt = instances_config[this.status].config.alt;
configButton.title = instances_config[this.status].config.alt;
if (instances_config[this.status].config.clickable) {
configButton.classList.add("clickable");
configButton.onclick = this.handleConfigButton.bind(this);
}
let consoleButton = this.shadowElement.querySelector("#console-btn");
consoleButton.src = instances_config[this.status].consoleButtonSrc;
consoleButton.alt = instances_config[this.status].consoleButtonAlt;
consoleButton.title = instances_config[this.status].consoleButtonAlt;
consoleButton.src = instances_config[this.status].console.src;
consoleButton.alt = instances_config[this.status].console.alt;
consoleButton.title = instances_config[this.status].console.alt;
if (instances_config[this.status].console.clickable) {
consoleButton.classList.add("clickable");
consoleButton.onclick = this.handleConsoleButton.bind(this);
}
let deleteButton = this.shadowElement.querySelector("#delete-btn");
deleteButton.src = instances_config[this.status].deleteButtonSrc;
deleteButton.alt = instances_config[this.status].deleteButtonAlt;
deleteButton.title = instances_config[this.status].deleteButtonAlt;
deleteButton.src = instances_config[this.status].delete.src;
deleteButton.alt = instances_config[this.status].delete.alt;
deleteButton.title = instances_config[this.status].delete.alt;
if (instances_config[this.status].delete.clickable) {
deleteButton.classList.add("clickable");
deleteButton.onclick = this.handleDeleteButton.bind(this);
}
if (this.node.status !== "online") {
powerButton.classList.add("hidden");

123
scripts/utils.js
View File

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