Implement geofence selection

3 files changed, 26 insertions, 7 deletions

diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js
index 22f91dfa..045eddc2 100644
--- a/modern/src/map/MapGeofenceEdit.js
+++ b/modern/src/map/MapGeofenceEdit.js
@@ -1,5 +1,6 @@
 import 'mapbox-gl/dist/mapbox-gl.css';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import maplibregl from 'maplibre-gl';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
 import { useEffect } from 'react';
@@ -35,7 +36,7 @@ const draw = new MapboxDraw({
   }],
 });
 
-const MapGeofenceEdit = () => {
+const MapGeofenceEdit = ({ selectedGeofenceId }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -136,6 +137,22 @@ const MapGeofenceEdit = () => {
     });
   }, [geofences]);
 
+  useEffect(() => {
+    if (selectedGeofenceId) {
+      const feature = draw.get(selectedGeofenceId);
+      let { coordinates } = feature.geometry;
+      if (Array.isArray(coordinates[0][0])) {
+        [coordinates] = coordinates;
+      }
+      const bounds = coordinates.reduce(
+        (bounds, coordinate) => bounds.extend(coordinate),
+        new maplibregl.LngLatBounds(coordinates[0], coordinates[0]),
+      );
+      const canvas = map.getCanvas();
+      map.fitBounds(bounds, { padding: Math.min(canvas.width, canvas.height) * 0.1 });
+    }
+  }, [selectedGeofenceId]);
+
   return null;
 };
 
diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js
index 5463d73a..d26eff09 100644
--- a/modern/src/other/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -5,7 +5,7 @@ import {
   Divider, List, ListItemButton, ListItemText,
 } from '@mui/material';
 
-import { devicesActions, geofencesActions } from '../store';
+import { geofencesActions } from '../store';
 import CollectionActions from '../settings/components/CollectionActions';
 import { useCatchCallback } from '../reactHelper';
 
@@ -21,7 +21,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const GeofencesList = () => {
+const GeofencesList = ({ onGeofenceSelected }) => {
   const classes = useStyles();
   const dispatch = useDispatch();
 
@@ -40,7 +40,7 @@ const GeofencesList = () => {
     <List className={classes.list}>
       {Object.values(items).map((item, index, list) => (
         <Fragment key={item.id}>
-          <ListItemButton key={item.id} onClick={() => dispatch(devicesActions.select(item.id))}>
+          <ListItemButton key={item.id} onClick={() => onGeofenceSelected(item.id)}>
             <ListItemText primary={item.name} />
             <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" setTimestamp={refreshGeofences} />
           </ListItemButton>
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 8af8a711..59dcdc4e 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import {
   Divider, Typography, IconButton, useMediaQuery, Toolbar,
@@ -62,6 +62,8 @@ const GeofencesPage = () => {
 
   const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
 
+  const [selectedGeofenceId, setSelectedGeofenceId] = useState();
+
   const handleFile = (event) => {
     const files = Array.from(event.target.files);
     const [file] = files;
@@ -117,11 +119,11 @@ const GeofencesPage = () => {
             </label>
           </Toolbar>
           <Divider />
-          <GeofencesList />
+          <GeofencesList onGeofenceSelected={setSelectedGeofenceId} />
         </Drawer>
         <div className={classes.mapContainer}>
           <MapView>
-            <MapGeofenceEdit />
+            <MapGeofenceEdit selectedGeofenceId={selectedGeofenceId} />
           </MapView>
           <MapCurrentLocation />
           <MapGeocoder />