1 files changed, 142 insertions, 0 deletions
diff --git a/modern/src/other/GeofencesPage.jsx b/modern/src/other/GeofencesPage.jsx
new file mode 100644
index 00000000..4f31c1b3
--- /dev/null
+++ b/modern/src/other/GeofencesPage.jsx
@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  Divider, Typography, IconButton, useMediaQuery, Toolbar,
+} from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
+import makeStyles from '@mui/styles/makeStyles';
+import { useTheme } from '@mui/material/styles';
+import Drawer from '@mui/material/Drawer';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import { useNavigate } from 'react-router-dom';
+import MapView from '../map/core/MapView';
+import MapCurrentLocation from '../map/MapCurrentLocation';
+import MapGeofenceEdit from '../map/draw/MapGeofenceEdit';
+import GeofencesList from './GeofencesList';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import MapGeocoder from '../map/geocoder/MapGeocoder';
+import { errorsActions } from '../store';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  content: {
+    flexGrow: 1,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'row',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column-reverse',
+    },
+  },
+  drawer: {
+    zIndex: 1,
+  },
+  drawerPaper: {
+    position: 'relative',
+    [theme.breakpoints.up('sm')]: {
+      width: theme.dimensions.drawerWidthTablet,
+    },
+    [theme.breakpoints.down('sm')]: {
+      height: theme.dimensions.drawerHeightPhone,
+    },
+  },
+  mapContainer: {
+    flexGrow: 1,
+  },
+  title: {
+    flexGrow: 1,
+  },
+  fileInput: {
+    display: 'none',
+  },
+}));
+
+const GeofencesPage = () => {
+  const theme = useTheme();
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const t = useTranslation();
+
+  const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const [selectedGeofenceId, setSelectedGeofenceId] = useState();
+
+  const handleFile = (event) => {
+    const files = Array.from(event.target.files);
+    const [file] = files;
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const xml = new DOMParser().parseFromString(reader.result, 'text/xml');
+      const segment = xml.getElementsByTagName('trkseg')[0];
+      const coordinates = Array.from(segment.getElementsByTagName('trkpt'))
+        .map((point) => `${point.getAttribute('lat')} ${point.getAttribute('lon')}`)
+        .join(', ');
+      const area = `LINESTRING (${coordinates})`;
+      const newItem = { name: '', area };
+      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));
+      }
+    };
+    reader.onerror = (event) => {
+      dispatch(errorsActions.push(event.target.error));
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.content}>
+        <Drawer
+          className={classes.drawer}
+          anchor={isPhone ? 'bottom' : 'left'}
+          variant="permanent"
+          classes={{ paper: classes.drawerPaper }}
+        >
+          <Toolbar>
+            <IconButton edge="start" sx={{ mr: 2 }} onClick={() => navigate(-1)}>
+              <ArrowBackIcon />
+            </IconButton>
+            <Typography variant="h6" className={classes.title}>{t('sharedGeofences')}</Typography>
+            <label htmlFor="upload-gpx">
+              <input accept=".gpx" id="upload-gpx" type="file" className={classes.fileInput} onChange={handleFile} />
+              <IconButton edge="end" component="span" onClick={() => {}}>
+                <Tooltip title={t('sharedUpload')}>
+                  <UploadFileIcon />
+                </Tooltip>
+              </IconButton>
+            </label>
+          </Toolbar>
+          <Divider />
+          <GeofencesList onGeofenceSelected={setSelectedGeofenceId} />
+        </Drawer>
+        <div className={classes.mapContainer}>
+          <MapView>
+            <MapGeofenceEdit selectedGeofenceId={selectedGeofenceId} />
+          </MapView>
+          <MapCurrentLocation />
+          <MapGeocoder />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GeofencesPage;