diff options
| -rw-r--r-- | modern/src/components/BottomMenu.js | 46 | ||||
| -rw-r--r-- | modern/src/map/StatusCard.js | 4 |
2 files changed, 30 insertions, 20 deletions
diff --git a/modern/src/components/BottomMenu.js b/modern/src/components/BottomMenu.js index a1e96256..eaa0671a 100644 --- a/modern/src/components/BottomMenu.js +++ b/modern/src/components/BottomMenu.js @@ -1,14 +1,14 @@ -import React from 'react'; -import { useDispatch } from 'react-redux'; +import React, { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { - makeStyles, Paper, BottomNavigation, BottomNavigationAction, + makeStyles, Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography, } from '@material-ui/core'; import DescriptionIcon from '@material-ui/icons/Description'; -import ShuffleIcon from '@material-ui/icons/Shuffle'; +import SettingsIcon from '@material-ui/icons/Settings'; import MapIcon from '@material-ui/icons/Map'; -import LogoutIcon from '@material-ui/icons/ExitToApp'; +import PersonIcon from '@material-ui/icons/Person'; import { sessionActions } from '../store'; import { useTranslation } from '../LocalizationProvider'; @@ -19,7 +19,6 @@ const useStyles = makeStyles((theme) => ({ left: '0px', width: '100%', position: 'fixed', - zIndex: 1301, [theme.breakpoints.up('lg')]: { left: theme.spacing(1.5), bottom: theme.spacing(1.5), @@ -31,11 +30,14 @@ const useStyles = makeStyles((theme) => ({ const BottomMenu = () => { const classes = useStyles(); const history = useHistory(); + const dispatch = useDispatch(); const t = useTranslation(); - const dispatch = useDispatch(); + const userId = useSelector((state) => state.session.user?.id); + + const [anchorEl, setAnchorEl] = useState(null); - const handleSelection = async (_, value) => { + const handleSelection = async (event, value) => { switch (value) { case 1: history.push('/reports/route'); @@ -44,27 +46,35 @@ const BottomMenu = () => { history.push('/settings/notifications'); break; case 3: - await fetch('/api/session', { method: 'DELETE' }); - history.push('/login'); - dispatch(sessionActions.updateUser(null)); + setAnchorEl(event.currentTarget); break; default: break; } }; + const handleLogout = async () => { + await fetch('/api/session', { method: 'DELETE' }); + history.push('/login'); + dispatch(sessionActions.updateUser(null)); + }; + return ( <Paper square elevation={3} className={classes.container}> - <BottomNavigation - value={0} - onChange={handleSelection} - showLabels - > + <BottomNavigation value={0} onChange={handleSelection} showLabels> <BottomNavigationAction label={t('mapTitle')} icon={<MapIcon />} /> <BottomNavigationAction label={t('reportTitle')} icon={<DescriptionIcon />} /> - <BottomNavigationAction label={t('settingsTitle')} icon={<ShuffleIcon />} /> - <BottomNavigationAction label={t('loginLogout')} icon={<LogoutIcon />} /> + <BottomNavigationAction label={t('settingsTitle')} icon={<SettingsIcon />} /> + <BottomNavigationAction label={t('settingsUser')} icon={<PersonIcon />} /> </BottomNavigation> + <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)} > + <MenuItem onClick={() => history.push(`/user/${userId}`)}> + <Typography color="textPrimary">{t('settingsUser')}</Typography> + </MenuItem> + <MenuItem onClick={handleLogout}> + <Typography color="error">{t('loginLogout')}</Typography> + </MenuItem> + </Menu> </Paper> ); }; diff --git a/modern/src/map/StatusCard.js b/modern/src/map/StatusCard.js index 94d38182..8b71913a 100644 --- a/modern/src/map/StatusCard.js +++ b/modern/src/map/StatusCard.js @@ -6,7 +6,7 @@ import { } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import ReplayIcon from '@material-ui/icons/Replay'; -import ExitToAppIcon from '@material-ui/icons/ExitToApp'; +import PublishIcon from '@material-ui/icons/Publish'; import EditIcon from '@material-ui/icons/Edit'; import DeleteIcon from '@material-ui/icons/Delete'; @@ -113,7 +113,7 @@ const StatusCard = ({ deviceId, onClose }) => { <ReplayIcon /> </IconButton> <IconButton> - <ExitToAppIcon /> + <PublishIcon /> </IconButton> <IconButton onClick={() => history.push(`/device/${deviceId}`)}> <EditIcon /> |