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 { sessionActions } from './store'; 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 ListSubheader from '@material-ui/core/ListSubheader'; import Divider from '@material-ui/core/Divider'; 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 BarChartIcon from '@material-ui/icons/BarChart'; import PeopleIcon from '@material-ui/icons/People'; import StorageIcon from '@material-ui/icons/Storage'; import PersonIcon from '@material-ui/icons/Person'; import NotificationsIcon from '@material-ui/icons/Notifications'; 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 FolderIcon from '@material-ui/icons/Folder'; import ReplayIcon from '@material-ui/icons/Replay'; import t from './common/localization'; const useStyles = makeStyles(theme => ({ flex: { flexGrow: 1 }, appBar: { zIndex: theme.zIndex.drawer + 1, }, list: { width: 250 }, menuButton: { marginLeft: -12, marginRight: 20, }, })); const MainToolbar = () => { const dispatch = useDispatch(); const [drawer, setDrawer] = useState(false); const classes = useStyles(); const history = useHistory(); const adminEnabled = useSelector(state => state.session.user && state.session.user.administrator); const userId = useSelector(state => state.session.user && state.session.user.id); 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 ( <> Traccar
history.push('/')}> history.push('/replay')}> {t('reportTitle')} }> history.push('/reports/route')}> history.push('/reports/event')}> history.push('/reports/trip')}> history.push('/reports/stop')}> history.push('/reports/summary')}> history.push('/reports/chart')}> {t('settingsTitle')} }> history.push(`/user/${userId}`)}> history.push('/settings/notifications')}> history.push('/settings/groups')}> history.push('/settings/drivers')}> {adminEnabled && ( <> {t('userAdmin')} }> history.push('/admin/server')}> history.push('/admin/users')}> )}
); } export default MainToolbar;