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 09bf0ebbe9
commit a76168d1ab
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>
#instance-container {
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 {
display: contents;
}
instance-obj:after, instance-obj:first-child:before {
instance-obj:after, instance-obj:first-of-type:before {
content: " ";
border-bottom: 1px solid var(--content-txt-color);
grid-column: 1 / span 3;
grid-column: 1 / span 8;
}
</style>
</head>

13
scripts/index.js
View File

@ -33,7 +33,18 @@ async function populateInstances () {
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++) {
let newInstance = document.createElement("instance-obj");
newInstance.data = instances[i];

34
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/button.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-name"></p>
</div>
<p id="instance-id"></p>
<p id="instance-name"></p>
<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">
<img id="power-btn" class="clickable">
<img id="console-btn" class="clickable">
@ -44,21 +42,23 @@ export class Instance extends HTMLElement {
}
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");
vmidParagraph.innerText = this.vmid;
let nameParagraph = this.shadowElement.querySelector("#instance-name");
nameParagraph.innerText = this.name ? this.name : "";
let nodeImg = this.shadowElement.querySelector("#node-status");
nodeImg.src = `images/nodes/${this.node.status}.svg`;
let typeParagraph = this.shadowElement.querySelector("#instance-type");
typeParagraph.innerText = this.type;
let nodeParagraph = this.shadowElement.querySelector("#node-name");
nodeParagraph.innerText = this.node.name;
let statusParagraph = this.shadowElement.querySelector("#instance-status");
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");
powerButton.src = instances[this.status].powerButtonSrc;