diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-22 09:57:51 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-22 09:57:51 -0700 |
commit | 67d7ce8e0f428c521d3d032e8145108c9b2a5f45 (patch) | |
tree | 9f350497ebc64951ce2070723ab2b66e1a0f5472 /modern/src/map/MapGeofenceEdit.js | |
parent | 111347e3f40640aa4c43c0bc2666d7a92ce03bb2 (diff) | |
download | trackermap-web-67d7ce8e0f428c521d3d032e8145108c9b2a5f45.tar.gz trackermap-web-67d7ce8e0f428c521d3d032e8145108c9b2a5f45.tar.bz2 trackermap-web-67d7ce8e0f428c521d3d032e8145108c9b2a5f45.zip |
Rename map plugins
Diffstat (limited to 'modern/src/map/MapGeofenceEdit.js')
-rw-r--r-- | modern/src/map/MapGeofenceEdit.js | 141 |
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; |