From 2af76405ef5b95ba49e4d498187285796dae8d20 Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Wed, 14 Dec 2022 17:20:31 -0800
Subject: [PATCH] add resource details to instance article

---
 css/instance.css    | 20 ++++++++++++++++++--
 index.html          | 22 ++++++++++++++++++++--
 scripts/elements.js | 14 ++++++++++++--
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/css/instance.css b/css/instance.css
index d36934f..6a32d53 100644
--- a/css/instance.css
+++ b/css/instance.css
@@ -10,13 +10,29 @@ article {
 	justify-content: space-between;
 }
 
-.summary-sub-div {
+.summary-div div {
 	display: flex;
 	column-gap: 10px;
 	align-items: center;
 	width: fit-content;
 }
 
-.summary-sub-div img {
+.summary-div div img {
+	height: 16px;
+}
+
+.resource-div {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+.resource-div div {
+	display: flex;
+	column-gap: 10px;
+	align-items: center;
+	width: fit-content;
+}
+
+.resource-div div img {
 	height: 16px;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 2cc2793..637cc4c 100644
--- a/index.html
+++ b/index.html
@@ -15,16 +15,34 @@
 	<template id="instance-template">
 		<article>
 			<div class="summary-div">
-				<div class="summary-sub-div">
+				<div>
 					<img id="instance-type">
 					<p id="instance-id"></p>
 					<p id="instance-name"></p>
 				</div>
-				<div class="summary-sub-div">
+				<div>
 					<img id="node-status">
 					<p id="node-name"></p>
 				</div>
 			</div>
+			<div class="resource-div">
+				<div>
+					<img src="images/resources/cpu.svg">
+					<p id="resource-cpu"></p>
+				</div>
+				<div>
+					<img src="images/resources/ram.svg">
+					<p id="resource-ram"></p>
+				</div>
+				<div>
+					<img src="images/resources/swap.svg">
+					<p id="resource-swap"></p>
+				</div>
+				<div>
+					<img src="images/resources/disk.svg">
+					<p id="resource-disk"></p>
+				</div>
+			</div>
 		</article>
 	</template>
 </html>
\ No newline at end of file
diff --git a/scripts/elements.js b/scripts/elements.js
index 1db9e64..262e1eb 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -23,8 +23,6 @@ class Instance extends HTMLElement {
 	}
 
 	set data (data) {
-		let instanceArticle = this.shadowElement.querySelector("article");
-
 		let typeImg = this.shadowElement.querySelector("#instance-type");
 		typeImg.src = `images/instances/${data.type}/${data.status}.svg`;
 
@@ -39,6 +37,18 @@ class Instance extends HTMLElement {
 
 		let nodeParagraph = this.shadowElement.querySelector("#node-name");
 		nodeParagraph.innerText = data.node.name;
+
+		let resourceCPU = this.shadowElement.querySelector("#resource-cpu");
+		resourceCPU.innerText = data.cpus;
+
+		let resourceRAM = this.shadowElement.querySelector("#resource-ram");
+		resourceRAM.innerText = (data.maxmem / 1073741824).toFixed(3);
+
+		let resourceSWAP = this.shadowElement.querySelector("#resource-swap");
+		resourceSWAP.innerText = (data.maxswap / 1073741824).toFixed(3);
+
+		let resourceDISK = this.shadowElement.querySelector("#resource-disk");
+		resourceRAM.innerText = (data.maxdisk / 1073741824).toFixed(3);
 	}
 }