add buttons to add and delete network interfaces and pcie devices
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
parent
2d0b8aada6
commit
7409398e11
@ -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>
|
||||
|
||||
1
images/actions/device/add.svg
Normal file
1
images/actions/device/add.svg
Normal 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 |
@ -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 |
1
images/actions/network/add.svg
Normal file
1
images/actions/network/add.svg
Normal 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 |
@ -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 = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user