make instance custom element
This commit is contained in:
parent
a7c1baa35c
commit
21771fdb75
@ -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
2
index.js
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user