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

10 files changed, 33 insertions, 31 deletions

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index bb71fa95..becdfb57 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem, makeStyles,
-} from '@material-ui/core';
+  FormControl, InputLabel, Select, MenuItem,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import {
   CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
 } from 'recharts';
@@ -58,9 +59,9 @@ const ChartReportPage = () => {
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
       <ReportFilter handleSubmit={handleSubmit} showOnly>
         <div className={filterClasses.item}>
-          <FormControl variant="filled" fullWidth>
+          <FormControl fullWidth>
             <InputLabel>{t('reportChartType')}</InputLabel>
-            <Select value={type} onChange={(e) => setType(e.target.value)}>
+            <Select label={t('reportChartType')} value={type} onChange={(e) => setType(e.target.value)}>
               {Object.keys(positionAttributes).filter((key) => positionAttributes[key].type === 'number').map((key) => (
                 <MenuItem key={key} value={key}>{positionAttributes[key].name}</MenuItem>
               ))}
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index bd0ad68b..8d71d50b 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableCell, TableBody,
-} from '@material-ui/core';
+} from '@mui/material';
 import { useSelector } from 'react-redux';
 import { formatDate } from '../common/util/formatter';
 import ReportFilter, { useFilterStyles } from './components/ReportFilter';
@@ -99,9 +99,10 @@ const EventReportPage = () => {
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
       <ReportFilter handleSubmit={handleSubmit}>
         <div className={classes.item}>
-          <FormControl variant="filled" fullWidth>
+          <FormControl fullWidth>
             <InputLabel>{t('reportEventTypes')}</InputLabel>
             <Select
+              label={t('reportEventTypes')}
               value={eventTypes}
               onChange={(event, child) => {
                 let values = event.target.value;
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index b67833f9..3f89888f 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
-} from '@material-ui/core';
+} from '@mui/material';
 import ReportFilter from './components/ReportFilter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index 9ed830eb..b9b14902 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
-} from '@material-ui/core';
+} from '@mui/material';
 import { formatDate } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 5b5fdc29..587e1dd4 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   formatDistance, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 12f39ac8..d58f7568 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableBody, TableCell,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
 } from '../common/util/formatter';
@@ -81,9 +81,9 @@ const SummaryReportPage = () => {
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportSummary']}>
       <ReportFilter handleSubmit={handleSubmit}>
         <div className={classes.item}>
-          <FormControl variant="filled" fullWidth>
+          <FormControl fullWidth>
             <InputLabel>{t('sharedType')}</InputLabel>
-            <Select value={daily} onChange={(e) => setDaily(e.target.value)}>
+            <Select label={t('sharedType')} value={daily} onChange={(e) => setDaily(e.target.value)}>
               <MenuItem value={false}>{t('reportSummary')}</MenuItem>
               <MenuItem value>{t('reportDaily')}</MenuItem>
             </Select>
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 5662e18a..8e03931b 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js
index d7306c58..8a79108e 100644
--- a/modern/src/reports/components/ColumnSelect.js
+++ b/modern/src/reports/components/ColumnSelect.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   FormControl, InputLabel, MenuItem, Select,
-} from '@material-ui/core';
+} from '@mui/material';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import { useFilterStyles } from './ReportFilter';
 
@@ -13,9 +13,10 @@ const ColumnSelect = ({
 
   return (
     <div className={classes.item}>
-      <FormControl variant="filled" fullWidth>
+      <FormControl fullWidth>
         <InputLabel>{t('sharedColumns')}</InputLabel>
         <Select
+          label={t('sharedColumns')}
           value={columns}
           onChange={(e) => setColumns(e.target.value)}
           renderValue={(it) => it.length}
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 350bbe6d..42fcaa9a 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography, makeStyles,
-} from '@material-ui/core';
+  FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 import { useTranslation } from '../../common/components/LocalizationProvider';
@@ -89,9 +90,9 @@ const ReportFilter = ({
     <div className={classes.filter}>
       {!ignoreDevice && (
         <div className={classes.item}>
-          <FormControl variant="filled" fullWidth>
+          <FormControl fullWidth>
             <InputLabel>{t('reportDevice')}</InputLabel>
-            <Select value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}>
+            <Select label={t('reportDevice')} value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}>
               {Object.values(devices).map((device) => (
                 <MenuItem key={device.id} value={device.id}>{device.name}</MenuItem>
               ))}
@@ -100,9 +101,9 @@ const ReportFilter = ({
         </div>
       )}
       <div className={classes.item}>
-        <FormControl variant="filled" fullWidth>
+        <FormControl fullWidth>
           <InputLabel>{t('reportPeriod')}</InputLabel>
-          <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+          <Select label={t('reportPeriod')} value={period} onChange={(e) => setPeriod(e.target.value)}>
             <MenuItem value="today">{t('reportToday')}</MenuItem>
             <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
             <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
@@ -116,7 +117,6 @@ const ReportFilter = ({
       {period === 'custom' && (
         <div className={classes.item}>
           <TextField
-            variant="filled"
             label={t('reportFrom')}
             type="datetime-local"
             value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
@@ -128,7 +128,6 @@ const ReportFilter = ({
       {period === 'custom' && (
         <div className={classes.item}>
           <TextField
-            variant="filled"
             label={t('reportTo')}
             type="datetime-local"
             value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
diff --git a/modern/src/reports/components/ReportsMenu.js b/modern/src/reports/components/ReportsMenu.js
index 8e973562..afe9de79 100644
--- a/modern/src/reports/components/ReportsMenu.js
+++ b/modern/src/reports/components/ReportsMenu.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import {
   Divider, List, ListItem, ListItemIcon, ListItemText,
-} from '@material-ui/core';
-import TimelineIcon from '@material-ui/icons/Timeline';
-import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
-import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
-import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
-import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
-import BarChartIcon from '@material-ui/icons/BarChart';
+} from '@mui/material';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import PauseCircleFilledIcon from '@mui/icons-material/PauseCircleFilled';
+import PlayCircleFilledIcon from '@mui/icons-material/PlayCircleFilled';
+import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import BarChartIcon from '@mui/icons-material/BarChart';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import { useAdministrator } from '../../common/util/permissions';