diff --git a/scripts/config.js b/scripts/config.js index c76a7d4..eb11136 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -162,10 +162,13 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) { async function handleDiskDetach () { let dialog = document.createElement("dialog-form"); document.body.append(dialog); - dialog.body = ` -

Detach ${this.id}

-
- `; + + dialog.header = `Detach ${this.id}`; + + let confirm = document.createElement("p"); + confirm.innerText = `Are you sure you want to detach disk ${this.id}?` + dialog.append(confirm) + dialog.callback = async (result, form) => { if(result === "confirm") { let body = { @@ -191,13 +194,22 @@ async function handleDiskDetach () { async function handleDiskResize () { let dialog = document.createElement("dialog-form"); document.body.append(dialog); - dialog.body = ` -

Resize ${this.id}

-
- - -
- `; + + dialog.header = `Resize ${this.id}`; + + 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.type = "number"; + input.min = 0; + input.max = 131072; + input.value = 0; + dialog.append(input); + dialog.callback = async (result, form) => { if(result === "confirm") { let body = { @@ -220,6 +232,11 @@ async function handleDiskResize () { dialog.show(); } +async function handleDiskMove () { + let storage = await requestPVE(`/nodes/${node}/storage`, "GET", {format: 1, content: type === "qemu" ? "images" : "rootdir"}); + let dialog = createElement("dialog-form"); +} + function getOrderedUsed(disks){ let ordered_keys = Object.keys(disks).sort((a,b) => {parseInt(a) - parseInt(b)}); // ordered integer list return ordered_keys; diff --git a/scripts/elements.js b/scripts/elements.js index 7bba101..f798af5 100644 --- a/scripts/elements.js +++ b/scripts/elements.js @@ -150,11 +150,11 @@ export class Dialog extends HTMLElement { this.shadowElement = shadowRoot; this.dialog = shadowRoot.querySelector("dialog"); this.form = shadowRoot.querySelector("form"); - } - set body (body) { this.form.innerHTML = ` - ${body} + +
+
@@ -162,6 +162,14 @@ export class Dialog extends HTMLElement { `; } + set header (header) { + this.shadowElement.querySelector("#header").innerText = header; + } + + append (element) { + this.form.insertBefore(element, this.shadowElement.querySelector("#base-hr")); + } + set callback (callback) { this.dialog.addEventListener("close", async () => { await callback(this.dialog.returnValue, new FormData(this.form)); diff --git a/scripts/utils.js b/scripts/utils.js index 61c053e..b50ba4c 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -112,10 +112,12 @@ export async function requestAPI (path, method, body = null) { "Content-Type": "application/x-www-form-urlencoded" } } - if(method === "POST") { - content.body = prms.toString(); + if (method === "POST") { content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken"); } + if (body) { + content.body = prms.toString(); + } let response = await request(`${API}${path}`, content); return response;