84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
class Node extends HTMLElement {
|
|
constructor () { // <link rel="stylesheet" href="style.css" type="text/css">
|
|
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 = "css/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 newInstance = document.createElement("instance-div");
|
|
newInstance.data = qemu[i];
|
|
qemuDiv.append(newInstance);
|
|
}
|
|
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 newInstance = document.createElement("instance-div");
|
|
newInstance.data = lxc[i];
|
|
lxcDiv.append(newInstance);
|
|
}
|
|
articleElement.append(lxcDiv);
|
|
}
|
|
}
|
|
|
|
class Instance extends HTMLElement {
|
|
constructor () {
|
|
super();
|
|
let shadowRoot = this.attachShadow({mode: "open"});
|
|
|
|
let instanceArticle = document.createElement("article");
|
|
shadowRoot.append(instanceArticle);
|
|
|
|
let styleLink = document.createElement("link");
|
|
styleLink.rel = "stylesheet";
|
|
styleLink.href = "css/style.css";
|
|
styleLink.type = "text/css";
|
|
shadowRoot.append(styleLink);
|
|
|
|
this.shadowElement = shadowRoot;
|
|
}
|
|
|
|
set data (data) {
|
|
let instanceArticle = this.shadowElement.querySelector("article");
|
|
|
|
let instanceParagraph = document.createElement("p");
|
|
instanceParagraph.innerText = `${data.type} | ${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); |