From ed36cb62d261ce2942a0f872ed71205ff45f8168 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Wed, 1 Feb 2023 23:42:30 +0000
Subject: [PATCH] improve dialog box custom element

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 scripts/config.js   | 39 ++++++++++++++++++++++++++++-----------
 scripts/elements.js | 14 +++++++++++---
 scripts/utils.js    |  6 ++++--
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/scripts/config.js b/scripts/config.js
index c76a7d4..eb11136 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -162,10 +162,13 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) {
 async function handleDiskDetach () {
 	let dialog = document.createElement("dialog-form");
 	document.body.append(dialog);
-	dialog.body = `
-		<p>Detach ${this.id}</p>
-		<hr>
-	`;
+
+	dialog.header = `Detach ${this.id}`;
+
+	let confirm = document.createElement("p");
+	confirm.innerText = `Are you sure you want to detach disk ${this.id}?`
+	dialog.append(confirm)
+
 	dialog.callback = async (result, form) => {
 		if(result === "confirm") {
 			let body = {
@@ -191,13 +194,22 @@ async function handleDiskDetach () {
 async function handleDiskResize () {
 	let dialog = document.createElement("dialog-form");
 	document.body.append(dialog);
-	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.header = `Resize ${this.id}`;
+
+	let label = document.createElement("label");
+	label.for = "size-increment";
+	label.innerText = "Size Increment (GiB)";
+	dialog.append(label);
+
+	let input = document.createElement("input");
+	input.name = "size-increment";
+	input.type = "number";
+	input.min = 0;
+	input.max = 131072;
+	input.value = 0;
+	dialog.append(input);
+
 	dialog.callback = async (result, form) => {
 		if(result === "confirm") {
 			let body = {
@@ -220,6 +232,11 @@ async function handleDiskResize () {
 	dialog.show();
 }
 
+async function handleDiskMove () {
+	let storage = await requestPVE(`/nodes/${node}/storage`, "GET", {format: 1, content: type === "qemu" ? "images" : "rootdir"});
+	let dialog = createElement("dialog-form");
+}
+
 function getOrderedUsed(disks){
 	let ordered_keys = Object.keys(disks).sort((a,b) => {parseInt(a) - parseInt(b)}); // ordered integer list
 	return ordered_keys;
diff --git a/scripts/elements.js b/scripts/elements.js
index 7bba101..f798af5 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -150,11 +150,11 @@ export class Dialog extends HTMLElement {
 		this.shadowElement = shadowRoot;
 		this.dialog = shadowRoot.querySelector("dialog");
 		this.form = shadowRoot.querySelector("form");
-	}
 
-	set body (body) {
 		this.form.innerHTML = `
-			${body}
+			<p id="header"></p>
+			<hr>
+			<hr id="base-hr">
 			<div class="btn-group">
 				<button value="cancel">Cancel</button>
 				<button value="confirm">Confirm</button>
@@ -162,6 +162,14 @@ export class Dialog extends HTMLElement {
 		`;
 	}
 
+	set header (header) {
+		this.shadowElement.querySelector("#header").innerText = header;
+	}
+
+	append (element) {
+		this.form.insertBefore(element, this.shadowElement.querySelector("#base-hr"));
+	}
+	
 	set callback (callback) {
 		this.dialog.addEventListener("close", async () => {
 			await callback(this.dialog.returnValue, new FormData(this.form));
diff --git a/scripts/utils.js b/scripts/utils.js
index 61c053e..b50ba4c 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -112,10 +112,12 @@ export async function requestAPI (path, method, body = null) {
 			"Content-Type": "application/x-www-form-urlencoded"
 		}
 	}
-	if(method === "POST") {
-		content.body = prms.toString();
+	if (method === "POST") {
 		content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
 	}
+	if (body) {
+		content.body = prms.toString();
+	}
 
 	let response = await request(`${API}${path}`, content);
 	return response;