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 90d77af0d9
commit 9903f75959
4 changed files with 50 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
account.html
View File

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

22
css/style.css
View File

@ -3,7 +3,7 @@
--success-color: #0f0; --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; font-family: monospace;
} }
@ -20,13 +20,27 @@ img {
width: 1em; width: 1em;
} }
.flex-row-nowrap { .flex {
display: flex; display: flex;
}
.flex * {
margin: 0px;
}
.row {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap;
column-gap: 10px; column-gap: 10px;
align-items: center; align-items: center;
height: 100%; }
.wrap {
flex-wrap: wrap;
row-gap: 10px;
}
.nowrap {
flex-wrap: nowrap;
} }
.hidden { .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); window.addEventListener("DOMContentLoaded", init);
@ -17,24 +17,30 @@ async function init () {
} }
let resources = await requestAPI("/user/resources"); 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"); 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 table = document.querySelector(tableid);
let tbody = table.querySelector("tbody"); let tbody = table.querySelector("tbody");
Object.keys(object.resources.avail).forEach((element) => { Object.keys(resources.avail).forEach((element) => {
let row = tbody.insertRow(); let row = tbody.insertRow();
let key = row.insertCell(); let key = row.insertCell();
key.innerText = `${element}`; key.innerText = `${element}`;
let used = row.insertCell(); 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(); 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(); 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"> <div class="w3-col l1 m2 w3-hide-small">
<p id="instance-type"></p> <p id="instance-type"></p>
</div> </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"> <img id="instance-status-icon">
<p id="instance-status"></p> <p id="instance-status"></p>
</div> </div>
<div class="w3-col l2 w3-hide-medium w3-hide-small"> <div class="w3-col l2 w3-hide-medium w3-hide-small">
<p id="node-name"></p> <p id="node-name"></p>
</div> </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"> <img id="node-status-icon">
<p id="node-status"></p> <p id="node-status"></p>
</div> </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="power-btn" class="clickable">
<img id="console-btn" class="clickable"> <img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable"> <img id="configure-btn" class="clickable">