From 37839d4117770b04b0f99453266d5acf25a472ce Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Mon, 30 Jan 2023 22:21:05 +0000 Subject: [PATCH] add dialog confirm, add resize handler Signed-off-by: Arthur Lu --- config.html | 3 +- css/dialog.css | 18 +++++++++ scripts/config.js | 91 ++++++++++++++++++++++++++++++++++++--------- scripts/elements.js | 23 ++++++------ 4 files changed, 105 insertions(+), 30 deletions(-) create mode 100644 css/dialog.css diff --git a/config.html b/config.html index 4812375..30e28f8 100644 --- a/config.html +++ b/config.html @@ -25,8 +25,7 @@
- - +
diff --git a/css/dialog.css b/css/dialog.css new file mode 100644 index 0000000..55105ff --- /dev/null +++ b/css/dialog.css @@ -0,0 +1,18 @@ +dialog { + background-color: #000000; + border: 1px solid white; + border-radius: 5px; +} + +dialog::backdrop { + background: rgba(0, 0, 0, 0.5); +} + +dialog .btn-group { + margin-top: 10px; +} + +h1, h2, h3, p { + margin: 10px; + text-align: center; +} \ No newline at end of file diff --git a/scripts/config.js b/scripts/config.js index 286d8ef..894c862 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -1,4 +1,5 @@ import {requestPVE, requestAPI, goToPage, getURIData, reload, resources} from "./utils.js"; +import { Dialog } from "./elements.js"; window.addEventListener("DOMContentLoaded", init); @@ -116,24 +117,36 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) { diskMetaData.actionBarOrder.forEach((element) => { let action = document.createElement("img"); action.classList.add("clickable"); - if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")){ + if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")){ // attach action.src = "images/actions/attach.svg"; action.title = "Attach Disk"; } - else if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")){ + else if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")){ // detach action.src = "images/actions/detach.svg"; action.title = "Detach Disk"; action.addEventListener("click", handleDiskDetach); } else if (element === "delete_detach_attach"){ - let active = diskMetaData[type][busPrefix].actions.includes("delete") ? "active" : "inactive"; + let active = diskMetaData[type][busPrefix].actions.includes("delete") ? "active" : "inactive"; // delete action.src = `images/actions/delete-${active}.svg`; action.title = `Delete Disk`; } else { - let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; + let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize action.src = `images/actions/${element}-${active}.svg`; action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`; + if (element === "config") { + + } + else if (element === "move") { + + } + else if (element === "resize") { + action.addEventListener("click", handleDiskResize); + } + else { + + } } action.id = `${busPrefix}${device}` actionDiv.append(action); @@ -142,20 +155,64 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) { } async function handleDiskDetach () { - let body = { - node: node, - type: type, - vmid: vmid, - action: `delete=${this.id}` + let dialog = document.createElement("dialog-form"); + document.body.append(dialog); + dialog.body = ` +

Detach ${this.id}

+
+ `; + dialog.callback = async (result, form) => { + if(result === "confirm") { + let body = { + node: node, + type: type, + vmid: vmid, + action: `delete=${this.id}` + }; + let result = await requestAPI("/disk/detach", "POST", body); + if (result.status === 200) { + await getConfig(); + populateDisk(); + } + else{ + console.error(result); + } + } + document.querySelector("dialog-form").remove(); }; - let result = await requestAPI("/disk/detach", "POST", body); - if (result.status === 200) { - await getConfig(); - populateDisk(); - } - else{ - console.error(result); - } + dialog.show(); +} + +async function handleDiskResize () { + let dialog = document.createElement("dialog-form"); + document.body.append(dialog); + dialog.body = ` +

Resize ${this.id}

+
+ + +
+ `; + dialog.callback = async (result, form) => { + if(result === "confirm") { + let body = { + node: node, + type: type, + vmid: vmid, + action: `disk=${this.id}&size=+${form.get("size-increment")}G` + } + let result = await requestAPI("/disk/resize", "POST", body); + if (result.status === 200) { + await getConfig(); + populateDisk(); + } + else{ + console.error(result); + } + } + document.querySelector("dialog-form").remove(); + }; + dialog.show(); } function getOrderedUsed(disks){ diff --git a/scripts/elements.js b/scripts/elements.js index 9234109..ded8414 100644 --- a/scripts/elements.js +++ b/scripts/elements.js @@ -2,7 +2,7 @@ import {requestPVE, goToPage, instances} from "./utils.js"; const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay)); -class Instance extends HTMLElement { +export class Instance extends HTMLElement { constructor () { super(); let shadowRoot = this.attachShadow({mode: "open"}); @@ -131,16 +131,17 @@ class Instance extends HTMLElement { } } -class Dialog extends HTMLElement { +export class Dialog extends HTMLElement { constructor () { super(); let shadowRoot = this.attachShadow({mode: "open"}); shadowRoot.innerHTML = ` + -
+
`; @@ -150,20 +151,20 @@ class Dialog extends HTMLElement { } set body (body) { - this.form.innerHTML = body + ` -
- - -
+ this.form.innerHTML = ` + ${body} +
+ + +
`; } set callback (callback) { - this.dialog.addEventListener("close", () => { - callback(this.dialog.returnValue, new FormData(this.form)); + this.dialog.addEventListener("close", async () => { + await callback(this.dialog.returnValue, new FormData(this.form)); }); } - show () { this.dialog.showModal(); }