Implement event log

frontend/src/App.svelte

@@ -4,13 +4,10 @@
 
   import { user } from "./stores";
 
-  import Navbar from "./Navbar.svelte";
   import P404 from "./pages/P404.svelte";
   import Mining from "./pages/mining/Mining.svelte";
-  import Footer from "./Footer.svelte";
   import BaseLayout from "./BaseLayout.svelte";
   import Monitoring from "./pages/monitoring/Monitoring.svelte";
-    import Bar from "./pages/playground/Bar.svelte";
 
   onMount(async () => {
     const res = await fetch("/user/me");
@@ -27,23 +24,6 @@
     </BaseLayout>
   </Route>
 
-  <Route path="foo">
-    <BaseLayout>
-      <section class="hero is-danger is-fullheight">
-        <div class="hero-body">
-          <div class="">
-            <p class="title">Fullheight hero</p>
-            <p class="subtitle">Fullheight subtitle</p>
-          </div>
-        </div>
-      </section>
-    </BaseLayout>
-  </Route>
-
-  <Route path="bar">
-    <BaseLayout><Bar /></BaseLayout>
-  </Route>
-
   <Route path="monitoring/*">
     <BaseLayout><Monitoring /></BaseLayout>
   </Route>

frontend/src/Navbar.svelte

@@ -30,8 +30,6 @@
     </div>
     <div class="navbar-menu {menu_open ? 'is-active' : ''}">
         <div class="navbar-start">
-            <Navlink target="/foo" text="Foo" icon="fas fa-hippo" />
-            <Navlink target="/bar" text="Bar" icon="fas fa-otter" />
             <Navlink target="/monitoring" text="Monitoring" icon="fas fa-binoculars" />
             <Navlink target="/mining" text="Mining" icon="fas fa-person-digging" />
             <Navlink target="/stats" text="Statistics" icon="fas fa-chart-line" />

frontend/src/pages/monitoring/Event.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" context="module">
+    type Event = {
+        icon: string;
+        text: string;
+    };
+    const mappings: Map<string, (any) => Event> = new Map([
+        [
+            "computer_connect",
+            (value) => ({
+                icon: "fas fa-circle-plus",
+                text: `Computer ${value.computer_id} connected`,
+            }),
+        ],
+        [
+            "computer_disconnect",
+            (value) => ({
+                icon: "fas fa-circle-minus",
+                text: `Computer ${value.computer_id} disconnected`,
+            }),
+        ],
+    ]);
+</script>
+
+<script lang="ts">
+    export let timestamp: string;
+    export let value: any;
+
+    let icon = "far fa-circle-question";
+    let text = "Unknown event";
+
+    if ("type" in value) {
+        let m = mappings.get(value.type);
+        if (m) {
+            let mapped = m(value);
+            icon = mapped.icon;
+            text = mapped.text;
+        }
+    }
+
+    let datetime = new Date(timestamp);
+
+    let expanded = false;
+</script>
+
+<div
+    class="entry"
+    on:click={() => {
+        expanded = !expanded;
+    }}
+>
+    <div class="headers">
+        <div><span class="icon"><i class={icon} /></span></div>
+        <div class="header-title">{text}</div>
+        <div>{datetime}</div>
+        <div>
+            <span class="icon"
+                ><i
+                    class="fas {expanded ? 'fa-angle-up' : 'fa-angle-down'}"
+                /></span
+            >
+        </div>
+    </div>
+    {#if expanded}
+        <div class="expandable">
+            <pre>{JSON.stringify(value, null, 1)}</pre>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .entry {
+        background-color: #fafafa;
+        display: flex;
+        flex-direction: column;
+
+        &:nth-child(even) {
+            background-color: white;
+        }
+
+        border-top: 1px solid #dbdbdb;
+    }
+
+    .headers {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 15px;
+
+        cursor: pointer;
+    }
+
+    .header-title {
+        flex: 1 1 0;
+    }
+</style>

frontend/src/pages/monitoring/Events.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import Event from "./Event.svelte";
+
+    const ENDPOINT = "/api/events";
+
+    let events: { _id: string; timestamp: string; value: any }[] = [];
+
+    onMount(() => {
+        let int = setInterval(async () => {
+            let r = await fetch(ENDPOINT);
+            events = await r.json();
+        }, 200);
+
+        return () => {
+            clearInterval(int);
+        };
+    });
+</script>
+
+<div class="events">
+    {#each events as event (event._id)}
+        <Event {...event} />
+    {/each}
+</div>
+
+<style lang="scss">
+    .events {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+    }
+</style>

frontend/src/pages/monitoring/Monitoring.svelte

@@ -1,27 +1,28 @@
 <script lang="ts">
     import { Link, Route, useParams } from "svelte-navigator";
+    import Events from "./Events.svelte";
     import Viewer from "./Viewer.svelte";
 
     const uuids = ["8b9faf9f-9470-4a50-b405-0af5f0152550"];
 </script>
 
 <section class="section">
-    <Route path="/">
-        <div class="content">
+    <div class="container">
+        <Route path="/">
             <p>Yo wassup</p>
             <ul>
                 {#each uuids as id}
                     <li><Link to="./{id}">{id}</Link></li>
                 {/each}
             </ul>
-        </div>
-    </Route>
+            <p>eventeroni</p>
+            <Events />
+        </Route>
 
-    <Route path=":id" let:params>
-        <div class="container">
+        <Route path=":id" let:params>
             <h1 class="title">ASSUMING DIRECT CONTROL</h1>
             <Viewer uuid={params.id} />
             <Link to="..">fuck go back</Link>
-        </div>
-    </Route>
+        </Route>
+    </div>
 </section>

frontend/src/pages/playground/Bar.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-    import { onDestroy } from "svelte";
-    import Canvas from "./Canvas.svelte";
-
-    let colors = ["#ff6600", "#00ff66", "#6600ff"];
-
-    let i = 0;
-    $: color = colors[i];
-
-    let int = setInterval(() => {
-        i = (i + 1) % colors.length;
-    }, 1000);
-
-    onDestroy(() => {
-        clearInterval(int);
-    });
-</script>
-
-<section class="section">
-    <Canvas {color} />
-</section>

frontend/src/pages/playground/Canvas.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-    import { onMount } from "svelte";
-
-    export let color: string;
-
-    let canvas: HTMLCanvasElement;
-
-    let redraws = 0;
-
-    function redraw(color) {
-        if (!canvas) return;
-
-        redraws += 1;
-        let cx = canvas.getContext("2d");
-        cx.fillStyle = color;
-        cx.fillRect(0, 0, cx.canvas.width, cx.canvas.height);
-    }
-    
-    $: redraw(color);
-</script>
-
-<canvas bind:this={canvas} />
-<pre>color: {color}
-redraws: {redraws}</pre>