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

add dialog confirm,

Browse Source 
add resize handler

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-01-30 22:21:05 +00:00
parent dbbb3ab09c
commit 37839d4117
4 changed files with 105 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
config.html
View File

@ -25,8 +25,7 @@
</fieldset>
<fieldset class="fieldset-no-border">
<div class="btn-group" id="form-actions">
<button id="cancel" type="button">CANCEL</button>
<button id="submit" type="button">SUBMIT</button>
<button id="cancel" type="button">Exit</button>
</div>
</fieldset>
</form>

18
css/dialog.css Normal file
View File

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

91
scripts/config.js
View File

@ -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 = `
<p>Detach ${this.id}</p>
<hr>
`;
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 = `
<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.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){

23
scripts/elements.js
View File

@ -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 = `
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/form.css" type="text/css">
<link rel="stylesheet" href="css/dialog.css" type="text/css">
<dialog>
<form method="dialog"></form>
<form method="dialog" class="imput-grid" style="auto 1fr"></form>
</dialog>
`;
@ -150,20 +151,20 @@ class Dialog extends HTMLElement {
}
set body (body) {
this.form.innerHTML = body + `
<div class="btn-group">
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</div>
this.form.innerHTML = `
${body}
<div class="btn-group">
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</div>
`;
}
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();
}