From 21771fdb759dc3cde4b1a86519002e2f1229dd35 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Sun, 11 Dec 2022 20:20:32 -0800
Subject: [PATCH] make instance custom element

---
 node.js => elements.js | 42 +++++++++++++++++++++++++++++++++---------
 index.js               |  2 +-
 2 files changed, 34 insertions(+), 10 deletions(-)
 rename node.js => elements.js (54%)

diff --git a/node.js b/elements.js
similarity index 54%
rename from node.js
rename to elements.js
index d907c6a..9f9d0b1 100644
--- a/node.js
+++ b/elements.js
@@ -33,10 +33,8 @@ class Node extends HTMLElement {
 
 		let qemuDiv = document.createElement("div");
 		for (let i = 0; i < qemu.length; i++) {
-			let instanceParagraph = document.createElement("p");
-			instanceParagraph.innerText = `VM | ${qemu[i].vmid} | ${qemu[i].name} | ${qemu[i].status}`;
-			instanceParagraph.style.color = qemu[i].status == "running" ? "#00ff00" : "#ff0000";
-			qemuDiv.append(instanceParagraph);
+			let newInstance = document.createElement("instance-div");
+			newInstance.data = qemu[i];
 		}
 		articleElement.append(qemuDiv);
 	}
@@ -46,13 +44,39 @@ class Node extends HTMLElement {
 
 		let lxcDiv = document.createElement("div");
 		for (let i = 0; i < lxc.length; i++) {
-			let instanceParagraph = document.createElement("p");
-			instanceParagraph.innerText = `CT | ${lxc[i].vmid} | ${lxc[i].name} | ${lxc[i].status}`;
-			instanceParagraph.style.color = lxc[i].status == "running" ? "#00ff00" : "#ff0000";
-			lxcDiv.append(instanceParagraph);
+			let newInstance = document.createElement("instance-div");
+			newInstance.data = lxc[i];
 		}
 		articleElement.append(lxcDiv);
 	}
 }
 
-customElements.define("node-card", Node);
\ No newline at end of file
+class Instance extends HTMLElement {
+	constructor () {
+		super();
+		let shadowRoot = this.attachShadow({mode: "open"});
+
+		let instanceDiv = document.createElement("div");
+		shadowRoot.append(instanceDiv);
+
+		let styleLink = document.createElement("link");
+		styleLink.rel = "stylesheet";
+		styleLink.href = "style.css";
+		styleLink.type = "text/css";
+		shadowRoot.append(styleLink);
+
+		this.shadowElement = shadowRoot;
+	}
+
+	set data (data) {
+		let instanceDiv = this.shadowElement.querySelector("div");
+
+		let instanceParagraph = document.createElement("p");
+		instanceParagraph.innerText = `CT | ${data.vmid} | ${data.name} | ${data.status}`;
+		instanceParagraph.style.color = data.status == "running" ? "#00ff00" : "#ff0000";
+		instanceDiv.append(instanceParagraph);
+	}
+}
+
+customElements.define("node-article", Node);
+customElements.define("instance-div", Instance);
\ No newline at end of file
diff --git a/index.js b/index.js
index 6acc027..15b6adc 100644
--- a/index.js
+++ b/index.js
@@ -16,7 +16,7 @@ async function init () {
 
 	let nodeContainer = document.getElementById("node-container")
 	for (let i = 0; i < nodes.data.length; i++) {
-		let newNode = document.createElement("node-card");
+		let newNode = document.createElement("node-article");
 		newNode.data = nodes.data[i];
 		
 		let qemu = await request(`/nodes/${nodes.data[i].node}/qemu`, "GET", null);