From a57390425913896128b2472ae95e1504c521422f Mon Sep 17 00:00:00 2001 From: Iván Ávalos Date: Thu, 5 May 2022 00:00:31 -0500 Subject: Geofences now center when clicked in /geofences --- modern/jsconfig.json | 8 ++++++++ modern/package.json | 1 + modern/src/GeofencesList.js | 31 +++++++++++++++++++------------ modern/src/GeofencesPage.js | 2 ++ modern/src/MainPage.js | 2 +- modern/src/map/SelectedDeviceMap.js | 2 +- modern/src/map/SelectedGeofenceMap.js | 29 +++++++++++++++++++++++++++++ modern/src/map/mapUtil.js | 13 ++++++++++++- modern/src/store/geofences.js | 7 +++++++ 9 files changed, 80 insertions(+), 15 deletions(-) create mode 100644 modern/jsconfig.json create mode 100644 modern/src/map/SelectedGeofenceMap.js 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 ( {items.map((item, index, list) => ( - - dispatch(devicesActions.select(item))}> - - - onMenuClick(event.currentTarget, item.id)}> - - - + + { + dispatch(geofencesActions.select(item)); + dispatch(uiActions.setCollapsed(true)); + setTimeout(() => { + dispatch(geofencesActions.unselect()); + }, 1000); + }}> + + + onMenuClick(event.currentTarget, item.id)}> + + + - {index < list.length - 1 ? : null} + { index : null } - ))} - + )) +} + ); }; 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 }) => { + 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); -- cgit v1.2.3