aboutsummaryrefslogtreecommitdiff
path: root/modern/src/MainToolbar.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/MainToolbar.js')
-rw-r--r--modern/src/MainToolbar.js122
1 files changed, 0 insertions, 122 deletions
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
deleted file mode 100644
index b98f2224..00000000
--- a/modern/src/MainToolbar.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import { useDispatch, useSelector } from 'react-redux';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import Drawer from '@material-ui/core/Drawer';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import MapIcon from '@material-ui/icons/Map';
-import ShuffleIcon from '@material-ui/icons/Shuffle';
-import DescriptionIcon from '@material-ui/icons/Description';
-import ReplayIcon from '@material-ui/icons/Replay';
-import { sessionActions } from './store';
-import * as selectors from './common/selectors';
-import { useTranslation } from './LocalizationProvider';
-
-const useStyles = makeStyles((theme) => ({
- flex: {
- flexGrow: 1,
- },
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- },
- list: {
- width: 250,
- },
- menuButton: {
- marginLeft: -12,
- marginRight: 20,
- },
-}));
-
-const MainToolbar = () => {
- const classes = useStyles();
- const history = useHistory();
- const dispatch = useDispatch();
- const t = useTranslation();
-
- const userId = useSelector(selectors.getUserId);
-
- const [drawer, setDrawer] = useState(false);
-
- const openDrawer = () => { setDrawer(true); };
- const closeDrawer = () => { setDrawer(false); };
-
- const handleLogout = async () => {
- const response = await fetch('/api/session', { method: 'DELETE' });
- if (response.ok) {
- dispatch(sessionActions.updateUser(null));
- history.push('/login');
- }
- };
-
- return (
- <>
- <AppBar position="static" className={classes.appBar}>
- <Toolbar>
- <IconButton
- className={classes.menuButton}
- color="inherit"
- onClick={openDrawer}
- >
- <MenuIcon />
- </IconButton>
- <Typography variant="h6" color="inherit" className={classes.flex}>
- Traccar
- </Typography>
- <Button color="inherit" onClick={handleLogout}>{t('loginLogout')}</Button>
- </Toolbar>
- </AppBar>
- <Drawer open={drawer} onClose={closeDrawer}>
- <div
- tabIndex={0}
- className={classes.list}
- role="button"
- onClick={closeDrawer}
- onKeyDown={closeDrawer}
- >
- <List>
- <ListItem button onClick={() => history.push('/')}>
- <ListItemIcon>
- <MapIcon />
- </ListItemIcon>
- <ListItemText primary={t('mapTitle')} />
- </ListItem>
- <ListItem button onClick={() => history.push('/replay')}>
- <ListItemIcon>
- <ReplayIcon />
- </ListItemIcon>
- <ListItemText primary={t('reportReplay')} />
- </ListItem>
- <ListItem button onClick={() => history.push('/reports/route')}>
- <ListItemIcon>
- <DescriptionIcon />
- </ListItemIcon>
- <ListItemText primary={t('reportTitle')} />
- </ListItem>
- <ListItem
- button
- disabled={!userId}
- onClick={() => history.push('/settings/notifications')}
- >
- <ListItemIcon>
- <ShuffleIcon />
- </ListItemIcon>
- <ListItemText primary={t('settingsTitle')} />
- </ListItem>
- </List>
- </div>
- </Drawer>
- </>
- );
-};
-
-export default MainToolbar;