From a4c7a3601220d0b2e1f3fb7790854d5b0ce047b7 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Wed, 14 Dec 2022 15:28:22 -0800 Subject: [PATCH] add icons --- images/instances/lxc/running.svg | 16 ++++++++++++++ images/instances/lxc/stopped.svg | 16 ++++++++++++++ images/instances/qemu/running.svg | 8 +++++++ images/instances/qemu/stopped.svg | 8 +++++++ images/nodes/offline.svg | 10 +++++++++ images/nodes/online.svg | 10 +++++++++ scripts/elements.js | 36 +++++++++++++------------------ 7 files changed, 83 insertions(+), 21 deletions(-) create mode 100644 images/instances/lxc/running.svg create mode 100644 images/instances/lxc/stopped.svg create mode 100644 images/instances/qemu/running.svg create mode 100644 images/instances/qemu/stopped.svg create mode 100644 images/nodes/offline.svg create mode 100644 images/nodes/online.svg diff --git a/images/instances/lxc/running.svg b/images/instances/lxc/running.svg new file mode 100644 index 0000000..c150a07 --- /dev/null +++ b/images/instances/lxc/running.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/instances/lxc/stopped.svg b/images/instances/lxc/stopped.svg new file mode 100644 index 0000000..2911e31 --- /dev/null +++ b/images/instances/lxc/stopped.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/instances/qemu/running.svg b/images/instances/qemu/running.svg new file mode 100644 index 0000000..e37120c --- /dev/null +++ b/images/instances/qemu/running.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/images/instances/qemu/stopped.svg b/images/instances/qemu/stopped.svg new file mode 100644 index 0000000..415523c --- /dev/null +++ b/images/instances/qemu/stopped.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/images/nodes/offline.svg b/images/nodes/offline.svg new file mode 100644 index 0000000..1a44b2f --- /dev/null +++ b/images/nodes/offline.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/images/nodes/online.svg b/images/nodes/online.svg new file mode 100644 index 0000000..7ec03ba --- /dev/null +++ b/images/nodes/online.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/scripts/elements.js b/scripts/elements.js index 7a987f3..c43fbcb 100644 --- a/scripts/elements.js +++ b/scripts/elements.js @@ -24,31 +24,25 @@ class Instance extends HTMLElement { set data (data) { let instanceArticle = this.shadowElement.querySelector("article"); - let type = document.createElement("img"); - type.src = `images/${data.type}.svg`; - instanceArticle.append(type); + let typeImg = document.createElement("img"); + typeImg.src = `images/instances/${data.type}/${data.status}.svg`; + instanceArticle.append(typeImg); - let vmid = document.createElement("p"); - vmid.innerText = data.vmid; - instanceArticle.append(vmid); + let vmidParagraph = document.createElement("p"); + vmidParagraph.innerText = data.vmid; + instanceArticle.append(vmidParagraph); - let name = document.createElement("p"); - name.innerText = data.name; - instanceArticle.append(name); + let nameParagraph = document.createElement("p"); + nameParagraph.innerText = data.name; + instanceArticle.append(nameParagraph); - let status = document.createElement("p"); - status.innerText = data.status; - status.style.color = data.status === "running" ? "#00ff00" : "#ff0000"; - instanceArticle.append(status); + let nodeImg = document.createElement("img"); + nodeImg.src = `images/nodes/${data.node.status}`; + instanceArticle.append(nodeImg); - let nodeName = document.createElement("p"); - nodeName.innerText = data.node.name; - instanceArticle.append(nodeName); - - let nodeStatus = document.createElement("p"); - nodeStatus.innerText = data.node.status; - nodeStatus.style.color = data.node.status === "online" ? "#00ff00" : "#ff0000"; - instanceArticle.append(nodeStatus); + let nodeParagraph = document.createElement("p"); + nodeParagraph.innerText = data.node.name; + instanceArticle.append(nodeParagraph); } }