Move modern to the top

2 files changed, 0 insertions, 391 deletions

diff --git a/modern/src/map/draw/MapGeofenceEdit.js b/modern/src/map/draw/MapGeofenceEdit.js
deleted file mode 100644
index e547ea05..00000000
--- a/modern/src/map/draw/MapGeofenceEdit.js
+++ /dev/null
@@ -1,161 +0,0 @@
-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 { useEffect } from 'react';
-
-import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
-import { useTheme } from '@mui/styles';
-import { map } from '../core/MapView';
-import { geofenceToFeature, geometryToArea } from '../core/mapUtil';
-import { errorsActions, geofencesActions } from '../../store';
-import { useCatchCallback } from '../../reactHelper';
-import theme from './theme';
-
-const draw = new MapboxDraw({
-  displayControlsDefault: false,
-  controls: {
-    polygon: true,
-    line_string: 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 = ({ selectedGeofenceId }) => {
-  const theme = useTheme();
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-
-  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();
-          navigate(`/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, navigate]);
-
-  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(theme, geofence));
-    });
-  }, [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[1]),
-      );
-      const canvas = map.getCanvas();
-      map.fitBounds(bounds, { padding: Math.min(canvas.width, canvas.height) * 0.1 });
-    }
-  }, [selectedGeofenceId]);
-
-  return null;
-};
-
-export default MapGeofenceEdit;
diff --git a/modern/src/map/draw/theme.js b/modern/src/map/draw/theme.js
deleted file mode 100644
index c9864e2f..00000000
--- a/modern/src/map/draw/theme.js
+++ /dev/null
@@ -1,230 +0,0 @@
-// Copy of the original theme
-// https://github.com/mapbox/mapbox-gl-draw/blob/v1.4.0/src/lib/theme.js
-
-export default [
-  {
-    'id': 'gl-draw-polygon-fill-inactive',
-    'type': 'fill',
-    'filter': ['all',
-      ['==', 'active', 'false'],
-      ['==', '$type', 'Polygon'],
-      ['!=', 'mode', 'static']
-    ],
-    'paint': {
-      'fill-color': '#3bb2d0',
-      'fill-outline-color': '#3bb2d0',
-      'fill-opacity': 0.1
-    }
-  },
-  {
-    'id': 'gl-draw-polygon-fill-active',
-    'type': 'fill',
-    'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
-    'paint': {
-      'fill-color': '#fbb03b',
-      'fill-outline-color': '#fbb03b',
-      'fill-opacity': 0.1
-    }
-  },
-  {
-    'id': 'gl-draw-polygon-midpoint',
-    'type': 'circle',
-    'filter': ['all',
-      ['==', '$type', 'Point'],
-      ['==', 'meta', 'midpoint']],
-    'paint': {
-      'circle-radius': 3,
-      'circle-color': '#fbb03b'
-    }
-  },
-  {
-    'id': 'gl-draw-polygon-stroke-inactive',
-    'type': 'line',
-    'filter': ['all',
-      ['==', 'active', 'false'],
-      ['==', '$type', 'Polygon'],
-      ['!=', 'mode', 'static']
-    ],
-    'layout': {
-      'line-cap': 'round',
-      'line-join': 'round'
-    },
-    'paint': {
-      'line-color': '#3bb2d0',
-      'line-width': 2
-    }
-  },
-  {
-    'id': 'gl-draw-polygon-stroke-active',
-    'type': 'line',
-    'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
-    'layout': {
-      'line-cap': 'round',
-      'line-join': 'round'
-    },
-    'paint': {
-      'line-color': '#fbb03b',
-      'line-dasharray': [0.2, 2],
-      'line-width': 2
-    }
-  },
-  {
-    'id': 'gl-draw-line-inactive',
-    'type': 'line',
-    'filter': ['all',
-      ['==', 'active', 'false'],
-      ['==', '$type', 'LineString'],
-      ['!=', 'mode', 'static']
-    ],
-    'layout': {
-      'line-cap': 'round',
-      'line-join': 'round'
-    },
-    'paint': {
-      'line-color': '#3bb2d0',
-      'line-width': 2
-    }
-  },
-  {
-    'id': 'gl-draw-line-active',
-    'type': 'line',
-    'filter': ['all',
-      ['==', '$type', 'LineString'],
-      ['==', 'active', 'true']
-    ],
-    'layout': {
-      'line-cap': 'round',
-      'line-join': 'round'
-    },
-    'paint': {
-      'line-color': '#fbb03b',
-      'line-dasharray': [0.2, 2],
-      'line-width': 2
-    }
-  },
-  {
-    'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
-    'type': 'circle',
-    'filter': ['all',
-      ['==', 'meta', 'vertex'],
-      ['==', '$type', 'Point'],
-      ['!=', 'mode', 'static']
-    ],
-    'paint': {
-      'circle-radius': 5,
-      'circle-color': '#fff'
-    }
-  },
-  {
-    'id': 'gl-draw-polygon-and-line-vertex-inactive',
-    'type': 'circle',
-    'filter': ['all',
-      ['==', 'meta', 'vertex'],
-      ['==', '$type', 'Point'],
-      ['!=', 'mode', 'static']
-    ],
-    'paint': {
-      'circle-radius': 3,
-      'circle-color': '#fbb03b'
-    }
-  },
-  {
-    'id': 'gl-draw-point-point-stroke-inactive',
-    'type': 'circle',
-    'filter': ['all',
-      ['==', 'active', 'false'],
-      ['==', '$type', 'Point'],
-      ['==', 'meta', 'feature'],
-      ['!=', 'mode', 'static']
-    ],
-    'paint': {
-      'circle-radius': 5,
-      'circle-opacity': 1,
-      'circle-color': '#fff'
-    }
-  },
-  {
-    'id': 'gl-draw-point-inactive',
-    'type': 'circle',
-    'filter': ['all',
-      ['==', 'active', 'false'],
-      ['==', '$type', 'Point'],
-      ['==', 'meta', 'feature'],
-      ['!=', 'mode', 'static']
-    ],
-    'paint': {
-      'circle-radius': 3,
-      'circle-color': '#3bb2d0'
-    }
-  },
-  {
-    'id': 'gl-draw-point-stroke-active',
-    'type': 'circle',
-    'filter': ['all',
-      ['==', '$type', 'Point'],
-      ['==', 'active', 'true'],
-      ['!=', 'meta', 'midpoint']
-    ],
-    'paint': {
-      'circle-radius': 7,
-      'circle-color': '#fff'
-    }
-  },
-  {
-    'id': 'gl-draw-point-active',
-    'type': 'circle',
-    'filter': ['all',
-      ['==', '$type', 'Point'],
-      ['!=', 'meta', 'midpoint'],
-      ['==', 'active', 'true']],
-    'paint': {
-      'circle-radius': 5,
-      'circle-color': '#fbb03b'
-    }
-  },
-  {
-    'id': 'gl-draw-polygon-fill-static',
-    'type': 'fill',
-    'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
-    'paint': {
-      'fill-color': '#404040',
-      'fill-outline-color': '#404040',
-      'fill-opacity': 0.1
-    }
-  },
-  {
-    'id': 'gl-draw-polygon-stroke-static',
-    'type': 'line',
-    'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
-    'layout': {
-      'line-cap': 'round',
-      'line-join': 'round'
-    },
-    'paint': {
-      'line-color': '#404040',
-      'line-width': 2
-    }
-  },
-  {
-    'id': 'gl-draw-line-static',
-    'type': 'line',
-    'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
-    'layout': {
-      'line-cap': 'round',
-      'line-join': 'round'
-    },
-    'paint': {
-      'line-color': '#404040',
-      'line-width': 2
-    }
-  },
-  {
-    'id': 'gl-draw-point-static',
-    'type': 'circle',
-    'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
-    'paint': {
-      'circle-radius': 5,
-      'circle-color': '#404040'
-    }
-  }
-];