From 0639d53a5df13d466bc2ec7fb2f2f224af30590b Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Thu, 23 Feb 2023 21:58:42 +0000
Subject: [PATCH] add extra input fields for container specific options

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 css/form.css      |  6 +-----
 index.html        |  1 +
 scripts/config.js |  8 ++++----
 scripts/index.js  | 35 +++++++++++++++++++++++++++++------
 4 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/css/form.css b/css/form.css
index 41486e6..005f653 100644
--- a/css/form.css
+++ b/css/form.css
@@ -1,8 +1,3 @@
-.center-div {
-	display: grid;
-	justify-content: center;
-}
-
 p {
 	text-align: left;
 	margin: 0px;
@@ -43,6 +38,7 @@ select {
 	border: solid white 1px;
 	background-color: black;
 	color: white;
+	width: min-content;
 }
 
 select:disabled {
diff --git a/index.html b/index.html
index 362fe7e..a978aaf 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
 		<title>tronnet - client</title>
 		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
 		<link rel="stylesheet" href="css/style.css" type="text/css">
+		<link rel="stylesheet" href="css/form.css" type="text/css">
 		<script src="scripts/index.js" type="module"></script>
 		<script src="scripts/instance.js" type="module"></script>
 	</head>
diff --git a/scripts/config.js b/scripts/config.js
index 3430b5a..d1b5223 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -207,7 +207,7 @@ async function handleDiskAttach () {
 	let diskImage = config.data[this.dataset.disk];
 
 	dialog.header = `Attach ${diskImage}`;
-	dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>`;
+	dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" required></input>`;
 
 	dialog.callback = async (result, form) => {
 		if (result === "confirm") {
@@ -245,7 +245,7 @@ async function handleDiskResize () {
 	document.body.append(dialog);
 
 	dialog.header = `Resize ${this.dataset.disk}`; 
-	dialog.formBody = `<label for="size-increment">Size Increment (GiB)</label><input name="size-increment" id="size-increment" type="number" min="0" max="131072" value="0"></input>`;
+	dialog.formBody = `<label for="size-increment">Size Increment (GiB)</label><input name="size-increment" id="size-increment" type="number" min="0" max="131072"></input>`;
 
 	dialog.callback = async (result, form) => {
 		if (result === "confirm") {
@@ -370,7 +370,7 @@ async function handleDiskAdd () {
 	dialog.formBody = `
 		<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>
 		${select}
-		<label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" value="0" required></input>
+		<label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" required></input>
 	`;
 
 	dialog.callback = async (result, form) => {
@@ -425,7 +425,7 @@ async function handleCDAdd () {
 	let storageSelect = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${storageOptions}</select>`;
 
 	dialog.formBody = `
-		<label for="device">IDE</label><input name="device" id="device" type="number" min="0" max="3" value="0" required></input>
+		<label for="device">IDE</label><input name="device" id="device" type="number" min="0" max="3" required></input>
 		${storageSelect}
 		<label for="iso-select">Image</label><select name="iso-select" id="iso-select" required></select>
 	`;
diff --git a/scripts/index.js b/scripts/index.js
index 5af8cda..2e6449a 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -64,27 +64,50 @@ async function handleInstanceAdd () {
 			<option value="lxc">Container</option>
 			<option value="qemu">Virtual Machine</option>
 		</select>
+		<label for="name">Name</label>
+		<input name="name" id="name" required></input>
+		<label for="vmid">ID</label>
+		<input name="vmid" id="vmid" type="number" required></input>
 		<label for="cpu">Cores</label>
 		<input name="cpu" id="cpu" type="number" min="1" max="8192" required></input>
 		<label for="ram">Memory</label>
 		<input name="ram" id="ram" type="number" min="16", step="1" required></input>
-		<label for="swap" disabled>Swap</label>
-		<input name="swap" id="swap" type="number" min="0" step="1" required disabled></input>
+		<fieldset class="none" id="container-specific" style="grid-column: 1 / span 2; margin-top: 10px;">
+			<legend>Container Options</legend>
+			<div class="input-grid" style="grid-template-columns: auto 1fr;">
+				<label for="swap">Swap</label>
+				<input name="swap" id="swap" type="number" min="0" step="1" required disabled></input>				
+				<label for="template-storage">Template Storage</label>
+				<select name="template-storage" id="template-storage" required disabled></select>
+				<label for="template-storage">Template Image</label>
+				<select name="template-image" id="template-image" required disabled></select>
+				<label for="template-storage">ROOTFS Storage</label>
+				<select name="rootfs-storage" id="rootfs-storage" required disabled></select>
+				<label for="template-size">ROOTFS Size (GiB)</label>
+				<input name="template-size" id="template-size" type="number" min="0" max="131072" required disabled></input>
+			</div>
+		</fieldset>
 	`;
 
 	let typeSelect = dialog.shadowRoot.querySelector("#type");
 	typeSelect.selectedIndex = -1;
 	typeSelect.addEventListener("change", () => {
 		if(typeSelect.value === "qemu") {
-			dialog.shadowRoot.querySelector(`label[for="swap"]`).disabled = true;
-			dialog.shadowRoot.querySelector("#swap").disabled = true;
+			dialog.shadowRoot.querySelectorAll("#container-specific input").forEach((element) => {element.disabled = true});
+			dialog.shadowRoot.querySelectorAll("#container-specific select").forEach((element) => {element.disabled = true});
+			dialog.shadowRoot.querySelector("#container-specific").classList.add("none");
 		}
 		else {
-			dialog.shadowRoot.querySelector(`label[for="swap"]`).disabled = false;
-			dialog.shadowRoot.querySelector("#swap").disabled = false;
+			dialog.shadowRoot.querySelectorAll("#container-specific input").forEach((element) => {element.disabled = false});
+			dialog.shadowRoot.querySelectorAll("#container-specific select").forEach((element) => {element.disabled = false});
+			dialog.shadowRoot.querySelector("#container-specific").classList.remove("none");
 		}
 	});
 
+	let vmidInput = dialog.shadowRoot.querySelector("#vmid");
+	//vmidInput.min = 200;
+	//vmidInput.max = 299;
+
 	dialog.callback = async (result, form) => {
 		if (result === "confirm") {