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}
+Resize ${this.id}
+