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

add more info to insatnce container

Browse Source
This commit is contained in:
Arthur Lu 2023-04-06 04:21:03 +00:00
parent 444f8e93d2
commit 5df3cf23f5
3 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -12,15 +12,20 @@
<style> <style>
#instance-container { #instance-container {
display: grid; display: grid;
grid-template-columns: auto auto 1fr; grid-template-columns: auto auto auto auto auto auto 1fr auto;
column-gap: 4em;
align-items: center;
}
#instance-container-header * {
margin-top: 0px;
} }
instance-obj { instance-obj {
display: contents; display: contents;
} }
instance-obj:after, instance-obj:first-child:before { instance-obj:after, instance-obj:first-of-type:before {
content: " "; content: " ";
border-bottom: 1px solid var(--content-txt-color); border-bottom: 1px solid var(--content-txt-color);
grid-column: 1 / span 3; grid-column: 1 / span 8;
} }
</style> </style>
</head> </head>

13
scripts/index.js
View File

@ -33,7 +33,18 @@ async function populateInstances () {
instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1); instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
instanceContainer.innerText = ""; instanceContainer.innerHTML = `
<div style="display: contents;" id="instance-container-header">
<p>VM ID</p>
<p>VM Name</p>
<p>VM Type</p>
<p>VM Status</p>
<p>Host Name</p>
<p>Host Status</p>
<div class="hidden"></div>
<p>Actions</p>
</div>
`;
for(let i = 0; i < instances.length; i++) { for(let i = 0; i < instances.length; i++) {
let newInstance = document.createElement("instance-obj"); let newInstance = document.createElement("instance-obj");
newInstance.data = instances[i]; newInstance.data = instances[i];

30
scripts/instance.js
View File

@ -10,15 +10,13 @@ export class Instance extends HTMLElement {
<link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/button.css" type="text/css"> <link rel="stylesheet" href="css/button.css" type="text/css">
<link rel="stylesheet" href="css/instance.css" type="text/css"> <link rel="stylesheet" href="css/instance.css" type="text/css">
<div>
<img id="node-status" alt="instance node">
<p id="node-name"></p>
</div>
<div>
<img id="instance-type">
<p id="instance-id"></p> <p id="instance-id"></p>
<p id="instance-name"></p> <p id="instance-name"></p>
</div> <p id="instance-type"></p>
<p id="instance-status"></p>
<p id="node-name"></p>
<p id="node-status"></p>
<div class="hidden"></div>
<div class="btn-group"> <div class="btn-group">
<img id="power-btn" class="clickable"> <img id="power-btn" class="clickable">
<img id="console-btn" class="clickable"> <img id="console-btn" class="clickable">
@ -44,21 +42,23 @@ export class Instance extends HTMLElement {
} }
update () { update () {
let typeImg = this.shadowElement.querySelector("#instance-type");
typeImg.src = `images/instances/${this.type}/${this.status}.svg`;
typeImg.alt = `${this.status} instance`;
let vmidParagraph = this.shadowElement.querySelector("#instance-id"); let vmidParagraph = this.shadowElement.querySelector("#instance-id");
vmidParagraph.innerText = this.vmid; vmidParagraph.innerText = this.vmid;
let nameParagraph = this.shadowElement.querySelector("#instance-name"); let nameParagraph = this.shadowElement.querySelector("#instance-name");
nameParagraph.innerText = this.name ? this.name : ""; nameParagraph.innerText = this.name ? this.name : "";
let nodeImg = this.shadowElement.querySelector("#node-status"); let typeParagraph = this.shadowElement.querySelector("#instance-type");
nodeImg.src = `images/nodes/${this.node.status}.svg`; typeParagraph.innerText = this.type;
let nodeParagraph = this.shadowElement.querySelector("#node-name"); let statusParagraph = this.shadowElement.querySelector("#instance-status");
nodeParagraph.innerText = this.node.name; statusParagraph.innerText = this.status;
let nodeNameParagraph = this.shadowElement.querySelector("#node-name");
nodeNameParagraph.innerText = this.node.name;
let nodeStatusParagraph = this.shadowElement.querySelector("#node-status");
nodeStatusParagraph.innerText = this.node.status;
let powerButton = this.shadowElement.querySelector("#power-btn"); let powerButton = this.shadowElement.querySelector("#power-btn");
powerButton.src = instances[this.status].powerButtonSrc; powerButton.src = instances[this.status].powerButtonSrc;