tronnet/ProxmoxAAS-Dashboard
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="stylesheet" href="css/style.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>
<body>
<header>
<nav>
<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>
</nav>
</header>
<main>
<table id="resource-table">
<thead>
<td>Resource Type</td>
<td>Avaliable Amount</td>
<td>Total Amount</td>
<tr>
<th>Resource Type</th>
<th>Avaliable Amount</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody></tbody>
</table>
</main>
<footer><p>&copy; tronnet</p></footer>

19
css/table.css
View File

@ -1,21 +1,28 @@
table {
padding: 10px;
border-collapse: collapse;
border: 1px solid var(--content-txt-color);
width: 100%;
text-align: left;
}
tr {
background-color: white;
thead {
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;
}
tr:hover {
tbody tr:hover {
background-color: #aaa;
}
td {
th, td {
padding: 5px;
}

2
index.html
View File

@ -28,7 +28,7 @@
<header>
<nav>
<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>
</nav>
</header>

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

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