add proper checking for gateway online, add error alert instead of in…

…valid status values for network info widgets
kclejeune · Aug 30, 2021 · c2d45ab · c2d45ab
1 parent a59aa8b
commit c2d45ab
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 4 deletions.
diff --git a/src/lib/components/ui/Alert.svelte b/src/lib/components/ui/Alert.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  export let type: 'alert-error' | 'alert-warning' | 'alert-success' | 'alert-info' | '' = '';
+  export let msg: string;
+  export let showIcon: boolean = true;
+</script>
+
+<div class="alert {type}">
+  <div class="flex-1">
+    {#if showIcon}
+      {#if $$slots.icon}
+        <slot name="icon" />
+      {:else if type === 'alert-error'}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="w-6 h-6 mx-2 stroke-current"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+          />
+        </svg>
+      {:else if type === 'alert-success'}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 mx-2 stroke-current"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      {:else if type === 'alert-warning'}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="w-6 h-6 mx-2 stroke-current"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      {:else}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="w-6 h-6 mx-2 stroke-current"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      {/if}
+    {/if}
+    <span>{msg}</span>
+  </div>
+</div>
diff --git a/src/lib/widgets/NetworkInformation.svelte b/src/lib/widgets/NetworkInformation.svelte
@@ -5,6 +5,7 @@
   import WidgetCard from '$lib/components/ui/WidgetCard.svelte';
   import type { Cell4GStat, Cell5GStat, CellRadioStat } from '$lib/types';
   import ConnectionStrengthIndicator from '$lib/components/ui/ConnectionStrengthIndicator.svelte';
+  import Alert from '$lib/components/ui/Alert.svelte';
 
   export let cellStats: CellRadioStat;
   export let title: string;
@@ -16,13 +17,27 @@
     { name: 'RSRQ', value: `${cellStats.RSRQCurrent}dB` },
     { name: 'PCI', value: `${cellStats.PhysicalCellID}` },
   ];
+
+  const OFFLINE_SIGNAL_VALUE = -32768;
+  export let online: boolean = false;
+  $: offline =
+    cellStats.RSRPStrengthIndexCurrent === 0 &&
+    cellStats.Band === '' &&
+    cellStats.SNRCurrent === OFFLINE_SIGNAL_VALUE &&
+    cellStats.RSRPCurrent === OFFLINE_SIGNAL_VALUE &&
+    cellStats.RSRQCurrent === OFFLINE_SIGNAL_VALUE;
+  $: online = !offline;
 </script>
 
 <WidgetCard {title}>
   <div slot="title" class="align-baseline">
     <ConnectionStrengthIndicator strength={cellStats.RSRPStrengthIndexCurrent} />
   </div>
   <div slot="body">
-    <StatusList items={statusItems} />
+    {#if !offline}
+      <StatusList items={statusItems} />
+    {:else}
+      <Alert type="alert-error" msg="Not Connected" />
+    {/if}
   </div>
 </WidgetCard>
diff --git a/src/routes/overview.svelte b/src/routes/overview.svelte
@@ -65,6 +65,8 @@
   export let cell5GStats: CellRadioStat;
   export let cellLTEStats: CellRadioStat;
   export let online: boolean;
+  let cellLTEOnline: boolean;
+  let cell5GOnline: boolean;
 
   const uptimeInterval = setInterval(() => {
     routerCfg.UpTime++;
@@ -80,18 +82,18 @@
 <div class="grid gap-4 m-4 md:grid-cols-2 lg:grid-cols-3">
   <div class="col-auto">
     <GatewayInformation
-      {online}
+      online={online ?? (cell5GOnline || cellLTEOnline)}
       softwareVersion={routerCfg.SoftwareVersion}
       hardwareVersion={routerCfg.HardwareVersion}
       serialNumber={routerCfg.SerialNumber}
       uptime={convertUptimeToDHMS(routerCfg.UpTime)}
     />
   </div>
   <div class="col-auto">
-    <NetworkInformation title="5G Network" cellStats={cell5GStats} />
+    <NetworkInformation title="5G Network" cellStats={cell5GStats} bind:online={cell5GOnline} />
   </div>
   <div class="col-auto">
-    <NetworkInformation title="LTE Network" cellStats={cellLTEStats} />
+    <NetworkInformation title="LTE Network" cellStats={cellLTEStats} bind:online={cellLTEOnline} />
   </div>
   <div class="col-auto">
     <DeviceInformation {devices} />