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

add diskMove handler creation, improve form css

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-02-02 00:12:36 +00:00
parent 2d061a6650
commit 4d66972aae
3 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/form.css
View File

@ -15,7 +15,7 @@ fieldset {
margin: 10px;
}
form > :first-child {
form > fieldset:first-of-type {
margin-top: 0px;
}

35
scripts/config.js
View File

@ -144,7 +144,7 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) {
}
else if (element === "move") {
action.addEventListener("click", handleDiskMove);
}
else if (element === "resize") {
action.addEventListener("click", handleDiskResize);
@ -166,9 +166,13 @@ async function handleDiskDetach () {
dialog.header = `Detach ${this.id}`;
let confirm = document.createElement("p");
confirm.innerText = `Are you sure you want to detach disk ${this.id}?`
confirm.innerText = "Are you sure you want to detach disk"
dialog.append(confirm)
let idtext = document.createElement("p");
idtext.innerText = this.id;
dialog.append(idtext);
dialog.callback = async (result, form) => {
if(result === "confirm") {
let body = {
@ -233,8 +237,31 @@ async function handleDiskResize () {
}
async function handleDiskMove () {
let storage = await requestPVE(`/nodes/${node}/storage`, "GET", {format: 1, content: type === "qemu" ? "images" : "rootdir"});
let dialog = createElement("dialog-form");
let content = type === "qemu" ? "images" : "rootdir"
let storage = await requestPVE(`/nodes/${node}/storage`, "GET", null);
let dialog = document.createElement("dialog-form");
document.body.append(dialog);
let label = document.createElement("label");
label.for = "storage-select";
label.innerText = "Storage";
dialog.append(label);
let storageSelect = document.createElement("select");
storageSelect.name = "storage-select";
storage.data.forEach((element) => {
if(element.content.includes(content)){
storageSelect.add(new Option(element.storage));
}
});
dialog.append(storageSelect);
dialog.callback = () => {
document.querySelector("dialog-form").remove();
};
dialog.show();
}
function getOrderedUsed(disks){

22
scripts/elements.js
View File

@ -143,23 +143,21 @@ export class Dialog extends HTMLElement {
<link rel="stylesheet" href="css/form.css" type="text/css">
<link rel="stylesheet" href="css/dialog.css" type="text/css">
<dialog>
<form method="dialog" class="imput-grid" style="auto 1fr"></form>
<p id="header"></p>
<hr>
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
</form>
<hr id="base-hr">
<div class="btn-group">
<button value="cancel" form="form">Cancel</button>
<button value="confirm" form="form">Confirm</button>
</div>
</dialog>
`;
this.shadowElement = shadowRoot;
this.dialog = shadowRoot.querySelector("dialog");
this.form = shadowRoot.querySelector("form");
this.form.innerHTML = `
<p id="header"></p>
<hr>
<hr id="base-hr">
<div class="btn-group">
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</div>
`;
}
set header (header) {
@ -167,7 +165,7 @@ export class Dialog extends HTMLElement {
}
append (element) {
this.form.insertBefore(element, this.shadowElement.querySelector("#base-hr"));
this.form.append(element);
}
set callback (callback) {