remove clickable from inactive action buttons
This commit is contained in:
Arthur Lu
parent
b87b80f9dd
commit
d34874ca02
@ -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;
|
||||
|
||||
@ -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.onclick = this.handlePowerButton.bind(this)
|
||||
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.onclick = this.handleConfigButton.bind(this);
|
||||
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.onclick = this.handleConsoleButton.bind(this);
|
||||
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.onclick = this.handleDeleteButton.bind(this);
|
||||
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
123
scripts/utils.js
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user