Merge branch 'master' of github.com:traccar/traccar-web into fix-key-issue

5 files changed, 78 insertions, 71 deletions

diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index 8174de5a..f4427ca9 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 
 import {
-  makeStyles, Typography, AppBar, Toolbar, IconButton,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import { useHistory, useParams } from 'react-router-dom';
-import ContainerDimensions from 'react-container-dimensions';
+  Typography, AppBar, Toolbar, IconButton,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useEffectAsync } from '../reactHelper';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import Map from '../map/core/Map';
@@ -24,7 +24,7 @@ const useStyles = makeStyles(() => ({
 
 const EventPage = () => {
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useTranslation();
 
   const { id } = useParams();
@@ -61,18 +61,16 @@ const EventPage = () => {
     <div className={classes.root}>
       <AppBar color="inherit" position="static">
         <Toolbar>
-          <IconButton color="inherit" edge="start" onClick={() => history.push('/')}>
+          <IconButton color="inherit" edge="start" onClick={() => navigate('/')}>
             <ArrowBackIcon />
           </IconButton>
           <Typography variant="h6">{t('positionEvent')}</Typography>
         </Toolbar>
       </AppBar>
       <div className={classes.mapContainer}>
-        <ContainerDimensions>
-          <Map>
-            {position && <MapPositions positions={[position]} />}
-          </Map>
-        </ContainerDimensions>
+        <Map>
+          {position && <MapPositions positions={[position]} />}
+        </Map>
       </div>
     </div>
   );
diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js
index d0d0853f..7521de80 100644
--- a/modern/src/other/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -1,16 +1,14 @@
 import React, { Fragment } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
-import Divider from '@material-ui/core/Divider';
-import IconButton from '@material-ui/core/IconButton';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import makeStyles from '@mui/styles/makeStyles';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 
-import { devicesActions } from '../store';
-import EditCollectionView from '../settings/components/EditCollectionView';
+import { devicesActions, geofencesActions } from '../store';
+import CollectionActions from '../settings/components/CollectionActions';
+import { useCatchCallback } from '../reactHelper';
 
 const useStyles = makeStyles(() => ({
   list: {
@@ -24,23 +22,28 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const GeofenceView = ({ onMenuClick }) => {
+const GeofencesList = () => {
   const classes = useStyles();
   const dispatch = useDispatch();
 
   const items = 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]);
+
   return (
     <List className={classes.list}>
       {Object.values(items).map((item, index, list) => (
         <Fragment key={item.id}>
           <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item.id))}>
             <ListItemText primary={item.name} />
-            <ListItemSecondaryAction>
-              <IconButton size="small" onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
-                <MoreVertIcon />
-              </IconButton>
-            </ListItemSecondaryAction>
+            <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" setTimestamp={refreshGeofences} />
           </ListItem>
           {index < list.length - 1 ? <Divider /> : null}
         </Fragment>
@@ -49,8 +52,4 @@ const GeofenceView = ({ onMenuClick }) => {
   );
 };
 
-const GeofencesList = () => (
-  <EditCollectionView content={GeofenceView} editPath="/settings/geofence" endpoint="geofences" disableAdd />
-);
-
 export default GeofencesList;
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 1e866de6..6706ec98 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import {
-  Divider, makeStyles, Typography, IconButton, useMediaQuery,
-} from '@material-ui/core';
-import { useTheme } from '@material-ui/core/styles';
-import Drawer from '@material-ui/core/Drawer';
-import ContainerDimensions from 'react-container-dimensions';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import { useHistory } from 'react-router-dom';
+  Divider, Typography, IconButton, useMediaQuery,
+} 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 { useNavigate } from 'react-router-dom';
 import Map from '../map/core/Map';
 import MapCurrentLocation from '../map/MapCurrentLocation';
 import MapGeofenceEdit from '../map/MapGeofenceEdit';
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
     overflow: 'hidden',
     display: 'flex',
     flexDirection: 'row',
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       flexDirection: 'column-reverse',
     },
   },
@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.up('sm')]: {
       width: dimensions.drawerWidthTablet,
     },
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       height: dimensions.drawerHeightPhone,
     },
   },
@@ -52,10 +52,10 @@ const useStyles = makeStyles((theme) => ({
 const GeofencesPage = () => {
   const theme = useTheme();
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useTranslation();
 
-  const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
+  const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
     <div className={classes.root}>
@@ -66,7 +66,7 @@ const GeofencesPage = () => {
           classes={{ paper: classes.drawerPaper }}
         >
           <div className={classes.drawerHeader}>
-            <IconButton onClick={() => history.goBack()}>
+            <IconButton onClick={() => navigate(-1)}>
               <ArrowBackIcon />
             </IconButton>
             <Typography variant="h6" color="inherit" noWrap>
@@ -77,12 +77,10 @@ const GeofencesPage = () => {
           <GeofencesList />
         </Drawer>
         <div className={classes.mapContainer}>
-          <ContainerDimensions>
-            <Map>
-              <MapCurrentLocation />
-              <MapGeofenceEdit />
-            </Map>
-          </ContainerDimensions>
+          <Map>
+            <MapCurrentLocation />
+            <MapGeofenceEdit />
+          </Map>
         </div>
       </div>
     </div>
diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js
index 76bb560f..61c40902 100644
--- a/modern/src/other/PositionPage.js
+++ b/modern/src/other/PositionPage.js
@@ -2,10 +2,21 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import {
-  makeStyles, Typography, Container, Paper, AppBar, Toolbar, IconButton, Table, TableHead, TableRow, TableCell, TableBody,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import { useHistory, useParams } from 'react-router-dom';
+  Typography,
+  Container,
+  Paper,
+  AppBar,
+  Toolbar,
+  IconButton,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useEffectAsync } from '../reactHelper';
 import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -26,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
 
 const PositionPage = () => {
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useTranslation();
 
   const { id } = useParams();
@@ -63,7 +74,7 @@ const PositionPage = () => {
     <div className={classes.root}>
       <AppBar position="sticky" color="inherit">
         <Toolbar>
-          <IconButton color="inherit" edge="start" onClick={() => history.goBack()}>
+          <IconButton color="inherit" edge="start" onClick={() => navigate(-1)}>
             <ArrowBackIcon />
           </IconButton>
           <Typography variant="h6">
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index 5e759d7e..1c82c913 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -2,15 +2,16 @@ import React, {
   useState, useEffect, useRef, useCallback,
 } from 'react';
 import {
-  Grid, IconButton, makeStyles, Paper, Slider, Toolbar, Tooltip, Typography,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import SettingsIcon from '@material-ui/icons/Settings';
-import PlayArrowIcon from '@material-ui/icons/PlayArrow';
-import PauseIcon from '@material-ui/icons/Pause';
-import FastForwardIcon from '@material-ui/icons/FastForward';
-import FastRewindIcon from '@material-ui/icons/FastRewind';
-import { useHistory } from 'react-router-dom';
+  Grid, IconButton, Paper, Slider, Toolbar, Tooltip, Typography,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import SettingsIcon from '@mui/icons-material/Settings';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import PauseIcon from '@mui/icons-material/Pause';
+import FastForwardIcon from '@mui/icons-material/FastForward';
+import FastRewindIcon from '@mui/icons-material/FastRewind';
+import { useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import Map from '../map/core/Map';
 import MapReplayPath from '../map/MapReplayPath';
@@ -33,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
     top: 0,
     margin: theme.spacing(1.5),
     width: theme.dimensions.drawerWidthDesktop,
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: '100%',
       margin: 0,
     },
@@ -60,7 +61,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(2),
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       margin: theme.spacing(1),
     },
     [theme.breakpoints.up('md')]: {
@@ -78,7 +79,7 @@ const TimeLabel = ({ children, open, value }) => (
 const ReplayPage = () => {
   const t = useTranslation();
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
   const timerRef = useRef();
 
   const defaultDeviceId = useSelector((state) => state.devices.selectedId);
@@ -100,8 +101,8 @@ const ReplayPage = () => {
   });
 
   const onClick = useCallback((positionId) => {
-    history.push(`/position/${positionId}`);
-  }, [history]);
+    navigate(`/position/${positionId}`);
+  }, [navigate]);
 
   useEffect(() => {
     if (playing && positions.length > 0) {
@@ -146,7 +147,7 @@ const ReplayPage = () => {
       <div className={classes.sidebar}>
         <Paper elevation={3} square>
           <Toolbar>
-            <IconButton onClick={() => history.push('/')}>
+            <IconButton onClick={() => navigate('/')}>
               <ArrowBackIcon />
             </IconButton>
             <Typography variant="h6" className={classes.title}>{t('reportReplay')}</Typography>