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

make instance custom element

Browse Source
This commit is contained in:
Arthur Lu 2022-12-11 20:20:32 -08:00
parent 095c6a66bc
commit f58cfc02e0
2 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
node.js → elements.js
View File

@ -33,10 +33,8 @@ class Node extends HTMLElement {
let qemuDiv = document.createElement("div"); let qemuDiv = document.createElement("div");
for (let i = 0; i < qemu.length; i++) { for (let i = 0; i < qemu.length; i++) {
let instanceParagraph = document.createElement("p"); let newInstance = document.createElement("instance-div");
instanceParagraph.innerText = `VM | ${qemu[i].vmid} | ${qemu[i].name} | ${qemu[i].status}`; newInstance.data = qemu[i];
instanceParagraph.style.color = qemu[i].status == "running" ? "#00ff00" : "#ff0000";
qemuDiv.append(instanceParagraph);
} }
articleElement.append(qemuDiv); articleElement.append(qemuDiv);
} }
@ -46,13 +44,39 @@ class Node extends HTMLElement {
let lxcDiv = document.createElement("div"); let lxcDiv = document.createElement("div");
for (let i = 0; i < lxc.length; i++) { for (let i = 0; i < lxc.length; i++) {
let instanceParagraph = document.createElement("p"); let newInstance = document.createElement("instance-div");
instanceParagraph.innerText = `CT | ${lxc[i].vmid} | ${lxc[i].name} | ${lxc[i].status}`; newInstance.data = lxc[i];
instanceParagraph.style.color = lxc[i].status == "running" ? "#00ff00" : "#ff0000";
lxcDiv.append(instanceParagraph);
} }
articleElement.append(lxcDiv); articleElement.append(lxcDiv);
} }
} }
customElements.define("node-card", Node); class Instance extends HTMLElement {
constructor () {
super();
let shadowRoot = this.attachShadow({mode: "open"});
let instanceDiv = document.createElement("div");
shadowRoot.append(instanceDiv);
let styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "style.css";
styleLink.type = "text/css";
shadowRoot.append(styleLink);
this.shadowElement = shadowRoot;
}
set data (data) {
let instanceDiv = this.shadowElement.querySelector("div");
let instanceParagraph = document.createElement("p");
instanceParagraph.innerText = `CT | ${data.vmid} | ${data.name} | ${data.status}`;
instanceParagraph.style.color = data.status == "running" ? "#00ff00" : "#ff0000";
instanceDiv.append(instanceParagraph);
}
}
customElements.define("node-article", Node);
customElements.define("instance-div", Instance);

2
index.js
View File

@ -16,7 +16,7 @@ async function init () {
let nodeContainer = document.getElementById("node-container") let nodeContainer = document.getElementById("node-container")
for (let i = 0; i < nodes.data.length; i++) { for (let i = 0; i < nodes.data.length; i++) {
let newNode = document.createElement("node-card"); let newNode = document.createElement("node-article");
newNode.data = nodes.data[i]; newNode.data = nodes.data[i];
let qemu = await request(`/nodes/${nodes.data[i].node}/qemu`, "GET", null); let qemu = await request(`/nodes/${nodes.data[i].node}/qemu`, "GET", null);