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

simplify instance display

Browse Source
This commit is contained in:
Arthur Lu 2022-12-14 13:37:30 -08:00
parent 35dd1402b0
commit 3247edbbbb
3 changed files with 20 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -9,6 +9,6 @@
<script src="scripts/elements.js" type="module"></script> <script src="scripts/elements.js" type="module"></script>
</head> </head>
<body> <body>
<div id="node-container" class="center-div"></div> <div id="instance-container" class="center-div"></div>
</body> </body>
</html> </html>

68
scripts/elements.js
View File

@ -1,65 +1,10 @@
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 { class Instance extends HTMLElement {
constructor () { constructor () {
super(); super();
let shadowRoot = this.attachShadow({mode: "open"}); let shadowRoot = this.attachShadow({mode: "open"});
let instanceDiv = document.createElement("div"); let instanceArticle = document.createElement("article");
shadowRoot.append(instanceDiv); shadowRoot.append(instanceArticle);
let styleLink = document.createElement("link"); let styleLink = document.createElement("link");
styleLink.rel = "stylesheet"; styleLink.rel = "stylesheet";
@ -71,14 +16,13 @@ class Instance extends HTMLElement {
} }
set data (data) { set data (data) {
let instanceDiv = this.shadowElement.querySelector("div"); let instanceArticle = this.shadowElement.querySelector("article");
let instanceParagraph = document.createElement("p"); let instanceParagraph = document.createElement("p");
instanceParagraph.innerText = `${data.type} | ${data.vmid} | ${data.name} | ${data.status}`; instanceParagraph.innerText = `${data.type} | ${data.vmid} | ${data.name} | ${data.status} | ${data.node.name} (${data.node.status})`;
instanceParagraph.style.color = data.status === "running" ? "#00ff00" : "#ff0000"; instanceParagraph.style.color = data.status === "running" ? "#00ff00" : "#ff0000";
instanceDiv.append(instanceParagraph); instanceArticle.append(instanceParagraph);
} }
} }
customElements.define("node-article", Node); customElements.define("instance-article", Instance);
customElements.define("instance-div", Instance);

24
scripts/index.js
View File

@ -9,20 +9,22 @@ async function init () {
} }
let nodes = await request("/nodes", "GET", null); let nodes = await request("/nodes", "GET", null);
nodes.data.sort((a, b) => (a.node > b.node) ? 1 : -1); let instances = [];
let nodeContainer = document.getElementById("node-container") let instanceContainer = document.getElementById("instance-container")
for (let i = 0; i < nodes.data.length; i++) {
let newNode = document.createElement("node-article"); for (let i = 0; i < nodes.data.length; i++) {
newNode.data = nodes.data[i];
let qemu = await request(`/nodes/${nodes.data[i].node}/qemu`, "GET"); let qemu = await request(`/nodes/${nodes.data[i].node}/qemu`, "GET");
qemu.data.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1); instances.concat(qemu.data);
let lxc = await request(`/nodes/${nodes.data[i].node}/lxc`, "GET"); let lxc = await request(`/nodes/${nodes.data[i].node}/lxc`, "GET");
lxc.data.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1); instances.concat(lxc.data);
newNode.qemu = qemu.data; }
newNode.lxc = lxc.data;
nodeContainer.append(newNode); instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
for(let i = 0; i < instances.length; i++) {
let newInstance = document.createElement("instance-article");
newInstance.data = instances[i];
instanceContainer.append(newInstance);
} }
} }