client: Start filling out more of the UI plumbing, but there's still a ways to go

This commit is contained in:
Starbeamrainbowlabs 2022-03-06 02:39:52 +00:00
parent c9d4dfe134
commit 5d38a56bed
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
3 changed files with 68 additions and 6 deletions

View file

@ -0,0 +1,26 @@
"use strict";
class AbstractUIItem {
constructor(el, def) {
this.el = el;
this.def = def;
this.known_tables = new Map();
this.verbose = false;
}
clear() {
this.known_tables.clear();
}
append(peer, table) {
if(this.verbose) {
console.log(table_data);
}
this.known_tables.set(peer.id, { peer, table });
}
}
export default AbstractUIItem;

View file

@ -3,28 +3,37 @@
import Emel from 'emel';
import fa_emel from './forkawesome_emel.mjs';
import UITable from './UITable.mjs';
class TableView {
constructor(el) {
if(this.el === null || typeof this.el === "undefined") throw new Error(`Expected HTML element as the first argument, but got null or undefined.`);
if(el === null || typeof el === "undefined") throw new Error(`Expected HTML element as the first argument, but got null or undefined.`);
this.el = el;
this.el_parts = new Map();
this.emel = new Emel().emel;
}
clear() {
this.el.replaceChildren();
this.el_parts.clear();
// No need to call this here, as evereything gets replaced instantly at the end of init()
// this.el.replaceChildren();
}
init(tabledef) {
this.clear();
const parts = this.emel(`h2>(${fa_emel(tabledef.icon)}+{?})^div[class=data-display]`, {
const parts = this.emel(`h2>(${fa_emel(tabledef.icon)}+{?})^div.data-display`, {
placeholders: [
tabledef.name
]
});
const el_dataitems = parts.querySelector(".data-display");
for(let def of tabledef.items) {
// MARKER: We were last editing here
let el = document.createElement("div");
el.classList.add("data-item");
el_dataitems.appendChild(el);
let item_manager = new UITable(el, def);
this.el_parts.set(def.name, item_manager);
}
this.el.replaceChildren(parts);

View file

@ -1,8 +1,35 @@
"use strict";
class UITable {
constructor() {
import Emel from 'emel';
import { NightInk } from 'nightink';
import AbstractUIItem from './AbstractUIItem.mjs';
class UITable extends AbstractUIItem {
constructor(el, def) {
super(el, def);
this.emel = new Emel().emel;
this.el.replaceChildren(this.emel(`table>(thead>tr>${Object.keys(def.content).map(header => `th{${header}}`).join("+")})+tbody`));
}
clear() {
super.clear();
// TODO: Empty the table, but avoiding removing the header, structure etc
}
append(peer, table) {
super.append(peer, table);
let new_row = document.createElement("tr");
for(let [ _, template ] of Object.entries(this.def.content)) {
let table_cell = document.createElement("td");
table_cell.appendChild(document.createTextNode())
}
// TODO Append the new table item in the right place
// Perhaps we could use .dataset & iterate until we find the right one to insert directly before?
}
}