improved UI

visualizer/src/api/mod.tsx

@@ -0,0 +1,65 @@
+import {Router} from "https://deno.land/x/oak/mod.ts";
+import {FileMatchService} from "../services/matches.ts";
+import {ViewTabService} from "./tab.tsx";
+
+
+export const apiRouter = new Router( {prefix: '/api/v1'});
+
+async function getMatchService(): Promise<FileMatchService> {
+    const f = "/home/didier/alldressed-programming/dodgeball-tracker/outputs/index.json"
+    return new FileMatchService(f)
+}
+
+apiRouter.get('/ping', (ctx) => {
+    ctx.response.body = <span>pong</span>
+})
+
+apiRouter.get("/match/:id/title", async function(ctx){
+    const service = await getMatchService()
+    const match = await service.getMatchInfoById(ctx.params.id)
+    ctx.response.body = (<span>Match: {match.label}</span>)
+});
+
+apiRouter.get("/match/:id/pane/info", async function(ctx){
+    const service = await getMatchService()
+    const match = await service.getMatchInfoById(ctx.params.id)
+    const viewService = new ViewTabService();
+    ctx.response.body = viewService.infoTab(match)
+});
+
+apiRouter.get("/match/:id/pane/player", async function(ctx){
+    const service = await getMatchService()
+    const match = await service.getMatchInfoById(ctx.params.id)
+    const viewService = new ViewTabService();
+    ctx.response.body = viewService.playerTab(match)
+});
+
+apiRouter.get("/match/:id/pane/player/data", async function(ctx){
+    ctx.response.body = <svg:rect width="100" height="100" />
+});
+
+apiRouter.get('/list-matches', async (ctx) => {
+    const matchService = await getMatchService()
+    const rows = [];
+    for await (const match of matchService.getAllMatchInfo()){
+        rows.push(
+            <tr>
+                <td><a href={`/match/${match.id}/info`}>{ match.label }</a></td>
+                <td><a href={match.originalVideoUrl}>{ match.originalVideoUrl }</a></td>
+            </tr>
+        )
+    }
+    ctx.response.body = (<div>
+        <table class="table is-bordered is-striped is-fullwidth">
+            <thead>
+            <tr>
+                <th>Label</th>
+                <th>Video Link</th>
+            </tr>
+            </thead>
+            <tbody>
+            {rows}
+            </tbody>
+        </table>
+    </div>)
+})

visualizer/src/api/tab.tsx

@@ -0,0 +1,73 @@
+import {MatchInfo} from "../services/matches.ts";
+
+export class ViewTabService {
+
+    infoTab(matchInfo: MatchInfo){
+        return (<table class="table is-bordered is-striped is-fullwidth">
+            <tbody>
+            <tr>
+                <td>Label</td>
+                <td>{matchInfo.label}</td>
+            </tr>
+            <tr>
+                <td>Id</td>
+                <td>{matchInfo.id}</td>
+            </tr>
+            <tr>
+                <td>Date</td>
+                <td>{matchInfo.matchDate}</td>
+            </tr>
+            <tr>
+                <td>Video URL</td>
+                <td>
+                    <a href={matchInfo.originalVideoUrl}>{matchInfo.originalVideoUrl}</a>
+                    </td>
+            </tr>
+            </tbody>
+
+        </table>)
+
+    }
+
+    playerTab(matchInfo: MatchInfo){
+        return (<div>
+            <div id="foo"></div>
+            <form hx-get={"/api/v1/match/:id/pane/player/data"}
+                  hx-target="#court-content">
+                <div class="field is-horizontal">
+                  <div class="field-label is-normal">
+                    <label class="label">Min Time</label>
+                  </div>
+                  <div class="field-body">
+                    <div class="field">
+                      <div class="control">
+                        <input class="input is-danger" type="range" min="0" max="100" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="field is-horizontal">
+                  <div class="field-label is-normal">
+                    <label class="label">Max Time</label>
+                  </div>
+                  <div class="field-body">
+                    <div class="field">
+                      <div class="control">
+                        <input class="input is-danger" type="range" min="0" max="100" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                 <div class="field">
+                      <div class="control">
+                          <button class="button"> Show </button>
+                      </div>
+                  </div>
+                </form>
+        </div>)
+
+    }
+
+}