blob: 41382b0bb72424b8ace5e4021478c1fcc01e5d55 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import t from './common/localization'
import React, { Component, Fragment } from 'react';
import { withStyles } 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';
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 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 DashboardIcon from '@material-ui/icons/Dashboard';
import BarChartIcon from '@material-ui/icons/BarChart';
import SettingsIcon from '@material-ui/icons/Settings';
const styles = theme => ({
flex: {
flexGrow: 1
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
list: {
width: 250
},
menuButton: {
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
});
};
closeDrawer() {
this.setState({
drawer: false
});
};
handleLogout() {
fetch("/api/session", {
method: "DELETE"
}).then(response => {
if (response.ok) {
this.props.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>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary={t('mapTitle')} />
</ListItem>
<ListItem button disabled>
<ListItemIcon>
<BarChartIcon />
</ListItemIcon>
<ListItemText primary={t('reportTitle')} />
</ListItem>
</List>
<Divider />
<List>
<ListItem button disabled>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary={t('settingsTitle')} />
</ListItem>
</List>
</div>
</Drawer>
</Fragment>
);
}
}
export default withStyles(styles)(MainToobar);
|
