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

use custom element for instances

Browse Source
This commit is contained in:
Arthur Lu 2023-08-15 20:27:45 +00:00
parent 888e8bbc7e
commit 7614328555
1 changed files with 50 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
scripts/index.js
View File

@ -60,9 +60,9 @@ async function populateInstances () {
</div> </div>
`; `;
for (let i = 0; i < instances.length; i++) { for (let i = 0; i < instances.length; i++) {
const newInstance = new Instance(); const newInstance = document.createElement("instance-card");
newInstance.data = instances[i]; newInstance.data = instances[i];
instanceContainer.append(newInstance.shadowElement); instanceContainer.append(newInstance);
} }
} }
@ -198,41 +198,42 @@ async function handleInstanceAdd () {
d.querySelector("#vmid").max = userCluster.vmid.max; d.querySelector("#vmid").max = userCluster.vmid.max;
} }
class Instance { class InstanceCard extends HTMLElement {
constructor () { constructor () {
const shadowRoot = document.createElement("div"); super();
shadowRoot.classList.add("w3-row"); this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
shadowRoot.innerHTML = ` <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-col l1 m2 s6"> <link rel="stylesheet" href="css/style.css">
<p id="instance-id"></p> <div class="w3-row">
</div> <div class="w3-col l1 m2 s6">
<div class="w3-col l2 m3 s6"> <p id="instance-id"></p>
<p id="instance-name"></p> </div>
</div> <div class="w3-col l2 m3 s6">
<div class="w3-col l1 m2 w3-hide-small"> <p id="instance-name"></p>
<p id="instance-type"></p> </div>
</div> <div class="w3-col l1 m2 w3-hide-small">
<div class="w3-col l2 m3 s6 flex row nowrap"> <p id="instance-type"></p>
<img id="instance-status-icon"> </div>
<p id="instance-status"></p> <div class="w3-col l2 m3 s6 flex row nowrap">
</div> <img id="instance-status-icon">
<div class="w3-col l2 w3-hide-medium w3-hide-small"> <p id="instance-status"></p>
<p id="node-name"></p> </div>
</div> <div class="w3-col l2 w3-hide-medium w3-hide-small">
<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap"> <p id="node-name"></p>
<img id="node-status-icon"> </div>
<p id="node-status"></p> <div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
</div> <img id="node-status-icon">
<div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh; margin-top: 15px; margin-bottom: 15px;"> <p id="node-status"></p>
<img id="power-btn"> </div>
<img id="console-btn"> <div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh; margin-top: 15px; margin-bottom: 15px;">
<img id="configure-btn"> <img id="power-btn">
<img id="delete-btn"> <img id="console-btn">
<img id="configure-btn">
<img id="delete-btn">
</div>
</div> </div>
`; `;
this.shadowElement = shadowRoot;
this.actionLock = false; this.actionLock = false;
} }
@ -259,33 +260,33 @@ class Instance {
} }
update () { update () {
const vmidParagraph = this.shadowElement.querySelector("#instance-id"); const vmidParagraph = this.shadowRoot.querySelector("#instance-id");
vmidParagraph.innerText = this.vmid; vmidParagraph.innerText = this.vmid;
const nameParagraph = this.shadowElement.querySelector("#instance-name"); const nameParagraph = this.shadowRoot.querySelector("#instance-name");
nameParagraph.innerText = this.name ? this.name : ""; nameParagraph.innerText = this.name ? this.name : "";
const typeParagraph = this.shadowElement.querySelector("#instance-type"); const typeParagraph = this.shadowRoot.querySelector("#instance-type");
typeParagraph.innerText = this.type; typeParagraph.innerText = this.type;
const statusParagraph = this.shadowElement.querySelector("#instance-status"); const statusParagraph = this.shadowRoot.querySelector("#instance-status");
statusParagraph.innerText = this.status; statusParagraph.innerText = this.status;
const statusIcon = this.shadowElement.querySelector("#instance-status-icon"); const statusIcon = this.shadowRoot.querySelector("#instance-status-icon");
statusIcon.src = instancesConfig[this.status].status.src; statusIcon.src = instancesConfig[this.status].status.src;
statusIcon.alt = instancesConfig[this.status].status.alt; statusIcon.alt = instancesConfig[this.status].status.alt;
const nodeNameParagraph = this.shadowElement.querySelector("#node-name"); const nodeNameParagraph = this.shadowRoot.querySelector("#node-name");
nodeNameParagraph.innerText = this.node.name; nodeNameParagraph.innerText = this.node.name;
const nodeStatusParagraph = this.shadowElement.querySelector("#node-status"); const nodeStatusParagraph = this.shadowRoot.querySelector("#node-status");
nodeStatusParagraph.innerText = this.node.status; nodeStatusParagraph.innerText = this.node.status;
const nodeStatusIcon = this.shadowElement.querySelector("#node-status-icon"); const nodeStatusIcon = this.shadowRoot.querySelector("#node-status-icon");
nodeStatusIcon.src = nodesConfig[this.node.status].status.src; nodeStatusIcon.src = nodesConfig[this.node.status].status.src;
nodeStatusIcon.alt = nodesConfig[this.node.status].status.src; nodeStatusIcon.alt = nodesConfig[this.node.status].status.src;
const powerButton = this.shadowElement.querySelector("#power-btn"); const powerButton = this.shadowRoot.querySelector("#power-btn");
powerButton.src = instancesConfig[this.status].power.src; powerButton.src = instancesConfig[this.status].power.src;
powerButton.alt = instancesConfig[this.status].power.alt; powerButton.alt = instancesConfig[this.status].power.alt;
powerButton.title = instancesConfig[this.status].power.alt; powerButton.title = instancesConfig[this.status].power.alt;
@ -294,7 +295,7 @@ class Instance {
powerButton.onclick = this.handlePowerButton.bind(this); powerButton.onclick = this.handlePowerButton.bind(this);
} }
const configButton = this.shadowElement.querySelector("#configure-btn"); const configButton = this.shadowRoot.querySelector("#configure-btn");
configButton.src = instancesConfig[this.status].config.src; configButton.src = instancesConfig[this.status].config.src;
configButton.alt = instancesConfig[this.status].config.alt; configButton.alt = instancesConfig[this.status].config.alt;
configButton.title = instancesConfig[this.status].config.alt; configButton.title = instancesConfig[this.status].config.alt;
@ -303,7 +304,7 @@ class Instance {
configButton.onclick = this.handleConfigButton.bind(this); configButton.onclick = this.handleConfigButton.bind(this);
} }
const consoleButton = this.shadowElement.querySelector("#console-btn"); const consoleButton = this.shadowRoot.querySelector("#console-btn");
consoleButton.src = instancesConfig[this.status].console.src; consoleButton.src = instancesConfig[this.status].console.src;
consoleButton.alt = instancesConfig[this.status].console.alt; consoleButton.alt = instancesConfig[this.status].console.alt;
consoleButton.title = instancesConfig[this.status].console.alt; consoleButton.title = instancesConfig[this.status].console.alt;
@ -312,7 +313,7 @@ class Instance {
consoleButton.onclick = this.handleConsoleButton.bind(this); consoleButton.onclick = this.handleConsoleButton.bind(this);
} }
const deleteButton = this.shadowElement.querySelector("#delete-btn"); const deleteButton = this.shadowRoot.querySelector("#delete-btn");
deleteButton.src = instancesConfig[this.status].delete.src; deleteButton.src = instancesConfig[this.status].delete.src;
deleteButton.alt = instancesConfig[this.status].delete.alt; deleteButton.alt = instancesConfig[this.status].delete.alt;
deleteButton.title = instancesConfig[this.status].delete.alt; deleteButton.title = instancesConfig[this.status].delete.alt;
@ -403,7 +404,7 @@ class Instance {
const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE"); const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE");
if (result.status === 200) { if (result.status === 200) {
this.shadowElement.parentElement.removeChild(this.shadowElement); this.parentElement.removeChild(this);
} }
else { else {
alert(result.error); alert(result.error);
@ -416,3 +417,5 @@ class Instance {
} }
} }
} }
customElements.define("instance-card", InstanceCard);