From 1827d5c73e7a54c112bb4d456ac27a3364c45d27 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Sat, 19 Aug 2023 03:32:52 +0000
Subject: [PATCH] add drag icon to draggable items

---
 images/actions/drag.svg |  1 +
 scripts/config.js       | 13 ++++++++-----
 scripts/draggable.js    | 27 +++++++++++++++++++++------
 3 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 images/actions/drag.svg

diff --git a/images/actions/drag.svg b/images/actions/drag.svg
new file mode 100644
index 0000000..92e2077
--- /dev/null
+++ b/images/actions/drag.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M5 10h14m-5 9l-2 2-2-2m4-14l-2-2-2 2m-5 9h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/scripts/config.js b/scripts/config.js
index 34ad17e..be9a26a 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -732,14 +732,14 @@ async function populateBoot () {
 		for (let i = 0; i < order.length; i++) {
 			const element = order[i];
 			const prefix = eligible.find((pref) => order[i].startsWith(pref));
-			const value = config.data[element];
-			bootable[i] = { id: element, prefix, value };
+			const detail = config.data[element];
+			bootable[i] = { id: element, prefix, detail };
 		}
 		Object.keys(config.data).forEach((element) => {
 			const prefix = eligible.find((pref) => element.startsWith(pref));
-			const value = config.data[element];
+			const detail = config.data[element];
 			if (prefix && !order.includes(element)) {
-				bootable.disabled.push({ id: element, prefix, value });
+				bootable.disabled.push({ id: element, prefix, detail });
 			}
 		});
 		Object.keys(bootable).sort();
@@ -760,9 +760,10 @@ function addBootLine (container, data, before = null) {
 	const item = document.createElement("draggable-item");
 	item.data = data;
 	item.innerHTML = `
+		<img src="images/actions/drag.svg" id="drag">
 		<img src="${bootMetaData[data.prefix].icon}">
 		<p style="margin: 0px;">${data.id}</p>
-		<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.value}</p>
+		<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.detail}</p>
 	`;
 	item.draggable = true;
 	item.classList.add("drop-target");
@@ -774,6 +775,7 @@ function addBootLine (container, data, before = null) {
 		document.querySelector(`#${container}`).append(item);
 	}
 	item.container = container;
+	item.value = data.id;
 	bootEntries[item.id] = item;
 }
 
@@ -805,6 +807,7 @@ async function handleFormExit () {
 	}
 	else if (type === "qemu") {
 		body.proctype = document.querySelector("#proctype").value;
+		body.boot = document.querySelector("#enabled").value;
 	}
 	const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/resources`, "POST", body);
 	if (result.status === 200) {
diff --git a/scripts/draggable.js b/scripts/draggable.js
index 1a4295c..ebebd9c 100644
--- a/scripts/draggable.js
+++ b/scripts/draggable.js
@@ -39,6 +39,18 @@ class DraggableContainer extends HTMLElement {
 			return false;
 		}
 	}
+
+	set value (value) {}
+
+	get value () {
+		const value = [];
+		this.content.childNodes.forEach((element) => {
+			if (element.value) {
+				value.push(element.value);
+			}
+		});
+		return value;
+	}
 }
 
 class DraggableItem extends HTMLElement {
@@ -49,11 +61,14 @@ class DraggableItem extends HTMLElement {
 		this.shadowRoot.innerHTML = `
 			<style>
 				#wrapper {
-					grid-template-columns: auto 8ch 1fr;
+					grid-template-columns: auto auto 8ch 1fr;
 					display: grid;
 					column-gap: 10px;
 					align-items: center;
 				}
+				#drag {
+					cursor: move;
+				}
 				img {
 					height: 1em;
 					width: 1em;
@@ -67,8 +82,8 @@ class DraggableItem extends HTMLElement {
 		// add drag and drop listeners
 		this.addEventListener("dragstart", (event) => {
 			this.content.style.opacity = "0.5";
-			event.dataTransfer.setData("application/json", JSON.stringify(this.data));
-			event.dataTransfer.setData("text/html", this.content.innerHTML);
+			const data = { data: this.data, content: this.content.innerHTML, value: this.value };
+			event.dataTransfer.setData("application/json", JSON.stringify(data));
 			event.dataTransfer.effectAllowed = "move";
 		});
 		this.addEventListener("dragend", (event) => {
@@ -103,13 +118,13 @@ class DraggableItem extends HTMLElement {
 			}
 			if (event.target.classList.contains("drop-target")) {
 				const data = JSON.parse(event.dataTransfer.getData("application/json"));
-				const content = event.dataTransfer.getData("text/html");
 				const item = document.createElement("draggable-item");
-				item.data = data;
-				item.innerHTML = content;
+				item.data = data.data;
+				item.innerHTML = data.content;
 				item.draggable = true;
 				item.classList.add("drop-target");
 				item.id = `boot-${data.id}`;
+				item.value = data.value;
 				event.target.parentElement.insertBefore(item, event.target);
 			}
 			this.content.attributeStyleMap.clear();