aboutsummaryrefslogtreecommitdiff
path: root/modern/src/common/components/BottomMenu.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-08 11:48:09 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-08 11:48:09 -0700
commit2352071211b61c10fa5bf5736baaff7809d18bf0 (patch)
tree743e4adc1cc35fb3585b912daaa8719ae5757f60 /modern/src/common/components/BottomMenu.js
parent044733ff543156d76437daae8edb66850d785ac9 (diff)
downloadtrackermap-web-2352071211b61c10fa5bf5736baaff7809d18bf0.tar.gz
trackermap-web-2352071211b61c10fa5bf5736baaff7809d18bf0.tar.bz2
trackermap-web-2352071211b61c10fa5bf5736baaff7809d18bf0.zip
Organize common code
Diffstat (limited to 'modern/src/common/components/BottomMenu.js')
-rw-r--r--modern/src/common/components/BottomMenu.js99
1 files changed, 99 insertions, 0 deletions
diff --git a/modern/src/common/components/BottomMenu.js b/modern/src/common/components/BottomMenu.js
new file mode 100644
index 00000000..d26b4ae2
--- /dev/null
+++ b/modern/src/common/components/BottomMenu.js
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import {
+ Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography,
+} from '@material-ui/core';
+
+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 { sessionActions } from '../../store';
+import { useTranslation } from '../../LocalizationProvider';
+import { useReadonly } from '../util/permissions';
+
+const BottomMenu = () => {
+ const history = useHistory();
+ const location = useLocation();
+ const dispatch = useDispatch();
+ const t = useTranslation();
+
+ const readonly = useReadonly();
+ const userId = useSelector((state) => state.session.user?.id);
+
+ const [anchorEl, setAnchorEl] = useState(null);
+
+ const currentSelection = () => {
+ if (location.pathname.startsWith('/user')) {
+ return 3;
+ } if (location.pathname.startsWith('/settings')) {
+ return 2;
+ } if (location.pathname.startsWith('/reports')) {
+ return 1;
+ } if (location.pathname === '/') {
+ return 0;
+ }
+ return null;
+ };
+
+ const handleAccount = () => {
+ setAnchorEl(null);
+ history.push(`/user/${userId}`);
+ };
+
+ const handleLogout = async () => {
+ setAnchorEl(null);
+ await fetch('/api/session', { method: 'DELETE' });
+ history.push('/login');
+ dispatch(sessionActions.updateUser(null));
+ };
+
+ const handleSelection = (event, value) => {
+ switch (value) {
+ case 0:
+ history.push('/');
+ break;
+ case 1:
+ history.push('/reports/route');
+ break;
+ case 2:
+ history.push('/settings/preferences');
+ break;
+ case 3:
+ if (readonly) {
+ handleLogout();
+ } else {
+ setAnchorEl(event.currentTarget);
+ }
+ break;
+ default:
+ break;
+ }
+ };
+
+ return (
+ <Paper square elevation={3}>
+ <BottomNavigation value={currentSelection()} onChange={handleSelection} showLabels>
+ <BottomNavigationAction label={t('mapTitle')} icon={<MapIcon />} />
+ <BottomNavigationAction label={t('reportTitle')} icon={<DescriptionIcon />} />
+ <BottomNavigationAction label={t('settingsTitle')} icon={<SettingsIcon />} />
+ {readonly
+ ? (<BottomNavigationAction label={t('loginLogout')} icon={<ExitToAppIcon />} />)
+ : (<BottomNavigationAction label={t('settingsUser')} icon={<PersonIcon />} />)}
+ </BottomNavigation>
+ <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
+ <MenuItem onClick={handleAccount}>
+ <Typography color="textPrimary">{t('settingsUser')}</Typography>
+ </MenuItem>
+ <MenuItem onClick={handleLogout}>
+ <Typography color="error">{t('loginLogout')}</Typography>
+ </MenuItem>
+ </Menu>
+ </Paper>
+ );
+};
+
+export default BottomMenu;