Basic dashboard

Signed-off-by: Romein van Buren <romein@vburen.nl>

gui/dashboard/app.svelte

@@ -1,19 +1,69 @@
 <script>
   import { onMount } from 'svelte';
+  import TileRawValue from './tile-rawvalue.svelte';
 
-  onMount(() => console.log('test'));
+  let lastUpdated = new Date();
+  let lastUpdatedFormatted = '';
+  let services = {};
+  let loading = true;
+
+  $:console.log(services);
+
+  onMount(() => {
+    const ws = new WebSocket('ws://__SERVER__/statusdashboard/socket');
+
+    ws.onmessage = async evt => {
+      const data = JSON.parse(evt.data || '""');
+
+      switch (data.cmd) {
+        case 'time':
+          lastUpdated = new Date(data.time);
+          lastUpdatedFormatted = lastUpdated.toLocaleTimeString('en-GB', {
+            timeStyle: 'short',
+          });
+          break;
+
+        case 'data':
+          services = data.data;
+          loading = false;
+          break;
+
+        default:
+          break;
+      }
+    }
+  });
 </script>
 
 <div class="center">
   <div class="ratio">
+    <div class="tiles">
+      <TileRawValue title="Last updated" value={lastUpdatedFormatted} />
 
+      {#if !loading}
+        {#each Object.entries(services) as [ id, service ] (id)}
+          {@const isDown = service.lastBeat.down}
+          <TileRawValue
+            title={service.name.en}
+            value={isDown ? 'down' : 'up'}
+            color={isDown ? 'red' : 'green'}
+          />
+        {/each}
+      {:else}
+        loading
+      {/if}
+    </div>
   </div>
 </div>
 
 <style>
   :global(html), :global(body) {
-    --radius: 10px;
     --tile-bg: #181818;
+    --red: red;
+    --green: green;
+    --radius: 10px;
+    --cols: 4;
+    --rows: 3;
 
     background-color: #000;
     color: #fff;
@@ -40,4 +90,13 @@
     transform: translate(-50%,-50%);
     width: 100vw;
   }
+
+  .tiles {
+    margin: 1rem;
+    display: grid;
+    grid-template-columns: repeat(var(--cols), 1fr);
+    grid-template-rows: repeat(var(--rows), 1fr);
+    gap: 1rem;
+    justify-items: stretch;
+  }
 </style>

gui/dashboard/tile-rawvalue.svelte

@@ -0,0 +1,29 @@
+<script>
+  import Tile from './tile.svelte';
+
+  export let title;
+  export let subtitle;
+  export let color;
+  export let value;
+</script>
+
+<Tile {title} {subtitle}>
+  <div class="value {color}">
+    {value}
+  </div>
+</Tile>
+
+<style>
+  .value {
+    font-size: 3rem;
+    font-weight: 600;
+  }
+
+  .red {
+    color: var(--red);
+  }
+
+  .green {
+    color: var(--green);
+  }
+</style>

gui/dashboard/tile.svelte

@@ -4,27 +4,38 @@
 </script>
 
 <div class="tile">
-  {#if title}
-    <div class="title">{title}</div>
+  {#if title || subtitle}
+    <div class="desc">
+      {#if title}
+        <div class="title">{title}</div>
+      {/if}
+
+      {#if subtitle}
+        <div class="subtitle">{subtitle}</div>
+      {/if}
+    </div>
   {/if}
 
-  {#if subtitle}
-    <div class="subtitle">{subtitle}</div>
-  {/if}
+  <slot />
 </div>
 
 <style>
+  .desc {
+    font-size: 1.3rem;
+    margin-bottom: 1rem;
+  }
+
   .tile {
     padding: 1rem;
     background-color: var(--tile-bg);
     border-radius: var(--radius);
   }
 
-  .title, .subtitle {
-    font-size: 1.3rem;
+  .title {
+    font-weight: 200;
   }
 
-  .title {
-    font-weight: 600;
+  .subtitle {
+    font-weight: 100;
   }
 </style>