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

separate dialog and instance custom elements

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-02-14 21:08:48 +00:00
parent 1a6e31621e
commit 6b1ed9399c
4 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="scripts/index.js" type="module"></script>
<script src="scripts/elements.js" type="module"></script>
<script src="scripts/instance.js" type="module"></script>
</head>
<body>
<header>

4
scripts/config.js
View File

@ -1,5 +1,5 @@
import {requestPVE, requestAPI, goToPage, getURIData, reload, resources} from "./utils.js";
import { Dialog } from "./elements.js";
import {requestPVE, requestAPI, goToPage, getURIData, resources} from "./utils.js";
import { Dialog } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second

51
scripts/dialog.js Normal file
View File

@ -0,0 +1,51 @@
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>
<p id="prompt"></p>
<hr>
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
</form>
<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");
}
set header (header) {
this.shadowElement.querySelector("#prompt").innerText = header;
}
set formBody (formBody) {
this.form.innerHTML = formBody;
}
formBodyAppend (element) {
this.form.append(element);
}
set callback (callback) {
this.dialog.addEventListener("close", async () => {
await callback(this.dialog.returnValue, new FormData(this.form));
document.querySelector("dialog-form").remove();
});
}
show () {
this.dialog.showModal();
}
}
customElements.define("dialog-form", Dialog);

53
scripts/elements.js → scripts/instance.js
View File

@ -136,55 +136,4 @@ export class Instance 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>
<p id="prompt"></p>
<hr>
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
</form>
<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");
}
set header (header) {
this.shadowElement.querySelector("#prompt").innerText = header;
}
set formBody (formBody) {
this.form.innerHTML = formBody;
}
formBodyAppend (element) {
this.form.append(element);
}
set callback (callback) {
this.dialog.addEventListener("close", async () => {
await callback(this.dialog.returnValue, new FormData(this.form));
document.querySelector("dialog-form").remove();
});
}
show () {
this.dialog.showModal();
}
}
customElements.define("instance-article", Instance);
customElements.define("dialog-form", Dialog);
customElements.define("instance-article", Instance);