Initial 1.3.x rework

2022-07-26 08:52:23 +10:00
parent ff6019098b
commit a2280ab96e
163 changed files with 6383 additions and 14397 deletions
@@ -0,0 +1,103 @@
+import type React from "react";
+
+import {
+  Badge,
+  Heading,
+  Link,
+  majorScale,
+  MapMarkerIcon,
+  Pane,
+} from "evergreen-ui";
+import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
+
+import { toMGRS } from "@app/core/utils/toMGRS.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { Types } from "@meshtastic/meshtasticjs";
+
+export const DeviceCard = (): JSX.Element => {
+  const { hardware, nodes, status, connection } = useDevice();
+  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
+
+  return (
+    <Pane
+      display="flex"
+      flexGrow={1}
+      flexDirection="column"
+      marginTop="auto"
+      gap={majorScale(1)}
+    >
+      <Pane display="flex" gap={majorScale(2)}>
+        <Hashicon value={hardware.myNodeNum.toString()} size={42} />
+        <Pane flexGrow={1}>
+          <Heading>{myNode?.data.user?.longName}</Heading>
+          <Link
+            target="_blank"
+            href="https://github.com/meshtastic/meshtastic-web/releases/"
+          >
+            <Badge
+              color="green"
+              width="100%"
+              marginRight={8}
+              display="flex"
+              marginTop={4}
+            >
+              {hardware.firmwareVersion}
+            </Badge>
+          </Link>
+        </Pane>
+      </Pane>
+      <Pane display="flex" gap={majorScale(1)}>
+        <MapMarkerIcon />
+        <Badge
+          color={myNode?.data.position?.latitudeI ? "green" : "red"}
+          display="flex"
+          width="100%"
+        >
+          {toMGRS(
+            myNode?.data.position?.latitudeI,
+            myNode?.data.position?.longitudeI
+          )}
+        </Badge>
+      </Pane>
+      <Pane display="flex" gap={majorScale(1)}>
+        {connection?.connType === "ble" && <FiBluetooth />}
+        {connection?.connType === "http" && <FiWifi />}
+        {connection?.connType === "serial" && <FiTerminal />}
+        <Badge
+          color={
+            [
+              Types.DeviceStatusEnum.DEVICE_CONNECTED,
+              Types.DeviceStatusEnum.DEVICE_CONFIGURED,
+              Types.DeviceStatusEnum.DEVICE_CONFIGURING,
+            ].includes(status)
+              ? "green"
+              : [
+                  Types.DeviceStatusEnum.DEVICE_CONNECTING,
+                  Types.DeviceStatusEnum.DEVICE_RECONNECTING,
+                  Types.DeviceStatusEnum.DEVICE_CONNECTED,
+                ].includes(status)
+              ? "orange"
+              : "red"
+          }
+          display="flex"
+          width="100%"
+        >
+          {[
+            Types.DeviceStatusEnum.DEVICE_CONNECTED,
+            Types.DeviceStatusEnum.DEVICE_CONFIGURED,
+            Types.DeviceStatusEnum.DEVICE_CONFIGURING,
+          ].includes(status)
+            ? "Connected"
+            : [
+                Types.DeviceStatusEnum.DEVICE_CONNECTING,
+                Types.DeviceStatusEnum.DEVICE_RECONNECTING,
+                Types.DeviceStatusEnum.DEVICE_CONNECTED,
+              ].includes(status)
+            ? "Connecting"
+            : "Disconnected"}
+        </Badge>
+      </Pane>
+    </Pane>
+  );
+};