client-side: go!

There's still a *ton* of work left, but we're (slowly) getting there
This commit is contained in:
Starbeamrainbowlabs 2022-02-24 03:08:21 +00:00
parent ecdd52561a
commit 10f36cf3f5
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
5 changed files with 40 additions and 4 deletions

View file

@ -51,6 +51,13 @@ h1 {
margin: 0; margin: 0;
} }
.version-label {
font-weight: bolder;
font-size: 110%;
}
.version {
font-family: "Ubuntu Mono", "Source Code Pro", monospace;
}
/* /*

View file

@ -1,7 +1,19 @@
import SystemQueryClient from './js/SystemQueryClient.mjs';
import make_router from './js/routes_client.mjs'; import make_router from './js/routes_client.mjs';
window.addEventListener("load", (_event) => { window.addEventListener("load", async (_event) => {
globalThis.sysquery = new SystemQueryClient();
globalThis.sysquery_router = make_router(); globalThis.sysquery_router = make_router();
const el_version = document.querySelector(".version");
const status = await globalThis.sysquery.status();
el_version.replaceChildren(
document.createTextNode(status.version)
);
globalThis.sysquery_router.navigate_current_hash(); globalThis.sysquery_router.navigate_current_hash();
}); });

View file

@ -7,7 +7,7 @@
<body> <body>
<header> <header>
<h1>systemquery</h1> <h1>systemquery</h1>
<p>Version <span class="systemquery-version">???</span></p> <p><span class="version-label">Version</span> <span class="version">???</span></p>
</header> </header>
<nav> <nav>

View file

@ -5,6 +5,20 @@ class SystemQueryClient {
} }
async status() {
return this.fetch_json(`/api/status`);
}
async fetch_json(path) {
let response = await fetch(path, {
headers: {
"accept": "application/json"
},
credentials: "same-origin"
});
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 // TODO: Implement fetch-based client API for the UI logic to use here
} }

View file

@ -3,9 +3,12 @@ import ClientRouter from 'powahroot/Client.mjs';
import route_main from './routes/route_main.mjs'; import route_main from './routes/route_main.mjs';
export default function make_routes() { export default function make_routes() {
const router = new ClientRouter(); const router = new ClientRouter({
verbose: true,
listen_pushstate: true
});
router.add_page("/", route_main); router.add_page("", route_main);
return router; return router;
} }