diff --git a/account.html b/account.html index acd485f..4f3d3bf 100644 --- a/account.html +++ b/account.html @@ -19,20 +19,23 @@
-

Account

-
- - - - - - - - - - -
ResourceUsedFreeTotal
+

Account

+
+

Username:

+

Pool:

+

VMID Range:

+ + + + + + + + + + +
ResourceUsedFreeTotal
\ No newline at end of file diff --git a/css/style.css b/css/style.css index 514781e..edfcac8 100644 --- a/css/style.css +++ b/css/style.css @@ -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 { diff --git a/scripts/account.js b/scripts/account.js index 637eee2..671ec6d 100644 --- a/scripts/account.js +++ b/scripts/account.js @@ -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])}`; }); } } diff --git a/scripts/instance.js b/scripts/instance.js index 5ed7e3b..0ef6e83 100644 --- a/scripts/instance.js +++ b/scripts/instance.js @@ -19,18 +19,18 @@ export class Instance extends HTMLElement {

-
+

-
+

-
+