add create instance form dialog

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

index.html

@@ -20,7 +20,7 @@
 			<div id="instance-container" class="center-div">
 			</div>
 			<div class="center-div" style="text-align: center;">
-				<img id="disk-add" src="images/actions/instance/add-instance.svg" class="clickable" alt="Create New Instance" title="Create New Instance">
+				<img id="instance-add" src="images/actions/instance/add-instance.svg" class="clickable" alt="Create New Instance" title="Create New Instance">
 			</div>
 		</main>
 	</body>

scripts/config.js

@@ -63,6 +63,8 @@ function addResourceLine (fieldset, iconHref, labelText, inputAttr, unitText=nul
 		input.setAttribute(k, inputAttr[k])
 	}
 	input.id = labelText;
+	input.name = labelText;
+	input.required = true;
 	field.append(input);
 
 	if (unitText) {
@@ -205,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"></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"}" value="0" required></input>`;
 
 	dialog.callback = async (result, form) => {
 		if (result === "confirm") {
@@ -286,7 +288,7 @@ async function handleDiskMove () {
 
 	dialog.formBody = `
 		${select}
-		<label for="delete-check">Delete Source</label><input name="delete-check" id="delete-check" type="checkbox" checked>
+		<label for="delete-check">Delete Source</label><input name="delete-check" id="delete-check" type="checkbox" checked required>
 	`;
 
 	dialog.callback = async (result, form) => {
@@ -355,7 +357,7 @@ async function handleDiskAdd () {
 	let dialog = document.createElement("dialog-form");
 	document.body.append(dialog);
 	
-	dialog.header = `Create A New Disk`;
+	dialog.header = "Create New Disk";
 
 	let options = "";
 	storage.data.forEach((element) => {
@@ -363,12 +365,12 @@ async function handleDiskAdd () {
 			options += `<option value="${element.storage}">${element.storage}</option>"`;
 		}
 	});
-	let select = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select">${options}</select>`;
+	let select = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${options}</select>`;
 
 	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"></input>
+		<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"></input>
+		<label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" value="0" required></input>
 	`;
 
 	dialog.callback = async (result, form) => {
@@ -420,12 +422,12 @@ async function handleCDAdd () {
 			storageOptions += `<option value="${element.storage}">${element.storage}</option>"`;
 		}
 	});
-	let storageSelect = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select">${storageOptions}</select>`;
+	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"></input>
+		<label for="device">IDE</label><input name="device" id="device" type="number" min="0" max="3" value="0" required></input>
 		${storageSelect}
-		<label for="iso-select">Image</label><select name="iso-select" id="iso-select"></select>
+		<label for="iso-select">Image</label><select name="iso-select" id="iso-select" required></select>
 	`;
 
 	dialog.shadowRoot.querySelector("#storage-select").selectedIndex = -1;

scripts/dialog.js

@@ -14,7 +14,7 @@ export class Dialog extends HTMLElement {
 			</form>
 			<hr>
 			<div class="btn-group">
-				<button value="cancel" form="form" class="active">CANCEL</button>
+				<button value="cancel" form="form" class="active" formnovalidate>CANCEL</button>
 				<button value="confirm" form="form">CONFIRM</button>
 			</div>
 		</dialog>

scripts/index.js

@@ -1,4 +1,5 @@
 import {requestPVE, goToPage, deleteAllCookies} from "./utils.js";
+import { Dialog } from "./dialog.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
@@ -15,6 +16,9 @@ async function init () {
 		deleteAllCookies();
 		goToPage("login.html");
 	});
+
+	let addInstanceBtn = document.querySelector("#instance-add");
+	addInstanceBtn.addEventListener("click", handleInstanceAdd);
 }
 
 async function populateInstances () {
@@ -47,3 +51,45 @@ async function populateInstances () {
 		instanceContainer.append(newInstance);
 	}
 }
+
+async function handleInstanceAdd () {
+	let dialog = document.createElement("dialog-form");
+	document.body.append(dialog);
+	
+	dialog.header = "Create New Instance";
+
+	dialog.formBody = `
+		<label for="type">Instance Type</label>
+		<select name="type" id="type" required>
+			<option value="lxc">Container</option>
+			<option value="qemu">Virtual Machine</option>
+		</select>
+		<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>
+	`;
+
+	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;
+		}
+		else {
+			dialog.shadowRoot.querySelector(`label[for="swap"]`).disabled = false;
+			dialog.shadowRoot.querySelector("#swap").disabled = false;
+		}
+	});
+
+	dialog.callback = async (result, form) => {
+		if (result === "confirm") {
+
+		}
+	}
+
+	dialog.show();
+}