aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-26 17:24:00 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-26 17:24:00 -0700
commit6c0eece6465ec148ecc5517cfea5522c27a9801f (patch)
treeb509bea3e63847d8b27460f97fca0ea169c93820
parent6721b7c6c70152fe5c6b19ab38b7a9b9c8357a25 (diff)
downloadtrackermap-web-6c0eece6465ec148ecc5517cfea5522c27a9801f.tar.gz
trackermap-web-6c0eece6465ec148ecc5517cfea5522c27a9801f.tar.bz2
trackermap-web-6c0eece6465ec148ecc5517cfea5522c27a9801f.zip
Implement geofence selection
-rw-r--r--modern/src/map/MapGeofenceEdit.js19
-rw-r--r--modern/src/other/GeofencesList.js6
-rw-r--r--modern/src/other/GeofencesPage.js8
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 />