Quick geofence creation

1 files changed, 28 insertions, 1 deletions

diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index 1e7b241b..373b02ab 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -30,7 +30,7 @@ import { useDeviceReadonly, useRestriction } from '../common/util/permissions';
 import usePersistedState from '../common/util/usePersistedState';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { devicesActions } from '../store';
-import { useCatch } from '../reactHelper';
+import { useCatch, useCatchCallback } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -126,6 +126,32 @@ const StatusCard = ({ deviceId, onClose }) => {
     setRemoving(false);
   });
 
+  const handleGeofence = useCatchCallback(async () => {
+    const newItem = {
+      name: '',
+      area: `CIRCLE (${position.latitude} ${position.longitude}, 50)`,
+    };
+    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();
+      const permissionResponse = await fetch('/api/permissions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ deviceId: position.deviceId, geofenceId: item.id }),
+      });
+      if (!permissionResponse.ok) {
+        throw Error(await permissionResponse.text());
+      }
+      navigate(`/settings/geofence/${item.id}`);
+    } else {
+      throw Error(await response.text());
+    }
+  }, [navigate]);
+
   return (
     <>
       {device && (
@@ -209,6 +235,7 @@ const StatusCard = ({ deviceId, onClose }) => {
       {position && (
         <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
           <MenuItem onClick={() => navigate(`/position/${position.id}`)}><Typography color="secondary">{t('sharedShowDetails')}</Typography></MenuItem>
+          <MenuItem onClick={handleGeofence}>{t('sharedCreateGeofence')}</MenuItem>
           <MenuItem component="a" target="_blank" href={`https://www.google.com/maps/search/?api=1&query=${position.latitude}%2C${position.longitude}`}>{t('linkGoogleMaps')}</MenuItem>
           <MenuItem component="a" target="_blank" href={`http://maps.apple.com/?ll=${position.latitude},${position.longitude}`}>{t('linkAppleMaps')}</MenuItem>
           <MenuItem component="a" target="_blank" href={`https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${position.latitude}%2C${position.longitude}&heading=${position.course}`}>{t('linkStreetView')}</MenuItem>