client: Add initial on load UI logic.
It's still missing static/js/tabledefs/index.mjs though
This commit is contained in:
parent
0f2c5ae194
commit
30b20f8e18
4 changed files with 49 additions and 10 deletions
|
@ -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();
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
43
src/static/js/ui/GlobalUI.mjs
Normal file
43
src/static/js/ui/GlobalUI.mjs
Normal file
|
@ -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;
|
Loading…
Reference in a new issue