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

src/static/js/ui/AbstractUIItem.mjs

@@ -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;

src/static/js/ui/TableView.mjs

@@ -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);

src/static/js/ui/UITable.mjs

@@ -1,8 +1,35 @@
 "use strict";
 
-class UITable {
+import Emel from 'emel';
-	constructor() {
+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?
 	}
 }