From bdec04aaf7f132d29935e5a902944f0bb8abc09c Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Wed, 14 Dec 2022 14:42:40 -0800
Subject: [PATCH] separate instance card data elements

---
 scripts/elements.js | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/scripts/elements.js b/scripts/elements.js
index 5a4dc3e..7a987f3 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -24,10 +24,31 @@ class Instance extends HTMLElement {
 	set data (data) {
 		let instanceArticle = this.shadowElement.querySelector("article");
 
-		let instanceParagraph = document.createElement("p");
-		instanceParagraph.innerText = `${data.type} | ${data.vmid} | ${data.name} | ${data.status} | ${data.node.name} (${data.node.status})`;
-		instanceParagraph.style.color = data.status === "running" ? "#00ff00" : "#ff0000";
-		instanceArticle.append(instanceParagraph);
+		let type = document.createElement("img");
+		type.src = `images/${data.type}.svg`;
+		instanceArticle.append(type);
+
+		let vmid = document.createElement("p");
+		vmid.innerText = data.vmid;
+		instanceArticle.append(vmid);
+
+		let name = document.createElement("p");
+		name.innerText = data.name;
+		instanceArticle.append(name);
+
+		let status = document.createElement("p");
+		status.innerText = data.status;
+		status.style.color = data.status === "running" ? "#00ff00" : "#ff0000";
+		instanceArticle.append(status);
+
+		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);
 	}
 }