add dialog confirm,

add resize handler

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

config.html

@@ -25,8 +25,7 @@
 				</fieldset>
 				<fieldset class="fieldset-no-border">
 					<div class="btn-group" id="form-actions">
-						<button id="cancel" type="button">CANCEL</button>
+						<button id="cancel" type="button">Exit</button>
-						<button id="submit" type="button">SUBMIT</button>
 					</div>
 				</fieldset>
 			</form>

css/dialog.css

@@ -0,0 +1,18 @@
+dialog {
+	background-color: #000000;
+	border: 1px solid white;
+	border-radius: 5px;
+}
+
+dialog::backdrop {
+	background: rgba(0, 0, 0, 0.5);
+}
+
+dialog .btn-group {
+	margin-top: 10px;
+}
+
+h1, h2, h3, p {
+	margin: 10px;
+	text-align: center;
+}

scripts/config.js

@@ -1,4 +1,5 @@
 import {requestPVE, requestAPI, goToPage, getURIData, reload, resources} from "./utils.js";
+import { Dialog } from "./elements.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
@@ -116,24 +117,36 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) {
 	diskMetaData.actionBarOrder.forEach((element) => {
 		let action = document.createElement("img");
 		action.classList.add("clickable");
-		if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")){
+		if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")){ // attach
 			action.src = "images/actions/attach.svg";
 			action.title = "Attach Disk";
 		}
-		else if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")){
+		else if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")){ // detach
 			action.src = "images/actions/detach.svg";
 			action.title = "Detach Disk";
 			action.addEventListener("click", handleDiskDetach);
 		}
 		else if (element === "delete_detach_attach"){
-			let active = diskMetaData[type][busPrefix].actions.includes("delete") ? "active" : "inactive";
+			let active = diskMetaData[type][busPrefix].actions.includes("delete") ? "active" : "inactive"; // delete
 			action.src = `images/actions/delete-${active}.svg`;
 			action.title = `Delete Disk`;
 		}
 		else {
-			let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive";
+			let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
 			action.src = `images/actions/${element}-${active}.svg`;
 			action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`;
+			if (element === "config") {
+
+			}
+			else if (element === "move") {
+
+			}
+			else if (element === "resize") {
+				action.addEventListener("click", handleDiskResize);
+			}
+			else {
+
+			}
 		}
 		action.id = `${busPrefix}${device}`
 		actionDiv.append(action);
@@ -142,20 +155,64 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) {
 }
 
 async function handleDiskDetach () {
-	let body = {
+	let dialog = document.createElement("dialog-form");
-		node: node,
+	document.body.append(dialog);
-		type: type,
+	dialog.body = `
-		vmid: vmid,
+		<p>Detach ${this.id}</p>
-		action: `delete=${this.id}`
+		<hr>
+	`;
+	dialog.callback = async (result, form) => {
+		if(result === "confirm") {
+			let body = {
+				node: node,
+				type: type,
+				vmid: vmid,
+				action: `delete=${this.id}`
+			};
+			let result = await requestAPI("/disk/detach", "POST", body);
+			if (result.status === 200) {
+				await getConfig();
+				populateDisk();
+			}
+			else{
+				console.error(result);
+			}
+		}
+		document.querySelector("dialog-form").remove();
 	};
-	let result = await requestAPI("/disk/detach", "POST", body);
+	dialog.show();
-	if (result.status === 200) {
+}
-		await getConfig();
+
-		populateDisk();
+async function handleDiskResize () {
-	}
+	let dialog = document.createElement("dialog-form");
-	else{
+	document.body.append(dialog);
-		console.error(result);
+	dialog.body = `
-	}
+		<p>Resize ${this.id}</p>
+		<hr>
+		<label for="size-increment">Size Increment (GiB)</label>
+		<input name="size-increment" type="number" min="0" max="131072" value="0">
+		<hr>
+	`;
+	dialog.callback = async (result, form) => {
+		if(result === "confirm") {
+			let body = {
+				node: node,
+				type: type,
+				vmid: vmid,
+				action: `disk=${this.id}&size=+${form.get("size-increment")}G`
+			}
+			let result = await requestAPI("/disk/resize", "POST", body);
+			if (result.status === 200) {
+				await getConfig();
+				populateDisk();
+			}
+			else{
+				console.error(result);
+			}
+		}
+		document.querySelector("dialog-form").remove();
+	};
+	dialog.show();
 }
 
 function getOrderedUsed(disks){

scripts/elements.js

@@ -2,7 +2,7 @@ import {requestPVE, goToPage, instances} from "./utils.js";
 
 const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
 
-class Instance extends HTMLElement {
+export class Instance extends HTMLElement {
 	constructor () {
 		super();
 		let shadowRoot = this.attachShadow({mode: "open"});
@@ -131,16 +131,17 @@ class Instance extends HTMLElement {
 	}
 }
 
-class Dialog extends HTMLElement {
+export class Dialog extends HTMLElement {
 	constructor () {
 		super();
 		let shadowRoot = this.attachShadow({mode: "open"});
 
 		shadowRoot.innerHTML = `
 		<link rel="stylesheet" href="css/style.css" type="text/css">
+		<link rel="stylesheet" href="css/form.css" type="text/css">
 		<link rel="stylesheet" href="css/dialog.css" type="text/css">
 		<dialog>
-			<form method="dialog"></form>
+			<form method="dialog" class="imput-grid" style="auto 1fr"></form>
 		</dialog>
 		`;
 
@@ -150,20 +151,20 @@ class Dialog extends HTMLElement {
 	}
 
 	set body (body) {
-		this.form.innerHTML = body + `
+		this.form.innerHTML = `
-		<div class="btn-group">
+			${body}
-			<button value="cancel">Cancel</button>
+			<div class="btn-group">
-			<button value="confirm">Confirm</button>
+				<button value="cancel">Cancel</button>
-		</div>
+				<button value="confirm">Confirm</button>
+			</div>
 		`;
 	}
 
 	set callback (callback) {
-		this.dialog.addEventListener("close", () => {
+		this.dialog.addEventListener("close", async () => {
-			callback(this.dialog.returnValue, new FormData(this.form));
+			await callback(this.dialog.returnValue, new FormData(this.form));
 		});
 	}
-
 	show () {
 		this.dialog.showModal();
 	}