From 4d66972aae9e7ca5d0c42aafcbc5db3549788b85 Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Thu, 2 Feb 2023 00:12:36 +0000
Subject: [PATCH] add diskMove handler creation, improve form css

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 css/form.css        |  2 +-
 scripts/config.js   | 35 +++++++++++++++++++++++++++++++----
 scripts/elements.js | 22 ++++++++++------------
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/css/form.css b/css/form.css
index b013f2d..41486e6 100644
--- a/css/form.css
+++ b/css/form.css
@@ -15,7 +15,7 @@ fieldset {
 	margin: 10px;
 }
 
-form > :first-child {
+form > fieldset:first-of-type {
 	margin-top: 0px;
 }
 
diff --git a/scripts/config.js b/scripts/config.js
index eb11136..0950a41 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -144,7 +144,7 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) {
 
 			}
 			else if (element === "move") {
-
+				action.addEventListener("click", handleDiskMove);
 			}
 			else if (element === "resize") {
 				action.addEventListener("click", handleDiskResize);
@@ -166,9 +166,13 @@ async function handleDiskDetach () {
 	dialog.header = `Detach ${this.id}`;
 
 	let confirm = document.createElement("p");
-	confirm.innerText = `Are you sure you want to detach disk ${this.id}?`
+	confirm.innerText = "Are you sure you want to detach disk"
 	dialog.append(confirm)
 
+	let idtext = document.createElement("p");
+	idtext.innerText = this.id;
+	dialog.append(idtext);
+
 	dialog.callback = async (result, form) => {
 		if(result === "confirm") {
 			let body = {
@@ -233,8 +237,31 @@ async function handleDiskResize () {
 }
 
 async function handleDiskMove () {
-	let storage = await requestPVE(`/nodes/${node}/storage`, "GET", {format: 1, content: type === "qemu" ? "images" : "rootdir"});
-	let dialog = createElement("dialog-form");
+	let content = type === "qemu" ? "images" : "rootdir"
+	let storage = await requestPVE(`/nodes/${node}/storage`, "GET", null);
+	let dialog = document.createElement("dialog-form");
+	document.body.append(dialog);
+
+	let label = document.createElement("label");
+	label.for = "storage-select";
+	label.innerText = "Storage";
+	dialog.append(label);
+
+	let storageSelect = document.createElement("select");
+	storageSelect.name = "storage-select";
+	storage.data.forEach((element) => {
+		if(element.content.includes(content)){
+			storageSelect.add(new Option(element.storage));
+		}
+	});
+
+	dialog.append(storageSelect);
+
+	dialog.callback = () => {
+		document.querySelector("dialog-form").remove();
+	};
+
+	dialog.show();
 }
 
 function getOrderedUsed(disks){
diff --git a/scripts/elements.js b/scripts/elements.js
index f798af5..3e4c9da 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -143,23 +143,21 @@ export class Dialog extends HTMLElement {
 		<link rel="stylesheet" href="css/form.css" type="text/css">
 		<link rel="stylesheet" href="css/dialog.css" type="text/css">
 		<dialog>
-			<form method="dialog" class="imput-grid" style="auto 1fr"></form>
+			<p id="header"></p>
+			<hr>
+			<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			</form>
+			<hr id="base-hr">
+			<div class="btn-group">
+				<button value="cancel" form="form">Cancel</button>
+				<button value="confirm" form="form">Confirm</button>
+			</div>
 		</dialog>
 		`;
 
 		this.shadowElement = shadowRoot;
 		this.dialog = shadowRoot.querySelector("dialog");
 		this.form = shadowRoot.querySelector("form");
-
-		this.form.innerHTML = `
-			<p id="header"></p>
-			<hr>
-			<hr id="base-hr">
-			<div class="btn-group">
-				<button value="cancel">Cancel</button>
-				<button value="confirm">Confirm</button>
-			</div>
-		`;
 	}
 
 	set header (header) {
@@ -167,7 +165,7 @@ export class Dialog extends HTMLElement {
 	}
 
 	append (element) {
-		this.form.insertBefore(element, this.shadowElement.querySelector("#base-hr"));
+		this.form.append(element);
 	}
 	
 	set callback (callback) {