ProxmoxAAS-Dashboard/scripts/elements.js

84 lines
2.5 KiB
JavaScript
Raw Normal View History

class Node extends HTMLElement {
2022-12-11 07:05:31 +00:00
constructor () { // <link rel="stylesheet" href="style.css" type="text/css">
super();
let shadowRoot = this.attachShadow({mode: "open"});
2022-12-11 07:05:31 +00:00
let nodeArticle = document.createElement("article");
shadowRoot.append(nodeArticle);
2022-12-11 07:05:31 +00:00
let styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "css/style.css";
2022-12-11 07:05:31 +00:00
styleLink.type = "text/css";
shadowRoot.append(styleLink);
2022-12-11 07:05:31 +00:00
this.shadowElement = shadowRoot;
}
2022-12-11 07:05:31 +00:00
set data (data) {
let articleElement = this.shadowElement.querySelector("article");
2022-12-11 07:05:31 +00:00
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);
}
2022-12-11 23:06:10 +00:00
set qemu (qemu) {
let articleElement = this.shadowElement.querySelector("article");
let qemuDiv = document.createElement("div");
for (let i = 0; i < qemu.length; i++) {
2022-12-12 04:20:32 +00:00
let newInstance = document.createElement("instance-div");
newInstance.data = qemu[i];
2022-12-12 04:22:37 +00:00
qemuDiv.append(newInstance);
2022-12-11 23:06:10 +00:00
}
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++) {
2022-12-12 04:20:32 +00:00
let newInstance = document.createElement("instance-div");
newInstance.data = lxc[i];
2022-12-12 04:22:37 +00:00
lxcDiv.append(newInstance);
2022-12-11 23:06:10 +00:00
}
articleElement.append(lxcDiv);
}
}
2022-12-12 04:20:32 +00:00
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 = "css/style.css";
2022-12-12 04:20:32 +00:00
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}`;
2022-12-13 00:18:40 +00:00
instanceParagraph.style.color = data.status === "running" ? "#00ff00" : "#ff0000";
2022-12-12 04:20:32 +00:00
instanceDiv.append(instanceParagraph);
}
}
customElements.define("node-article", Node);
customElements.define("instance-div", Instance);