import React from 'react'; import { useDispatch } from 'react-redux'; import { Divider, Typography, IconButton, useMediaQuery, Toolbar, } from '@mui/material'; 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/MapGeofenceEdit'; import GeofencesList from './GeofencesList'; import { useTranslation } from '../common/components/LocalizationProvider'; import dimensions from '../common/theme/dimensions'; 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', }, }, drawerPaper: { position: 'relative', [theme.breakpoints.up('sm')]: { width: dimensions.drawerWidthTablet, }, [theme.breakpoints.down('sm')]: { height: 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 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 (