aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/GeofenceEditMap.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-06-27 16:25:20 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-06-27 16:25:20 -0700
commit271740034791dc7137325d5b5352217c3bc987f3 (patch)
treed29fd7391fce597d59be5bd699b6d4b61b33bdaf /modern/src/map/GeofenceEditMap.js
parent26916278758cd5e4abb16aa31e31099e066ea8d5 (diff)
downloadetbsa-traccar-web-271740034791dc7137325d5b5352217c3bc987f3.tar.gz
etbsa-traccar-web-271740034791dc7137325d5b5352217c3bc987f3.tar.bz2
etbsa-traccar-web-271740034791dc7137325d5b5352217c3bc987f3.zip
Initial geofence draw implementation
Diffstat (limited to 'modern/src/map/GeofenceEditMap.js')
-rw-r--r--modern/src/map/GeofenceEditMap.js63
1 files changed, 63 insertions, 0 deletions
diff --git a/modern/src/map/GeofenceEditMap.js b/modern/src/map/GeofenceEditMap.js
index 9487e97..291cab7 100644
--- a/modern/src/map/GeofenceEditMap.js
+++ b/modern/src/map/GeofenceEditMap.js
@@ -3,6 +3,10 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { useEffect } from 'react';
import { map } from './Map';
+import { geofenceToFeature, geometryToArea } from './mapUtil';
+import { useDispatch, useSelector } from 'react-redux';
+import { geofencesActions } from '../store';
+import { useHistory } from 'react-router-dom';
const draw = new MapboxDraw({
displayControlsDefault: false,
@@ -13,8 +17,67 @@ const draw = new MapboxDraw({
});
const GeofenceEditMap = () => {
+ const dispatch = useDispatch();
+ const history = useHistory();
+
+ const geofences = useSelector(state => Object.values(state.geofences.items));
+
+ const refreshGeofences = async () => {
+ const response = await fetch('/api/geofences');
+ if (response.ok) {
+ dispatch(geofencesActions.refresh(await response.json()));
+ }
+ }
+
useEffect(() => {
+ refreshGeofences();
+
map.addControl(draw, 'top-left');
+
+ draw.deleteAll();
+ for (const geofence of geofences) {
+ draw.add(geofenceToFeature(geofence));
+ }
+
+ map.on('draw.create', async event => {
+ const feature = event.features[0];
+ const newItem = { name: '', area: geometryToArea(feature.geometry) };
+ draw.delete(feature.id);
+ const response = await fetch(`/api/geofences`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(newItem),
+ });
+ if (response.ok) {
+ const item = await response.json();
+ history.push(`/geofence/${item.id}`);
+ }
+ });
+
+ map.on('draw.delete', async event => {
+ const feature = event.features[0];
+ const response = await fetch(`/api/geofences/${feature.id}`, { method: 'DELETE' });
+ if (response.ok) {
+ refreshGeofences();
+ }
+ });
+
+ map.on('draw.update', async event => {
+ const feature = event.features[0];
+ const item = geofences.find(i => i.id === feature.id);
+ if (item) {
+ const updatedItem = { ...item, area: geometryToArea(feature.geometry) };
+ const response = await fetch(`/api/geofences/${feature.id}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(updatedItem),
+ });
+ if (response.ok) {
+ refreshGeofences();
+ }
+ }
+ });
+
return () => map.removeControl(draw);
}, []);