diff --git a/scripts/config.js b/scripts/config.js index 8cd39e5..78238c3 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -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; diff --git a/scripts/index.js b/scripts/index.js index 7e9a392..41ee54d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -224,10 +224,10 @@ class Instance {

- - - - + + + +
`; @@ -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"); diff --git a/scripts/utils.js b/scripts/utils.js index bb0f198..456de7e 100644 --- a/scripts/utils.js +++ b/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" + } } }