More dashboard fixes

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

gui/dashboard/app.css

@@ -1,6 +1,7 @@
 html, body {
   --body-bg: #000;
   --tile-bg: #181818;
+  --grey: grey;
   --red: red;
   --green: green;
   --radius: 10px;

gui/dashboard/app.svelte

@@ -1,5 +1,4 @@
 <script>
-  import './app.css';
   import { onMount } from 'svelte';
   import TileRawValue from './tile-rawvalue.svelte';
   import Tiles from './tiles.svelte';
@@ -10,6 +9,7 @@
   let services = {};
   let servicesUp = {};
   let servicesDown = {};
+  let servicesUnknown = {};
   let loading = true;
 
   onMount(() => {
@@ -32,7 +32,13 @@
 
           for (const id of ids) {
             const service = services[id];
-            if (service.lastBeat && service.lastBeat.down) {
+            if (!service.lastBeat || !service.lastBeat.date) {
+              servicesUnknown = {
+                ...servicesUnknown,
+                [id]: service,
+              };
+            }
+            else if (service.lastBeat.down) {
               servicesDown = {
                 ...servicesDown,
                 [id]: service,
@@ -64,8 +70,9 @@
       <TileRawValue title="Last updated" value={lastUpdatedFormatted} />
 
       {#if !loading}
-        <Tiles services={servicesDown} />
-        <Tiles services={servicesUp} />
+        <Tiles services={servicesDown} color="red" value="down" />
+        <Tiles services={servicesUp} color="green" value="up" />
+        <Tiles services={servicesUnknown} color="grey" value="no data" />
       {:else}
         loading
       {/if}

gui/dashboard/tile-rawvalue.svelte

@@ -5,9 +5,10 @@
   export let subtitle;
   export let color;
   export let value;
+  export let date;
 </script>
 
-<Tile {title} {subtitle} {color}>
+<Tile {title} {subtitle} {color} {date}>
   <div class="value {color}">
     {value}
   </div>

gui/dashboard/tile.svelte

@@ -2,22 +2,31 @@
   export let title;
   export let subtitle;
   export let color;
+  export let date;
 </script>
 
 <div class="tile {color}">
-  {#if title || subtitle}
+  {#if title || subtitle || date}
     <div class="desc">
-      {#if title}
-        <div class="title">{title}</div>
-      {/if}
+      <div>
+        {#if title}
+          <div class="title">{title}</div>
+        {/if}
 
-      {#if subtitle}
-        <div class="subtitle">{subtitle}</div>
+        {#if subtitle}
+          <div class="subtitle">{subtitle}</div>
+        {/if}
+      </div>
+
+      {#if date}
+        <div class="time">{date.toLocaleTimeString('en-GB', {
+          timeStyle: 'short',
+        })}</div>
       {/if}
     </div>
   {/if}
 
-  <slot />
+  <div class="content"><slot /></div>
 </div>
 
 <style>
@@ -38,9 +47,14 @@
     border-color: var(--green);
   }
 
+  .tile.grey .content {
+    color: var(--grey);
+  }
+
   .desc {
     font-size: 1.3rem;
     margin-bottom: 1rem;
+    display: flex;
   }
 
   .desc .title {
@@ -50,4 +64,9 @@
   .desc .subtitle {
     font-weight: 100;
   }
+
+  .desc .time {
+    opacity: 0.6;
+    margin-left: auto;
+  }
 </style>

gui/dashboard/tiles.svelte

@@ -2,13 +2,15 @@
   import TileRawValue from './tile-rawvalue.svelte';
 
   export let services;
+  export let color;
+  export let value;
 </script>
 
 {#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'}
+    date={service.lastBeat.date ? new Date(service.lastBeat.date) : false}
+    {value}
+    {color}
   />
 {/each}