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.js260
1 files changed, 119 insertions, 141 deletions
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index fc3281cd..bf4aa402 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,6 +1,6 @@
-import t from './common/localization'
-import React, { Component, Fragment } from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
@@ -17,8 +17,9 @@ import ListItemText from '@material-ui/core/ListItemText';
import DashboardIcon from '@material-ui/icons/Dashboard';
import BarChartIcon from '@material-ui/icons/BarChart';
import SettingsIcon from '@material-ui/icons/Settings';
+import t from './common/localization';
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
flex: {
flexGrow: 1
},
@@ -32,149 +33,126 @@ const styles = theme => ({
marginLeft: -12,
marginRight: 20,
}
-});
+}));
-class MainToobar extends Component {
- constructor(props) {
- super(props);
- this.state = {
- drawer: false
- };
- this.openDrawer = this.openDrawer.bind(this);
- this.closeDrawer = this.closeDrawer.bind(this);
- this.handleLogout = this.handleLogout.bind(this);
- }
-
- openDrawer() {
- this.setState({
- drawer: true
- });
- };
+const MainToolbar = () => {
+ const [drawer, setDrawer] = useState(false);
+ const classes = useStyles();
+ const history = useHistory();
- closeDrawer() {
- this.setState({
- drawer: false
- });
- };
+ const openDrawer = () => { setDrawer(true) }
+ const closeDrawer = () => { setDrawer(false) }
- handleLogout() {
- fetch("/api/session", {
- method: "DELETE"
- }).then(response => {
+ const handleLogout = () => {
+ fetch('/api/session', { method: 'DELETE' }).then(response => {
if (response.ok) {
- this.props.history.push('/login');
+ history.push('/login');
}
- });
+ })
}
- render() {
- const { classes } = this.props;
- return (
- <Fragment>
- <AppBar position="static" className={classes.appBar}>
- <Toolbar>
- <IconButton
- className={classes.menuButton}
- color="inherit"
- onClick={this.openDrawer}>
- <MenuIcon />
- </IconButton>
- <Typography variant="h6" color="inherit" className={classes.flex}>
- Traccar
- </Typography>
- <Button color="inherit" onClick={this.handleLogout}>{t('loginLogout')}</Button>
- </Toolbar>
- </AppBar>
- <Drawer open={this.state.drawer} onClose={this.closeDrawer}>
- <div
- tabIndex={0}
- className={classes.list}
- role="button"
- onClick={this.closeDrawer}
- onKeyDown={this.closeDrawer}>
- <List>
- <ListItem button onClick={() => this.props.history.push('/')}>
- <ListItemIcon>
- <DashboardIcon />
- </ListItemIcon>
- <ListItemText primary={t('mapTitle')} />
- </ListItem>
- </List>
- <Divider />
- <List
- subheader={
- <ListSubheader>
- {t('reportTitle')}
- </ListSubheader>
- }>
- <ListItem button onClick={() => this.props.history.push('/reports/route')}>
- <ListItemIcon>
- <BarChartIcon />
- </ListItemIcon>
- <ListItemText primary={t('reportRoute')} />
- </ListItem>
- <ListItem button disabled>
- <ListItemIcon>
- <BarChartIcon />
- </ListItemIcon>
- <ListItemText primary={t('reportEvents')} />
- </ListItem>
- <ListItem button disabled>
- <ListItemIcon>
- <BarChartIcon />
- </ListItemIcon>
- <ListItemText primary={t('reportTrips')} />
- </ListItem>
- <ListItem button disabled>
- <ListItemIcon>
- <BarChartIcon />
- </ListItemIcon>
- <ListItemText primary={t('reportStops')} />
- </ListItem>
- <ListItem button disabled>
- <ListItemIcon>
- <BarChartIcon />
- </ListItemIcon>
- <ListItemText primary={t('reportSummary')} />
- </ListItem>
- <ListItem button disabled>
- <ListItemIcon>
- <BarChartIcon />
- </ListItemIcon>
- <ListItemText primary={t('reportChart')} />
- </ListItem>
- </List>
- <Divider />
- <List
- subheader={
- <ListSubheader>
- {t('settingsTitle')}
- </ListSubheader>
- }>
- <ListItem button disabled>
- <ListItemIcon>
- <SettingsIcon />
- </ListItemIcon>
- <ListItemText primary={t('settingsUser')} />
- </ListItem>
- <ListItem button disabled>
- <ListItemIcon>
- <SettingsIcon />
- </ListItemIcon>
- <ListItemText primary={t('settingsServer')} />
- </ListItem>
- <ListItem button disabled>
- <ListItemIcon>
- <SettingsIcon />
- </ListItemIcon>
- <ListItemText primary={t('sharedNotifications')} />
- </ListItem>
- </List>
- </div>
- </Drawer>
- </Fragment>
- );
- }
+ 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>
+ <DashboardIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('mapTitle')} />
+ </ListItem>
+ </List>
+ <Divider />
+ <List subheader={<ListSubheader>
+ {t('reportTitle')}
+ </ListSubheader>}>
+ <ListItem button onClick={() => { history.push('/reports/route') }}>
+ <ListItemIcon>
+ <BarChartIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('reportRoute')} />
+ </ListItem>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <BarChartIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('reportEvents')} />
+ </ListItem>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <BarChartIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('reportTrips')} />
+ </ListItem>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <BarChartIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('reportStops')} />
+ </ListItem>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <BarChartIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('reportSummary')} />
+ </ListItem>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <BarChartIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('reportChart')} />
+ </ListItem>
+ </List>
+ <Divider />
+ <List
+ subheader={
+ <ListSubheader>
+ {t('settingsTitle')}
+ </ListSubheader>
+ }>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <SettingsIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('settingsUser')} />
+ </ListItem>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <SettingsIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('settingsServer')} />
+ </ListItem>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <SettingsIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('sharedNotifications')} />
+ </ListItem>
+ </List>
+ </div>
+ </Drawer>
+ </>
+ );
}
-export default withStyles(styles)(MainToobar);
+export default MainToolbar;