add buttons to add and delete network interfaces and pcie devices

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-06-03 00:25:57 +00:00
parent 85dd99000d
commit ee661b3dca
5 changed files with 71 additions and 18 deletions

View File

@ -41,10 +41,16 @@
<fieldset class="w3-card w3-padding"> <fieldset class="w3-card w3-padding">
<span><legend>Network Interfaces</legend></span> <span><legend>Network Interfaces</legend></span>
<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div> <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>
<fieldset class="w3-card w3-padding none" id="devices-card"> <fieldset class="w3-card w3-padding none" id="devices-card">
<span><legend>PCIe Devices</legend></span> <span><legend>PCIe Devices</legend></span>
<div class="input-grid" id="devices" style="grid-template-columns: auto 1fr auto;"></div> <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> </fieldset>
<div class="w3-container w3-center" id="form-actions"> <div class="w3-container w3-center" id="form-actions">
<button class="w3-button w3-margin" id="exit" type="button">EXIT</button> <button class="w3-button w3-margin" id="exit" type="button">EXIT</button>

View File

@ -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>

After

Width:  |  Height:  |  Size: 383 B

View File

@ -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>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 383 B

View File

@ -468,14 +468,25 @@ function addNetworkLine(fieldset, prefix, netID, netDetails) {
field.append(netDesc); field.append(netDesc);
let actionDiv = document.createElement("div"); 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); field.append(actionDiv);
} }
@ -511,6 +522,10 @@ async function handleNetworkConfig() {
d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0]; d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0];
} }
async function handleNetworkDelete() {} //TODO
async function handleNetworkAdd() {} // TODO
function populateDevices() { function populateDevices() {
if (type === "qemu") { if (type === "qemu") {
document.querySelector("#devices-card").classList.remove("none"); document.querySelector("#devices-card").classList.remove("none");
@ -548,18 +563,33 @@ function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceData) {
field.append(deviceLabel); field.append(deviceLabel);
let actionDiv = document.createElement("div"); 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); field.append(actionDiv);
} }
async function handleDeviceConfig() {} async function handleDeviceDelete() {} // TODO
async function handleDeviceConfig() {} // TODO
async function handleDeviceAdd() {} // TODO
async function handleFormExit() { async function handleFormExit() {
let body = { let body = {