group action icons by type

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

config.html

@@ -22,8 +22,8 @@
 					<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
 					<hr>
 					<div class="btn-group">
-						<img id="disk-add" src="images/actions/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
-						<img id="cd-add" src="images/actions/add-cd.svg" class="clickable none" alt="Add New CDROM" title="Add New CDROM">
+						<img id="disk-add" src="images/actions/disk/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
+						<img id="cd-add" src="images/actions/disk/add-cd.svg" class="clickable none" alt="Add New CDROM" title="Add New CDROM">
 					</div>
 				</fieldset>
 				<fieldset class="fieldset-no-border">

index.html

@@ -16,6 +16,8 @@
 				<button id="logout">LOGOUT</button>
 			</nav>
 		</header>
-		<main><div id="instance-container" class="center-div"></div></main>
+		<main>
+			<div id="instance-container" class="center-div"></div>
+		</main>
 	</body>
 </html>

scripts/config.js

@@ -133,18 +133,24 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
 		let action = document.createElement("img");
 		action.classList.add("clickable");
 		if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")){ // attach
-			action.src = "images/actions/attach.svg";
+			action.src = "images/actions/disk/attach.svg";
 			action.title = "Attach Disk";
 			action.addEventListener("click", handleDiskAttach);
 		}
 		else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")){ // detach
-			action.src = "images/actions/detach.svg";
+			action.src = "images/actions/disk/detach.svg";
 			action.title = "Detach Disk";
 			action.addEventListener("click", handleDiskDetach);
 		}
+		else if (element === "delete") {
+			let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
+			action.src = `images/actions/delete-${active}.svg`;
+			action.title = "Delete Disk";
+			action.addEventListener("click", handleDiskDelete);
+		}
 		else {
 			let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
-			action.src = `images/actions/${element}-${active}.svg`;
+			action.src = `images/actions/disk/${element}-${active}.svg`;
 			action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`;
 			if (active === "active") {
 				if (element === "move") {
@@ -153,9 +159,6 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
 				else if (element === "resize") {
 					action.addEventListener("click", handleDiskResize);
 				}
-				else if (element === "delete") {
-					action.addEventListener("click", handleDiskDelete);
-				}
 			}
 		}
 		action.dataset.disk = diskID;

scripts/utils.js

@@ -34,31 +34,31 @@ export const resources = {
 
 export const instances = {
 	running: {
-		powerButtonSrc: "images/actions/stop.svg",
+		powerButtonSrc: "images/actions/instance/stop.svg",
 		powerButtonAlt: "Shutdown Instance",
-		configButtonSrc: "images/actions/config-inactive.svg",
+		configButtonSrc: "images/actions/instance/config-inactive.svg",
 		configButtonAlt: "Change Configuration (Inactive)",
-		consoleButtonSrc: "images/actions/console-active.svg",
+		consoleButtonSrc: "images/actions/instance/console-active.svg",
 		consoleButtonAlt: "Open Console",
 		deleteButtonSrc: "images/actions/delete-inactive.svg",
 		deleteButtonAlt: "Delete Instance (Inactive)"
 	},
 	stopped: {
-		powerButtonSrc: "images/actions/start.svg",
+		powerButtonSrc: "images/actions/instance/start.svg",
 		powerButtonAlt: "Start Instance",
-		configButtonSrc: "images/actions/config-active.svg",
+		configButtonSrc: "images/actions/instance/config-active.svg",
 		configButtonAlt: "Change Configuration",
-		consoleButtonSrc: "images/actions/console-inactive.svg",
+		consoleButtonSrc: "images/actions/instance/console-inactive.svg",
 		consoleButtonAlt: "Open Console (Inactive)",
 		deleteButtonSrc: "images/actions/delete-active.svg",
 		deleteButtonAlt: "Delete Instance"
 	},
 	loading: {
-		powerButtonSrc: "images/actions/loading.svg",
+		powerButtonSrc: "images/actions/instance/loading.svg",
 		powerButtonAlt: "Loading Instance",
-		configButtonSrc: "images/actions/config-inactive.svg",
+		configButtonSrc: "images/actions/instance/config-inactive.svg",
 		configButtonAlt: "Change Configuration (Inactive)",
-		consoleButtonSrc: "images/actions/console-inactive.svg",
+		consoleButtonSrc: "images/actions/instance/console-inactive.svg",
 		consoleButtonAlt: "Open Console (Inactive)",
 		deleteButtonSrc: "images/actions/delete-inactive.svg",
 		deleteButtonAlt: "Delete Instance (Inactive)"