tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve disk dialog creation

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-02-14 21:03:53 +00:00
parent cccf01258d
commit 5c83cacd45
2 changed files with 22 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
scripts/config.js
View File

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

6
scripts/elements.js
View File

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