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; margin: 10px;
} }
form > :first-child { form > fieldset:first-of-type {
margin-top: 0px; margin-top: 0px;
} }

35
scripts/config.js
View File

@ -144,7 +144,7 @@ function addDiskLine (fieldset, busPrefix, busName, device, disk) {
} }
else if (element === "move") { else if (element === "move") {
action.addEventListener("click", handleDiskMove);
} }
else if (element === "resize") { else if (element === "resize") {
action.addEventListener("click", handleDiskResize); action.addEventListener("click", handleDiskResize);
@ -166,9 +166,13 @@ async function handleDiskDetach () {
dialog.header = `Detach ${this.id}`; dialog.header = `Detach ${this.id}`;
let confirm = document.createElement("p"); 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) dialog.append(confirm)
let idtext = document.createElement("p");
idtext.innerText = this.id;
dialog.append(idtext);
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if(result === "confirm") { if(result === "confirm") {
let body = { let body = {
@ -233,8 +237,31 @@ async function handleDiskResize () {
} }
async function handleDiskMove () { async function handleDiskMove () {
let storage = await requestPVE(`/nodes/${node}/storage`, "GET", {format: 1, content: type === "qemu" ? "images" : "rootdir"}); let content = type === "qemu" ? "images" : "rootdir"
let dialog = createElement("dialog-form"); 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){ 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/form.css" type="text/css">
<link rel="stylesheet" href="css/dialog.css" type="text/css"> <link rel="stylesheet" href="css/dialog.css" type="text/css">
<dialog> <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> </dialog>
`; `;
this.shadowElement = shadowRoot; this.shadowElement = shadowRoot;
this.dialog = shadowRoot.querySelector("dialog"); this.dialog = shadowRoot.querySelector("dialog");
this.form = shadowRoot.querySelector("form"); 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) { set header (header) {
@ -167,7 +165,7 @@ export class Dialog extends HTMLElement {
} }
append (element) { append (element) {
this.form.insertBefore(element, this.shadowElement.querySelector("#base-hr")); this.form.append(element);
} }
set callback (callback) { set callback (callback) {