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

rename buttons.css to button.css,

Browse Source 
add table styling and prepare for better table generation

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-05 22:29:15 +00:00
parent 8b9cbec5fb
commit f1dc99dedd
9 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.html
View File

@ -7,7 +7,7 @@
<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/form.css" type="text/css"> <link rel="stylesheet" href="css/form.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css"> <link rel="stylesheet" href="css/button.css" type="text/css">
<script src="scripts/config.js" type="module"></script> <script src="scripts/config.js" type="module"></script>
</head> </head>
<body> <body>

0
css/buttons.css → css/button.css
View File

21
css/table.css Normal file
View File

@ -0,0 +1,21 @@
table {
padding: 10px;
border-collapse: collapse;
border: 1px solid var(--content-txt-color);
}
tr {
background-color: white;
}
tr:nth-child(even) {
background-color: #ddd;
}
tr:hover {
background-color: #aaa;
}
td {
padding: 5px;
}

2
index.html
View File

@ -6,7 +6,7 @@
<title>tronnet - client</title> <title>tronnet - client</title>
<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/buttons.css" type="text/css"> <link rel="stylesheet" href="css/button.css" type="text/css">
<script src="scripts/index.js" type="module"></script> <script src="scripts/index.js" type="module"></script>
<script src="scripts/instance.js" type="module"></script> <script src="scripts/instance.js" type="module"></script>
<style> <style>

2
login.html
View File

@ -7,7 +7,7 @@
<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/form.css" type="text/css"> <link rel="stylesheet" href="css/form.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css"> <link rel="stylesheet" href="css/button.css" type="text/css">
<script src="scripts/login.js" type="module"></script> <script src="scripts/login.js" type="module"></script>
</head> </head>
<body> <body>

8
resources.html
View File

@ -6,6 +6,7 @@
<title>tronnet - client</title> <title>tronnet - client</title>
<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">
<script src="scripts/resources.js" type="module"></script> <script src="scripts/resources.js" type="module"></script>
</head> </head>
<body> <body>
@ -17,6 +18,13 @@
</nav> </nav>
</header> </header>
<main> <main>
<table id="resource-table">
<thead>
<td>Resource Type</td>
<td>Avaliable Amount</td>
<td>Total Amount</td>
</thead>
</table>
</main> </main>
<footer><p>&copy; tronnet</p></footer> <footer><p>&copy; tronnet</p></footer>
</body> </body>

2
scripts/dialog.js
View File

@ -7,7 +7,7 @@ export class Dialog extends HTMLElement {
<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/form.css" type="text/css"> <link rel="stylesheet" href="css/form.css" type="text/css">
<link rel="stylesheet" href="css/dialog.css" type="text/css"> <link rel="stylesheet" href="css/dialog.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css"> <link rel="stylesheet" href="css/button.css" type="text/css">
<dialog> <dialog>
<p id="prompt"></p> <p id="prompt"></p>
<hr> <hr>

2
scripts/instance.js
View File

@ -8,7 +8,7 @@ export class Instance extends HTMLElement {
shadowRoot.innerHTML = ` shadowRoot.innerHTML = `
<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/buttons.css" type="text/css"> <link rel="stylesheet" href="css/button.css" type="text/css">
<link rel="stylesheet" href="css/instance.css" type="text/css"> <link rel="stylesheet" href="css/instance.css" type="text/css">
<div> <div>
<img id="node-status" alt="instance node"> <img id="node-status" alt="instance node">

27
scripts/resources.js
View File

@ -4,27 +4,26 @@ 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").innerHTML = buildTable(resources.resources, 1); document.querySelector("main").append(buildResourceTable(resources.resources, "#resource-table"));
} }
function buildTable (object, idx) { function buildResourceTable (object, tableid) {
if (object instanceof Object) { if (object instanceof Object) {
let table = "";
if (idx === 1) { // topmost table gets some margin and a border
table += `<table style="margin-top: 10px; border: 1px solid black;">`;
}
else {
table += `<table>`;
}
Object.keys(object).forEach((element) => {
table += `<tr><td>${element}</td><td>${buildTable(object[element], idx + 1)}</td></tr>`;
});
table += "</table>"
let table = document.querySelector(tableid);
Object.keys(object).forEach((element) => {
let row = table.insertRow();
let key = row.insertCell();
key.innerText = `${element}`;
let val = row.insertCell();
val.innerText = `${object[element]}`
let total = row.insertCell();;
total.innerText = `${object[element]}`
});
return table; return table;
} }
else { else {
return object; return null;
} }
} }