From a76168d1ab4c66de828cfd424c34ebbc6036578a Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Thu, 6 Apr 2023 04:21:03 +0000
Subject: [PATCH] add more info to insatnce container

---
 index.html          | 11 ++++++++---
 scripts/index.js    | 13 ++++++++++++-
 scripts/instance.js | 34 +++++++++++++++++-----------------
 3 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 3201a02..ae76ce6 100644
--- a/index.html
+++ b/index.html
@@ -12,15 +12,20 @@
 		<style>
 			#instance-container {
 				display: grid; 
-				grid-template-columns: auto auto 1fr;
+				grid-template-columns: auto auto auto auto auto auto 1fr auto;
+				column-gap: 4em;
+				align-items: center;
+			}
+			#instance-container-header * {
+				margin-top: 0px;
 			}
 			instance-obj {
 				display: contents;
 			}
-			instance-obj:after, instance-obj:first-child:before {
+			instance-obj:after, instance-obj:first-of-type:before {
 				content: " ";
 				border-bottom: 1px solid var(--content-txt-color);
-				grid-column: 1 / span 3;
+				grid-column: 1 / span 8;
 			}
 		</style>
 	</head>
diff --git a/scripts/index.js b/scripts/index.js
index 883cb0c..86eba52 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -33,7 +33,18 @@ async function populateInstances () {
 
 	instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
 
-	instanceContainer.innerText = "";
+	instanceContainer.innerHTML = `
+		<div style="display: contents;" id="instance-container-header">
+			<p>VM ID</p>
+			<p>VM Name</p>
+			<p>VM Type</p>
+			<p>VM Status</p>
+			<p>Host Name</p>
+			<p>Host Status</p>
+			<div class="hidden"></div>
+			<p>Actions</p>
+		</div>
+	`;
 	for(let i = 0; i < instances.length; i++) {
 		let newInstance = document.createElement("instance-obj");
 		newInstance.data = instances[i];
diff --git a/scripts/instance.js b/scripts/instance.js
index 55a6a0a..c2d64af 100644
--- a/scripts/instance.js
+++ b/scripts/instance.js
@@ -10,15 +10,13 @@ export class Instance extends HTMLElement {
 		<link rel="stylesheet" href="css/style.css" type="text/css">
 		<link rel="stylesheet" href="css/button.css" type="text/css">
 		<link rel="stylesheet" href="css/instance.css" type="text/css">
-		<div>
-			<img id="node-status" alt="instance node">
-			<p id="node-name"></p>
-		</div>
-		<div>
-			<img id="instance-type">
-			<p id="instance-id"></p>
-			<p id="instance-name"></p>
-		</div>				
+		<p id="instance-id"></p>
+		<p id="instance-name"></p>
+		<p id="instance-type"></p>
+		<p id="instance-status"></p>
+		<p id="node-name"></p>
+		<p id="node-status"></p>
+		<div class="hidden"></div>
 		<div class="btn-group">
 			<img id="power-btn" class="clickable">
 			<img id="console-btn" class="clickable">
@@ -44,21 +42,23 @@ export class Instance extends HTMLElement {
 	}
 
 	update () {
-		let typeImg = this.shadowElement.querySelector("#instance-type");
-		typeImg.src = `images/instances/${this.type}/${this.status}.svg`;
-		typeImg.alt = `${this.status} instance`;
-
 		let vmidParagraph = this.shadowElement.querySelector("#instance-id");
 		vmidParagraph.innerText = this.vmid;
 
 		let nameParagraph = this.shadowElement.querySelector("#instance-name");
 		nameParagraph.innerText = this.name ? this.name : "";
 
-		let nodeImg = this.shadowElement.querySelector("#node-status");
-		nodeImg.src = `images/nodes/${this.node.status}.svg`;
+		let typeParagraph = this.shadowElement.querySelector("#instance-type");
+		typeParagraph.innerText = this.type;
 
-		let nodeParagraph = this.shadowElement.querySelector("#node-name");
-		nodeParagraph.innerText = this.node.name;
+		let statusParagraph = this.shadowElement.querySelector("#instance-status");
+		statusParagraph.innerText = this.status;
+
+		let nodeNameParagraph = this.shadowElement.querySelector("#node-name");
+		nodeNameParagraph.innerText = this.node.name;
+
+		let nodeStatusParagraph = this.shadowElement.querySelector("#node-status");
+		nodeStatusParagraph.innerText = this.node.status;
 
 		let powerButton = this.shadowElement.querySelector("#power-btn");
 		powerButton.src = instances[this.status].powerButtonSrc;