rename buttons.css to button.css,

add table styling and prepare for better table generation

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

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/form.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>
<p id="prompt"></p>
<hr>

View File

@@ -8,7 +8,7 @@ export class Instance extends HTMLElement {
shadowRoot.innerHTML = `
<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">
<div>
<img id="node-status" alt="instance node">

View File

@@ -4,27 +4,26 @@ window.addEventListener("DOMContentLoaded", init);
async function init () {
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) {
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>`;
}
let table = document.querySelector(tableid);
Object.keys(object).forEach((element) => {
table += `<tr><td>${element}</td><td>${buildTable(object[element], idx + 1)}</td></tr>`;
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]}`
});
table += "</table>"
return table;
}
else {
return object;
return null;
}
}