From 42a4778de8ddf17d98768c4a8322d5a22f5020c7 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Tue, 22 Aug 2023 21:23:14 +0000
Subject: [PATCH] fix bugs with draggable container value, fix bugs with
 draggable item value after drop, fix bugs with boot entry details, improve
 addBootLine deleteBootLine updateBootLine

---
 scripts/config.js    | 38 ++++++++++++++++++++++++++------------
 scripts/draggable.js | 14 +++++++++-----
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/scripts/config.js b/scripts/config.js
index be9a26a..0380f3f 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -12,7 +12,6 @@ let node;
 let type;
 let vmid;
 let config;
-const bootEntries = {};
 
 async function init () {
 	setTitleAndHeader();
@@ -267,7 +266,7 @@ async function handleDiskAttach () {
 			}
 			await getConfig();
 			populateDisk();
-			addBootLine("disabled", { id: disk, prefix, value: config.data[disk] });
+			addBootLine("disabled", { id: disk, prefix, value: disk, detail: config.data[disk] });
 		}
 	});
 }
@@ -290,7 +289,7 @@ async function handleDiskResize () {
 			await getConfig();
 			populateDisk();
 			const prefix = bootMetaData.eligiblePrefixes.find((pref) => disk.startsWith(pref));
-			updateBootLine(`boot-${disk}`, { id: disk, prefix, value: config.data[disk] });
+			updateBootLine(`boot-${disk}`, { id: disk, prefix, value: disk, detail: config.data[disk] });
 		}
 	});
 }
@@ -387,7 +386,7 @@ async function handleDiskAdd () {
 			}
 			await getConfig();
 			populateDisk();
-			addBootLine("disabled", { id: disk, prefix, value: config.data[disk] });
+			addBootLine("disabled", { id: disk, prefix, value: disk, detail: config.data[disk] });
 		}
 	});
 }
@@ -424,7 +423,7 @@ async function handleCDAdd () {
 			}
 			await getConfig();
 			populateDisk();
-			addBootLine("disabled", { id: disk, prefix: "ide", value: config.data[disk] });
+			addBootLine("disabled", { id: disk, prefix: "ide", value: disk, detail: config.data[disk] });
 		}
 	});
 
@@ -571,7 +570,8 @@ async function handleNetworkAdd () {
 			}
 			await getConfig();
 			populateNetworks();
-			addBootLine("disabled", { id: `net${netID}`, prefix: "net", value: config.data[`net${netID}`] });
+			const id = `net${netID}`;
+			addBootLine("disabled", { id, prefix: "net", value: id, detail: config.data[`net${netID}`] });
 		}
 	});
 }
@@ -733,13 +733,13 @@ async function populateBoot () {
 			const element = order[i];
 			const prefix = eligible.find((pref) => order[i].startsWith(pref));
 			const detail = config.data[element];
-			bootable[i] = { id: element, prefix, detail };
+			bootable[i] = { id: element, value: element, prefix, detail };
 		}
 		Object.keys(config.data).forEach((element) => {
 			const prefix = eligible.find((pref) => element.startsWith(pref));
 			const detail = config.data[element];
 			if (prefix && !order.includes(element)) {
-				bootable.disabled.push({ id: element, prefix, detail });
+				bootable.disabled.push({ id: element, value: element, prefix, detail });
 			}
 		});
 		Object.keys(bootable).sort();
@@ -775,16 +775,30 @@ function addBootLine (container, data, before = null) {
 		document.querySelector(`#${container}`).append(item);
 	}
 	item.container = container;
-	item.value = data.id;
-	bootEntries[item.id] = item;
+	item.value = data.value;
 }
 
 function deleteBootLine (id) {
-	bootEntries[id].parentElement.removeChild(bootEntries[id]);
+	let enabled = document.querySelector("#enabled");
+	let disabled = document.querySelector("#disabled");
+	if (enabled.getItemByID(id)) {
+		enabled.deleteItemByID(id);
+	}
+	if (disabled.getItemByID(id)) {
+		disabled.deleteItemByID(id);
+	}
 }
 
 function updateBootLine (id, newData) {
-	const element = bootEntries[id];
+	let enabled = document.querySelector("#enabled");
+	let disabled = document.querySelector("#disabled");
+	let element = null;
+	if (enabled.getItemByID(id)) {
+		element = enabled.getItemByID(id);
+	}
+	if (disabled.getItemByID(id)) {
+		element = disabled.getItemByID(id)
+	}
 	if (element) {
 		const container = element.container;
 		const before = element.nextSibling;
diff --git a/scripts/draggable.js b/scripts/draggable.js
index ebebd9c..96f51eb 100644
--- a/scripts/draggable.js
+++ b/scripts/draggable.js
@@ -29,6 +29,10 @@ class DraggableContainer extends HTMLElement {
 		this.content.insertBefore(newNode, referenceNode);
 	}
 
+	getItemByID (nodeid) {
+		return this.content.querySelector(`#${nodeid}`);
+	}
+
 	deleteItemByID (nodeid) {
 		const node = this.content.querySelector(`#${nodeid}`);
 		if (node) {
@@ -117,14 +121,14 @@ class DraggableItem extends HTMLElement {
 				event.target.borderTop = false;
 			}
 			if (event.target.classList.contains("drop-target")) {
-				const data = JSON.parse(event.dataTransfer.getData("application/json"));
+				const transfer = JSON.parse(event.dataTransfer.getData("application/json"));
 				const item = document.createElement("draggable-item");
-				item.data = data.data;
-				item.innerHTML = data.content;
+				item.data = transfer.data;
+				item.innerHTML = transfer.content;
 				item.draggable = true;
 				item.classList.add("drop-target");
-				item.id = `boot-${data.id}`;
-				item.value = data.value;
+				item.id = `boot-${transfer.data.id}`;
+				item.value = transfer.data.value;
 				event.target.parentElement.insertBefore(item, event.target);
 			}
 			this.content.attributeStyleMap.clear();