From 0c4917c77a8a49bb94965faa7396e6105c010b05 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Wed, 21 Dec 2022 01:31:58 -0800
Subject: [PATCH] improve form populating

---
 config.html       |  4 ++--
 css/form.css      |  5 +++--
 scripts/config.js | 25 ++++++++++++-------------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/config.html b/config.html
index a43c703..717ccb6 100644
--- a/config.html
+++ b/config.html
@@ -13,11 +13,11 @@
 			<form>
 				<fieldset>
 					<legend>Name</legend>
-					<div class="labels-inputs" id="name"></div>
+					<div class="label-input" id="name"></div>
 				</fieldset>
 				<fieldset>
 					<legend>Resources</legend>
-					<div class="labels-inputs-units" id="resources"></div>
+					<div class="label-input-unit" id="resources"></div>
 				</fieldset>
 				<fieldset class="fieldset-no-border">
 					<div class="btn-group" id="form-actions">
diff --git a/css/form.css b/css/form.css
index 47c149f..01f2980 100644
--- a/css/form.css
+++ b/css/form.css
@@ -30,18 +30,19 @@ button {
 	margin-top: 0px;
 }
 
-.labels-inputs {
+.label-input {
 	display: grid;
 	grid-template-columns: auto auto;
 	column-gap: 10px;
 }
 
-.labels-inputs-units {
+.label-input-unit {
 	display: grid;
 	grid-template-columns: auto auto auto;
 	column-gap: 10px;
 }
 
+
 legend {
 	top: -0.6em;
 	position: relative;
diff --git a/scripts/config.js b/scripts/config.js
index ff2357a..31d9ecb 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -24,38 +24,37 @@ async function populateForm (node, type, vmid) {
 	let config = await request(`/nodes/${node}/${type}/${vmid}/config`);
 	console.log(config);
 
-	addFormLine("name", "name", "Name", {type: "text", value: config.data.name});
-
-	addFormLine("resources", "cores", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads");
-	addFormLine("resources", "memory", "Memory", {type: "number", value: config.data.memory / 1024, min: 16}, "GiB");
+	addFormLine("name", "Name", {type: "text", value: config.data.name});
+	addFormLine("resources", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads");
+	addFormLine("resources", "Memory", {type: "number", value: config.data.memory / 1024, min: 16}, "GiB");
 
 	let i = 0;
 	while(Object.hasOwn(config.data, `sata${i}`)){
 		let sata = config.data[`sata${i}`];
 		sata = `{"${sata.replaceAll(":", '":"').replaceAll("=", '":"').replaceAll(",", '","')}"}`;
 		sata = JSON.parse(sata);
-		addFormLine("resources", `sata${i}`, `SATA ${i}`, {type: "text", value: sata.size.slice(0, sata.size.length - 1)}, sata.size.includes("G") ? "GiB" : "MiB");
+		let sizeUnit = sata.size.includes("G") ? "GiB" : "MiB";
+		addFormLine("resources", `SATA ${i}`, {type: "number", value: sizeUnit === "GiB" ? (sata.size).toFixed(3) : (sata.size / 1024).toFixed(3), min: 0.016}, "GiB");
 		i++;
 	}
 }
 
-function addFormLine (fieldset, id, labelValue, inputAttr, unitValue="") {
+function addFormLine (fieldset, labelText, inputAttr, unitText=null) {
 	let field = document.querySelector(`#${fieldset}`);
 
 	let label = document.createElement("label");
-	label.for = id;
-	label.innerHTML = labelValue;
+	label.innerHTML = labelText;
 	field.append(label);
 
 	let input = document.createElement("input");
-	input.id = id;
-	input.name = id;
 	for (let k in inputAttr) {
 		input.setAttribute(k, inputAttr[k])
 	}
 	field.append(input);
 
-	let unit = document.createElement("p");
-	unit.innerText = unitValue;
-	field.append(unit)
+	if (unitText) {
+		let unit = document.createElement("p");
+		unit.innerText = unitText;
+		field.append(unit);
+	}
 }
\ No newline at end of file