improve dialog box custom element

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-02-01 23:42:30 +00:00
parent 1769babac1
commit 2d061a6650
3 changed files with 43 additions and 16 deletions

View File

@ -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 = `
<p>Detach ${this.id}</p>
<hr>
`;
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 = `
<p>Resize ${this.id}</p>
<hr>
<label for="size-increment">Size Increment (GiB)</label>
<input name="size-increment" type="number" min="0" max="131072" value="0">
<hr>
`;
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;

View File

@ -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}
<p id="header"></p>
<hr>
<hr id="base-hr">
<div class="btn-group">
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
@ -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));

View File

@ -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;