class Node extends HTMLElement { constructor () { // super(); let shadowRoot = this.attachShadow({mode: "open"}); let nodeArticle = document.createElement("article"); shadowRoot.append(nodeArticle); 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 articleElement = this.shadowElement.querySelector("article"); let nodeName = document.createElement("h2"); nodeName.innerText = data.node; articleElement.append(nodeName); let onlineLabel = document.createElement("h3"); onlineLabel.innerText = data.status; onlineLabel.style.color = data.status === "online" ? "#00ff00" : "#ff0000"; articleElement.append(onlineLabel); } set qemu (qemu) { let articleElement = this.shadowElement.querySelector("article"); let qemuDiv = document.createElement("div"); for (let i = 0; i < qemu.length; i++) { let instanceParagraph = document.createElement("p"); instanceParagraph.innerText = `VM | ${qemu[i].vmid} | ${qemu[i].name} | ${qemu[i].status}`; instanceParagraph.style.color = qemu[i].status == "running" ? "#00ff00" : "#ff0000"; qemuDiv.append(instanceParagraph); } articleElement.append(qemuDiv); } set lxc (lxc) { let articleElement = this.shadowElement.querySelector("article"); let lxcDiv = document.createElement("div"); for (let i = 0; i < lxc.length; i++) { let instanceParagraph = document.createElement("p"); instanceParagraph.innerText = `CT | ${lxc[i].vmid} | ${lxc[i].name} | ${lxc[i].status}`; instanceParagraph.style.color = lxc[i].status == "running" ? "#00ff00" : "#ff0000"; lxcDiv.append(instanceParagraph); } articleElement.append(lxcDiv); } } customElements.define("node-card", Node);