WIP Battery widget & metadata subscription

2022-10-08 20:59:08 +10:30
parent a836aa5752
commit 6c21514e13
5 changed files with 122 additions and 28 deletions
@@ -35,6 +35,7 @@
    "immer": "^9.0.15",
    "mapbox-gl": "npm:empty-npm-package@^1.0.0",
    "maplibre-gl": "^2.4.0",
+    "pretty-ms": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.37.0",
@@ -30,6 +30,7 @@ specifiers:
  postcss: ^8.4.17
  prettier: ^2.7.1
  prettier-plugin-tailwindcss: ^0.1.13
+  pretty-ms: ^8.0.0
  react: ^18.2.0
  react-dom: ^18.2.0
  react-hook-form: ^7.37.0
@@ -65,6 +66,7 @@ dependencies:
  immer: 9.0.15
  mapbox-gl: /empty-npm-package/1.0.0
  maplibre-gl: 2.4.0
+  pretty-ms: 8.0.0
  react: 18.2.0
  react-dom: 18.2.0_react@18.2.0
  react-hook-form: 7.37.0_react@18.2.0
@@ -3150,6 +3152,11 @@ packages:
      lines-and-columns: 1.2.4
    dev: true

+  /parse-ms/3.0.0:
+    resolution: {integrity: sha512-Tpb8Z7r7XbbtBTrM9UhpkzzaMrqA2VXMT3YChzYltwV3P3pM6t8wl7TvpMnSTosz1aQAdVib7kdoys7vYOPerw==}
+    engines: {node: '>=12'}
+    dev: false
+
  /path-exists/4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
@@ -3287,6 +3294,13 @@ packages:
    engines: {node: '>=10.13.0'}
    hasBin: true

+  /pretty-ms/8.0.0:
+    resolution: {integrity: sha512-ASJqOugUF1bbzI35STMBUpZqdfYKlJugy6JBziGi2EE+AL5JPJGSzvpeVXojxrr0ViUYoToUjb5kjSEGf7Y83Q==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      parse-ms: 3.0.0
+    dev: false
+
  /process-nextick-args/2.0.1:
    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
    dev: true
@@ -1,10 +1,10 @@
 import type React from "react";
+import { useEffect, useState } from "react";

-import { Battery100Icon, BoltIcon } from "@heroicons/react/24/outline";
+import prettyMilliseconds from "pretty-ms";

-import { Card } from "../Card.js";
-import { Dropdown } from "../Dropdown.js";
-import { Mono } from "../Mono.js";
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline";

 export interface BatteryWidgetProps {
  batteryLevel: number;
@@ -15,23 +15,73 @@ export const BatteryWidget = ({
  batteryLevel,
  voltage,
 }: BatteryWidgetProps): JSX.Element => {
+  const { nodes, hardware } = useDevice();
+
+  const [timeRemaining, setTimeRemaining] = useState("Unknown");
+
+  useEffect(() => {
+    const stats = nodes.find(
+      (n) => n.data.num === hardware.myNodeNum
+    )?.deviceMetrics;
+
+    if (stats) {
+      let currentStat: number | undefined = undefined;
+      let currentTime = new Date();
+      let previousStat: number | undefined = undefined;
+      let previousTime = new Date();
+      for (const stat of [...stats].reverse()) {
+        if (stat.batteryLevel) {
+          if (!currentStat) {
+            currentStat = stat.batteryLevel;
+            currentTime = stat.timestamp;
+          } else {
+            previousStat = stat.batteryLevel;
+            previousTime = stat.timestamp;
+          }
+          break;
+        }
+      }
+
+      if (currentStat && previousStat) {
+        const timeDiff = currentTime.getTime() - previousTime.getTime();
+        const statDiff = Math.abs(currentStat - previousStat);
+        //
+        console.log(`timeDiff: ${timeDiff}`);
+        console.log(`statDiff: ${statDiff}`);
+
+        //convert to ms/%
+        const msPerPercent = timeDiff / statDiff;
+        console.log(`msPerPercent: ${msPerPercent}`);
+        const formatted = prettyMilliseconds(
+          (100 - currentStat) * msPerPercent
+        );
+        setTimeRemaining(formatted);
+      } else setTimeRemaining("Unknown");
+    }
+  }, [hardware.myNodeNum, nodes]);
+
  return (
-    <Card className="flex-col">
-      <Dropdown title="Battery" icon={<BoltIcon className="h-4" />}>
-        <div className="flex">
-          <div className="flex w-20 bg-slate-700 p-3">
-            <Battery100Icon className="m-auto h-12 text-white" />
-          </div>
-          <span className="m-auto text-lg">
-            {batteryLevel}
-            <Mono>%</Mono>
-          </span>
-          <span className="m-auto text-lg">
-            {voltage.toPrecision(2)}
-            <Mono>v</Mono>
-          </span>
+    <div className="relative overflow-hidden rounded-lg bg-white p-4 shadow">
+      <dt>
+        <div className="absolute rounded-md bg-indigo-500 p-3">
+          <Battery100Icon className="h-6 text-white" aria-hidden="true" />
        </div>
-      </Dropdown>
-    </Card>
+        <p className="ml-16 truncate text-sm font-medium text-gray-500">
+          Battery State
+        </p>
+      </dt>
+      <dd className="ml-16 flex items-baseline">
+        <p className="text-2xl font-semibold text-gray-900">{batteryLevel}%</p>
+        <p
+          className={`ml-2 flex items-baseline text-sm font-semibold text-orange-600`}
+        >
+          <ClockIcon
+            className="text-Orange-500 h-5 w-5 flex-shrink-0 self-center"
+            aria-hidden="true"
+          />
+          Unknown
+        </p>
+      </dd>
+    </div>
  );
 };
@@ -32,8 +32,9 @@ export interface Channel {
 }

 export interface Node {
-  deviceMetrics: Protobuf.DeviceMetrics[];
-  environmentMetrics: Protobuf.EnvironmentMetrics[];
+  deviceMetrics: (Protobuf.DeviceMetrics & { timestamp: Date })[];
+  environmentMetrics: (Protobuf.EnvironmentMetrics & { timestamp: Date })[];
+  metadata?: Protobuf.DeviceMetadata;
  data: Protobuf.NodeInfo;
 }

@@ -72,6 +73,7 @@ export interface Device {
  addConnection: (connection: Types.ConnectionType) => void;
  addMessage: (message: MessageWithAck) => void;
  addWaypointMessage: (message: WaypointIDWithAck) => void;
+  addDeviceMetadataMessage: (metadata: Types.DeviceMetadataPacket) => void;
  ackMessage: (channelIndex: number, messageId: number) => void;
  setQRDialogOpen: (open: boolean) => void;
 }
@@ -226,6 +228,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                      snr: metrics.packet.rxSnr,
                      lastHeard: new Date().getSeconds(),
                    }),
+                    metadata: undefined,
                    deviceMetrics: [],
                    environmentMetrics: [],
                  };
@@ -256,14 +259,16 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                        }
                      }

-                      node.deviceMetrics.push(
-                        metrics.data.variant.deviceMetrics
-                      );
+                      node.deviceMetrics.push({
+                        ...metrics.data.variant.deviceMetrics,
+                        timestamp: new Date(metrics.packet.rxTime),
+                      });
                      break;
                    case "environmentMetrics":
-                      node.environmentMetrics.push(
-                        metrics.data.variant.environmentMetrics
-                      );
+                      node.environmentMetrics.push({
+                        ...metrics.data.variant.environmentMetrics,
+                        timestamp: new Date(metrics.packet.rxTime),
+                      });
                      break;
                  }
                }
@@ -335,6 +340,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                  } else {
                    device.nodes.push({
                      data: Protobuf.NodeInfo.create(nodeInfo.data),
+                      metadata: undefined,
                      deviceMetrics: [],
                      environmentMetrics: [],
                    });
@@ -385,6 +391,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                        snr: user.packet.rxSnr,
                        user: user.data,
                      }),
+                      metadata: undefined,
                      deviceMetrics: [],
                      environmentMetrics: [],
                    });
@@ -414,6 +421,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                        num: position.packet.from,
                        position: position.data,
                      }),
+                      metadata: undefined,
                      deviceMetrics: [],
                      environmentMetrics: [],
                    });
@@ -456,6 +464,23 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
              })
            );
          },
+          addDeviceMetadataMessage: (metadata) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  const node = device.nodes.find(
+                    (n) => n.data.num === metadata.packet.from
+                  );
+                  if (node) {
+                    node.metadata = metadata.data;
+                  } else {
+                    console.log("Node not found!");
+                  }
+                }
+              })
+            );
+          },
          ackMessage: (channelIndex: number, messageId: number) => {
            console.log("ack called");

@@ -13,6 +13,10 @@ export const subscribeAll = (
  // onLogEvent
  // onMeshHeartbeat

+  connection.onDeviceMetadataPacket.subscribe((metadataPacket) => {
+    device.addDeviceMetadataMessage(metadataPacket);
+  });
+
  connection.onRoutingPacket.subscribe((routingPacket) => {
    console.log(routingPacket);
  });