Renamed ReportLayoutPage to ReportLayout

7 files changed, 87 insertions, 67 deletions

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 0a5c8e1..8eeedc4 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import ReportFilter from './ReportFilter';
 import Graph from './Graph';
 import { useAttributePreference } from '../common/preferences';
@@ -61,13 +61,13 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage filter={ 
+    <ReportLayout filter={ 
       <Filter setItems={setItems}>
         <ChartType type={type} setType={setType} />
       </Filter>
     }>
       <Graph items={items} type={type} />
-    </ReportLayoutPage>
+    </ReportLayout>
   )
 }
 
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 6d80860..b938dc8 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -5,7 +5,7 @@ import { useTheme } from "@material-ui/core/styles";
 import { useSelector } from 'react-redux';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { prefixString } from '../common/stringUtils';
 import t from '../common/localization';
 
@@ -99,13 +99,13 @@ const EventReportPage = () => {
   }];
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items} 
         columns={columns} 
         hideFooter 
         autoHeight />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 }
 
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayout.js
index 6bab67c..5b54335 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayout.js
@@ -1,6 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+import {
+  Grid,
+  Typography,
+  Divider,
+  Drawer,
+  makeStyles,
+  IconButton,
+  Hidden
+} from '@material-ui/core';
 import TimelineIcon from '@material-ui/icons/Timeline';
 import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
@@ -9,56 +17,67 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-import ReportSidebar from '../components/reports/ReportSidebar'
-import ReportNavbar from '../components/reports/ReportNavbar'
+import SideNav from '../components/SideNav';
+import NavBar from '../components/NavBar';
 import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
-    height: '100%',
+    height: '100%'
   },
   drawerContainer: {
-    width: theme.dimensions.drawerWidthDesktop,
+    width: theme.dimensions.drawerWidthDesktop
   },
   drawer: {
     width: theme.dimensions.drawerWidthDesktop,
-    [theme.breakpoints.down("md")]: {
-      width: theme.dimensions.drawerWidthTablet,
+    [theme.breakpoints.down('md')]: {
+      width: theme.dimensions.drawerWidthTablet
     }
-  }, 
+  },
   content: {
     flex: 1,
-    padding: theme.spacing(5, 3, 3, 3),
+    padding: theme.spacing(5, 3, 3, 3)
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
     display: 'flex',
     alignItems: 'center',
-    padding: theme.spacing(0, 1),
-  },
-  backArrowIconContainer: {
-    '&:hover': {
-      backgroundColor:"transparent"
-    }  
+    padding: theme.spacing(0, 1)
   },
   toolbar: {
-    [theme.breakpoints.down("md")]: {
-      ...theme.mixins.toolbar,
+    [theme.breakpoints.down('md')]: {
+      ...theme.mixins.toolbar
     }
-  },
+  }
 }));
 
 const routes = [
   { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
-  { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
-  { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
-  { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
-  { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
-  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
+  {
+    name: t('reportEvents'),
+    href: '/reports/event',
+    icon: <NotificationsActiveIcon />
+  },
+  {
+    name: t('reportTrips'),
+    href: '/reports/trip',
+    icon: <PlayCircleFilledIcon />
+  },
+  {
+    name: t('reportStops'),
+    href: '/reports/stop',
+    icon: <PauseCircleFilledIcon />
+  },
+  {
+    name: t('reportSummary'),
+    href: '/reports/summary',
+    icon: <FormatListBulletedIcon />
+  },
+  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> }
 ];
 
-const ReportLayoutPage = ({ children, filter, }) => {
+const ReportLayout = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
   const location = useLocation();
@@ -77,38 +96,39 @@ const ReportLayoutPage = ({ children, filter, }) => {
     });
   }, [location]);
 
+  const pageTitle = `${t('reportTitle')} / ${reportTitle}`;
+
   return (
     <div className={classes.root}>
       <Hidden only={['lg', 'xl']}>
-        <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
+        <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} />
         <Drawer
           variant="temporary"
           open={openDrawer}
           onClose={() => setOpenDrawer(!openDrawer)}
-          classes={{paper: classes.drawer}}>
-          <ReportSidebar routes={routes} />
+          classes={{ paper: classes.drawer }}
+        >
+          <SideNav routes={routes} />
         </Drawer>
       </Hidden>
       <Hidden only={['xs', 'sm', 'md']}>
-        <div className={classes.drawerContainer}>
-          <Drawer
-            variant="permanent"
-            classes={{paper: classes.drawer}}>
-            <div className={classes.drawerHeader}>
-              <IconButton
-                onClick={() => history.push('/')}
-                className={classes.backArrowIconContainer} 
-                disableRipple>
-                <ArrowBackIcon />
-              </IconButton>
-              <Typography variant="h6" color="inherit" noWrap>
-                {t('reportTitle')}
-              </Typography> 
-            </div>
-            <Divider />
-            <ReportSidebar routes={routes} />
-          </Drawer>
-        </div>
+        <Drawer
+          variant="permanent"
+          classes={{ root: classes.drawerContainer, paper: classes.drawer }}
+        >
+          <div className={classes.drawerHeader}>
+            <IconButton
+              onClick={() => history.push('/')}
+            >
+              <ArrowBackIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap>
+              {t('reportTitle')}
+            </Typography>
+          </div>
+          <Divider />
+          <SideNav routes={routes} />
+        </Drawer>
       </Hidden>
       <div className={classes.content}>
         <div className={classes.toolbar} />
@@ -116,9 +136,9 @@ const ReportLayoutPage = ({ children, filter, }) => {
           <Grid item>{filter}</Grid>
           <Grid item>{children}</Grid>
         </Grid>
-      </div>      
+      </div>
     </div>
   );
-}
+};
 
-export default ReportLayoutPage;
+export default ReportLayout;
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 04b513e..c09d4f5 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -4,7 +4,7 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference, usePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -83,7 +83,7 @@ const RouteReportPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <Paper>
         <DataGrid
           rows={items} 
@@ -91,7 +91,7 @@ const RouteReportPage = () => {
           hideFooter 
           autoHeight />
       </Paper>
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 6953c46..57f5956 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -3,7 +3,7 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -82,14 +82,14 @@ const StopReportPage = () => {
   }]
   
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items} 
         columns={columns} 
         hideFooter 
         autoHeight
         getRowId={() => Math.random()} />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index e3819a5..53e697d 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -4,7 +4,7 @@ import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
 import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -100,14 +100,14 @@ const SummaryReportPage = () => {
   }]
   
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items} 
         columns={columns} 
         hideFooter 
         autoHeight
         getRowId={() => Math.random()} />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 }
 
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 5f414f4..e8c9129 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -3,7 +3,7 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -113,14 +113,14 @@ const TripReportPage = () => {
   }]
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items} 
         columns={columns} 
         hideFooter 
         autoHeight
         getRowId={() => Math.random()} />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 }