From 30b20f8e18088e3ef40021e518e1debfa0f84cc6 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Thu, 10 Mar 2022 03:26:08 +0000
Subject: [PATCH] client: Add initial on load UI logic.

It's still missing static/js/tabledefs/index.mjs though
---
 src/static/app.mjs                  | 12 +++-----
 src/static/index.html               |  3 +-
 src/static/js/SystemQueryClient.mjs |  1 -
 src/static/js/ui/GlobalUI.mjs       | 43 +++++++++++++++++++++++++++++
 4 files changed, 49 insertions(+), 10 deletions(-)
 create mode 100644 src/static/js/ui/GlobalUI.mjs

diff --git a/src/static/app.mjs b/src/static/app.mjs
index 2372bf2..e2628ce 100644
--- a/src/static/app.mjs
+++ b/src/static/app.mjs
@@ -3,6 +3,7 @@
 import SystemQueryClient from './js/SystemQueryClient.mjs';
 import make_router from './js/routes_client.mjs';
 
+import GlobalUI from './js/ui/GlobalUI.mjs';
 import TableView from './js/ui/TableView.mjs';
 
 window.addEventListener("load", async (_event) => {
@@ -12,16 +13,11 @@ window.addEventListener("load", async (_event) => {
 	globalThis.sysquery = new SystemQueryClient();
 	globalThis.sysquery_router = make_router();
 	globalThis.sysui = {
-		tableview: new TableView(el_table)
+		ui: new GlobalUI(),
+		tableview: new TableView(el_table),
 	}
 	
-	
-	
-	const status = await globalThis.sysquery.status();
-	
-	el_version.replaceChildren(
-		document.createTextNode(status.version)
-	);
+	await ui.init();
 	
 	
 	globalThis.sysquery_router.navigate_current_hash();
diff --git a/src/static/index.html b/src/static/index.html
index 8e96926..c1d3510 100644
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -13,7 +13,8 @@
 		<nav>
 			<ul class="nav-items">
 				
-				<li><a href="#settings">
+				<!-- Any items specified here *must* have the "static" class, otherwise they'll be mistaken for  a rogue dynamic item and stripped -->
+				<li class="static"><a href="#settings">
 					<span class="fa fa-cog fa-fw" aria-hidden="true"></span>
 					Settings
 				</a></li>
diff --git a/src/static/js/SystemQueryClient.mjs b/src/static/js/SystemQueryClient.mjs
index 03720cd..9ad3873 100644
--- a/src/static/js/SystemQueryClient.mjs
+++ b/src/static/js/SystemQueryClient.mjs
@@ -41,7 +41,6 @@ class SystemQueryClient {
 		console.log(`FETCH ${path} ${response.status} ${response.statusText}`);
 		return await response.json();
 	}
-	// TODO: Implement fetch-based client API for the UI logic to use here
 }
 
 export default SystemQueryClient;
diff --git a/src/static/js/ui/GlobalUI.mjs b/src/static/js/ui/GlobalUI.mjs
new file mode 100644
index 0000000..1c8225b
--- /dev/null
+++ b/src/static/js/ui/GlobalUI.mjs
@@ -0,0 +1,43 @@
+"use strict";
+
+import Emel from 'emel';
+
+import forkawesome_emel from './forkawesome_emel.mjs';
+
+import tabledefs from  './tabledefs/index.mjs';
+
+class GlobalUI {
+	constructor() {
+		this.emel = new Emel().emel;
+	}
+	
+	async init() {
+		const status = await globalThis.sysquery.status();
+		
+		// 1: Update version display
+		el_version.replaceChildren(
+			document.createTextNode(status.version)
+		);
+		
+		// 2: Update navigation bar
+		const el_navitems = document.querySelector(".nav-items"); // <ul>
+		
+		// Strip all non-static navigation items
+		for(let item of el_navitems.children) {
+			if(item.classList.contains("static")) continue;
+			el_navitems.removeChild(item);
+		}
+		
+		// Generate new dynamic navigation items
+		const result = document.createDocumentFragment();
+		for(const table_name of status.tables) {
+			result.append(...this.emel(`li>a[href=#table/?]>${forkawesome_emel(tabledefs[table_name].icon)}+{?}`, {
+				placeholders: [ table_name, table_name ]
+			}));
+		}
+		
+		el_navitems.prepend(result);
+	}
+}
+
+export default GlobalUI;