make basic UI fully functional

ui/app.js

@@ -1,31 +1,43 @@
 "use strict";
 
-import Session from "../models/session.js";
 import WbDb from "../data/db.js";
-import SessionRepo from "../data/session_repo.js";
-import SessionList from "./session_list.js";
+import Shell from "./shell.js";
 
 export default class App {
-  #sessions = [];
+  #needsHandler = true;
 
   constructor() {
-    let db = WbDb.get();
-    if (db.open)
-      this.#dbReady();
-    else
-      db.addEventListener(WbDb.EVENT_CHANGE, this.#dbReady.bind(this));
+    WbDb.get().addEventListener(WbDb.EVENT_CHANGE, () => {
+      if (this.#needsHandler) {
+        WbDb.get().db.addEventListener("error", e => console.log(e));
+        this.#needsHandler = false;
       }
-
-  async #dbReady() {
-    this.#sessions = await SessionRepo.getAll();
       m.redraw();
+    });
   }
 
   view() {
-    return m(SessionList, {
-      models: this.#sessions,
-      onSelect: (key) => console.log("selected", key),
-      onNew: () => console.log("new"),
-    });
+    let db = WbDb.get();
+
+    if (db.failed)
+      return m("[", [
+        m("h1", "Watterblock kann nicht geöffnet werden"),
+        m("p", "Die IndexedDB-Verbindung funktioniert gerade nicht"),
+      ]);
+
+    if (db.blocked)
+      return m("[", [
+        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);
   }
 }

ui/session.js

@@ -5,8 +5,9 @@ import GameView from "./game.js";
 
 export default class SessionView {
   /** @param {{ attrs: { model: Session } }} param The session model to use. */
-  view({ attrs: { model } }) {
+  view({ attrs: { model, onDeselect } }) {
     return m("article", [
+      m("button", { onclick: () => onDeselect() }, "Zruck"),
       model.games.map((g) => m(GameView, { model: g })),
       model.currentGame !== null
         ? m(GameView, { model: model.currentGame })

ui/shell.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import Session from "../models/session.js";
+import SessionRepo from "../data/session_repo.js";
+import SessionList from "./session_list.js";
+import SessionView from "./session.js";
+
+export default class Shell {
+  /** @type(?Session[]) */
+  #sessions = null;
+  /** @type(?Session) */
+  #currentSession = null;
+
+  constructor() {
+    SessionRepo.getAll().then(ls => {
+      this.#sessions = ls;
+      m.redraw();
+    });
+  }
+
+  view() {
+    if (this.#currentSession !== null)
+      return m(SessionView, {
+        model: this.#currentSession,
+        onDeselect: () => this.#currentSession = null;
+      });
+
+    if (this.#sessions !== null)
+      return m(SessionList, {
+        models: this.#sessions,
+        onSelect: async (key) => {
+          this.#currentSession = await SessionRepo.get(key) ?? null;
+        },
+        onNew: async () => {
+          let session = new Session();
+          await SessionRepo.put(session);
+          this.#currentSession = session;
+          this.#sessions.splice(0, 0, session);
+        }
+      });
+
+    return m("p", "Wart kurz, i lad grad die Spiele…");
+  }
+}