From fdbc6762b10233950d9c84fc71a9a8c11823f0a9 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 22 May 2022 18:08:47 -0700 Subject: Remove unnecessary code --- modern/src/other/EventPage.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'modern/src/other/EventPage.js') diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js index 8174de5a..c688e62a 100644 --- a/modern/src/other/EventPage.js +++ b/modern/src/other/EventPage.js @@ -5,7 +5,6 @@ import { } from '@material-ui/core'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import { useHistory, useParams } from 'react-router-dom'; -import ContainerDimensions from 'react-container-dimensions'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import Map from '../map/core/Map'; @@ -68,11 +67,9 @@ const EventPage = () => {
- - - {position && } - - + + {position && } +
); -- cgit v1.2.3 From ddcb42512e95e98806db0523e4d954484a6e48cc Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 23 May 2022 06:44:15 -0700 Subject: Upgrade router and navigation --- modern/package.json | 4 +- modern/src/App.js | 163 +++------------------ modern/src/Navigation.js | 131 +++++++++++++++++ modern/src/SocketController.js | 6 +- modern/src/common/components/BottomMenu.js | 14 +- modern/src/common/components/PageLayout.js | 6 +- modern/src/index.js | 22 ++- modern/src/login/LoginPage.js | 10 +- modern/src/login/RegisterPage.js | 8 +- modern/src/login/ResetPasswordPage.js | 8 +- modern/src/main/MainPage.js | 6 +- modern/src/main/StatusCard.js | 12 +- modern/src/map/MapGeofenceEdit.js | 8 +- modern/src/other/EventPage.js | 6 +- modern/src/other/GeofencesPage.js | 6 +- modern/src/other/PositionPage.js | 6 +- modern/src/other/ReplayPage.js | 10 +- modern/src/settings/AccumulatorsPage.js | 8 +- modern/src/settings/CommandSendPage.js | 8 +- modern/src/settings/ServerPage.js | 8 +- .../src/settings/components/CollectionActions.js | 6 +- modern/src/settings/components/CollectionFab.js | 6 +- modern/src/settings/components/EditItemView.js | 8 +- 23 files changed, 242 insertions(+), 228 deletions(-) create mode 100644 modern/src/Navigation.js (limited to 'modern/src/other/EventPage.js') diff --git a/modern/package.json b/modern/package.json index b1422f44..89b0a6f9 100644 --- a/modern/package.json +++ b/modern/package.json @@ -18,8 +18,8 @@ "moment": "^2.29.3", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-redux": "^7.2.4", - "react-router-dom": "^5.2.0", + "react-redux": "^8.0.2", + "react-router-dom": "^6.3.0", "react-scripts": "^3.4.4", "react-virtualized-auto-sizer": "^1.0.5", "react-window": "^1.8.6", diff --git a/modern/src/App.js b/modern/src/App.js index fee94e5b..84459cd5 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,56 +1,9 @@ -import React, { useState } from 'react'; -import { ThemeProvider } from '@material-ui/core/styles'; -import { Switch, Route, useHistory } from 'react-router-dom'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import { useDispatch, useSelector } from 'react-redux'; +import React from 'react'; +import { Outlet } from 'react-router-dom'; +import { useSelector } from 'react-redux'; import { makeStyles, LinearProgress, useMediaQuery } from '@material-ui/core'; -import MainPage from './main/MainPage'; -import RouteReportPage from './reports/RouteReportPage'; -import ServerPage from './settings/ServerPage'; -import UsersPage from './settings/UsersPage'; -import DevicePage from './settings/DevicePage'; -import UserPage from './settings/UserPage'; -import SocketController from './SocketController'; -import NotificationsPage from './settings/NotificationsPage'; -import NotificationPage from './settings/NotificationPage'; -import GroupsPage from './settings/GroupsPage'; -import GroupPage from './settings/GroupPage'; -import PositionPage from './other/PositionPage'; -import EventReportPage from './reports/EventReportPage'; -import ReplayPage from './other/ReplayPage'; -import TripReportPage from './reports/TripReportPage'; -import StopReportPage from './reports/StopReportPage'; -import SummaryReportPage from './reports/SummaryReportPage'; -import ChartReportPage from './reports/ChartReportPage'; -import DriversPage from './settings/DriversPage'; -import DriverPage from './settings/DriverPage'; -import CalendarsPage from './settings/CalendarsPage'; -import CalendarPage from './settings/CalendarPage'; -import ComputedAttributesPage from './settings/ComputedAttributesPage'; -import ComputedAttributePage from './settings/ComputedAttributePage'; -import MaintenancesPage from './settings/MaintenancesPage'; -import MaintenancePage from './settings/MaintenancePage'; -import CommandsPage from './settings/CommandsPage'; -import CommandPage from './settings/CommandPage'; -import StatisticsPage from './reports/StatisticsPage'; -import CachingController from './CachingController'; - -import LoginPage from './login/LoginPage'; -import RegisterPage from './login/RegisterPage'; -import ResetPasswordPage from './login/ResetPasswordPage'; - import theme from './common/theme'; -import GeofencesPage from './other/GeofencesPage'; -import GeofencePage from './settings/GeofencePage'; -import useQuery from './common/util/useQuery'; -import { useEffectAsync } from './reactHelper'; -import { devicesActions } from './store'; -import EventPage from './other/EventPage'; -import PreferencesPage from './settings/PreferencesPage'; import BottomMenu from './common/components/BottomMenu'; -import AccumulatorsPage from './settings/AccumulatorsPage'; -import CommandSendPage from './settings/CommandSendPage'; -import ErrorHandler from './common/components/ErrorHandler'; const useStyles = makeStyles(() => ({ page: { @@ -63,107 +16,27 @@ const useStyles = makeStyles(() => ({ })); const App = () => { - const history = useHistory(); - const dispatch = useDispatch(); const classes = useStyles(); const desktop = useMediaQuery(theme.breakpoints.up('md')); const initialized = useSelector((state) => !!state.session.server && !!state.session.user); - const [redirectsHandled, setRedirectsHandled] = useState(false); - - const query = useQuery(); - - useEffectAsync(async () => { - if (query.get('token')) { - const token = query.get('token'); - await fetch(`/api/session?token=${encodeURIComponent(token)}`); - history.push('/'); - } else if (query.get('deviceId')) { - const deviceId = query.get('deviceId'); - const response = await fetch(`/api/devices?uniqueId=${deviceId}`); - if (response.ok) { - const items = await response.json(); - if (items.length > 0) { - dispatch(devicesActions.select(items[0].id)); - } - } else { - throw Error(await response.text()); - } - history.push('/'); - } else if (query.get('eventId')) { - const eventId = parseInt(query.get('eventId'), 10); - history.push(`/event/${eventId}`); - } else { - setRedirectsHandled(true); - } - }, [query]); - - return (!redirectsHandled ? () : ( - - - - - - - - - - {!initialized ? () : ( - <> -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- {!desktop && ( -
- -
- )} - - )} - - - - - )); + if (!initialized) { + return (); + } + return ( + <> +
+ +
+ {!desktop && ( +
+ +
+ )} + + ); }; export default App; diff --git a/modern/src/Navigation.js b/modern/src/Navigation.js new file mode 100644 index 00000000..a538029b --- /dev/null +++ b/modern/src/Navigation.js @@ -0,0 +1,131 @@ +import React, { useState } from 'react'; +import { Route, Routes, useNavigate } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; +import { LinearProgress } from '@material-ui/core'; +import MainPage from './main/MainPage'; +import RouteReportPage from './reports/RouteReportPage'; +import ServerPage from './settings/ServerPage'; +import UsersPage from './settings/UsersPage'; +import DevicePage from './settings/DevicePage'; +import UserPage from './settings/UserPage'; +import NotificationsPage from './settings/NotificationsPage'; +import NotificationPage from './settings/NotificationPage'; +import GroupsPage from './settings/GroupsPage'; +import GroupPage from './settings/GroupPage'; +import PositionPage from './other/PositionPage'; +import EventReportPage from './reports/EventReportPage'; +import ReplayPage from './other/ReplayPage'; +import TripReportPage from './reports/TripReportPage'; +import StopReportPage from './reports/StopReportPage'; +import SummaryReportPage from './reports/SummaryReportPage'; +import ChartReportPage from './reports/ChartReportPage'; +import DriversPage from './settings/DriversPage'; +import DriverPage from './settings/DriverPage'; +import CalendarsPage from './settings/CalendarsPage'; +import CalendarPage from './settings/CalendarPage'; +import ComputedAttributesPage from './settings/ComputedAttributesPage'; +import ComputedAttributePage from './settings/ComputedAttributePage'; +import MaintenancesPage from './settings/MaintenancesPage'; +import MaintenancePage from './settings/MaintenancePage'; +import CommandsPage from './settings/CommandsPage'; +import CommandPage from './settings/CommandPage'; +import StatisticsPage from './reports/StatisticsPage'; +import LoginPage from './login/LoginPage'; +import RegisterPage from './login/RegisterPage'; +import ResetPasswordPage from './login/ResetPasswordPage'; +import GeofencesPage from './other/GeofencesPage'; +import GeofencePage from './settings/GeofencePage'; +import useQuery from './common/util/useQuery'; +import { useEffectAsync } from './reactHelper'; +import { devicesActions } from './store'; +import EventPage from './other/EventPage'; +import PreferencesPage from './settings/PreferencesPage'; +import AccumulatorsPage from './settings/AccumulatorsPage'; +import CommandSendPage from './settings/CommandSendPage'; +import App from './App'; + +const Navigation = () => { + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const [redirectsHandled, setRedirectsHandled] = useState(false); + + const query = useQuery(); + + useEffectAsync(async () => { + if (query.get('token')) { + const token = query.get('token'); + await fetch(`/api/session?token=${encodeURIComponent(token)}`); + navigate('/'); + } else if (query.get('deviceId')) { + const deviceId = query.get('deviceId'); + const response = await fetch(`/api/devices?uniqueId=${deviceId}`); + if (response.ok) { + const items = await response.json(); + if (items.length > 0) { + dispatch(devicesActions.select(items[0].id)); + } + } else { + throw Error(await response.text()); + } + navigate('/'); + } else if (query.get('eventId')) { + const eventId = parseInt(query.get('eventId'), 10); + navigate(`/event/${eventId}`); + } else { + setRedirectsHandled(true); + } + }, [query]); + + if (!redirectsHandled) { + return (); + } + return ( + + } /> + } /> + } /> + }> + } /> + + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + ); +}; + +export default Navigation; diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index 9826d4b1..f776ebc7 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -1,7 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector, connect } from 'react-redux'; import { Snackbar } from '@material-ui/core'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { positionsActions, devicesActions, sessionActions } from './store'; import { useEffectAsync } from './reactHelper'; @@ -11,7 +11,7 @@ import { snackBarDurationLongMs } from './common/util/duration'; const SocketController = () => { const dispatch = useDispatch(); - const history = useHistory(); + const navigate = useNavigate(); const t = useTranslation(); const authenticated = useSelector((state) => !!state.session.user); @@ -74,7 +74,7 @@ const SocketController = () => { if (response.ok) { dispatch(sessionActions.updateUser(await response.json())); } else { - history.push('/login'); + navigate('/login'); } return null; }, [authenticated]); diff --git a/modern/src/common/components/BottomMenu.js b/modern/src/common/components/BottomMenu.js index 30960396..7db4dff8 100644 --- a/modern/src/common/components/BottomMenu.js +++ b/modern/src/common/components/BottomMenu.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useHistory, useLocation } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; import { Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography, } from '@material-ui/core'; @@ -16,7 +16,7 @@ import { useTranslation } from './LocalizationProvider'; import { useReadonly } from '../util/permissions'; const BottomMenu = () => { - const history = useHistory(); + const navigate = useNavigate(); const location = useLocation(); const dispatch = useDispatch(); const t = useTranslation(); @@ -41,26 +41,26 @@ const BottomMenu = () => { const handleAccount = () => { setAnchorEl(null); - history.push(`/settings/user/${userId}`); + navigate(`/settings/user/${userId}`); }; const handleLogout = async () => { setAnchorEl(null); await fetch('/api/session', { method: 'DELETE' }); - history.push('/login'); + navigate('/login'); dispatch(sessionActions.updateUser(null)); }; const handleSelection = (event, value) => { switch (value) { case 0: - history.push('/'); + navigate('/'); break; case 1: - history.push('/reports/route'); + navigate('/reports/route'); break; case 2: - history.push('/settings/preferences'); + navigate('/settings/preferences'); break; case 3: if (readonly) { diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js index a1f117c4..d92b71c3 100644 --- a/modern/src/common/components/PageLayout.js +++ b/modern/src/common/components/PageLayout.js @@ -4,7 +4,7 @@ import { } from '@material-ui/core'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import MenuIcon from '@material-ui/icons/Menu'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { useTranslation } from './LocalizationProvider'; const useStyles = makeStyles((theme) => ({ @@ -56,7 +56,7 @@ const PageTitle = ({ breadcrumbs }) => { const PageLayout = ({ menu, breadcrumbs, children }) => { const classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); const [openDrawer, setOpenDrawer] = useState(false); @@ -71,7 +71,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { >
- history.push('/')}> + navigate('/')}> diff --git a/modern/src/index.js b/modern/src/index.js index 43462d35..07ac7e3f 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -3,21 +3,31 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; - -import App from './App'; +import { CssBaseline, ThemeProvider } from '@material-ui/core'; import * as serviceWorker from './serviceWorker'; import store from './store'; import { LocalizationProvider } from './common/components/LocalizationProvider'; +import ErrorHandler from './common/components/ErrorHandler'; +import CachingController from './CachingController'; +import SocketController from './SocketController'; +import theme from './common/theme'; +import Navigation from './Navigation'; -const base = window.location.href.indexOf('modern') >= 0 ? '/modern' : null; +const base = window.location.href.indexOf('modern') >= 0 ? '/modern' : '/'; ReactDOM.render( ( - - - + + + + + + + + + ), document.getElementById('root'), diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 5b690cdc..2a911b84 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -6,7 +6,7 @@ import CloseIcon from '@material-ui/icons/Close'; import CachedIcon from '@material-ui/icons/Cached'; import { useTheme } from '@material-ui/core/styles'; import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { sessionActions } from '../store'; import { useLocalization, useTranslation } from '../common/components/LocalizationProvider'; import LoginLayout from './LoginLayout'; @@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({ const LoginPage = () => { const classes = useStyles(); const dispatch = useDispatch(); - const history = useHistory(); + const navigate = useNavigate(); const theme = useTheme(); const t = useTranslation(); @@ -58,7 +58,7 @@ const LoginPage = () => { if (response.ok) { const user = await response.json(); dispatch(sessionActions.updateUser(user)); - history.push('/'); + navigate('/'); } else { throw Error(await response.text()); } @@ -136,7 +136,7 @@ const LoginPage = () => { - @@ -152,7 +152,7 @@ const LoginPage = () => { {emailEnabled && ( - history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')} + navigate('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')} )} diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js index 78728b58..5fa061bb 100644 --- a/modern/src/login/RegisterPage.js +++ b/modern/src/login/RegisterPage.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, } from '@material-ui/core'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; @@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({ const RegisterPage = () => { const classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); const t = useTranslation(); const [name, setName] = useState(''); @@ -51,7 +51,7 @@ const RegisterPage = () => { history.push('/login')} + onClose={() => navigate('/login')} autoHideDuration={snackBarDurationShortMs} message={t('loginCreated')} /> @@ -59,7 +59,7 @@ const RegisterPage = () => { - history.push('/login')}> + navigate('/login')}> diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js index 93e154e3..acdf13ab 100644 --- a/modern/src/login/ResetPasswordPage.js +++ b/modern/src/login/ResetPasswordPage.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, } from '@material-ui/core'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; @@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({ const ResetPasswordPage = () => { const classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); const t = useTranslation(); const query = useQuery(); @@ -62,7 +62,7 @@ const ResetPasswordPage = () => { history.push('/login')} + onClose={() => navigate('/login')} autoHideDuration={snackBarDurationShortMs} message={!token ? t('loginResetSuccess') : t('loginUpdateSuccess')} /> @@ -70,7 +70,7 @@ const ResetPasswordPage = () => { - history.push('/login')}> + navigate('/login')}> diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js index 61c10d81..346919e2 100644 --- a/modern/src/main/MainPage.js +++ b/modern/src/main/MainPage.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { makeStyles, Paper, Toolbar, TextField, IconButton, Button, } from '@material-ui/core'; @@ -115,7 +115,7 @@ const useStyles = makeStyles((theme) => ({ const MainPage = () => { const classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); const dispatch = useDispatch(); const theme = useTheme(); const t = useTranslation(); @@ -178,7 +178,7 @@ const MainPage = () => { placeholder={t('sharedSearchDevices')} variant="filled" /> - history.push('/settings/device')} disabled={deviceReadonly}> + navigate('/settings/device')} disabled={deviceReadonly}> {desktop && ( diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js index d23bc8c3..92db8047 100644 --- a/modern/src/main/StatusCard.js +++ b/modern/src/main/StatusCard.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { makeStyles, Card, CardContent, Typography, CardActions, CardHeader, IconButton, Avatar, Table, TableBody, TableRow, TableCell, TableContainer, } from '@material-ui/core'; @@ -65,7 +65,7 @@ const StatusRow = ({ name, content }) => { const StatusCard = ({ deviceId, onClose }) => { const classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); const dispatch = useDispatch(); const t = useTranslation(); @@ -134,16 +134,16 @@ const StatusCard = ({ deviceId, onClose }) => { )} - history.push(`/position/${position.id}`)} disabled={!position} color="secondary"> + navigate(`/position/${position.id}`)} disabled={!position} color="secondary"> - history.push('/replay')} disabled={!position}> + navigate('/replay')} disabled={!position}> - history.push(`/settings/command-send/${deviceId}`)} disabled={readonly}> + navigate(`/settings/command-send/${deviceId}`)} disabled={readonly}> - history.push(`/settings/device/${deviceId}`)} disabled={deviceReadonly}> + navigate(`/settings/device/${deviceId}`)} disabled={deviceReadonly}> setRemoving(true)} disabled={deviceReadonly} className={classes.negative}> diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js index c64eb736..0b5062d8 100644 --- a/modern/src/map/MapGeofenceEdit.js +++ b/modern/src/map/MapGeofenceEdit.js @@ -5,7 +5,7 @@ import theme from '@mapbox/mapbox-gl-draw/src/lib/theme'; import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { map } from './core/Map'; import { geofenceToFeature, geometryToArea } from './core/mapUtil'; import { errorsActions, geofencesActions } from '../store'; @@ -36,7 +36,7 @@ const draw = new MapboxDraw({ const MapGeofenceEdit = () => { const dispatch = useDispatch(); - const history = useHistory(); + const navigate = useNavigate(); const geofences = useSelector((state) => state.geofences.items); @@ -69,7 +69,7 @@ const MapGeofenceEdit = () => { }); if (response.ok) { const item = await response.json(); - history.push(`/settings/geofence/${item.id}`); + navigate(`/settings/geofence/${item.id}`); } else { throw Error(await response.text()); } @@ -80,7 +80,7 @@ const MapGeofenceEdit = () => { map.on('draw.create', listener); return () => map.off('draw.create', listener); - }, [dispatch, history]); + }, [dispatch, navigate]); useEffect(() => { const listener = async (event) => { diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js index c688e62a..9f5f7c84 100644 --- a/modern/src/other/EventPage.js +++ b/modern/src/other/EventPage.js @@ -4,7 +4,7 @@ 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 { useNavigate, useParams } from 'react-router-dom'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import Map from '../map/core/Map'; @@ -23,7 +23,7 @@ const useStyles = makeStyles(() => ({ const EventPage = () => { const classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); const t = useTranslation(); const { id } = useParams(); @@ -60,7 +60,7 @@ const EventPage = () => {
- history.push('/')}> + navigate('/')}> {t('positionEvent')} diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js index 98833cc7..80e23cba 100644 --- a/modern/src/other/GeofencesPage.js +++ b/modern/src/other/GeofencesPage.js @@ -5,7 +5,7 @@ import { import { useTheme } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import Map from '../map/core/Map'; import MapCurrentLocation from '../map/MapCurrentLocation'; import MapGeofenceEdit from '../map/MapGeofenceEdit'; @@ -51,7 +51,7 @@ 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')); @@ -65,7 +65,7 @@ const GeofencesPage = () => { classes={{ paper: classes.drawerPaper }} >
- history.goBack()}> + navigate(-1)}> diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js index 76bb560f..8188f669 100644 --- a/modern/src/other/PositionPage.js +++ b/modern/src/other/PositionPage.js @@ -5,7 +5,7 @@ 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'; +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 +26,7 @@ const useStyles = makeStyles((theme) => ({ const PositionPage = () => { const classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); const t = useTranslation(); const { id } = useParams(); @@ -63,7 +63,7 @@ const PositionPage = () => {
- history.goBack()}> + navigate(-1)}> diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js index 5e759d7e..c95240be 100644 --- a/modern/src/other/ReplayPage.js +++ b/modern/src/other/ReplayPage.js @@ -10,7 +10,7 @@ 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'; +import { useNavigate } from 'react-router-dom'; import { useSelector } from 'react-redux'; import Map from '../map/core/Map'; import MapReplayPath from '../map/MapReplayPath'; @@ -78,7 +78,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 +100,8 @@ const ReplayPage = () => { }); const onClick = useCallback((positionId) => { - history.push(`/position/${positionId}`); - }, [history]); + navigate(`/position/${positionId}`); + }, [navigate]); useEffect(() => { if (playing && positions.length > 0) { @@ -146,7 +146,7 @@ const ReplayPage = () => {
- history.push('/')}> + navigate('/')}> {t('reportReplay')} diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js index b22fe02e..8ca9d277 100644 --- a/modern/src/settings/AccumulatorsPage.js +++ b/modern/src/settings/AccumulatorsPage.js @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; -import { useHistory, useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, TextField, FormControl, Button, } from '@material-ui/core'; @@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({ })); const AccumulatorsPage = () => { - const history = useHistory(); + const navigate = useNavigate(); const classes = useStyles(); const t = useTranslation(); @@ -54,7 +54,7 @@ const AccumulatorsPage = () => { }); if (response.ok) { - history.goBack(); + navigate(-1); } else { throw Error(await response.text()); } @@ -95,7 +95,7 @@ const AccumulatorsPage = () => { type="button" color="primary" variant="outlined" - onClick={() => history.goBack()} + onClick={() => navigate(-1)} > {t('sharedCancel')} diff --git a/modern/src/settings/CommandSendPage.js b/modern/src/settings/CommandSendPage.js index cc0dae63..98415a5e 100644 --- a/modern/src/settings/CommandSendPage.js +++ b/modern/src/settings/CommandSendPage.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { useHistory, useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, Button, FormControl, } from '@material-ui/core'; @@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({ })); const CommandSendPage = () => { - const history = useHistory(); + const navigate = useNavigate(); const classes = useStyles(); const t = useTranslation(); @@ -59,7 +59,7 @@ const CommandSendPage = () => { }); if (response.ok) { - history.goBack(); + navigate(-1); } else { throw Error(await response.text()); } @@ -98,7 +98,7 @@ const CommandSendPage = () => { type="button" color="primary" variant="outlined" - onClick={() => history.goBack()} + onClick={() => navigate(-1)} > {t('sharedCancel')} diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js index b745cb96..53feb8ba 100644 --- a/modern/src/settings/ServerPage.js +++ b/modern/src/settings/ServerPage.js @@ -5,7 +5,7 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Button, FormControl, Container, Checkbox, FormControlLabel, InputLabel, Select, MenuItem, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { sessionActions } from '../store'; import EditAttributesView from './components/EditAttributesView'; @@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) => ({ const ServerPage = () => { const classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); const dispatch = useDispatch(); const t = useTranslation(); @@ -54,7 +54,7 @@ const ServerPage = () => { if (response.ok) { dispatch(sessionActions.updateServer(await response.json())); - history.goBack(); + navigate(-1); } else { throw Error(await response.text()); } @@ -229,7 +229,7 @@ const ServerPage = () => { )}
- -- cgit v1.2.3 From 85461684eb402d4df62c8b59e0a0f627bd3487c1 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 23 May 2022 07:19:30 -0700 Subject: Initial migration to MUI 5 --- modern/package.json | 9 ++-- modern/src/App.js | 3 +- modern/src/Navigation.js | 2 +- modern/src/SocketController.js | 2 +- modern/src/common/components/BottomMenu.js | 12 ++--- modern/src/common/components/ErrorHandler.js | 3 +- modern/src/common/components/LinkField.js | 2 +- modern/src/common/components/NavBar.js | 11 ++-- modern/src/common/components/PageLayout.js | 24 ++++++--- modern/src/common/components/PositionValue.js | 2 +- modern/src/common/components/RemoveDialog.js | 5 +- modern/src/common/components/SelectField.js | 2 +- modern/src/common/components/SideNav.js | 2 +- modern/src/common/theme/index.js | 6 +-- modern/src/index.js | 22 ++++---- modern/src/login/LoginLayout.js | 14 ++--- modern/src/login/LoginPage.js | 29 +++++++--- modern/src/login/RegisterPage.js | 7 +-- modern/src/login/ResetPasswordPage.js | 7 +-- modern/src/main/DevicesList.js | 34 ++++++------ modern/src/main/MainPage.js | 38 +++++++------ modern/src/main/StatusCard.js | 62 +++++++++++++++++----- modern/src/other/EventPage.js | 9 ++-- modern/src/other/GeofencesList.js | 10 ++-- modern/src/other/GeofencesPage.js | 19 +++---- modern/src/other/PositionPage.js | 19 +++++-- modern/src/other/ReplayPage.js | 39 ++++++++------ modern/src/reports/ChartReportPage.js | 5 +- modern/src/reports/EventReportPage.js | 2 +- modern/src/reports/RouteReportPage.js | 2 +- modern/src/reports/StatisticsPage.js | 2 +- modern/src/reports/StopReportPage.js | 2 +- modern/src/reports/SummaryReportPage.js | 2 +- modern/src/reports/TripReportPage.js | 2 +- modern/src/reports/components/ColumnSelect.js | 2 +- modern/src/reports/components/ReportFilter.js | 5 +- modern/src/reports/components/ReportsMenu.js | 16 +++--- modern/src/settings/AccumulatorsPage.js | 14 +++-- modern/src/settings/CalendarPage.js | 9 ++-- modern/src/settings/CalendarsPage.js | 5 +- modern/src/settings/CommandPage.js | 7 +-- modern/src/settings/CommandSendPage.js | 13 +++-- modern/src/settings/CommandsPage.js | 5 +- modern/src/settings/ComputedAttributePage.js | 15 ++++-- modern/src/settings/ComputedAttributesPage.js | 5 +- modern/src/settings/DevicePage.js | 14 +++-- modern/src/settings/DriverPage.js | 9 ++-- modern/src/settings/DriversPage.js | 5 +- modern/src/settings/GeofencePage.js | 9 ++-- modern/src/settings/GroupPage.js | 9 ++-- modern/src/settings/GroupsPage.js | 5 +- modern/src/settings/MaintenancePage.js | 17 ++++-- modern/src/settings/MaintenancesPage.js | 5 +- modern/src/settings/NotificationPage.js | 12 +++-- modern/src/settings/NotificationsPage.js | 5 +- modern/src/settings/PreferencesPage.js | 17 ++++-- modern/src/settings/ServerPage.js | 20 +++++-- modern/src/settings/UserPage.js | 33 ++++++++---- modern/src/settings/UsersPage.js | 5 +- .../src/settings/components/AddAttributeDialog.js | 5 +- modern/src/settings/components/BaseCommandView.js | 2 +- .../src/settings/components/CollectionActions.js | 4 +- modern/src/settings/components/CollectionFab.js | 7 +-- .../src/settings/components/EditAttributesView.js | 21 +++++--- modern/src/settings/components/EditItemView.js | 8 +-- modern/src/settings/components/SettingsMenu.js | 22 ++++---- 66 files changed, 475 insertions(+), 266 deletions(-) (limited to 'modern/src/other/EventPage.js') diff --git a/modern/package.json b/modern/package.json index 89b0a6f9..320d3411 100644 --- a/modern/package.json +++ b/modern/package.json @@ -4,10 +4,13 @@ "private": true, "dependencies": { "@craco/craco": "^5.9.0", + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", "@mapbox/mapbox-gl-draw": "^1.3.0", - "@material-ui/core": "^4.12.4", - "@material-ui/icons": "^4.11.3", - "@material-ui/lab": "^4.0.0-alpha.58", + "@mui/icons-material": "^5.8.0", + "@mui/lab": "^5.0.0-alpha.82", + "@mui/material": "^5.8.0", + "@mui/styles": "^5.8.0", "@reduxjs/toolkit": "^1.8.1", "@tmcw/togeojson": "^4.5.0", "@turf/circle": "^6.5.0", diff --git a/modern/src/App.js b/modern/src/App.js index 84459cd5..3ba6b2e1 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,7 +1,8 @@ import React from 'react'; import { Outlet } from 'react-router-dom'; import { useSelector } from 'react-redux'; -import { makeStyles, LinearProgress, useMediaQuery } from '@material-ui/core'; +import { LinearProgress, useMediaQuery } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import theme from './common/theme'; import BottomMenu from './common/components/BottomMenu'; diff --git a/modern/src/Navigation.js b/modern/src/Navigation.js index a538029b..062890f3 100644 --- a/modern/src/Navigation.js +++ b/modern/src/Navigation.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Route, Routes, useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { LinearProgress } from '@material-ui/core'; +import { LinearProgress } from '@mui/material'; import MainPage from './main/MainPage'; import RouteReportPage from './reports/RouteReportPage'; import ServerPage from './settings/ServerPage'; diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index f776ebc7..57ffa0d5 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector, connect } from 'react-redux'; -import { Snackbar } from '@material-ui/core'; +import { Snackbar } from '@mui/material'; import { useNavigate } from 'react-router-dom'; import { positionsActions, devicesActions, sessionActions } from './store'; diff --git a/modern/src/common/components/BottomMenu.js b/modern/src/common/components/BottomMenu.js index 7db4dff8..b011638e 100644 --- a/modern/src/common/components/BottomMenu.js +++ b/modern/src/common/components/BottomMenu.js @@ -3,13 +3,13 @@ import { useDispatch, useSelector } from 'react-redux'; import { useNavigate, useLocation } from 'react-router-dom'; import { Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography, -} from '@material-ui/core'; +} from '@mui/material'; -import DescriptionIcon from '@material-ui/icons/Description'; -import SettingsIcon from '@material-ui/icons/Settings'; -import MapIcon from '@material-ui/icons/Map'; -import PersonIcon from '@material-ui/icons/Person'; -import ExitToAppIcon from '@material-ui/icons/ExitToApp'; +import DescriptionIcon from '@mui/icons-material/Description'; +import SettingsIcon from '@mui/icons-material/Settings'; +import MapIcon from '@mui/icons-material/Map'; +import PersonIcon from '@mui/icons-material/Person'; +import ExitToAppIcon from '@mui/icons-material/ExitToApp'; import { sessionActions } from '../../store'; import { useTranslation } from './LocalizationProvider'; diff --git a/modern/src/common/components/ErrorHandler.js b/modern/src/common/components/ErrorHandler.js index 5a238956..08ba8e12 100644 --- a/modern/src/common/components/ErrorHandler.js +++ b/modern/src/common/components/ErrorHandler.js @@ -1,5 +1,4 @@ -import { Snackbar } from '@material-ui/core'; -import { Alert } from '@material-ui/lab'; +import { Snackbar, Alert } from '@mui/material'; import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { usePrevious } from '../../reactHelper'; diff --git a/modern/src/common/components/LinkField.js b/modern/src/common/components/LinkField.js index 0f6cc7ba..308ee585 100644 --- a/modern/src/common/components/LinkField.js +++ b/modern/src/common/components/LinkField.js @@ -1,6 +1,6 @@ import { FormControl, InputLabel, MenuItem, Select, -} from '@material-ui/core'; +} from '@mui/material'; import React, { useState } from 'react'; import { useEffectAsync } from '../../reactHelper'; diff --git a/modern/src/common/components/NavBar.js b/modern/src/common/components/NavBar.js index ac689e76..09560176 100644 --- a/modern/src/common/components/NavBar.js +++ b/modern/src/common/components/NavBar.js @@ -1,13 +1,18 @@ import React from 'react'; import { AppBar, Toolbar, Typography, IconButton, -} from '@material-ui/core'; -import MenuIcon from '@material-ui/icons/Menu'; +} from '@mui/material'; +import MenuIcon from '@mui/icons-material/Menu'; const Navbar = ({ setOpenDrawer, title }) => ( - setOpenDrawer(true)}> + setOpenDrawer(true)} + > diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js index d92b71c3..5360a554 100644 --- a/modern/src/common/components/PageLayout.js +++ b/modern/src/common/components/PageLayout.js @@ -1,9 +1,19 @@ import React, { useState } from 'react'; import { - AppBar, Breadcrumbs, Divider, Drawer, Hidden, IconButton, makeStyles, Toolbar, Typography, useMediaQuery, useTheme, -} from '@material-ui/core'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import MenuIcon from '@material-ui/icons/Menu'; + AppBar, + Breadcrumbs, + Divider, + Drawer, + Hidden, + IconButton, + Toolbar, + Typography, + useMediaQuery, + useTheme, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import MenuIcon from '@mui/icons-material/Menu'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from './LocalizationProvider'; @@ -62,7 +72,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { return ( <> - +
{ >
- navigate('/')}> + navigate('/')}> @@ -96,7 +106,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { - setOpenDrawer(true)}> + setOpenDrawer(true)}> diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js index 1162a150..3dd0eb6f 100644 --- a/modern/src/common/components/PositionValue.js +++ b/modern/src/common/components/PositionValue.js @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Link } from '@material-ui/core'; +import { Link } from '@mui/material'; import { Link as RouterLink } from 'react-router-dom'; import { formatAlarm, formatBoolean, formatCoordinate, formatCourse, formatDistance, formatNumber, formatPercentage, formatSpeed, formatTime, diff --git a/modern/src/common/components/RemoveDialog.js b/modern/src/common/components/RemoveDialog.js index a11af4c2..1af4e6a8 100644 --- a/modern/src/common/components/RemoveDialog.js +++ b/modern/src/common/components/RemoveDialog.js @@ -1,6 +1,7 @@ import React from 'react'; -import Button from '@material-ui/core/Button'; -import { Snackbar, makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import { Snackbar } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useTranslation } from './LocalizationProvider'; import { useCatch } from '../../reactHelper'; import { snackBarDurationLongMs } from '../util/duration'; diff --git a/modern/src/common/components/SelectField.js b/modern/src/common/components/SelectField.js index 5a9a176b..18b3afbb 100644 --- a/modern/src/common/components/SelectField.js +++ b/modern/src/common/components/SelectField.js @@ -1,6 +1,6 @@ import { FormControl, InputLabel, MenuItem, Select, -} from '@material-ui/core'; +} from '@mui/material'; import React, { useState } from 'react'; import { useEffectAsync } from '../../reactHelper'; diff --git a/modern/src/common/components/SideNav.js b/modern/src/common/components/SideNav.js index ad7c212a..648059d1 100644 --- a/modern/src/common/components/SideNav.js +++ b/modern/src/common/components/SideNav.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import { List, ListItem, ListItemText, ListItemIcon, Divider, ListSubheader, -} from '@material-ui/core'; +} from '@mui/material'; import { Link, useLocation } from 'react-router-dom'; const SideNav = ({ routes }) => { diff --git a/modern/src/common/theme/index.js b/modern/src/common/theme/index.js index 02865c23..8e85150e 100644 --- a/modern/src/common/theme/index.js +++ b/modern/src/common/theme/index.js @@ -1,12 +1,12 @@ -import { createTheme } from '@material-ui/core/styles'; +import { createTheme, adaptV4Theme } from '@mui/material/styles'; import palette from './palette'; import overrides from './overrides'; import dimensions from './dimensions'; -const theme = createTheme({ +const theme = createTheme(adaptV4Theme({ palette, overrides, dimensions, -}); +})); export default theme; diff --git a/modern/src/index.js b/modern/src/index.js index 07ac7e3f..547e39ef 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -3,7 +3,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; -import { CssBaseline, ThemeProvider } from '@material-ui/core'; +import { CssBaseline, ThemeProvider, StyledEngineProvider } from '@mui/material'; import * as serviceWorker from './serviceWorker'; import store from './store'; import { LocalizationProvider } from './common/components/LocalizationProvider'; @@ -19,15 +19,17 @@ ReactDOM.render( ( - - - - - - - - - + + + + + + + + + + + ), document.getElementById('root'), diff --git a/modern/src/login/LoginLayout.js b/modern/src/login/LoginLayout.js index 4a2bf43a..cfdd837c 100644 --- a/modern/src/login/LoginLayout.js +++ b/modern/src/login/LoginLayout.js @@ -1,6 +1,7 @@ import React from 'react'; -import { useMediaQuery, makeStyles, Paper } from '@material-ui/core'; -import { useTheme } from '@material-ui/core/styles'; +import { useMediaQuery, Paper } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { useTheme } from '@mui/material/styles'; const useStyles = makeStyles((theme) => ({ root: { @@ -15,10 +16,10 @@ const useStyles = makeStyles((theme) => ({ background: theme.palette.primary.main, paddingBottom: theme.spacing(5), width: theme.dimensions.sidebarWidth, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('lg')]: { width: theme.dimensions.sidebarWidthTablet, }, - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.down('sm')]: { width: '0px', }, }, @@ -54,12 +55,11 @@ const LoginLayout = ({ children }) => { <>
- {!useMediaQuery(theme.breakpoints.down('md')) - && ( + {!useMediaQuery(theme.breakpoints.down('lg')) && ( - )} + )}
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 2a911b84..4478c866 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -1,10 +1,22 @@ import React, { useState } from 'react'; import { - Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import CachedIcon from '@material-ui/icons/Cached'; -import { useTheme } from '@material-ui/core/styles'; + Grid, + useMediaQuery, + InputLabel, + Select, + MenuItem, + FormControl, + Button, + TextField, + Link, + Snackbar, + IconButton, + Tooltip, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import CloseIcon from '@mui/icons-material/Close'; +import CachedIcon from '@mui/icons-material/Cached'; +import { useTheme } from '@mui/material/styles'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { sessionActions } from '../store'; @@ -77,12 +89,15 @@ const LoginPage = () => { return ( - window.localStorage.setItem('legacyApp', true) || window.location.replace('/')}> + window.localStorage.setItem('legacyApp', true) || window.location.replace('/')} + > - {useMediaQuery(theme.breakpoints.down('md')) + {useMediaQuery(theme.breakpoints.down('lg')) && ( diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js index 5fa061bb..ce09b63e 100644 --- a/modern/src/login/RegisterPage.js +++ b/modern/src/login/RegisterPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { - Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, -} from '@material-ui/core'; + Grid, Button, TextField, Typography, Link, Snackbar, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useNavigate } from 'react-router-dom'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; import { snackBarDurationShortMs } from '../common/util/duration'; diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js index acdf13ab..f9f4a88e 100644 --- a/modern/src/login/ResetPasswordPage.js +++ b/modern/src/login/ResetPasswordPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { - Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, -} from '@material-ui/core'; + Grid, Button, TextField, Typography, Link, Snackbar, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useNavigate } from 'react-router-dom'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; import useQuery from '../common/util/useQuery'; diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js index b80eaf8b..06b75715 100644 --- a/modern/src/main/DevicesList.js +++ b/modern/src/main/DevicesList.js @@ -1,24 +1,24 @@ import React, { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { makeStyles } from '@material-ui/core/styles'; -import { IconButton, Tooltip } from '@material-ui/core'; -import Avatar from '@material-ui/core/Avatar'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemAvatar from '@material-ui/core/ListItemAvatar'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; +import makeStyles from '@mui/styles/makeStyles'; +import { IconButton, Tooltip } from '@mui/material'; +import Avatar from '@mui/material/Avatar'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemAvatar from '@mui/material/ListItemAvatar'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; import { FixedSizeList } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; -import BatteryFullIcon from '@material-ui/icons/BatteryFull'; -import BatteryChargingFullIcon from '@material-ui/icons/BatteryChargingFull'; -import Battery60Icon from '@material-ui/icons/Battery60'; -import BatteryCharging60Icon from '@material-ui/icons/BatteryCharging60'; -import Battery20Icon from '@material-ui/icons/Battery20'; -import BatteryCharging20Icon from '@material-ui/icons/BatteryCharging20'; -import FlashOnIcon from '@material-ui/icons/FlashOn'; -import FlashOffIcon from '@material-ui/icons/FlashOff'; -import ErrorIcon from '@material-ui/icons/Error'; +import BatteryFullIcon from '@mui/icons-material/BatteryFull'; +import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull'; +import Battery60Icon from '@mui/icons-material/Battery60'; +import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60'; +import Battery20Icon from '@mui/icons-material/Battery20'; +import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20'; +import FlashOnIcon from '@mui/icons-material/FlashOn'; +import FlashOffIcon from '@mui/icons-material/FlashOff'; +import ErrorIcon from '@mui/icons-material/Error'; import { devicesActions } from '../store'; import { useEffectAsync } from '../reactHelper'; diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js index 346919e2..0b3be6d2 100644 --- a/modern/src/main/MainPage.js +++ b/modern/src/main/MainPage.js @@ -1,15 +1,17 @@ import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { - makeStyles, Paper, Toolbar, TextField, IconButton, Button, -} from '@material-ui/core'; + Paper, Toolbar, TextField, IconButton, Button, +} from '@mui/material'; -import { useTheme } from '@material-ui/core/styles'; -import useMediaQuery from '@material-ui/core/useMediaQuery'; -import AddIcon from '@material-ui/icons/Add'; -import CloseIcon from '@material-ui/icons/Close'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import ListIcon from '@material-ui/icons/ViewList'; +import makeStyles from '@mui/styles/makeStyles'; + +import { useTheme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import AddIcon from '@mui/icons-material/Add'; +import CloseIcon from '@mui/icons-material/Close'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import ListIcon from '@mui/icons-material/ViewList'; import { useDispatch, useSelector } from 'react-redux'; import DevicesList from './DevicesList'; @@ -46,7 +48,7 @@ const useStyles = makeStyles((theme) => ({ bottom: theme.dimensions.bottomBarHeight, transition: 'transform .5s ease', backgroundColor: 'white', - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { width: '100%', margin: 0, }, @@ -54,7 +56,7 @@ const useStyles = makeStyles((theme) => ({ sidebarCollapsed: { transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`, marginLeft: 0, - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { transform: 'translateX(-100vw)', }, }, @@ -75,7 +77,7 @@ const useStyles = makeStyles((theme) => ({ left: `calc(50% + ${theme.dimensions.drawerWidthDesktop} / 2)`, bottom: theme.spacing(3), }, - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { left: '50%', bottom: theme.spacing(3) + theme.dimensions.bottomBarHeight, }, @@ -87,7 +89,7 @@ const useStyles = makeStyles((theme) => ({ top: theme.spacing(3), borderRadius: '0px', minWidth: 0, - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { left: 0, }, }, @@ -122,7 +124,7 @@ const MainPage = () => { const deviceReadonly = useDeviceReadonly(); const desktop = useMediaQuery(theme.breakpoints.up('md')); - const phone = useMediaQuery(theme.breakpoints.down('xs')); + const phone = useMediaQuery(theme.breakpoints.down('sm')); const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false); @@ -165,7 +167,7 @@ const MainPage = () => { {!desktop && ( - + )} @@ -178,11 +180,15 @@ const MainPage = () => { placeholder={t('sharedSearchDevices')} variant="filled" /> - navigate('/settings/device')} disabled={deviceReadonly}> + navigate('/settings/device')} + disabled={deviceReadonly} + > {desktop && ( - + )} diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js index 92db8047..37e4a1d1 100644 --- a/modern/src/main/StatusCard.js +++ b/modern/src/main/StatusCard.js @@ -2,14 +2,26 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { - makeStyles, Card, CardContent, Typography, CardActions, CardHeader, IconButton, Avatar, Table, TableBody, TableRow, TableCell, TableContainer, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import PostAddIcon from '@material-ui/icons/PostAdd'; -import ReplayIcon from '@material-ui/icons/Replay'; -import PublishIcon from '@material-ui/icons/Publish'; -import EditIcon from '@material-ui/icons/Edit'; -import DeleteIcon from '@material-ui/icons/Delete'; + Card, + CardContent, + Typography, + CardActions, + CardHeader, + IconButton, + Avatar, + Table, + TableBody, + TableRow, + TableCell, + TableContainer, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import CloseIcon from '@mui/icons-material/Close'; +import PostAddIcon from '@mui/icons-material/PostAdd'; +import ReplayIcon from '@mui/icons-material/Replay'; +import PublishIcon from '@mui/icons-material/Publish'; +import EditIcon from '@mui/icons-material/Edit'; +import DeleteIcon from '@mui/icons-material/Delete'; import { useTranslation } from '../common/components/LocalizationProvider'; import { formatStatus } from '../common/util/formatter'; @@ -103,7 +115,7 @@ const StatusCard = ({ deviceId, onClose }) => { )} action={( - + )} @@ -134,19 +146,41 @@ const StatusCard = ({ deviceId, onClose }) => { )} - navigate(`/position/${position.id}`)} disabled={!position} color="secondary"> + navigate(`/position/${position.id}`)} + disabled={!position} + > - navigate('/replay')} disabled={!position}> + navigate('/replay')} + disabled={!position} + > - navigate(`/settings/command-send/${deviceId}`)} disabled={readonly}> + navigate(`/settings/command-send/${deviceId}`)} + disabled={readonly} + > - navigate(`/settings/device/${deviceId}`)} disabled={deviceReadonly}> + navigate(`/settings/device/${deviceId}`)} + disabled={deviceReadonly} + > - setRemoving(true)} disabled={deviceReadonly} className={classes.negative}> + setRemoving(true)} + disabled={deviceReadonly} + className={classes.negative} + > diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js index 9f5f7c84..d2f12ed1 100644 --- a/modern/src/other/EventPage.js +++ b/modern/src/other/EventPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { - makeStyles, Typography, AppBar, Toolbar, IconButton, -} from '@material-ui/core'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; + 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'; @@ -60,7 +61,7 @@ const EventPage = () => {
- navigate('/')}> + navigate('/')}> {t('positionEvent')} diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js index 4abb528c..7521de80 100644 --- a/modern/src/other/GeofencesList.js +++ b/modern/src/other/GeofencesList.js @@ -1,10 +1,10 @@ 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 List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; +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, geofencesActions } from '../store'; import CollectionActions from '../settings/components/CollectionActions'; diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js index 80e23cba..6f60ce42 100644 --- a/modern/src/other/GeofencesPage.js +++ b/modern/src/other/GeofencesPage.js @@ -1,10 +1,11 @@ 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 ArrowBackIcon from '@material-ui/icons/ArrowBack'; + 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'; @@ -24,7 +25,7 @@ const useStyles = makeStyles((theme) => ({ overflow: 'hidden', display: 'flex', flexDirection: 'row', - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.down('sm')]: { flexDirection: 'column-reverse', }, }, @@ -33,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, }, }, @@ -54,7 +55,7 @@ const GeofencesPage = () => { const navigate = useNavigate(); const t = useTranslation(); - const isPhone = useMediaQuery(theme.breakpoints.down('xs')); + const isPhone = useMediaQuery(theme.breakpoints.down('sm')); return (
@@ -65,7 +66,7 @@ const GeofencesPage = () => { classes={{ paper: classes.drawerPaper }} >
- navigate(-1)}> + navigate(-1)}> diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js index 8188f669..2c755a5a 100644 --- a/modern/src/other/PositionPage.js +++ b/modern/src/other/PositionPage.js @@ -2,9 +2,20 @@ 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'; + 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'; @@ -63,7 +74,7 @@ const PositionPage = () => {
- navigate(-1)}> + navigate(-1)}> diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js index c95240be..4b3c4c09 100644 --- a/modern/src/other/ReplayPage.js +++ b/modern/src/other/ReplayPage.js @@ -2,14 +2,15 @@ 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'; + 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'; @@ -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')]: { @@ -146,13 +147,13 @@ const ReplayPage = () => {
- navigate('/')}> + navigate('/')}> {t('reportReplay')} {!expanded && ( - setExpanded(true)}> + setExpanded(true)}> @@ -176,13 +177,21 @@ const ReplayPage = () => { />
{`${index + 1}/${positions.length}`} - setIndex((index) => index - 1)} disabled={playing}> + setIndex((index) => index - 1)} + disabled={playing} + > - setPlaying(!playing)}> + setPlaying(!playing)} size="large"> {playing ? : } - setIndex((index) => index + 1)} disabled={playing}> + setIndex((index) => index + 1)} + disabled={playing} + > {formatTime(positions[index].fixTime)} diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js index bb71fa95..e6c971df 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'; diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 8a3a070f..2c6aaea5 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'; 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 5e1c2a66..4cf29035 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 9de7e13c..1e905155 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'; diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index e6e13d56..4846afa6 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..04645cd5 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'; diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js index 350bbe6d..9938a4ad 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'; 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'; diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js index 8ca9d277..31fb12aa 100644 --- a/modern/src/settings/AccumulatorsPage.js +++ b/modern/src/settings/AccumulatorsPage.js @@ -2,9 +2,17 @@ import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate, useParams } from 'react-router-dom'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, TextField, FormControl, Button, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Container, + TextField, + FormControl, + Button, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import SettingsMenu from './components/SettingsMenu'; diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js index 154b3f11..f7bcb02a 100644 --- a/modern/src/settings/CalendarPage.js +++ b/modern/src/settings/CalendarPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { DropzoneArea } from 'material-ui-dropzone'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js index a5072277..a3ff51d5 100644 --- a/modern/src/settings/CalendarsPage.js +++ b/modern/src/settings/CalendarsPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/settings/CommandPage.js b/modern/src/settings/CommandPage.js index 4785021b..6c816338 100644 --- a/modern/src/settings/CommandPage.js +++ b/modern/src/settings/CommandPage.js @@ -1,8 +1,9 @@ import React, { useState } from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, TextField, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import { useTranslation } from '../common/components/LocalizationProvider'; import BaseCommandView from './components/BaseCommandView'; diff --git a/modern/src/settings/CommandSendPage.js b/modern/src/settings/CommandSendPage.js index 98415a5e..aa51489b 100644 --- a/modern/src/settings/CommandSendPage.js +++ b/modern/src/settings/CommandSendPage.js @@ -1,9 +1,16 @@ import React, { useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, Button, FormControl, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Container, + Button, + FormControl, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import BaseCommandView from './components/BaseCommandView'; import SelectField from '../common/components/SelectField'; diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js index 64a29bf6..dd1559d9 100644 --- a/modern/src/settings/CommandsPage.js +++ b/modern/src/settings/CommandsPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import { formatBoolean } from '../common/util/formatter'; diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js index 984339b8..c433b9e7 100644 --- a/modern/src/settings/ComputedAttributePage.js +++ b/modern/src/settings/ComputedAttributePage.js @@ -1,8 +1,17 @@ import React, { useState } from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, MenuItem, Select, TextField, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControl, + InputLabel, + MenuItem, + Select, + TextField, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import { useTranslation } from '../common/components/LocalizationProvider'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js index 0b029308..b754f9fe 100644 --- a/modern/src/settings/ComputedAttributesPage.js +++ b/modern/src/settings/ComputedAttributesPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import { useAdministrator } from '../common/util/permissions'; diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js index 56a589dc..e5d0f995 100644 --- a/modern/src/settings/DevicePage.js +++ b/modern/src/settings/DevicePage.js @@ -1,10 +1,16 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControlLabel, + Checkbox, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import SelectField from '../common/components/SelectField'; diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js index 93d09c8e..f03682e3 100644 --- a/modern/src/settings/DriverPage.js +++ b/modern/src/settings/DriverPage.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import { useTranslation } from '../common/components/LocalizationProvider'; diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js index b5c30a17..c4de30e9 100644 --- a/modern/src/settings/DriversPage.js +++ b/modern/src/settings/DriversPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/settings/GeofencePage.js b/modern/src/settings/GeofencePage.js index e23d49fb..3b8ac2ed 100644 --- a/modern/src/settings/GeofencePage.js +++ b/modern/src/settings/GeofencePage.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import { useTranslation } from '../common/components/LocalizationProvider'; diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js index 9dcd65c9..d4991c59 100644 --- a/modern/src/settings/GroupPage.js +++ b/modern/src/settings/GroupPage.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import SelectField from '../common/components/SelectField'; diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js index ae17bd78..ebaa3b5e 100644 --- a/modern/src/settings/GroupsPage.js +++ b/modern/src/settings/GroupsPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js index 9e53aca1..292e197e 100644 --- a/modern/src/settings/MaintenancePage.js +++ b/modern/src/settings/MaintenancePage.js @@ -1,9 +1,18 @@ import React, { useState } from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField, FormControl, InputLabel, MenuItem, Select, -} from '@material-ui/core'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + TextField, + FormControl, + InputLabel, + MenuItem, + Select, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import InputAdornment from '@mui/material/InputAdornment'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { prefixString } from '../common/util/stringUtils'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js index 43a37b60..d4a06fd2 100644 --- a/modern/src/settings/MaintenancesPage.js +++ b/modern/src/settings/MaintenancesPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; import { formatDistance, formatSpeed } from '../common/util/formatter'; diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js index 0533b58e..0c713a75 100644 --- a/modern/src/settings/NotificationPage.js +++ b/modern/src/settings/NotificationPage.js @@ -1,9 +1,15 @@ import React, { useState } from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControlLabel, + Checkbox, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider'; import EditItemView from './components/EditItemView'; import { prefixString, unprefixString } from '../common/util/stringUtils'; diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js index ec0df1cb..ae463dd3 100644 --- a/modern/src/settings/NotificationsPage.js +++ b/modern/src/settings/NotificationsPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { prefixString } from '../common/util/stringUtils'; import { formatBoolean } from '../common/util/formatter'; diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js index 94d55adf..b79f4b6c 100644 --- a/modern/src/settings/PreferencesPage.js +++ b/modern/src/settings/PreferencesPage.js @@ -1,8 +1,19 @@ import React from 'react'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Container, + FormControl, + InputLabel, + Select, + MenuItem, + Checkbox, + FormControlLabel, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useLocalization, useTranslation } from '../common/components/LocalizationProvider'; import usePersistedState from '../common/util/usePersistedState'; import PageLayout from '../common/components/PageLayout'; diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js index 53feb8ba..d7ce8b2e 100644 --- a/modern/src/settings/ServerPage.js +++ b/modern/src/settings/ServerPage.js @@ -1,10 +1,22 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Button, FormControl, Container, Checkbox, FormControlLabel, InputLabel, Select, MenuItem, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Button, + FormControl, + Container, + Checkbox, + FormControlLabel, + InputLabel, + Select, + MenuItem, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { sessionActions } from '../store'; diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js index a0f6f753..d2832452 100644 --- a/modern/src/settings/UserPage.js +++ b/modern/src/settings/UserPage.js @@ -1,11 +1,24 @@ import React, { useState } from 'react'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { - Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox, InputAdornment, IconButton, FilledInput, -} from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import CachedIcon from '@material-ui/icons/Cached'; + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControl, + InputLabel, + Select, + MenuItem, + FormControlLabel, + Checkbox, + InputAdornment, + IconButton, + FilledInput, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import CachedIcon from '@mui/icons-material/Cached'; import { useDispatch, useSelector } from 'react-redux'; import moment from 'moment'; import EditItemView from './components/EditItemView'; @@ -213,10 +226,12 @@ const UserPage = () => { onChange={(e) => setItem({ ...item, token: e.target.value })} endAdornment={( - { - const token = [...Array(30)].map(() => Math.random().toString(36)[2]).join(''); - setItem({ ...item, token }); - }} + { + const token = [...Array(30)].map(() => Math.random().toString(36)[2]).join(''); + setItem({ ...item, token }); + }} > diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js index 059b6bcc..8f3aca46 100644 --- a/modern/src/settings/UsersPage.js +++ b/modern/src/settings/UsersPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { - TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, -} from '@material-ui/core'; + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { useEffectAsync } from '../reactHelper'; import { formatBoolean } from '../common/util/formatter'; import { useTranslation } from '../common/components/LocalizationProvider'; diff --git a/modern/src/settings/components/AddAttributeDialog.js b/modern/src/settings/components/AddAttributeDialog.js index e7965360..b7ce43f3 100644 --- a/modern/src/settings/components/AddAttributeDialog.js +++ b/modern/src/settings/components/AddAttributeDialog.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField, -} from '@material-ui/core'; + Autocomplete, +} from '@mui/material'; -import { Autocomplete, createFilterOptions } from '@material-ui/lab'; +import { createFilterOptions } from '@mui/material/useAutocomplete'; import { useTranslation } from '../../common/components/LocalizationProvider'; const AddAttributeDialog = ({ open, onResult, definitions }) => { diff --git a/modern/src/settings/components/BaseCommandView.js b/modern/src/settings/components/BaseCommandView.js index 836e8789..9a8fa9b5 100644 --- a/modern/src/settings/components/BaseCommandView.js +++ b/modern/src/settings/components/BaseCommandView.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { TextField, FormControlLabel, Checkbox, -} from '@material-ui/core'; +} from '@mui/material'; import { useTranslation } from '../../common/components/LocalizationProvider'; import SelectField from '../../common/components/SelectField'; import { prefixString } from '../../common/util/stringUtils'; diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js index 3fef1203..c5e14949 100644 --- a/modern/src/settings/components/CollectionActions.js +++ b/modern/src/settings/components/CollectionActions.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { IconButton, Menu, MenuItem } from '@material-ui/core'; -import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { IconButton, Menu, MenuItem } from '@mui/material'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; import { useNavigate } from 'react-router-dom'; import RemoveDialog from '../../common/components/RemoveDialog'; import { useTranslation } from '../../common/components/LocalizationProvider'; diff --git a/modern/src/settings/components/CollectionFab.js b/modern/src/settings/components/CollectionFab.js index 36435cd9..2fb5b5c9 100644 --- a/modern/src/settings/components/CollectionFab.js +++ b/modern/src/settings/components/CollectionFab.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Fab, makeStyles } from '@material-ui/core'; -import AddIcon from '@material-ui/icons/Add'; +import { Fab } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import AddIcon from '@mui/icons-material/Add'; import { useNavigate } from 'react-router-dom'; import { useReadonly } from '../../common/util/permissions'; import dimensions from '../../common/theme/dimensions'; @@ -10,7 +11,7 @@ const useStyles = makeStyles((theme) => ({ position: 'fixed', bottom: theme.spacing(2), right: theme.spacing(2), - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { bottom: dimensions.bottomBarHeight + theme.spacing(2), }, }, diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js index e28909e9..da730538 100644 --- a/modern/src/settings/components/EditAttributesView.js +++ b/modern/src/settings/components/EditAttributesView.js @@ -1,10 +1,19 @@ import React, { useState } from 'react'; import { - Button, Checkbox, FilledInput, FormControl, FormControlLabel, Grid, IconButton, InputAdornment, InputLabel, makeStyles, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import AddIcon from '@material-ui/icons/Add'; + Button, + Checkbox, + FilledInput, + FormControl, + FormControlLabel, + Grid, + IconButton, + InputAdornment, + InputLabel, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import CloseIcon from '@mui/icons-material/Close'; +import AddIcon from '@mui/icons-material/Add'; import AddAttributeDialog from './AddAttributeDialog'; import { useTranslation } from '../../common/components/LocalizationProvider'; import { useAttributePreference } from '../../common/util/preferences'; @@ -157,7 +166,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { )} label={getAttributeName(key, subtype)} /> - deleteAttribute(key)}> + deleteAttribute(key)}> @@ -172,7 +181,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { onChange={(e) => updateAttribute(key, e.target.value, type, subtype)} endAdornment={( - deleteAttribute(key)}> + deleteAttribute(key)}> diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js index d0a3dde5..83624b8f 100644 --- a/modern/src/settings/components/EditItemView.js +++ b/modern/src/settings/components/EditItemView.js @@ -1,9 +1,9 @@ import React from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import { makeStyles } from '@material-ui/core/styles'; -import Container from '@material-ui/core/Container'; -import Button from '@material-ui/core/Button'; -import FormControl from '@material-ui/core/FormControl'; +import makeStyles from '@mui/styles/makeStyles'; +import Container from '@mui/material/Container'; +import Button from '@mui/material/Button'; +import FormControl from '@mui/material/FormControl'; import { useCatch, useEffectAsync } from '../../reactHelper'; import { useTranslation } from '../../common/components/LocalizationProvider'; diff --git a/modern/src/settings/components/SettingsMenu.js b/modern/src/settings/components/SettingsMenu.js index 036f4101..cb2dba2f 100644 --- a/modern/src/settings/components/SettingsMenu.js +++ b/modern/src/settings/components/SettingsMenu.js @@ -1,17 +1,17 @@ import React from 'react'; import { Divider, List, ListItem, ListItemIcon, ListItemText, -} from '@material-ui/core'; -import SettingsIcon from '@material-ui/icons/Settings'; -import CreateIcon from '@material-ui/icons/Create'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import FolderIcon from '@material-ui/icons/Folder'; -import PersonIcon from '@material-ui/icons/Person'; -import StorageIcon from '@material-ui/icons/Storage'; -import BuildIcon from '@material-ui/icons/Build'; -import PeopleIcon from '@material-ui/icons/People'; -import TodayIcon from '@material-ui/icons/Today'; -import PublishIcon from '@material-ui/icons/Publish'; +} from '@mui/material'; +import SettingsIcon from '@mui/icons-material/Settings'; +import CreateIcon from '@mui/icons-material/Create'; +import NotificationsIcon from '@mui/icons-material/Notifications'; +import FolderIcon from '@mui/icons-material/Folder'; +import PersonIcon from '@mui/icons-material/Person'; +import StorageIcon from '@mui/icons-material/Storage'; +import BuildIcon from '@mui/icons-material/Build'; +import PeopleIcon from '@mui/icons-material/People'; +import TodayIcon from '@mui/icons-material/Today'; +import PublishIcon from '@mui/icons-material/Publish'; import { Link, useLocation } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { useTranslation } from '../../common/components/LocalizationProvider'; -- cgit v1.2.3 From b98137ab304e8068484926eb31b77bd727a6407d Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 23 May 2022 08:49:58 -0700 Subject: Use standard icon button size --- modern/src/common/components/NavBar.js | 1 - modern/src/common/components/PageLayout.js | 4 ++-- modern/src/login/LoginPage.js | 5 +---- modern/src/main/MainPage.js | 10 +++------- modern/src/main/StatusCard.js | 7 +------ modern/src/other/EventPage.js | 2 +- modern/src/other/GeofencesPage.js | 2 +- modern/src/other/PositionPage.js | 2 +- modern/src/other/ReplayPage.js | 18 +++++------------- modern/src/settings/UserPage.js | 1 - modern/src/settings/components/EditAttributesView.js | 5 ++--- 11 files changed, 17 insertions(+), 40 deletions(-) (limited to 'modern/src/other/EventPage.js') diff --git a/modern/src/common/components/NavBar.js b/modern/src/common/components/NavBar.js index 09560176..a1a73fdf 100644 --- a/modern/src/common/components/NavBar.js +++ b/modern/src/common/components/NavBar.js @@ -8,7 +8,6 @@ const Navbar = ({ setOpenDrawer, title }) => ( setOpenDrawer(true)} diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js index 5360a554..17567fb1 100644 --- a/modern/src/common/components/PageLayout.js +++ b/modern/src/common/components/PageLayout.js @@ -81,7 +81,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { >
- navigate('/')}> + navigate('/')}> @@ -106,7 +106,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => { - setOpenDrawer(true)}> + setOpenDrawer(true)}> diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 8e5467ac..8bef8b07 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -89,10 +89,7 @@ const LoginPage = () => { return ( - window.localStorage.setItem('legacyApp', true) || window.location.replace('/')} - > + window.localStorage.setItem('legacyApp', true) || window.location.replace('/')}> diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js index 7235d1b4..059d7043 100644 --- a/modern/src/main/MainPage.js +++ b/modern/src/main/MainPage.js @@ -167,7 +167,7 @@ const MainPage = () => { {!desktop && ( - + )} @@ -179,15 +179,11 @@ const MainPage = () => { onChange={(event) => setSearchKeyword(event.target.value)} placeholder={t('sharedSearchDevices')} /> - navigate('/settings/device')} - disabled={deviceReadonly} - > + navigate('/settings/device')} disabled={deviceReadonly}> {desktop && ( - + )} diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js index 37e4a1d1..ec33efa2 100644 --- a/modern/src/main/StatusCard.js +++ b/modern/src/main/StatusCard.js @@ -115,7 +115,7 @@ const StatusCard = ({ deviceId, onClose }) => { )} action={( - + )} @@ -148,35 +148,30 @@ const StatusCard = ({ deviceId, onClose }) => { navigate(`/position/${position.id}`)} disabled={!position} > navigate('/replay')} disabled={!position} > navigate(`/settings/command-send/${deviceId}`)} disabled={readonly} > navigate(`/settings/device/${deviceId}`)} disabled={deviceReadonly} > setRemoving(true)} disabled={deviceReadonly} className={classes.negative} diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js index d2f12ed1..f4427ca9 100644 --- a/modern/src/other/EventPage.js +++ b/modern/src/other/EventPage.js @@ -61,7 +61,7 @@ const EventPage = () => {
- navigate('/')}> + navigate('/')}> {t('positionEvent')} diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js index 6f60ce42..6706ec98 100644 --- a/modern/src/other/GeofencesPage.js +++ b/modern/src/other/GeofencesPage.js @@ -66,7 +66,7 @@ const GeofencesPage = () => { classes={{ paper: classes.drawerPaper }} >
- navigate(-1)}> + navigate(-1)}> diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js index 2c755a5a..61c40902 100644 --- a/modern/src/other/PositionPage.js +++ b/modern/src/other/PositionPage.js @@ -74,7 +74,7 @@ const PositionPage = () => {
- navigate(-1)}> + navigate(-1)}> diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js index 4b3c4c09..1c82c913 100644 --- a/modern/src/other/ReplayPage.js +++ b/modern/src/other/ReplayPage.js @@ -147,13 +147,13 @@ const ReplayPage = () => {
- navigate('/')}> + navigate('/')}> {t('reportReplay')} {!expanded && ( - setExpanded(true)}> + setExpanded(true)}> @@ -177,21 +177,13 @@ const ReplayPage = () => { />
{`${index + 1}/${positions.length}`} - setIndex((index) => index - 1)} - disabled={playing} - > + setIndex((index) => index - 1)} disabled={playing}> - setPlaying(!playing)} size="large"> + setPlaying(!playing)}> {playing ? : } - setIndex((index) => index + 1)} - disabled={playing} - > + setIndex((index) => index + 1)} disabled={playing}> {formatTime(positions[index].fixTime)} diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js index d279fce3..48769557 100644 --- a/modern/src/settings/UserPage.js +++ b/modern/src/settings/UserPage.js @@ -218,7 +218,6 @@ const UserPage = () => { endAdornment={( { const token = [...Array(30)].map(() => Math.random().toString(36)[2]).join(''); setItem({ ...item, token }); diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js index d714c489..e6e1ddf0 100644 --- a/modern/src/settings/components/EditAttributesView.js +++ b/modern/src/settings/components/EditAttributesView.js @@ -166,7 +166,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { )} label={getAttributeName(key, subtype)} /> - deleteAttribute(key)}> + deleteAttribute(key)}> @@ -181,7 +181,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { onChange={(e) => updateAttribute(key, e.target.value, type, subtype)} endAdornment={( - deleteAttribute(key)}> + deleteAttribute(key)}> @@ -191,7 +191,6 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { ); })}