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);
}
}