update client user resource data format

account.html

@@ -13,16 +13,15 @@
 		<style>
 			@media screen and (width >= 1264px){
 				#resource-container {
-					display: flex; 
-					flex-direction: row; 
-					gap: 0px;
-					flex-wrap: nowrap;
-					justify-content: left;
+					display: grid;
+					grid-template-columns: repeat(auto-fill, calc(100% / 6));
+					grid-gap: 0px;
+					justify-content: space-between;
 				}
 				#resource-container > * {
 					position: relative;
 					min-width: 200px;
-					width: 100%;
+					max-width: 400px;
 					aspect-ratio: 1 / 1;
 				}
 			}

scripts/account.js

@@ -26,24 +26,29 @@ async function init () {
 		goToPage("login.html");
 	}
 	const resources = await requestAPI("/user/dynamic/resources");
+	const meta = await requestAPI("/global/config/resources");
 	const instances = await requestAPI("/user/config/cluster");
 	const nodes = await requestAPI("/user/config/nodes");
 	document.querySelector("#username").innerText = `Username: ${getCookie("username")}`;
 	document.querySelector("#pool").innerText = `Pool: ${instances.pool}`;
 	document.querySelector("#vmid").innerText = `VMID Range: ${instances.vmid.min} - ${instances.vmid.max}`;
 	document.querySelector("#nodes").innerText = `Nodes: ${nodes.toString()}`;
-	buildResourceTable("#resource-container", resources);
+	populateResources("#resource-container", meta, resources);
 }
 
-function buildResourceTable (containerID, resources) {
+function populateResources (containerID, meta, resources) {
 	if (resources instanceof Object) {
 		const container = document.querySelector(containerID);
-		Object.keys(resources.resources).forEach((element) => {
-			if (resources.resources[element].display) {
-				if (resources.resources[element].type === "list") {
+		Object.keys(meta).forEach((resourceType) => {
+			if (meta[resourceType].display) {
+				if (meta[resourceType].type === "list") {
+					resources[resourceType].forEach((listResource) => {
+						const chart = createResourceUsageChart(listResource.name, listResource.avail, listResource.used, listResource.max, null);
+						container.append(chart);
+					});
 				}
 				else {
-					const chart = createResourceUsageChart(resources.resources[element].title, resources.avail[element], resources.used[element], resources.max[element], resources.resources[element]);
+					const chart = createResourceUsageChart(meta[resourceType].name, resources[resourceType].avail, resources[resourceType].used, resources[resourceType].max, meta[resourceType]);
 					container.append(chart);
 				}
 			}
@@ -99,6 +104,9 @@ function createResourceUsageChart (resourceName, resourceAvail, resourceUsed, re
 }
 
 function parseNumber (value, unitData) {
+	if (!unitData) {
+		return `${value}`;
+	}
 	const compact = unitData.compact;
 	const multiplier = unitData.multiplier;
 	const base = unitData.base;

scripts/config.js

@@ -55,22 +55,23 @@ async function populateResources () {
 		const user = await requestAPI("/user/config/resources");
 		let options = [];
 		if (global.cpu.whitelist) {
-			options = user.max.cpu.sort((a, b) => {
+			user.cpu.forEach((userType) => {
+				options.push(userType.name);
+			});
+			options = options.sort((a, b) => {
 				return a.localeCompare(b);
 			});
 		}
 		else {
 			const supported = await requestPVE(`/nodes/${node}/capabilities/qemu/cpu`);
-			supported.data.forEach((element) => {
-				if (!user.max.cpu.includes(element.name)) {
-					options.push(element.name);
+			supported.data.forEach((supportedType) => {
+				if (!user.cpu.some((userType) => supportedType.name === userType.name)) {
+					options.push(supportedType.name);
 				}
 			});
 			options = options.sort((a, b) => {
 				return a.localeCompare(b);
 			});
-			console.log(options);
-			console.log("blacklist not yet supported");
 		}
 		addResourceLine("resources", "images/resources/cpu.svg", "select", "CPU Type", "proctype", { value: config.data.cpu, options });
 	}

scripts/index.js

@@ -192,8 +192,8 @@ async function handleInstanceAdd () {
 
 	const userResources = await requestAPI("/user/dynamic/resources", "GET");
 	const userCluster = await requestAPI("/user/config/cluster", "GET");
-	d.querySelector("#cores").max = userResources.avail.cores;
-	d.querySelector("#memory").max = userResources.avail.memory;
+	d.querySelector("#cores").max = userResources.cores.avail;
+	d.querySelector("#memory").max = userResources.memory.avail;
 	d.querySelector("#vmid").min = userCluster.vmid.min;
 	d.querySelector("#vmid").max = userCluster.vmid.max;
 }

scripts/settings.js

@@ -18,7 +18,6 @@ function init () {
 function handleSaveSettings (event) {
 	event.preventDefault();
 	const form = new FormData(document.querySelector("#settings"));
-	console.log(form.get("sync-scheme"));
 	localStorage.setItem("sync-scheme", form.get("sync-scheme"));
 	localStorage.setItem("sync-rate", form.get("sync-rate"));
 	window.location.reload();