Add location respone dialog

2025-02-05 21:45:31 +01:00
parent b8c1096568
commit 175e98a080
2 changed files with 89 additions and 2 deletions
@@ -0,0 +1,62 @@
+import { useDevice } from "@app/core/stores/deviceStore";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog";
+import type { Protobuf, Types } from "@meshtastic/js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import type { JSX } from "react";
+
+export interface LocationResponseDialogProps {
+  location: Types.PacketMetadata<Protobuf.Mesh.location> | undefined;
+  open: boolean;
+  onOpenChange: () => void;
+}
+
+export const LocationResponseDialog = ({
+  location,
+  open,
+  onOpenChange,
+}: LocationResponseDialogProps): JSX.Element => {
+  const { nodes } = useDevice();
+
+  const from = nodes.get(location?.from ?? 0);
+  const longName =
+    from?.user?.longName ??
+    (from ? `!${numberToHexUnpadded(from?.num)}` : "Unknown");
+  const shortName =
+    from?.user?.shortName ??
+    (from ? `${numberToHexUnpadded(from?.num).substring(0, 4)}` : "UNK");
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{`Location: ${longName} (${shortName})`}</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          <div className="ml-5 flex">
+            <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+              <p>
+                Coordinates:{" "}
+                <a
+                  className="text-blue-500 dark:text-blue-400"
+                  href={`https://www.openstreetmap.org/?mlat=${location?.data.latitudeI / 1e7}&mlon=${location?.data.longitudeI / 1e7}&layers=N`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {location?.data.latitudeI / 1e7},{" "}
+                  {location?.data.longitudeI / 1e7}
+                </a>
+              </p>
+              <p>Altitude: {location?.data.altitude}m</p>
+            </span>
+          </div>
+        </DialogDescription>
+      </DialogContent>
+    </Dialog>
+  );
+};