Map rework

src/pages/Nodes/NodeCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import mapboxgl from 'mapbox-gl';
+import mapbox from 'mapbox-gl';
 import { FaSatellite } from 'react-icons/fa';
-import { FiCode } from 'react-icons/fi';
+import { FiCode, FiMapPin } from 'react-icons/fi';
 import { GiLightningFrequency } from 'react-icons/gi';
 import {
   MdAccountCircle,
@@ -16,6 +16,7 @@ import {
 } from 'react-icons/md';
 import TimeAgo from 'timeago-react';
 
+import { Marker } from '@components/Map/Marker';
 import type { Node } from '@core/slices/meshtasticSlice';
 import { Disclosure } from '@headlessui/react';
 import { useMapbox } from '@hooks/useMapbox';
@@ -81,124 +82,135 @@ export const NodeCard = ({ node, myNodeInfo }: NodeCardProps): JSX.Element => {
   // }, [node.positions]);
 
   return (
-    <Disclosure
-      as="div"
-      className="m-2 rounded-md shadow-md bg-gray-50 dark:bg-gray-700"
-    >
-      <Disclosure.Button
-        as="div"
-        className="flex w-full gap-2 p-2 bg-gray-100 rounded-md shadow-md dark:bg-primaryDark"
-      >
-        {myNodeInfo ? (
-          <MdAccountCircle className="my-auto" />
-        ) : (
-          <div
-            className={`my-auto w-3 h-3 rounded-full ${
-              age === 'young'
-                ? 'bg-green-500'
-                : age === 'aging'
-                ? 'bg-yellow-500'
-                : age === 'old'
-                ? 'bg-red-500'
-                : 'bg-gray-500'
-            }`}
-          />
-        )}
-        <div className="my-auto">{node.user?.longName}</div>
-
-        <div className="my-auto ml-auto text-xs font-semibold">
-          {!myNodeInfo && (
-            <span>
-              {node.lastHeard.getTime() ? (
-                <TimeAgo datetime={node.lastHeard} />
-              ) : (
-                'Never'
-              )}
-            </span>
-          )}
-        </div>
-        <IconButton
-          disabled={PositionConfidence === 'none'}
-          onClick={(): void => {
-            if (PositionConfidence !== 'none' && node.currentPosition) {
-              map?.flyTo({
-                center: new mapboxgl.LngLat(
-                  node.currentPosition.longitudeI / 1e7,
-                  node.currentPosition.latitudeI / 1e7,
-                ),
-                zoom: 16,
-              });
-            }
-            // if (PositionConfidence !== 'none' && node.currentPosition) {
-            //   dispatch(
-            //     setLatLng(
-            //       new mapboxgl.LngLat(
-            //         node.currentPosition.longitudeI / 1e7,
-            //         node.currentPosition.latitudeI / 1e7,
-            //       ),
-            //     ),
-            //   );
-            // }
-          }}
-          icon={
-            PositionConfidence === 'high' ? (
-              <MdGpsFixed />
-            ) : PositionConfidence === 'low' ? (
-              <MdGpsNotFixed />
-            ) : (
-              <MdGpsOff />
+    <>
+      {node.currentPosition && (
+        <Marker
+          center={
+            new mapbox.LngLat(
+              node.currentPosition.longitudeI / 1e7,
+              node.currentPosition.latitudeI / 1e7,
             )
           }
-        />
-      </Disclosure.Button>
-      <Disclosure.Panel className="p-2">
-        {myNodeInfo && (
-          <div>
-            <div className="flex justify-between">
-              <span className="flex">
-                <MdSdStorage className="my-auto" />
-                Firmware Ver:
-              </span>
-              <span>{myNodeInfo.firmwareVersion}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="flex">
-                <GiLightningFrequency className="my-auto" />
-                Freq Bands:
-              </span>
-              <span>{myNodeInfo.numBands}</span>
+          popup={<div>Popup</div>}
+        >
+          <div className="z-50 bg-blue-500 border-2 border-blue-500 rounded-full bg-opacity-30">
+            <div className="m-4 ">
+              <FiMapPin className="w-5 h-5" />
             </div>
           </div>
-        )}
-        <div className="flex">
-          <div className="my-auto">
-            {Protobuf.HardwareModel[node.user?.hwModel ?? 0]}
-          </div>
-          <div className="ml-auto">
-            <IconButton icon={<FiCode className="w-5 h-5" />} />
-          </div>
-        </div>
-        <div className="flex">
-          <MdSignalCellularAlt className="my-auto" />
-          SNR:
-          {node.snr[node.snr.length - 1] < snrAverage ? (
-            <MdArrowDropDown className="text-red-500" />
+        </Marker>
+      )}
+
+      <Disclosure
+        as="div"
+        className="m-2 rounded-md shadow-md bg-gray-50 dark:bg-gray-700"
+      >
+        <Disclosure.Button
+          as="div"
+          className="flex w-full gap-2 p-2 bg-gray-100 rounded-md shadow-md dark:bg-primaryDark"
+        >
+          {myNodeInfo ? (
+            <MdAccountCircle className="my-auto" />
           ) : (
-            <MdArrowDropUp className="text-green-500" />
+            <div
+              className={`my-auto w-3 h-3 rounded-full ${
+                age === 'young'
+                  ? 'bg-green-500'
+                  : age === 'aging'
+                  ? 'bg-yellow-500'
+                  : age === 'old'
+                  ? 'bg-red-500'
+                  : 'bg-gray-500'
+              }`}
+            />
           )}
-          {node.snr[node.snr.length - 1]}, Average: {snrAverage}
-        </div>
-        <div className="flex">
-          <FaSatellite className="my-auto" />
-          Sats:
-          {(node.currentPosition?.satsInView ?? 0) < satsAverage ? (
-            <MdArrowDropDown className="text-red-500" />
-          ) : (
-            <MdArrowDropUp className="text-green-500" />
+          <div className="my-auto">{node.user?.longName}</div>
+
+          <div className="my-auto ml-auto text-xs font-semibold">
+            {!myNodeInfo && (
+              <span>
+                {node.lastHeard.getTime() ? (
+                  <TimeAgo datetime={node.lastHeard} />
+                ) : (
+                  'Never'
+                )}
+              </span>
+            )}
+          </div>
+          <IconButton
+            disabled={PositionConfidence === 'none'}
+            onClick={(e): void => {
+              e.stopPropagation();
+              if (PositionConfidence !== 'none' && node.currentPosition) {
+                map?.flyTo({
+                  center: new mapbox.LngLat(
+                    node.currentPosition.longitudeI / 1e7,
+                    node.currentPosition.latitudeI / 1e7,
+                  ),
+                  zoom: 16,
+                });
+              }
+            }}
+            icon={
+              PositionConfidence === 'high' ? (
+                <MdGpsFixed />
+              ) : PositionConfidence === 'low' ? (
+                <MdGpsNotFixed />
+              ) : (
+                <MdGpsOff />
+              )
+            }
+          />
+        </Disclosure.Button>
+        <Disclosure.Panel className="p-2">
+          {myNodeInfo && (
+            <div>
+              <div className="flex justify-between">
+                <span className="flex">
+                  <MdSdStorage className="my-auto" />
+                  Firmware Ver:
+                </span>
+                <span>{myNodeInfo.firmwareVersion}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="flex">
+                  <GiLightningFrequency className="my-auto" />
+                  Freq Bands:
+                </span>
+                <span>{myNodeInfo.numBands}</span>
+              </div>
+            </div>
           )}
-          {node.currentPosition?.satsInView ?? 0}, Average: {satsAverage}
-        </div>
-      </Disclosure.Panel>
-    </Disclosure>
+          <div className="flex">
+            <div className="my-auto">
+              {Protobuf.HardwareModel[node.user?.hwModel ?? 0]}
+            </div>
+            <div className="ml-auto">
+              <IconButton icon={<FiCode className="w-5 h-5" />} />
+            </div>
+          </div>
+          <div className="flex">
+            <MdSignalCellularAlt className="my-auto" />
+            SNR:
+            {node.snr[node.snr.length - 1] < snrAverage ? (
+              <MdArrowDropDown className="text-red-500" />
+            ) : (
+              <MdArrowDropUp className="text-green-500" />
+            )}
+            {node.snr[node.snr.length - 1]}, Average: {snrAverage}
+          </div>
+          <div className="flex">
+            <FaSatellite className="my-auto" />
+            Sats:
+            {(node.currentPosition?.satsInView ?? 0) < satsAverage ? (
+              <MdArrowDropDown className="text-red-500" />
+            ) : (
+              <MdArrowDropUp className="text-green-500" />
+            )}
+            {node.currentPosition?.satsInView ?? 0}, Average: {satsAverage}
+          </div>
+        </Disclosure.Panel>
+      </Disclosure>
+    </>
   );
 };