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

change resource page to account page,

Browse Source 
improve table styling

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-05 22:48:36 +00:00
parent f1dc99dedd
commit 31042464a4
4 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources.html → account.html
View File

@ -7,23 +7,26 @@
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<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/table.css" type="text/css"> <link rel="stylesheet" href="css/table.css" type="text/css">
<script src="scripts/resources.js" type="module"></script> <script src="scripts/account.js" type="module"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="index.html">INSTANCES</a> <a href="index.html">INSTANCES</a>
<a href="resources.html" aria-current="true">RESOURCES</a> <a href="account.html" aria-current="true">ACCOUNT</a>
<a href="login.html">LOGOUT</a> <a href="login.html">LOGOUT</a>
</nav> </nav>
</header> </header>
<main> <main>
<table id="resource-table"> <table id="resource-table">
<thead> <thead>
<td>Resource Type</td> <tr>
<td>Avaliable Amount</td> <th>Resource Type</th>
<td>Total Amount</td> <th>Avaliable Amount</th>
<th>Total Amount</th>
</tr>
</thead> </thead>
<tbody></tbody>
</table> </table>
</main> </main>
<footer><p>&copy; tronnet</p></footer> <footer><p>&copy; tronnet</p></footer>

19
css/table.css
View File

@ -1,21 +1,28 @@
table { table {
padding: 10px; padding: 10px;
border-collapse: collapse; border-collapse: collapse;
border: 1px solid var(--content-txt-color); width: 100%;
text-align: left;
} }
tr { thead {
background-color: white; background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
} }
tr:nth-child(even) { tbody {
background-color: var(--content-bkg-color);
color: var(--content-txt-color);
}
tbody tr:nth-child(even) {
background-color: #ddd; background-color: #ddd;
} }
tr:hover { tbody tr:hover {
background-color: #aaa; background-color: #aaa;
} }
td { th, td {
padding: 5px; padding: 5px;
} }

2
index.html
View File

@ -28,7 +28,7 @@
<header> <header>
<nav> <nav>
<a href="index.html" aria-current="true">INSTANCES</a> <a href="index.html" aria-current="true">INSTANCES</a>
<a href="resources.html">RESOURCES</a> <a href="account.html">ACCOUNT</a>
<a href="login.html">LOGOUT</a> <a href="login.html">LOGOUT</a>
</nav> </nav>
</header> </header>

9
scripts/resources.js → scripts/account.js
View File

@ -4,7 +4,7 @@ window.addEventListener("DOMContentLoaded", init);
async function init () { async function init () {
let resources = await requestAPI("/user/resources"); let resources = await requestAPI("/user/resources");
document.querySelector("main").append(buildResourceTable(resources.resources, "#resource-table")); buildResourceTable(resources.resources, "#resource-table");
} }
function buildResourceTable (object, tableid) { function buildResourceTable (object, tableid) {
@ -12,8 +12,9 @@ function buildResourceTable (object, tableid) {
if (object instanceof Object) { if (object instanceof Object) {
let table = document.querySelector(tableid); let table = document.querySelector(tableid);
let tbody = table.querySelector("tbody");
Object.keys(object).forEach((element) => { Object.keys(object).forEach((element) => {
let row = table.insertRow(); let row = tbody.insertRow();
let key = row.insertCell(); let key = row.insertCell();
key.innerText = `${element}`; key.innerText = `${element}`;
let val = row.insertCell(); let val = row.insertCell();
@ -21,9 +22,5 @@ function buildResourceTable (object, tableid) {
let total = row.insertCell();; let total = row.insertCell();;
total.innerText = `${object[element]}` total.innerText = `${object[element]}`
}); });
return table;
}
else {
return null;
} }
} }