add live reload to overview page

src/lib/components/ui/Dropdown.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let options: any[];
+  export let selected: any = undefined;
+  export let open: boolean = false;
+  export let displayWith: (value: any) => any = undefined;
+  if (!displayWith) {
+    displayWith = (value) => value;
+  }
+</script>
+
+<div class="dropdown dropdown-hover {open ? 'dropdown-open' : ''}">
+  {#if $$slots.default}
+    <div tabindex="0" class="m-1 btn"><slot /></div>
+  {/if}
+  <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
+    {#each options as option}
+      <li on:click={() => (selected = option)}>
+        <a>{displayWith(option)}</a>
+      </li>
+    {/each}
+  </ul>
+</div>

src/lib/components/ui/Menu.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let options: any[];
+  export let selected: any = undefined;
+  export let displayWith: (value: any) => any = undefined;
+  if (!displayWith) {
+    displayWith = (value) => `${value}s`;
+  }
+</script>
+
+<ul class="menu py-3 bg-base-300 rounded-box horizontal">
+  <li class="menu-title">
+    <span><slot /></span>
+  </li>
+  {#each options as option}
+    <li on:click={() => (selected = option)}>
+      <a class="rounded-lg {selected === option ? 'bg-primary' : ''}">{displayWith(option)}</a>
+    </li>
+  {/each}
+</ul>

src/lib/components/ui/Toggle.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let active: boolean = false;
+  export let color: 'toggle-primary' | 'toggle-secondary' | 'toggle-accent' | '' = 'toggle-primary';
+</script>
+
+<span class="form-control inline-flex">
+  <span class="m-2"><slot /></span>
+
+  <span class="m-2">
+    <input type="checkbox" checked={active} class="toggle {color}" />
+  </span>
+</span>

src/routes/overview.svelte

@@ -9,7 +9,8 @@
     Cell5GStat,
     CellRadioStat,
   } from '$lib/types';
-  export async function load({ fetch }) {
+  export async function load({ fetch, session }) {
+    session['refresh'] = '0';
     const status: StatusResponse = await fetch(`/api/${Endpoint.STATUS}`).then((res: Response) =>
       res.json(),
     );
@@ -58,7 +59,11 @@
   import H1 from '$lib/components/ui/H1.svelte';
   import DeviceInformation from '$lib/widgets/DeviceInformation.svelte';
   import NetworkInformation from '$lib/widgets/NetworkInformation.svelte';
-  import { onDestroy } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
+  import { page, session } from '$app/stores';
+  import Toggle from '$lib/components/ui/Toggle.svelte';
+  import Dropdown from '$lib/components/ui/Dropdown.svelte';
+  import Menu from '$lib/components/ui/Menu.svelte';
 
   export let routerCfg: DeviceAppStatus;
   export let devices: DeviceCfg[];
@@ -72,12 +77,16 @@
     routerCfg.UpTime++;
   }, 1000);
 
+  let refreshInterval = setInterval(() => {
+    $session['refresh'] = `${routerCfg.UpTime}`;
+  }, 5000);
   onDestroy(() => {
     clearInterval(uptimeInterval);
+    clearInterval(refreshInterval);
   });
 </script>
 
-<H1>Overview</H1>
+<H1>Overview <button class="btn loading btn-circle btn-lg bg-base-200 btn-ghost"></button></H1>
 
 <div class="grid gap-4 m-4 md:grid-cols-2 lg:grid-cols-3">
   <div class="col-auto">