aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/MapGeofenceEdit.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/map/MapGeofenceEdit.js')
-rw-r--r--modern/src/map/MapGeofenceEdit.js141
1 files changed, 141 insertions, 0 deletions
diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js
new file mode 100644
index 00000000..c64eb736
--- /dev/null
+++ b/modern/src/map/MapGeofenceEdit.js
@@ -0,0 +1,141 @@
+import 'mapbox-gl/dist/mapbox-gl.css';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
+import { useEffect } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { map } from './core/Map';
+import { geofenceToFeature, geometryToArea } from './core/mapUtil';
+import { errorsActions, geofencesActions } from '../store';
+import { useCatchCallback } from '../reactHelper';
+
+const draw = new MapboxDraw({
+ displayControlsDefault: false,
+ controls: {
+ polygon: true,
+ trash: true,
+ },
+ userProperties: true,
+ styles: [...theme, {
+ id: 'gl-draw-title',
+ type: 'symbol',
+ filter: ['all'],
+ layout: {
+ 'text-field': '{user_name}',
+ 'text-font': ['Roboto Regular'],
+ 'text-size': 12,
+ },
+ paint: {
+ 'text-halo-color': 'white',
+ 'text-halo-width': 1,
+ },
+ }],
+});
+
+const MapGeofenceEdit = () => {
+ const dispatch = useDispatch();
+ const history = useHistory();
+
+ const geofences = useSelector((state) => state.geofences.items);
+
+ const refreshGeofences = useCatchCallback(async () => {
+ const response = await fetch('/api/geofences');
+ if (response.ok) {
+ dispatch(geofencesActions.refresh(await response.json()));
+ } else {
+ throw Error(await response.text());
+ }
+ }, [dispatch]);
+
+ useEffect(() => {
+ refreshGeofences();
+
+ map.addControl(draw, 'top-left');
+ return () => map.removeControl(draw);
+ }, [refreshGeofences]);
+
+ useEffect(() => {
+ const listener = async (event) => {
+ const feature = event.features[0];
+ const newItem = { name: '', area: geometryToArea(feature.geometry) };
+ draw.delete(feature.id);
+ try {
+ 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(`/settings/geofence/${item.id}`);
+ } else {
+ throw Error(await response.text());
+ }
+ } catch (error) {
+ dispatch(errorsActions.push(error.message));
+ }
+ };
+
+ map.on('draw.create', listener);
+ return () => map.off('draw.create', listener);
+ }, [dispatch, history]);
+
+ useEffect(() => {
+ const listener = async (event) => {
+ const feature = event.features[0];
+ try {
+ const response = await fetch(`/api/geofences/${feature.id}`, { method: 'DELETE' });
+ if (response.ok) {
+ refreshGeofences();
+ } else {
+ throw Error(await response.text());
+ }
+ } catch (error) {
+ dispatch(errorsActions.push(error.message));
+ }
+ };
+
+ map.on('draw.delete', listener);
+ return () => map.off('draw.delete', listener);
+ }, [dispatch, refreshGeofences]);
+
+ useEffect(() => {
+ const listener = async (event) => {
+ const feature = event.features[0];
+ const item = Object.values(geofences).find((i) => i.id === feature.id);
+ if (item) {
+ const updatedItem = { ...item, area: geometryToArea(feature.geometry) };
+ try {
+ const response = await fetch(`/api/geofences/${feature.id}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(updatedItem),
+ });
+ if (response.ok) {
+ refreshGeofences();
+ } else {
+ throw Error(await response.text());
+ }
+ } catch (error) {
+ dispatch(errorsActions.push(error.message));
+ }
+ }
+ };
+
+ map.on('draw.update', listener);
+ return () => map.off('draw.update', listener);
+ }, [dispatch, geofences, refreshGeofences]);
+
+ useEffect(() => {
+ draw.deleteAll();
+ Object.values(geofences).forEach((geofence) => {
+ draw.add(geofenceToFeature(geofence));
+ });
+ }, [geofences]);
+
+ return null;
+};
+
+export default MapGeofenceEdit;