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:
@@ -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>
|
||||
|
@@ -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">
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user