Geofences now center when clicked in /geofences

9 files changed, 80 insertions, 15 deletions

diff --git a/modern/jsconfig.json b/modern/jsconfig.json
new file mode 100644
index 0000000..56c62bf
--- /dev/null
+++ b/modern/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  }
+}
diff --git a/modern/package.json b/modern/package.json
index 7fa085c..fcadd1f 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -11,6 +11,7 @@
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@reduxjs/toolkit": "^1.6.0",
     "@tmcw/togeojson": "^4.5.0",
+    "@turf/centroid": "^6.5.0",
     "@turf/circle": "^6.5.0",
     "@turf/turf": "^6.4.0",
     "http-proxy-middleware": "^2.0.1",
diff --git a/modern/src/GeofencesList.js b/modern/src/GeofencesList.js
index 572ac5b..1fab04a 100644
--- a/modern/src/GeofencesList.js
+++ b/modern/src/GeofencesList.js
@@ -9,7 +9,7 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-import { devicesActions } from './store';
+import { geofencesActions, uiActions } from './store';
 import EditCollectionView from './EditCollectionView';
 
 const useStyles = makeStyles(() => ({
@@ -33,19 +33,26 @@ const GeofenceView = ({ onMenuClick }) => {
   return (
     <List className={classes.list}>
       {items.map((item, index, list) => (
-        <Fragment key={item.id}>
-          <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
-            <ListItemText primary={item.name} />
-            <ListItemSecondaryAction>
-              <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
-                <MoreVertIcon />
-              </IconButton>
-            </ListItemSecondaryAction>
+          <Fragment key={item.id}>
+              <ListItem button key={item.id} onClick={() => {
+                dispatch(geofencesActions.select(item));
+                dispatch(uiActions.setCollapsed(true));
+                setTimeout(() => {
+                  dispatch(geofencesActions.unselect());
+                }, 1000);
+              }}>
+              <ListItemText primary={item.name} />
+              <ListItemSecondaryAction>
+                  <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+                      <MoreVertIcon />
+                  </IconButton>
+              </ListItemSecondaryAction>
           </ListItem>
-          {index < list.length - 1 ? <Divider /> : null}
+          { index<list.length - 1 ? <Divider /> : null }
         </Fragment>
-      ))}
-    </List>
+    ))
+}
+    </List >
   );
 };
 
diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js
index 42dfb6b..47f3d26 100644
--- a/modern/src/GeofencesPage.js
+++ b/modern/src/GeofencesPage.js
@@ -11,6 +11,7 @@ import CurrentLocationMap from './map/CurrentLocationMap';
 import GeofenceEditMap from './map/GeofenceEditMap';
 import GeofencesList from './GeofencesList';
 import { useTranslation } from './LocalizationProvider';
+import SelectedGeofenceMap from './map/SelectedGeofenceMap';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -76,6 +77,7 @@ const GeofencesPage = ({ width }) => {
             <Map>
               <CurrentLocationMap />
               <GeofenceEditMap />
+              <SelectedGeofenceMap />
             </Map>
           </ContainerDimensions>
         </div>
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index a118f17..5cc87f0 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -17,10 +17,10 @@ import ListIcon from '@material-ui/icons/ViewList';
 import DevicesList from './DevicesList';
 import Map from './map/Map';
 import SelectedDeviceMap from './map/SelectedDeviceMap';
+import SelectedGeofenceMap from './map/SelectedGeofenceMap';
 import AccuracyMap from './map/AccuracyMap';
 import GeofenceMap from './map/GeofenceMap';
 import CurrentPositionsMap from './map/CurrentPositionsMap';
-import CurrentLocationMap from './map/CurrentLocationMap';
 import BottomMenu from './components/BottomMenu';
 import { useTranslation } from './LocalizationProvider';
 import PoiMap from './map/PoiMap';
diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index d05394b..3a5c997 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -16,7 +16,7 @@ const SelectedDeviceMap = () => {
 
   useEffect(() => {
     if (mapCenter) {
-      map.easeTo({ center: mapCenter.position, zoom:18 });
+      map.easeTo({ center: mapCenter.position, zoom: 18 });
     }
   }, [mapCenter]);
   
diff --git a/modern/src/map/SelectedGeofenceMap.js b/modern/src/map/SelectedGeofenceMap.js
new file mode 100644
index 0000000..2ed3a2d
--- /dev/null
+++ b/modern/src/map/SelectedGeofenceMap.js
@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+import { useSelector } from 'react-redux';
+import { map } from './Map';
+import { getGeofenceCenter } from './mapUtil';
+
+const SelectedGeofenceMap = () => {
+  const mapCenter = useSelector((state) => {
+    console.log (state.geofences.selectedId);
+    if (state.geofences.selectedId) {
+      const geofence = state.geofences.items[state.geofences.selectedId] || null;
+      const center = getGeofenceCenter (geofence);
+      if (geofence) {
+        return { position: [center.longitude, center.latitude] };
+      }
+    }
+    return null;
+  });
+
+  useEffect(() => {
+    if (mapCenter) {
+      map.easeTo({ center: mapCenter.position, zoom: 18 });
+    }
+  }, [mapCenter]);
+  
+  return null;
+};
+
+export default SelectedGeofenceMap;
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
index e93c146..4df446c 100644
--- a/modern/src/map/mapUtil.js
+++ b/modern/src/map/mapUtil.js
@@ -1,5 +1,5 @@
 import { parse, stringify } from 'wellknown';
-import circle from '@turf/circle';
+import { circle, polygon, centroid } from '@turf/turf';
 
 export const loadImage = (url) => new Promise((imageLoaded) => {
   const image = new Image();
@@ -84,3 +84,14 @@ export const geofenceToFeature = (item) => {
 };
 
 export const geometryToArea = (geometry) => stringify(reverseCoordinates(geometry));
+
+export const getGeofenceCenter = (item) => {
+  if (item.area.indexOf('CIRCLE') > -1) {
+    const coordinates = item.area.replace(/CIRCLE|\(|\)|,/g, ' ').trim().split(/ +/);
+    return { longitude: Number(coordinates[1]), latitude: Number(coordinates[0]) };
+  }
+  const pol = polygon(reverseCoordinates(parse(item.area)).coordinates);
+  const center = centroid(pol);
+  const coords = center.geometry.coordinates;
+  return { longitude: coords[0], latitude: coords[1] };
+}
diff --git a/modern/src/store/geofences.js b/modern/src/store/geofences.js
index f2b7666..0c83965 100644
--- a/modern/src/store/geofences.js
+++ b/modern/src/store/geofences.js
@@ -4,8 +4,15 @@ const { reducer, actions } = createSlice({
   name: 'geofences',
   initialState: {
     items: {},
+    selectedId: null,
   },
   reducers: {
+    select(state, action) {
+      state.selectedId = action.payload.id;
+    },
+    unselect(state, action) {
+      state.selectedId = null;
+    },
     refresh(state, action) {
       state.items = {};
       action.payload.forEach((item) => state.items[item.id] = item);