client: Bugfix UITable
It works! ...sorta. We really need to fix the duplicate connection thingy.
This commit is contained in:
parent
f29a6e0eeb
commit
e21d6ffc37
6 changed files with 96 additions and 14 deletions
|
@ -53,6 +53,11 @@ class InfoBroker {
|
||||||
pid: process.pid,
|
pid: process.pid,
|
||||||
uptime: process.uptime(),
|
uptime: process.uptime(),
|
||||||
memory: process.memoryUsage(),
|
memory: process.memoryUsage(),
|
||||||
|
peers_connected: this.sysquery.agent.connected_peers()
|
||||||
|
.map(peer => { return {
|
||||||
|
id: peer.id,
|
||||||
|
name: peer.name
|
||||||
|
}})
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -127,6 +127,34 @@ h2 {
|
||||||
text-shadow: 0 0 0.25em var(--text);
|
text-shadow: 0 0 0.25em var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
th { border: 0.1em solid red; }
|
||||||
|
td { border: 0.1em solid green; }
|
||||||
|
|
||||||
|
.peer-name {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
background: var(--tech-a1);
|
||||||
|
padding: 0.25em 0.45em;
|
||||||
|
}
|
||||||
|
.peer-name-name {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.peer-name-id {
|
||||||
|
background: var(--tech-a2);
|
||||||
|
cursor: copy;
|
||||||
|
}
|
||||||
|
.peer-name-id::before {
|
||||||
|
content: "🔑";
|
||||||
|
padding-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invisible-gone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
███████ ██████ ██████ ████████ ███████ ██████
|
███████ ██████ ██████ ████████ ███████ ██████
|
||||||
|
|
|
@ -61,7 +61,7 @@ async function do_html() {
|
||||||
].map(filepath => path.resolve(__dirname, filepath)),
|
].map(filepath => path.resolve(__dirname, filepath)),
|
||||||
outdir,
|
outdir,
|
||||||
bundle: true,
|
bundle: true,
|
||||||
minify: true,
|
minify: typeof process.env.NO_MINIFY === "undefined",
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
treeShaking: true,
|
treeShaking: true,
|
||||||
watch: typeof process.env.ESBUILD_WATCH === "undefined" ? false : {
|
watch: typeof process.env.ESBUILD_WATCH === "undefined" ? false : {
|
||||||
|
|
|
@ -42,15 +42,20 @@ class TableView {
|
||||||
for(let def of tabledef.items) {
|
for(let def of tabledef.items) {
|
||||||
let el = document.createElement("div");
|
let el = document.createElement("div");
|
||||||
el.classList.add("data-item");
|
el.classList.add("data-item");
|
||||||
el_dataitems.appendChild(el);
|
|
||||||
|
|
||||||
if(ui_item_index[def.type] instanceof AbstractUIItem) {
|
console.log(ui_item_index[def.type]);
|
||||||
|
if(typeof ui_item_index[def.type] !== "undefined") {
|
||||||
let item_manager = new ui_item_index[def.type](el, def);
|
let item_manager = new ui_item_index[def.type](el, def);
|
||||||
this.el_parts.set(def.name, item_manager);
|
this.el_parts.set(def.name, item_manager);
|
||||||
|
console.log(`TableView:UIItem create`, item_manager);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
console.warn(`Unknown item definition type '${def.type}', ignoring. This is probably a bug.`);
|
console.warn(`Unknown item definition type '${def.type}', ignoring. This is probably a bug.`, def);
|
||||||
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Only append the item to the display if we actually found a manager for it
|
||||||
|
el_dataitems.appendChild(el);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.el.replaceChildren(parts);
|
this.el.replaceChildren(parts);
|
||||||
|
@ -80,9 +85,9 @@ class TableView {
|
||||||
* @return {void}
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
append_table(peer, table) {
|
append_table(peer, table) {
|
||||||
|
console.log(`TableView:append PEER`, peer, `TABLE`, table);
|
||||||
for(let [ def_name, item_manager ] of this.el_parts) {
|
for(let [ def_name, item_manager ] of this.el_parts) {
|
||||||
if(item_manager === null) continue;
|
if(item_manager === null) continue;
|
||||||
|
|
||||||
item_manager.append(peer, table);
|
item_manager.append(peer, table);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,9 +12,15 @@ class UITable extends AbstractUIItem {
|
||||||
|
|
||||||
this.emel = new Emel().emel;
|
this.emel = new Emel().emel;
|
||||||
|
|
||||||
this.el.replaceChildren(this.emel(`table>(thead>(tr>th{Peer}+${
|
switch(typeof def.content) {
|
||||||
Object.keys(def.content).map(header => `th{${header}}`).join("+")
|
case "string":
|
||||||
})+tbody`));
|
this.el.replaceChildren(this.emel(`table>(thead>tr>th{Peer}+th{Value})+tbody`))
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.el.replaceChildren(this.emel(`table>(thead>tr>th{Peer}+${
|
||||||
|
Object.keys(def.content).map(header => `th{${header}}`).join("+")
|
||||||
|
})+tbody`));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
clear() {
|
clear() {
|
||||||
|
@ -32,10 +38,28 @@ class UITable extends AbstractUIItem {
|
||||||
new_row.appendChild(peer_name(peer));
|
new_row.appendChild(peer_name(peer));
|
||||||
|
|
||||||
// Note here that the comma is *important*. This is a destructuring assignment where we ignore the first value.
|
// Note here that the comma is *important*. This is a destructuring assignment where we ignore the first value.
|
||||||
for(let [ , template ] of Object.entries(this.def.content)) {
|
switch(typeof this.def.content) {
|
||||||
let table_cell = document.createElement("td");
|
case "string":
|
||||||
table_cell.appendChild(document.createTextNode(nightink(template, table)));
|
let cell_value = document.createElement("td");
|
||||||
new_row.appendChild(table_cell);
|
cell_value.appendChild(document.createTextNode(nightink(this.def.content, table)));
|
||||||
|
new_row.appendChild(cell_value);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
for(let [ , template ] of Object.entries(this.def.content)) {
|
||||||
|
let table_cell = document.createElement("td");
|
||||||
|
let value = null;
|
||||||
|
switch(typeof template) {
|
||||||
|
case "function":
|
||||||
|
value = template(table);
|
||||||
|
break;
|
||||||
|
case "string":
|
||||||
|
value = nightink(template, table);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
table_cell.appendChild(document.createTextNode(value));
|
||||||
|
new_row.appendChild(table_cell);
|
||||||
|
}
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
new_row.dataset.peer_name = peer.name;
|
new_row.dataset.peer_name = peer.name;
|
||||||
|
|
|
@ -1,17 +1,37 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
function handle_toggle_id(event) {
|
||||||
|
event.target.closest(`.peer-name`)
|
||||||
|
.querySelector(`.peer-name-id`)
|
||||||
|
.classList.toggle(`invisible-gone`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handle_copy_id(event) {
|
||||||
|
await navigator.clipboard.writeText(event.target
|
||||||
|
.closest(`.peer-name`)
|
||||||
|
.dataset.peer_id);
|
||||||
|
|
||||||
|
// TODO: Show notification here
|
||||||
|
}
|
||||||
|
|
||||||
export default function peer_name(peer) {
|
export default function peer_name(peer) {
|
||||||
const result = document.createElement("span");
|
const result = document.createElement("span");
|
||||||
result.classList.append(`peer-name`);
|
result.classList.add(`peer-name`);
|
||||||
result.dataset.peer_id = peer.id;
|
result.dataset.peer_id = peer.id;
|
||||||
result.dataset.peer_name = peer.name;
|
result.dataset.peer_name = peer.name;
|
||||||
|
|
||||||
const peer_name = document.createElement("span");
|
const peer_name = document.createElement("span");
|
||||||
|
peer_name.classList.add(`peer-name-name`);
|
||||||
peer_name.appendChild(document.createTextNode(peer.name));
|
peer_name.appendChild(document.createTextNode(peer.name));
|
||||||
|
|
||||||
const peer_id = document.createElement("span");
|
const peer_id = document.createElement("span");
|
||||||
peer_id.appendChild(document.createTextNode(peer.id));
|
peer_id.classList.add(`peer-name-id`, `invisible-gone`);
|
||||||
|
peer_id.appendChild(document.createTextNode(
|
||||||
|
peer.id.substring(0, 7)
|
||||||
|
));
|
||||||
|
|
||||||
|
peer_name.addEventListener("click", handle_toggle_id);
|
||||||
|
peer_id.addEventListener("click", handle_copy_id);
|
||||||
// TODO: When the id is clicked, copy it to the clipboard - we may need a fancy tooltip library for this
|
// TODO: When the id is clicked, copy it to the clipboard - we may need a fancy tooltip library for this
|
||||||
|
|
||||||
// text-overflow: ellipsis; may be useful here
|
// text-overflow: ellipsis; may be useful here
|
||||||
|
|
Loading…
Reference in a new issue