add buttons to add and delete network interfaces and pcie devices

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

config.html

@@ -41,10 +41,16 @@
 					<fieldset class="w3-card w3-padding">
 						<span><legend>Network Interfaces</legend></span>
 						<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
+						<div class="w3-container w3-center">
+							<img id="network-add" src="images/actions/network/add.svg" class="clickable" alt="Add New Network Interface" title="Add New Network Interface">
+						</div>
 					</fieldset>
 					<fieldset class="w3-card w3-padding none" id="devices-card">
 						<span><legend>PCIe Devices</legend></span>
 						<div class="input-grid" id="devices" style="grid-template-columns: auto 1fr auto;"></div>
+						<div class="w3-container w3-center">
+							<img id="device-add" src="images/actions/device/add.svg" class="clickable" alt="Add New PCIe Device" title="Add New PCIe Device">
+						</div>
 					</fieldset>
 					<div class="w3-container w3-center" id="form-actions">
 						<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>

images/actions/device/add.svg

@@ -0,0 +1 @@
+<svg width="800" height="800" viewBox="4 4 20 20" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g id="prefix__prefix__Complete"><path d="M12 19V5m-7 7h14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" data-name="add" id="prefix__prefix__add-2"/></g></svg>

images/actions/device/config.svg

@@ -1 +1,16 @@
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="currentColor"/></svg>
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034">
+	<style>
+		:root {
+			color: #fff
+		}
+
+		@media (prefers-color-scheme:light) {
+			:root {
+				color: #000
+			}
+		}
+	</style>
+	<path
+		d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z"
+		fill="currentColor" />
+</svg>

images/actions/network/add.svg

@@ -0,0 +1 @@
+<svg width="800" height="800" viewBox="4 4 20 20" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g id="prefix__prefix__Complete"><path d="M12 19V5m-7 7h14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" data-name="add" id="prefix__prefix__add-2"/></g></svg>

scripts/config.js

@@ -468,14 +468,25 @@ function addNetworkLine(fieldset, prefix, netID, netDetails) {
 	field.append(netDesc);
 
 	let actionDiv = document.createElement("div");
-	let action = document.createElement("img");
+
-	action.classList.add("clickable");
+	let configBtn  = document.createElement("img");
-	action.src = `images/actions/network/config.svg`;
+	configBtn.classList.add("clickable");
-	action.title = "Config Network";
+	configBtn.src = `images/actions/network/config.svg`;
-	action.addEventListener("click", handleNetworkConfig);
+	configBtn.title = "Config Interface";
-	action.dataset.network = netID;
+	configBtn.addEventListener("click", handleNetworkConfig);
-	action.dataset.netvals = netDetails;
+	configBtn.dataset.network = netID;
-	actionDiv.appendChild(action);
+	configBtn.dataset.netvals = netDetails;
+	actionDiv.appendChild(configBtn);
+
+	let deleteBtn = document.createElement("img");
+	deleteBtn.classList.add("clickable");
+	deleteBtn.src = `images/actions/delete-active.svg`;
+	deleteBtn.title = "Delete Interface";
+	deleteBtn.addEventListener("click", handleNetworkDelete);
+	deleteBtn.dataset.network = netID;
+	deleteBtn.dataset.netvals = netDetails;
+	actionDiv.appendChild(deleteBtn);
+
 	field.append(actionDiv);
 }
 
@@ -511,6 +522,10 @@ async function handleNetworkConfig() {
 	d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0];
 }
 
+async function handleNetworkDelete() {} //TODO
+
+async function handleNetworkAdd() {} // TODO
+
 function populateDevices() {
 	if (type === "qemu") {
 		document.querySelector("#devices-card").classList.remove("none");
@@ -548,18 +563,33 @@ function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceData) {
 	field.append(deviceLabel);
 
 	let actionDiv = document.createElement("div");
-	let action = document.createElement("img");
+
-	action.classList.add("clickable");
+	let configBtn = document.createElement("img");
-	action.src = `images/actions/device/config.svg`;
+	configBtn.classList.add("clickable");
-	action.title = "Config Device";
+	configBtn.src = `images/actions/device/config.svg`;
-	action.addEventListener("click", handleDeviceConfig);
+	configBtn.title = "Config Device";
-	action.dataset.device = deviceID;
+	configBtn.addEventListener("click", handleDeviceConfig);
-	action.dataset.values = deviceDetails;
+	configBtn.dataset.device = deviceID;
-	actionDiv.appendChild(action);
+	configBtn.dataset.values = deviceDetails;
+	actionDiv.appendChild(configBtn);
+
+	let deleteBtn = document.createElement("img");
+	deleteBtn.classList.add("clickable");
+	deleteBtn.src = `images/actions/delete-active.svg`;
+	deleteBtn.title = "Delete Device";
+	deleteBtn.addEventListener("click", handleDeviceDelete);
+	configBtn.dataset.device = deviceID;
+	configBtn.dataset.values = deviceDetails;
+	actionDiv.appendChild(deleteBtn);
+
 	field.append(actionDiv);
 }
 
-async function handleDeviceConfig() {}
+async function handleDeviceDelete() {} // TODO
+
+async function handleDeviceConfig() {} // TODO
+
+async function handleDeviceAdd() {} // TODO
 
 async function handleFormExit() {
 	let body = {