diff options
Diffstat (limited to 'modern/src/MainToolbar.js')
| -rw-r--r-- | modern/src/MainToolbar.js | 258 |
1 files changed, 117 insertions, 141 deletions
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index fc3281cd..9c2e811b 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,124 @@ 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; |