Add node bounding box controll to map

package.json

@@ -30,6 +30,7 @@
     "@meshtastic/meshtasticjs": "^0.7.4",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
+    "@turf/turf": "^6.5.0",
     "base64-js": "^1.5.1",
     "chart.js": "^4.1.1",
     "chartjs-adapter-date-fns": "^3.0.0",

src/components/Dialog/ImportDialog.tsx

@@ -25,13 +25,13 @@ export interface ImportDialogProps {
 
 export const ImportDialog = ({
   isOpen,
-  close,
+  close
 }: ImportDialogProps): JSX.Element => {
   const [QRCodeURL, setQRCodeURL] = useState<string>("");
   const [channelSet, setChannelSet] = useState<Protobuf.ChannelSet>();
   const [validURL, setValidURL] = useState<boolean>(false);
 
-  const {connection} = useDevice()
+  const { connection } = useDevice();
 
   useEffect(() => {
     const base64String = QRCodeURL.split("e/#")[1]
@@ -48,29 +48,30 @@ export const ImportDialog = ({
   }, [QRCodeURL]);
 
   const apply = () => {
-
+    channelSet?.settings.map((ch, index) => {
-    channelSet?.settings.map(((ch, index) => {
       connection?.setChannel({
         channel: {
           index,
-          role: index === 0 ? Protobuf.Channel_Role.PRIMARY: Protobuf.Channel_Role.SECONDARY,
+          role:
+            index === 0
+              ? Protobuf.Channel_Role.PRIMARY
+              : Protobuf.Channel_Role.SECONDARY,
           settings: ch
         }
-      })
+      });
-    }))
+    });
 
     if (channelSet?.loraConfig) {
       connection?.setConfig({
         config: {
           payloadVariant: {
-            oneofKind: 'lora',
+            oneofKind: "lora",
             lora: channelSet.loraConfig
           }
         }
-      })
+      });
     }
-    
+  };
-  }
 
   return (
     <Dialog
@@ -87,48 +88,55 @@ export const ImportDialog = ({
           onChange={(e) => {
             setQRCodeURL(e.target.value);
           }}
-        />{validURL && (
+        />
-      <div className="flex flex-col gap-3">
+        {validURL && (
-        
+          <div className="flex flex-col gap-3">
-          <div className="flex w-full gap-2">
+            <div className="flex w-full gap-2">
-          <div className="w-36">
+              <div className="w-36">
-            <Toggle
+                <Toggle
-              className="flex-col gap-2"
+                  className="flex-col gap-2"
-              label="Use Preset?"
+                  label="Use Preset?"
+                  disabled
+                  checked={channelSet?.loraConfig?.usePreset ?? true}
+                />
+              </div>
+              <Select
+                label="Modem Preset"
+                disabled
+                value={channelSet?.loraConfig?.modemPreset}
+              >
+                {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
+              </Select>
+            </div>
+            <Select
+              label="Region"
               disabled
-              checked={channelSet?.loraConfig?.usePreset ?? true}
+              value={channelSet?.loraConfig?.region}
-            />
+            >
+              {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
+            </Select>
+
+            <span className="text-md block font-medium text-gray-700">
+              Channels:
+            </span>
+            <div className="flex w-40 flex-col gap-1">
+              {channelSet?.settings.map((channel, index) => (
+                <Checkbox
+                  key={index}
+                  label={
+                    channel.name.length
+                      ? channel.name
+                      : `Channel: ${channel.id}`
+                  }
+                />
+              ))}
+            </div>
           </div>
-          <Select
+        )}
-            label="Modem Preset"
+        <Button onClick={() => apply()} disabled={!validURL}>
-            disabled
+          Apply
-            value={channelSet?.loraConfig?.modemPreset}
+        </Button>
-          >
+      </div>
-            {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-          </Select>
-        </div>
-        <Select
-        label="Region"
-        disabled
-        value={channelSet?.loraConfig?.region}
-      >
-        {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-      </Select>
-        
-        
-        <span className="block text-md font-medium text-gray-700">Channels:</span>
-        <div className="flex w-40 flex-col gap-1">
-          {channelSet?.settings.map((channel, index) => (
-            <Checkbox
-              key={index}
-              label={
-                channel.name.length ? channel.name : `Channel: ${channel.id}`
-              }
-            />
-          ))}
-        </div>
-      </div>)}
-      <Button onClick={() => apply()} disabled={!validURL}>Apply</Button></div>
     </Dialog>
   );
 };

src/components/PageComponents/Map/MapControlls.tsx

@@ -1,13 +1,49 @@
 import { FiCrosshair } from "react-icons/fi";
 import { useMap } from "react-map-gl";
+import { lineString, bbox } from "@turf/turf";
 
 import {
   MagnifyingGlassMinusIcon,
-  MagnifyingGlassPlusIcon
+  MagnifyingGlassPlusIcon,
+  ShareIcon
 } from "@heroicons/react/24/outline";
+import { useDevice } from "@app/core/providers/useDevice.js";
 
 export const MapControlls = (): JSX.Element => {
   const { current: map } = useMap();
+  const { nodes } = useDevice();
+
+  const getBBox = () => {
+    const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI);
+
+    if (nodesWithPosition.length > 1) {
+      const line = lineString(
+        nodesWithPosition.map((n) => [
+          (n.data.position?.latitudeI ?? 0) / 1e7,
+          (n.data.position?.longitudeI ?? 0) / 1e7
+        ])
+      );
+
+      const bounds = bbox(line);
+
+      const center = map?.cameraForBounds([
+        [bounds[1], bounds[0]],
+        [bounds[3], bounds[2]]
+      ]);
+
+      if (center) {
+        map?.easeTo(center);
+      }
+    } else if (nodesWithPosition.length === 1) {
+      map?.easeTo({
+        zoom: 12,
+        center: [
+          (nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7,
+          (nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7
+        ]
+      });
+    }
+  };
 
   return (
     <div className="absolute right-0 top-0 z-10 m-2 ">
@@ -34,6 +70,12 @@ export const MapControlls = (): JSX.Element => {
         >
           <FiCrosshair className="h-4 w-4" />
         </div>
+        <div
+          className="cursor-pointer p-3 hover:bg-orange-200 hover:text-orange-700"
+          onClick={() => getBBox()}
+        >
+          <ShareIcon className="h-4 w-4" />
+        </div>
       </div>
     </div>
   );

src/validation/moduleConfig/externalNotification.ts

@@ -27,10 +27,10 @@ export class ExternalNotificationValidation
   alertMessage: boolean;
 
   @IsBoolean()
-  alertMessageVibra: boolean
+  alertMessageVibra: boolean;
 
   @IsBoolean()
-  alertMessageBuzzer: boolean
+  alertMessageBuzzer: boolean;
 
   @IsBoolean()
   alertBell: boolean;