tfld/watterblock
1
0
Fork 0
Code

refactor to allow use of routing

Browse Source
This commit is contained in:
Adrian Wannenmacher 2026-02-22 15:18:34 +01:00
parent 36d6a9ed9b
commit b9ed3ed37f
Signed by: tfld
GPG Key ID: 19D986ECB1E492D5
5 changed files with 66 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -7,16 +7,13 @@
<title>Watterblock</title>
<link rel="stylesheet" href="/vendored/normalize-8.0.1.css">
<link rel="stylesheet" href="/style.css">
<script src="/vendored/mithril-2.3.8.js" defer></script>
<script type="module">
// initialize DB early
import WbDb from "/data/db.js";
WbDb.get();
// mount app
import App from "/ui/app.js";
m.mount(document.body, App);
</script>
<script src="/vendored/mithril-2.3.8.js" defer></script>
<script src="/index.js" type="module"></script>
</head>
<body>

13
index.js Normal file
View File

@ -0,0 +1,13 @@
"use strict";
import Layout from "/ui/layout.js";
import BaseView from "/ui/base_view.js";
m.route.prefix = "";
m.route(document.body, "/", {
"/": {
render: function() {
return m(Layout, m(BaseView));
},
},
});

43
ui/app.js
View File

@ -1,43 +0,0 @@
"use strict";
import WbDb from "/data/db.js";
import Shell from "/ui/shell.js";
export default class App {
#needsHandler = true;
constructor() {
WbDb.get().addEventListener(WbDb.EVENT_CHANGE, () => {
if (this.#needsHandler) {
WbDb.get().db.addEventListener("error", e => console.log(e));
this.#needsHandler = false;
}
m.redraw();
});
}
view() {
let db = WbDb.get();
if (db.failed)
return m.fragment([
m("h1", "Watterblock kann nicht geöffnet werden"),
m("p", "Die IndexedDB-Verbindung funktioniert gerade nicht"),
]);
if (db.blocked)
return m.fragment([
m("h1", "Watterblock muss warten"),
m("p",
"Bitte schließe alle anderen Tabs, in denen der Watterblock " +
"geöffnet ist"
),
m("p", "Die Spieledatenbank muss aktualisiert werden."),
]);
if (!db.open)
return m("p", "Öffne Datenbank, bitte warten…");
return m(Shell);
}
}

2
ui/shell.js → ui/base_view.js
View File

@ -5,7 +5,7 @@ import SessionRepo from "/data/session_repo.js";
import SessionList from "/ui/session_list.js";
import SessionView from "/ui/session.js";
export default class Shell {
export default class BaseView {
/** @type(?Session[]) */
#sessions = null;
/** @type(?Session) */

50
ui/layout.js Normal file
View File

@ -0,0 +1,50 @@
"use strict";
import WbDb from "/data/db.js";
export default class Layout {
#db = WbDb.get();
#dbErrorsHandled = false;
constructor() {
this.#db.addEventListener(WbDb.EVENT_CHANGE, () => {
if (!this.#dbErrorsHandled) {
this.#db.addEventListener("error", this.#handleDbError.bind(this));
this.#dbErrorsHandled = true;
}
m.redraw();
});
if (this.#db.open && !this.#dbErrorsHandled) {
this.#db.addEventListener("error", this.#handleDbError.bind(this));
this.#dbErrorsHandled = true;
}
}
#handleDbError(error) {
console.error("database error", error);
}
view(vnode) {
if (this.#db.failed)
return m.fragment([
m("h1", "Watterblock kann nicht geöffnet werden"),
m("p", "Die IndexedDB-Verbindung funktioniert gerade nicht"),
]);
if (this.#db.blocked)
return m.fragment([
m("h1", "Watterblock muss warten"),
m("p",
"Bitte schließe alle anderen Tabs, in denen der Watterblock " +
"geöffnet ist"
),
m("p", "Die Spieledatenbank muss aktualisiert werden."),
]);
if (!this.#db.open)
return m("p", "Öffne Datenbank, bitte warten…");
return m("main", vnode.children);
}
}