improve dialog box custom element

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

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;

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));

scripts/utils.js

@@ -113,9 +113,11 @@ export async function requestAPI (path, method, body = null) {
 		}
 	}
 	if (method === "POST") {
-		content.body = prms.toString();
 		content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
 	}
+	if (body) {
+		content.body = prms.toString();
+	}
 
 	let response = await request(`${API}${path}`, content);
 	return response;