basic session selector

ui/app.js

@@ -1,12 +1,12 @@
 "use strict";
 
 import Session from "../models/session.js";
-import SessionView from "./session.js";
 import WbDb from "../data/db.js";
 import SessionRepo from "../data/session_repo.js";
+import SessionList from "./session_list.js";
 
 export default class App {
-  #session = null;
+  #sessions = [];
 
   constructor() {
     let db = WbDb.get();
@@ -17,21 +17,15 @@ export default class App {
   }
 
   async #dbReady() {
-    let sessions = await SessionRepo.getAll();
-    if (sessions.length === 0) {
-      this.#session = new Session();
-      SessionRepo.put(this.#session);
-    } else
-      this.#session = sessions[0];
-
+    this.#sessions = await SessionRepo.getAll();
     m.redraw();
   }
 
   view() {
-    if (this.#session === null) {
-      return m("p", "Warte auf Datenbank.");
-    }
-
-    return m(SessionView, { model: this.#session });
+    return m(SessionList, {
+      models: this.#sessions,
+      onSelect: (key) => console.log("selected", key),
+      onNew: () => console.log("new"),
+    });
   }
 }

ui/session_list.js

@@ -0,0 +1,22 @@
+"use strict";
+
+import Session from "../models/session.js";
+
+export default class SessionList {
+  /** @param {{ attrs: { models: Session[] } }} param The sessions to show. */
+  view({attrs: { models, onSelect, onNew } }) {
+    return m("section", [
+      m("button", { onclick: () => onNew() }, "Neie Session"),
+      m("ol", [
+        models.map((s) => m("li", [
+          m("button", { onclick: () => onSelect(s.id) }, [
+            m("p", s.ourTeam !== "" ? s.ourTeam : "Unbnannts Team"),
+            m("p", s.theirTeam !== "" ? s.theirTeam : "Unbnannts Team"),
+            m("p", "•".repeat(s.result.ourPoints)),
+            m("p", "•".repeat(s.result.theirPoints)),
+          ])
+        ]))
+      ])
+    ]);
+  }
+}