add instance info to account

account.html

@@ -19,20 +19,23 @@
 			</nav>
 		</header>
 		<main class="w3-container">
-			<h2>Account</h2>
+			<h2>Account</h2>			
-			<div class="w3-responsive">
+			<div class="flex row wrap w3-margin-top w3-margin-bottom">
-				<table id="resource-table" class="w3-table w3-table-all" style="overflow-x: auto;">
+				<p id="username">Username: </p>
-					<thead>
+				<p id="pool">Pool: </p>
-						<tr class="w3-black">
+				<p id="vmid">VMID Range: </p>
-							<th>Resource</th>
-							<th>Used</th>
-							<th>Free</th>
-							<th>Total</th>
-						</tr>
-					</thead>
-					<tbody></tbody>
-				</table>
 			</div>
+			<table id="resource-table" class="w3-table w3-table-all" style="overflow-x: auto;">
+				<thead>
+					<tr class="w3-black">
+						<th>Resource</th>
+						<th>Used</th>
+						<th>Free</th>
+						<th>Total</th>
+					</tr>
+				</thead>
+				<tbody></tbody>
+			</table>
 		</main>
 	</body>
 </html>

css/style.css

@@ -3,7 +3,7 @@
 	--success-color: #0f0;
 }
 
-h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select {
+h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select, td {
 	font-family: monospace;
 }
 
@@ -20,13 +20,27 @@ img {
 	width: 1em;
 }
 
-.flex-row-nowrap {
+.flex {
 	display: flex;
+}
+
+.flex * {
+	margin: 0px;
+}
+
+.row {
 	flex-direction: row;
-	flex-wrap: nowrap;
 	column-gap: 10px;
 	align-items: center;
-	height: 100%;
+}
+
+.wrap {
+	flex-wrap: wrap;
+	row-gap: 10px;
+}
+
+.nowrap {
+	flex-wrap: nowrap;
 }
 
 .hidden {

scripts/account.js

@@ -1,4 +1,4 @@
-import {requestAPI, goToPage} from "./utils.js";
+import {requestAPI, goToPage, getCookie} from "./utils.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
@@ -17,24 +17,30 @@ async function init () {
 	}
 
 	let resources = await requestAPI("/user/resources");
+	resources = resources.resources;
+	let instances = await requestAPI("/user/instances");
+	instances = instances.instances;
+	document.querySelector("#username").innerHTML += getCookie("username");
+	document.querySelector("#pool").innerHTML += instances.pool;
+	document.querySelector("#vmid").innerHTML += `[${instances.vmid.min},${instances.vmid.max}]`;
 	buildResourceTable(resources, "#resource-table");
 }
 
-function buildResourceTable (object, tableid) {
+function buildResourceTable (resources, tableid) {
 
-	if (object instanceof Object) {
+	if (resources instanceof Object) {
 		let table = document.querySelector(tableid);
 		let tbody = table.querySelector("tbody");
-		Object.keys(object.resources.avail).forEach((element) => {
+		Object.keys(resources.avail).forEach((element) => {
 			let row = tbody.insertRow();
 			let key = row.insertCell();
 			key.innerText = `${element}`;
 			let used = row.insertCell();
-			used.innerText = `${parseNumber(object.resources.used[element], object.resources.units[element])}`;
+			used.innerText = `${parseNumber(resources.used[element], resources.units[element])}`;
 			let val = row.insertCell();
-			val.innerText = `${parseNumber(object.resources.avail[element], object.resources.units[element])}`;
+			val.innerText = `${parseNumber(resources.avail[element], resources.units[element])}`;
 			let total = row.insertCell();
-			total.innerText = `${parseNumber(object.resources.max[element], object.resources.units[element])}`;
+			total.innerText = `${parseNumber(resources.max[element], resources.units[element])}`;
 		});
 	}
 }

scripts/instance.js

@@ -19,18 +19,18 @@ export class Instance extends HTMLElement {
 				<div class="w3-col l1 m2 w3-hide-small">
 					<p id="instance-type"></p>
 				</div>
-				<div class="w3-col l2 m3 s6 flex-row-nowrap">
+				<div class="w3-col l2 m3 s6 flex row nowrap">
 					<img id="instance-status-icon">
 					<p id="instance-status"></p>
 				</div>
 				<div class="w3-col l2 w3-hide-medium w3-hide-small">
 					<p id="node-name"></p>
 				</div>
-				<div class="w3-col l2 w3-hide-medium w3-hide-small flex-row-nowrap">
+				<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
 					<img id="node-status-icon">
 					<p id="node-status"></p>
 				</div>
-				<div class="w3-col l2 m2 s6 flex-row-nowrap" style="padding-top: 15px;">
+				<div class="w3-col l2 m2 s6 flex row nowrap" style="padding-top: 15px;">
 					<img id="power-btn" class="clickable">
 					<img id="console-btn" class="clickable">
 					<img id="configure-btn" class="clickable">