add a data usage widget

kclejeune · Sep 25, 2021 · fc302bb · fc302bb
1 parent 4f5e215
commit fc302bb
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 12 deletions.
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
@@ -73,7 +73,7 @@ export interface ApnCfg {
   X_ALU_COM_IPAddressV6: string;
 }
 
-export interface CellularStat {
+export interface UsageStats {
   BytesReceived: number;
   BytesSent: number;
 }
@@ -135,7 +135,7 @@ export interface CellCAStatsCfg {
 export interface NetworkStatusResponse {
   connection_status: ConnectionStatus[];
   apn_cfg: ApnCfg[];
-  cellular_stats: CellularStat[];
+  cellular_stats: UsageStats[];
   ethernet_stats: EthernetStat[];
   cell_5G_stats_cfg: Cell5GStatsCfg[];
   cell_LTE_stats_cfg: CellLTEStatsCfg[];

diff --git a/src/lib/widgets/UsageInformation.svelte b/src/lib/widgets/UsageInformation.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import StatusList from '$lib/components/ui/StatusList.svelte';
+  import WidgetCard from '$lib/components/ui/WidgetCard.svelte';
+  import type { UsageStats } from '$lib/types';
+  import Alert from '$lib/components/ui/Alert.svelte';
+
+  export let usage: UsageStats;
+  export let title: string;
+  function convertUsage(bytes: number, precision: number = 3) {
+    let val: number;
+    let suffix: string;
+    if (bytes < 1024) {
+      val = bytes;
+      suffix = 'B';
+    } else if (bytes < 1024 ** 2) {
+      val = bytes / 1024;
+      suffix = 'KB';
+    } else if (bytes < 1024 ** 3) {
+      val = bytes / 1024 ** 2;
+      suffix = 'MB';
+    } else if (bytes < 1024 ** 4) {
+      val = bytes / 1024 ** 3;
+      suffix = 'GB';
+    } else {
+      val = bytes / 1024 ** 4;
+      suffix = 'TB';
+    }
+
+    return `${val.toFixed(precision)} ${suffix}`;
+  }
+
+  export let online: boolean;
+
+  $: statusItems = [
+    {
+      name: 'Download',
+      value: convertUsage(usage.BytesReceived),
+      svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
+</svg>`,
+    },
+    {
+      name: 'Upload',
+      value: convertUsage(usage.BytesSent),
+      svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+</svg>`,
+    },
+  ];
+</script>
+
+<WidgetCard {title}>
+  <div slot="body">
+    {#if online}
+      <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
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import { Endpoint } from '$lib/types';
+  import { Endpoint, UsageStats } from '$lib/types';
   import type {
     DeviceAppStatus,
     StatusResponse,
@@ -10,7 +10,6 @@
     CellRadioStat,
   } from '$lib/types';
   export async function load({ fetch, session }) {
-    session['refresh'] = '0';
     const status: StatusResponse = await fetch(`/api/${Endpoint.STATUS}`).then((res: Response) =>
       res.json(),
     );
@@ -27,6 +26,7 @@
       network?.connection_status?.length > 0
         ? network.connection_status[0].ConnectionStatus === 1
         : undefined;
+    const usageStats = network.cellular_stats[0];
 
     return {
       props: {
@@ -35,6 +35,7 @@
         cell5GStats: cell5GStats as CellRadioStat,
         cellLTEStats: cellLTEStats as CellRadioStat,
         online: online,
+        usage: usageStats,
       },
     };
   }
@@ -60,26 +61,28 @@
   import DeviceInformation from '$lib/widgets/DeviceInformation.svelte';
   import NetworkInformation from '$lib/widgets/NetworkInformation.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';
-
+  import { session } from '$app/stores';
+  import UsageInformation from '$lib/widgets/UsageInformation.svelte';
   export let routerCfg: DeviceAppStatus;
   export let devices: DeviceCfg[];
   export let cell5GStats: CellRadioStat;
   export let cellLTEStats: CellRadioStat;
   export let online: boolean;
+  export let usage: UsageStats;
   let cellLTEOnline: boolean;
   let cell5GOnline: boolean;
 
   const uptimeInterval = setInterval(() => {
     routerCfg.UpTime++;
   }, 1000);
 
-  let refreshInterval = setInterval(() => {
-    $session['refresh'] = `${routerCfg.UpTime}`;
-  }, 5000);
+  let refreshInterval: NodeJS.Timer;
+  onMount(() => {
+    refreshInterval = setInterval(() => {
+      $session['refresh'] = `${routerCfg.UpTime}`;
+    }, 5000);
+  });
+
   onDestroy(() => {
     clearInterval(uptimeInterval);
     clearInterval(refreshInterval);
@@ -104,6 +107,9 @@
   <div class="col-auto">
     <NetworkInformation title="LTE Network" cellStats={cellLTEStats} bind:online={cellLTEOnline} />
   </div>
+  <div class="col-auto">
+    <UsageInformation title="Data Usage" {usage} bind:online />
+  </div>
   <div class="col-auto">
     <DeviceInformation {devices} />
   </div>