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

add instance info to account

Browse Source
This commit is contained in:
Arthur Lu 2023-04-21 22:58:15 +00:00
parent 81dc02bd98
commit 46116e32f4
4 changed files with 50 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
account.html
View File

@ -19,20 +19,23 @@
</nav>
</header>
<main class="w3-container">
<h2>Account</h2>
<div class="w3-responsive">
<table id="resource-table" class="w3-table w3-table-all" style="overflow-x: auto;">
<thead>
<tr class="w3-black">
<th>Resource</th>
<th>Used</th>
<th>Free</th>
<th>Total</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h2>Account</h2>
<div class="flex row wrap w3-margin-top w3-margin-bottom">
<p id="username">Username: </p>
<p id="pool">Pool: </p>
<p id="vmid">VMID Range: </p>
</div>
<table id="resource-table" class="w3-table w3-table-all" style="overflow-x: auto;">
<thead>
<tr class="w3-black">
<th>Resource</th>
<th>Used</th>
<th>Free</th>
<th>Total</th>
</tr>
</thead>
<tbody></tbody>
</table>
</main>
</body>
</html>

22
css/style.css
View File

@ -3,7 +3,7 @@
--success-color: #0f0;
}
h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select {
h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select, td {
font-family: monospace;
}
@ -20,13 +20,27 @@ img {
width: 1em;
}
.flex-row-nowrap {
.flex {
display: flex;
}
.flex * {
margin: 0px;
}
.row {
flex-direction: row;
flex-wrap: nowrap;
column-gap: 10px;
align-items: center;
height: 100%;
}
.wrap {
flex-wrap: wrap;
row-gap: 10px;
}
.nowrap {
flex-wrap: nowrap;
}
.hidden {

20
scripts/account.js
View File

@ -1,4 +1,4 @@
import {requestAPI, goToPage} from "./utils.js";
import {requestAPI, goToPage, getCookie} from "./utils.js";
window.addEventListener("DOMContentLoaded", init);
@ -17,24 +17,30 @@ async function init () {
}
let resources = await requestAPI("/user/resources");
resources = resources.resources;
let instances = await requestAPI("/user/instances");
instances = instances.instances;
document.querySelector("#username").innerHTML += getCookie("username");
document.querySelector("#pool").innerHTML += instances.pool;
document.querySelector("#vmid").innerHTML += `[${instances.vmid.min},${instances.vmid.max}]`;
buildResourceTable(resources, "#resource-table");
}
function buildResourceTable (object, tableid) {
function buildResourceTable (resources, tableid) {
if (object instanceof Object) {
if (resources instanceof Object) {
let table = document.querySelector(tableid);
let tbody = table.querySelector("tbody");
Object.keys(object.resources.avail).forEach((element) => {
Object.keys(resources.avail).forEach((element) => {
let row = tbody.insertRow();
let key = row.insertCell();
key.innerText = `${element}`;
let used = row.insertCell();
used.innerText = `${parseNumber(object.resources.used[element], object.resources.units[element])}`;
used.innerText = `${parseNumber(resources.used[element], resources.units[element])}`;
let val = row.insertCell();
val.innerText = `${parseNumber(object.resources.avail[element], object.resources.units[element])}`;
val.innerText = `${parseNumber(resources.avail[element], resources.units[element])}`;
let total = row.insertCell();
total.innerText = `${parseNumber(object.resources.max[element], object.resources.units[element])}`;
total.innerText = `${parseNumber(resources.max[element], resources.units[element])}`;
});
}
}

6
scripts/instance.js
View File

@ -19,18 +19,18 @@ export class Instance extends HTMLElement {
<div class="w3-col l1 m2 w3-hide-small">
<p id="instance-type"></p>
</div>
<div class="w3-col l2 m3 s6 flex-row-nowrap">
<div class="w3-col l2 m3 s6 flex row nowrap">
<img id="instance-status-icon">
<p id="instance-status"></p>
</div>
<div class="w3-col l2 w3-hide-medium w3-hide-small">
<p id="node-name"></p>
</div>
<div class="w3-col l2 w3-hide-medium w3-hide-small flex-row-nowrap">
<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
<img id="node-status-icon">
<p id="node-status"></p>
</div>
<div class="w3-col l2 m2 s6 flex-row-nowrap" style="padding-top: 15px;">
<div class="w3-col l2 m2 s6 flex row nowrap" style="padding-top: 15px;">
<img id="power-btn" class="clickable">
<img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable">