Add menu options

3 files changed, 85 insertions, 4 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index 31b8b69b..0a7ad12e 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -3,6 +3,7 @@ import { Switch, Route } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline';
 import MainPage from './MainPage';
 import LoginPage from './LoginPage';
+import RouteReportPage from './RouteReportPage';
 
 class App extends Component {
   render() {
@@ -12,6 +13,7 @@ class App extends Component {
         <Switch>
           <Route exact path='/' component={MainPage} />
           <Route exact path='/login' component={LoginPage} />
+          <Route exact path='/reports/route' component={RouteReportPage} />
         </Switch>
       </Fragment>
     );
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 41382b0b..fc3281cd 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -9,6 +9,7 @@ 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';
@@ -92,26 +93,81 @@ class MainToobar extends Component {
             onClick={this.closeDrawer}
             onKeyDown={this.closeDrawer}>
             <List>
-              <ListItem button>
+              <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('reportTitle')} />
+                <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>
+            <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('settingsTitle')} />
+                <ListItemText primary={t('sharedNotifications')} />
               </ListItem>
             </List>
           </div>
diff --git a/modern/src/RouteReportPage.js b/modern/src/RouteReportPage.js
new file mode 100644
index 00000000..c444ffbc
--- /dev/null
+++ b/modern/src/RouteReportPage.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import ContainerDimensions from 'react-container-dimensions';
+import MainToobar from './MainToolbar';
+import MainMap from './MainMap';
+import Drawer from '@material-ui/core/Drawer';
+import withStyles from '@material-ui/core/styles/withStyles';
+import SocketController from './SocketController';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
+import DeviceList from './DeviceList';
+
+const styles = theme => ({});
+
+class ReouteReportPage extends Component {
+  render() {
+    return (
+      <div>
+        <MainToobar history={this.props.history} />
+      </div>
+    );
+  }
+}
+
+export default withWidth()(withStyles(styles)(ReouteReportPage));