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

create custom dialog form element

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-01-27 22:33:05 +00:00
parent f752baa46a
commit 04b959bd16
2 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
login.html
View File

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<div class="center-div"> <div class="center-div">
<form> <form style="margin-top: 20px;">
<fieldset> <fieldset>
<legend>Proxmox VE Login</legend> <legend>Proxmox VE Login</legend>
<div class="input-grid" style="grid-template-columns: repeat(2, auto);"> <div class="input-grid" style="grid-template-columns: repeat(2, auto);">

41
scripts/elements.js
View File

@ -131,4 +131,43 @@ class Instance extends HTMLElement {
} }
} }
customElements.define("instance-article", Instance); 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/dialog.css" type="text/css">
<dialog>
<form method="dialog"></form>
</dialog>
`;
this.shadowElement = shadowRoot;
this.dialog = shadowRoot.querySelector("dialog");
this.form = shadowRoot.querySelector("form");
}
set body (body) {
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));
});
}
show () {
this.dialog.showModal();
}
}
customElements.define("instance-article", Instance);
customElements.define("dialog-form", Dialog);