Dashboard works properly now

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

gui/dashboard/app.svelte

@@ -6,13 +6,10 @@
   //import { shuffle } from './lib';
 
   //const [ send, receive ] = shuffle;
-  const size = 3 * 4;
-  let lastUpdated = new Date();
-  let lastUpdatedFormatted = '';
-  let servicesUp = [];
-  let servicesDown = [];
-  let servicesUnknown = [];
+  const size = 3 * 4 - 1;
   let pageNum = -1;
+  let tiles = [];
+  let time = '';
 
   function tileProps(service) {
     let props = {
@@ -46,22 +43,39 @@
     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',
+      if (data.cmd === 'data') {
+        let servicesTemp = [];
+        const { servicesUp, servicesDown, servicesUnknown, total } = data;
+        const upOrUnknown = [ ...servicesUp, ...servicesUnknown ];
+        servicesTemp = servicesDown.slice(0, size);
+
+        if (pageNum === -1 || total >= size) {
+          pageNum++;
+
+          if (pageNum > Math.ceil(upOrUnknown.length / size)) {
+            pageNum = 0;
+          }
+        }
+
+        const placesLeft = size - servicesTemp.length;
+        const offset = placesLeft * pageNum;
+        if (placesLeft > 0) {
+          servicesTemp.push(
+            ...upOrUnknown.slice(offset, placesLeft + offset)
+          );
+        }
+
+        tiles = servicesTemp;
+      }
+    }
+
+    const clockInterval = setInterval(() => {
+      time = new Date().toLocaleTimeString('en-GB', {
+        timeStyle: 'medium',
       });
-          break;
+    }, 100);
 
-        case 'data':
-          ({ servicesUp, servicesDown, servicesUnknown } = data);
-          break;
-
-        default:
-          break;
-      }
-    }
+    return () => clearInterval(clockInterval);
   });
 </script>
 
@@ -70,17 +84,17 @@
 <div class="center">
   <div class="ratio">
     <div class="tiles">
-      <TileRawValue title="Last updated" value={lastUpdatedFormatted} />
+      <TileRawValue value={time} center weight={200} />
 
-      {#each servicesDown as service (service.id)}
-        <TileRawValue {...tileProps(service)} />
+      {#each tiles as tile (tile.id)}
+        <TileRawValue {...tileProps(tile)} />
       {/each}
-      {#each servicesUp as service (service.id)}
+      <!--{#each servicesUp as service (service.id)}
         <TileRawValue {...tileProps(service)} />
       {/each}
       {#each servicesUnknown as service (service.id)}
         <TileRawValue {...tileProps(service)} />
-      {/each}
+      {/each}-->
 
       <!--{#each services as service (service.id)}
         <div

gui/dashboard/tile-rawvalue.svelte

@@ -6,10 +6,12 @@
   export let color;
   export let value;
   export let date;
+  export let center = false;
+  export let weight = 600;
 </script>
 
 <Tile {title} {subtitle} {color} {date}>
-  <div class="value {color}">
+  <div class="value {color}" class:center style:font-weight={weight}>
     {value}
   </div>
 </Tile>
@@ -19,4 +21,11 @@
     font-size: 3rem;
     font-weight: 600;
   }
+
+  .value.center {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>

gui/dashboard/tile.svelte

@@ -35,6 +35,8 @@
     background-color: var(--tile-bg);
     border-radius: var(--radius);
     border: 2px solid var(--tile-bg);
+    display: flex;
+    flex-direction: column;
   }
 
   .tile.red {
@@ -75,4 +77,8 @@
     opacity: 0.6;
     margin-left: auto;
   }
+
+  .content {
+    flex-grow: 1;
+  }
 </style>

lib/dashboard/socket.js

@@ -16,21 +16,6 @@ async function createDashboardSocket(server) {
   uws = server.ws({
     route: '/statusdashboard/socket',
     onOpen: async ws => {
-      function sendTime() {
-        try {
-          ws.send(JSON.stringify({
-            cmd: 'time',
-            time: new Date().getTime(),
-          }));
-        }
-        catch {
-          return;
-        }
-      }
-
-      sendTime();
-      setInterval(sendTime, 5000);
-
       async function sendStatuses() {
         const services = await server.storage
           .store('smartyellow/webservice')
@@ -62,12 +47,19 @@ async function createDashboardSocket(server) {
           }
         }
 
+        const total = [
+          ...servicesUp,
+          ...servicesDown,
+          ...servicesUnknown,
+        ].length;
+
         try {
           ws.send(JSON.stringify({
             cmd: 'data',
             servicesUp,
             servicesDown,
             servicesUnknown,
+            total,
           }));
         }
         catch {