From ee661b3dca9eeb9e7e0f3351a40ecdbfbfd7ebc0 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sat, 3 Jun 2023 00:25:57 +0000 Subject: [PATCH] add buttons to add and delete network interfaces and pcie devices Signed-off-by: Arthur Lu --- config.html | 6 +++ images/actions/device/add.svg | 1 + images/actions/device/config.svg | 17 ++++++++- images/actions/network/add.svg | 1 + scripts/config.js | 64 +++++++++++++++++++++++--------- 5 files changed, 71 insertions(+), 18 deletions(-) create mode 100644 images/actions/device/add.svg create mode 100644 images/actions/network/add.svg diff --git a/config.html b/config.html index 924030f..8b0e21e 100644 --- a/config.html +++ b/config.html @@ -41,10 +41,16 @@
Network Interfaces
+
+ Add New Network Interface +
PCIe Devices
+
+ Add New PCIe Device +
diff --git a/images/actions/device/add.svg b/images/actions/device/add.svg new file mode 100644 index 0000000..f2c3a4e --- /dev/null +++ b/images/actions/device/add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/device/config.svg b/images/actions/device/config.svg index 7cda8f7..973d70a 100644 --- a/images/actions/device/config.svg +++ b/images/actions/device/config.svg @@ -1 +1,16 @@ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/images/actions/network/add.svg b/images/actions/network/add.svg new file mode 100644 index 0000000..f2c3a4e --- /dev/null +++ b/images/actions/network/add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/config.js b/scripts/config.js index 890f56f..5d44d3b 100644 --- a/scripts/config.js +++ b/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"); - action.src = `images/actions/network/config.svg`; - action.title = "Config Network"; - action.addEventListener("click", handleNetworkConfig); - action.dataset.network = netID; - action.dataset.netvals = netDetails; - actionDiv.appendChild(action); + + let configBtn = document.createElement("img"); + configBtn.classList.add("clickable"); + configBtn.src = `images/actions/network/config.svg`; + configBtn.title = "Config Interface"; + configBtn.addEventListener("click", handleNetworkConfig); + configBtn.dataset.network = netID; + 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"); - action.src = `images/actions/device/config.svg`; - action.title = "Config Device"; - action.addEventListener("click", handleDeviceConfig); - action.dataset.device = deviceID; - action.dataset.values = deviceDetails; - actionDiv.appendChild(action); + + let configBtn = document.createElement("img"); + configBtn.classList.add("clickable"); + configBtn.src = `images/actions/device/config.svg`; + configBtn.title = "Config Device"; + configBtn.addEventListener("click", handleDeviceConfig); + configBtn.dataset.device = deviceID; + 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 = {