improve disk dialog creation

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-02-14 21:03:53 +00:00
parent 134431d88c
commit a2b37f5fe9
2 changed files with 22 additions and 55 deletions

View File

@ -91,6 +91,7 @@ function populateDisk () {
addDiskLine("disks", prefix, busName, element, disk); addDiskLine("disks", prefix, busName, element, disk);
}); });
} }
document.querySelector("#disk-add").addEventListener("click", handleDiskAdd);
} }
function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) { function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
@ -161,14 +162,7 @@ async function handleDiskDetach () {
document.body.append(dialog); document.body.append(dialog);
dialog.header = `Detach ${this.dataset.disk}`; dialog.header = `Detach ${this.dataset.disk}`;
dialog.formBody = `<p>Are you sure you want to detach disk</p><p>${this.dataset.disk}</p>`;
let confirm = document.createElement("p");
confirm.innerText = "Are you sure you want to detach disk"
dialog.append(confirm)
let idtext = document.createElement("p");
idtext.innerText = this.dataset.disk;
dialog.append(idtext);
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -199,31 +193,19 @@ async function handleDiskAttach () {
let diskImage = config.data[this.dataset.disk]; let diskImage = config.data[this.dataset.disk];
dialog.header = `Attach ${diskImage}`; dialog.header = `Attach ${diskImage}`;
dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="5" value="0"></input>`;
let label = document.createElement("label");
label.for = "device";
label.innerText = type === "qemu" ? "SATA" : "MP";
dialog.append(label);
let input = document.createElement("input");
input.name = "device";
input.id = "device";
input.type = "number";
input.min = 0;
input.max = 5;
input.value = 0;
dialog.append(input);
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
let device = form.get("device");
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg"; document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg";
let action = {}; let action = {};
let bus = type === "qemu" ? "sata" : "mp"; let bus = type === "qemu" ? "sata" : "mp";
let details = diskImage; let details = diskImage;
if (type === "lxc") { if (type === "lxc") {
details += `,mp=/mp${input.value}/`; details += `,mp=/mp${device}/`;
} }
action[`${bus}${input.value}`] = details; action[`${bus}${device}`] = details;
let body = { let body = {
node: node, node: node,
type: type, type: type,
@ -247,21 +229,8 @@ async function handleDiskResize () {
let dialog = document.createElement("dialog-form"); let dialog = document.createElement("dialog-form");
document.body.append(dialog); document.body.append(dialog);
dialog.header = `Resize ${this.dataset.disk}`; dialog.header = `Resize ${this.dataset.disk}`;
dialog.formBody = `<label for="size-increment">Size Increment (GiB)</label><input name="size-increment" id="size-increment" type="number" min="0" max="131072" value="0"></input>`;
let label = document.createElement("label");
label.for = "size-increment";
label.innerText = "Size Increment (GiB)";
dialog.append(label);
let input = document.createElement("input");
input.name = "size-increment";
input.id = "size-increment";
input.type = "number";
input.min = 0;
input.max = 131072;
input.value = 0;
dialog.append(input);
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -296,7 +265,7 @@ async function handleDiskMove () {
let storageLabel = document.createElement("label"); let storageLabel = document.createElement("label");
storageLabel.for = "storage-select"; storageLabel.for = "storage-select";
storageLabel.innerText = "Storage"; storageLabel.innerText = "Storage";
dialog.append(storageLabel); dialog.formBodyAppend(storageLabel);
let storageSelect = document.createElement("select"); let storageSelect = document.createElement("select");
storageSelect.name = "storage-select"; storageSelect.name = "storage-select";
@ -306,20 +275,19 @@ async function handleDiskMove () {
storageSelect.add(new Option(element.storage)); storageSelect.add(new Option(element.storage));
} }
}); });
dialog.formBodyAppend(storageSelect);
dialog.append(storageSelect);
let deleteLabel = document.createElement("label"); let deleteLabel = document.createElement("label");
deleteLabel.for = "delete-check"; deleteLabel.for = "delete-check";
deleteLabel.innerText = "Delete Source"; deleteLabel.innerText = "Delete Source";
dialog.append(deleteLabel); dialog.formBodyAppend(deleteLabel);
let deleteCheckbox = document.createElement("input"); let deleteCheckbox = document.createElement("input");
deleteCheckbox.type = "checkbox"; deleteCheckbox.type = "checkbox";
deleteCheckbox.name = "delete-check" deleteCheckbox.name = "delete-check"
deleteCheckbox.id = "delete-check" deleteCheckbox.id = "delete-check"
deleteCheckbox.checked = true; deleteCheckbox.checked = true;
dialog.append(deleteCheckbox); dialog.formBodyAppend(deleteCheckbox);
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -356,16 +324,7 @@ async function handleDiskDelete () {
document.body.append(dialog); document.body.append(dialog);
dialog.header = `Delete ${this.dataset.disk}`; dialog.header = `Delete ${this.dataset.disk}`;
dialog.formBody = `<p style="color: #FF0000;">Are you sure you want to <strong>delete</strong> disk</p><p style="color: #FF0000;">${this.dataset.disk}</p>`;
let confirm = document.createElement("p");
confirm.innerHTML = "Are you sure you want to <strong>delete</strong> disk"
confirm.style.color = "#FF0000";
dialog.append(confirm)
let idtext = document.createElement("p");
idtext.innerText = this.dataset.disk;
idtext.style.color = "#FF0000";
dialog.append(idtext);
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -389,6 +348,10 @@ async function handleDiskDelete () {
dialog.show(); dialog.show();
} }
async function handleDiskAdd () {
}
function getOrderedUsed(disks){ function getOrderedUsed(disks){
let ordered_keys = Object.keys(disks).sort((a,b) => {parseInt(a) - parseInt(b)}); // ordered integer list let ordered_keys = Object.keys(disks).sort((a,b) => {parseInt(a) - parseInt(b)}); // ordered integer list
return ordered_keys; return ordered_keys;

View File

@ -167,7 +167,11 @@ export class Dialog extends HTMLElement {
this.shadowElement.querySelector("#prompt").innerText = header; this.shadowElement.querySelector("#prompt").innerText = header;
} }
append (element) { set formBody (formBody) {
this.form.innerHTML = formBody;
}
formBodyAppend (element) {
this.form.append(element); this.form.append(element);
} }