add create instance form dialog
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
parent
26dc801fe4
commit
da9dab4443
@ -20,7 +20,7 @@
|
||||
<div id="instance-container" class="center-div">
|
||||
</div>
|
||||
<div class="center-div" style="text-align: center;">
|
||||
<img id="disk-add" src="images/actions/instance/add-instance.svg" class="clickable" alt="Create New Instance" title="Create New Instance">
|
||||
<img id="instance-add" src="images/actions/instance/add-instance.svg" class="clickable" alt="Create New Instance" title="Create New Instance">
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@ -63,6 +63,8 @@ function addResourceLine (fieldset, iconHref, labelText, inputAttr, unitText=nul
|
||||
input.setAttribute(k, inputAttr[k])
|
||||
}
|
||||
input.id = labelText;
|
||||
input.name = labelText;
|
||||
input.required = true;
|
||||
field.append(input);
|
||||
|
||||
if (unitText) {
|
||||
@ -205,7 +207,7 @@ async function handleDiskAttach () {
|
||||
let diskImage = config.data[this.dataset.disk];
|
||||
|
||||
dialog.header = `Attach ${diskImage}`;
|
||||
dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0"></input>`;
|
||||
dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>`;
|
||||
|
||||
dialog.callback = async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
@ -286,7 +288,7 @@ async function handleDiskMove () {
|
||||
|
||||
dialog.formBody = `
|
||||
${select}
|
||||
<label for="delete-check">Delete Source</label><input name="delete-check" id="delete-check" type="checkbox" checked>
|
||||
<label for="delete-check">Delete Source</label><input name="delete-check" id="delete-check" type="checkbox" checked required>
|
||||
`;
|
||||
|
||||
dialog.callback = async (result, form) => {
|
||||
@ -355,7 +357,7 @@ async function handleDiskAdd () {
|
||||
let dialog = document.createElement("dialog-form");
|
||||
document.body.append(dialog);
|
||||
|
||||
dialog.header = `Create A New Disk`;
|
||||
dialog.header = "Create New Disk";
|
||||
|
||||
let options = "";
|
||||
storage.data.forEach((element) => {
|
||||
@ -363,12 +365,12 @@ async function handleDiskAdd () {
|
||||
options += `<option value="${element.storage}">${element.storage}</option>"`;
|
||||
}
|
||||
});
|
||||
let select = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select">${options}</select>`;
|
||||
let select = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${options}</select>`;
|
||||
|
||||
dialog.formBody = `
|
||||
<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0"></input>
|
||||
<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>
|
||||
${select}
|
||||
<label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" value="0"></input>
|
||||
<label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" value="0" required></input>
|
||||
`;
|
||||
|
||||
dialog.callback = async (result, form) => {
|
||||
@ -420,12 +422,12 @@ async function handleCDAdd () {
|
||||
storageOptions += `<option value="${element.storage}">${element.storage}</option>"`;
|
||||
}
|
||||
});
|
||||
let storageSelect = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select">${storageOptions}</select>`;
|
||||
let storageSelect = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${storageOptions}</select>`;
|
||||
|
||||
dialog.formBody = `
|
||||
<label for="device">IDE</label><input name="device" id="device" type="number" min="0" max="3" value="0"></input>
|
||||
<label for="device">IDE</label><input name="device" id="device" type="number" min="0" max="3" value="0" required></input>
|
||||
${storageSelect}
|
||||
<label for="iso-select">Image</label><select name="iso-select" id="iso-select"></select>
|
||||
<label for="iso-select">Image</label><select name="iso-select" id="iso-select" required></select>
|
||||
`;
|
||||
|
||||
dialog.shadowRoot.querySelector("#storage-select").selectedIndex = -1;
|
||||
|
||||
@ -14,7 +14,7 @@ export class Dialog extends HTMLElement {
|
||||
</form>
|
||||
<hr>
|
||||
<div class="btn-group">
|
||||
<button value="cancel" form="form" class="active">CANCEL</button>
|
||||
<button value="cancel" form="form" class="active" formnovalidate>CANCEL</button>
|
||||
<button value="confirm" form="form">CONFIRM</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import {requestPVE, goToPage, deleteAllCookies} from "./utils.js";
|
||||
import { Dialog } from "./dialog.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
@ -15,6 +16,9 @@ async function init () {
|
||||
deleteAllCookies();
|
||||
goToPage("login.html");
|
||||
});
|
||||
|
||||
let addInstanceBtn = document.querySelector("#instance-add");
|
||||
addInstanceBtn.addEventListener("click", handleInstanceAdd);
|
||||
}
|
||||
|
||||
async function populateInstances () {
|
||||
@ -47,3 +51,45 @@ async function populateInstances () {
|
||||
instanceContainer.append(newInstance);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInstanceAdd () {
|
||||
let dialog = document.createElement("dialog-form");
|
||||
document.body.append(dialog);
|
||||
|
||||
dialog.header = "Create New Instance";
|
||||
|
||||
dialog.formBody = `
|
||||
<label for="type">Instance Type</label>
|
||||
<select name="type" id="type" required>
|
||||
<option value="lxc">Container</option>
|
||||
<option value="qemu">Virtual Machine</option>
|
||||
</select>
|
||||
<label for="cpu">Cores</label>
|
||||
<input name="cpu" id="cpu" type="number" min="1" max="8192" required></input>
|
||||
<label for="ram">Memory</label>
|
||||
<input name="ram" id="ram" type="number" min="16", step="1" required></input>
|
||||
<label for="swap" disabled>Swap</label>
|
||||
<input name="swap" id="swap" type="number" min="0" step="1" required disabled></input>
|
||||
`;
|
||||
|
||||
let typeSelect = dialog.shadowRoot.querySelector("#type");
|
||||
typeSelect.selectedIndex = -1;
|
||||
typeSelect.addEventListener("change", () => {
|
||||
if(typeSelect.value === "qemu") {
|
||||
dialog.shadowRoot.querySelector(`label[for="swap"]`).disabled = true;
|
||||
dialog.shadowRoot.querySelector("#swap").disabled = true;
|
||||
}
|
||||
else {
|
||||
dialog.shadowRoot.querySelector(`label[for="swap"]`).disabled = false;
|
||||
dialog.shadowRoot.querySelector("#swap").disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
dialog.callback = async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
dialog.show();
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user