Sidebar and Report Filter completed

6 files changed, 154 insertions, 150 deletions

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 80424cc..c75c9b7 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import ReportLayoutPage from './ReportLayoutPage';
 import ReportFilter from './ReportFilter';
 import Graph from './Graph';
@@ -39,14 +39,18 @@ const Filter = ({ children, setItems }) => {
 const ChartType = ({ type, setType }) => {
 
   return (
-    <FormControl variant="filled" margin="normal" fullWidth>
-      <InputLabel>{t('reportChartType')}</InputLabel>
-      <Select value={type} onChange={e => setType(e.target.value)}>
-        <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
-        <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
-        <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
-      </Select>
-    </FormControl>
+    <Grid container spacing={3}>
+      <Grid item xs={12} sm={6}>
+        <FormControl variant="filled" margin="normal" fullWidth>
+          <InputLabel>{t('reportChartType')}</InputLabel>
+          <Select value={type} onChange={e => setType(e.target.value)}>
+            <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
+            <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
+            <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
+          </Select>
+        </FormControl>
+      </Grid>
+    </Grid>
   )
 }
 
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index daa4ab8..b20984f 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import t from '../common/localization';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
@@ -30,29 +30,31 @@ const Filter = ({ setItems }) => {
 
   return (
     <ReportFilter handleSubmit={handleSubmit}>
-      <FormControl variant="filled" fullWidth>
-        <InputLabel>{t('reportEventTypes')}</InputLabel>
-        <Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
-          <MenuItem value="allEvents">{t('eventAll')}</MenuItem>
-          <MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem>
-          <MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem>
-          <MenuItem value="deviceOffline">{t('eventDeviceOffline')}</MenuItem>
-          <MenuItem value="deviceInactive">{t('eventDeviceInactive')}</MenuItem>
-          <MenuItem value="deviceMoving">{t('eventDeviceMoving')}</MenuItem>
-          <MenuItem value="deviceStopped">{t('eventDeviceStopped')}</MenuItem>
-          <MenuItem value="deviceOverspeed">{t('eventDeviceOverspeed')}</MenuItem>
-          <MenuItem value="deviceFuelDrop">{t('eventDeviceFuelDrop')}</MenuItem>
-          <MenuItem value="commandResult">{t('eventCommandResult')}</MenuItem>
-          <MenuItem value="geofenceEnter">{t('eventGeofenceEnter')}</MenuItem>
-          <MenuItem value="geofenceExit">{t('eventGeofenceExit')}</MenuItem>
-          <MenuItem value="alarm">{t('eventAlarm')}</MenuItem>
-          <MenuItem value="ignitionOn">{t('eventIgnitionOn')}</MenuItem>
-          <MenuItem value="ignitionOff">{t('eventIgnitionOff')}</MenuItem>
-          <MenuItem value="maintenance">{t('eventMaintenance')}</MenuItem>
-          <MenuItem value="textMessage">{t('eventTextMessage')}</MenuItem>
-          <MenuItem value="driverChanged">{t('eventDriverChanged')}</MenuItem>
-        </Select>
-      </FormControl>
+      <Grid item xs={12} sm={6}>
+        <FormControl variant="filled" fullWidth>
+          <InputLabel>{t('reportEventTypes')}</InputLabel>
+          <Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
+            <MenuItem value="allEvents">{t('eventAll')}</MenuItem>
+            <MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem>
+            <MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem>
+            <MenuItem value="deviceOffline">{t('eventDeviceOffline')}</MenuItem>
+            <MenuItem value="deviceInactive">{t('eventDeviceInactive')}</MenuItem>
+            <MenuItem value="deviceMoving">{t('eventDeviceMoving')}</MenuItem>
+            <MenuItem value="deviceStopped">{t('eventDeviceStopped')}</MenuItem>
+            <MenuItem value="deviceOverspeed">{t('eventDeviceOverspeed')}</MenuItem>
+            <MenuItem value="deviceFuelDrop">{t('eventDeviceFuelDrop')}</MenuItem>
+            <MenuItem value="commandResult">{t('eventCommandResult')}</MenuItem>
+            <MenuItem value="geofenceEnter">{t('eventGeofenceEnter')}</MenuItem>
+            <MenuItem value="geofenceExit">{t('eventGeofenceExit')}</MenuItem>
+            <MenuItem value="alarm">{t('eventAlarm')}</MenuItem>
+            <MenuItem value="ignitionOn">{t('eventIgnitionOn')}</MenuItem>
+            <MenuItem value="ignitionOff">{t('eventIgnitionOff')}</MenuItem>
+            <MenuItem value="maintenance">{t('eventMaintenance')}</MenuItem>
+            <MenuItem value="textMessage">{t('eventTextMessage')}</MenuItem>
+            <MenuItem value="driverChanged">{t('eventDriverChanged')}</MenuItem>
+          </Select>
+        </FormControl>
+      </Grid>
     </ReportFilter>
   );
 }
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index e6164e2..1d67691 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup, Grid } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid } from '@material-ui/core';
 import t from '../common/localization';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
+
   const devices = useSelector(state => Object.values(state.devices.items));
   const [deviceId, setDeviceId] = useState();
   const [period, setPeriod] = useState('today');
@@ -56,88 +57,80 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   }
 
   return (
-    <>
-      <Grid container spacing={3} direction='column'>
-        <Grid item container spacing={2}>
-          <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
-            <FormControl variant="filled" fullWidth>
-              <InputLabel>{t('reportDevice')}</InputLabel>
-              <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
-                {devices.map((device) => (
-                  <MenuItem value={device.id}>{device.name}</MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Grid>
-          <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
-            <FormControl variant="filled" fullWidth>
-              <InputLabel>{t('reportPeriod')}</InputLabel>
-              <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
-                <MenuItem value="today">{t('reportToday')}</MenuItem>
-                <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
-                <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
-                <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
-                <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
-                <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
-                <MenuItem value="custom">{t('reportCustom')}</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
-          {period === 'custom' && <Grid item xs={12} sm={3}>
-            <TextField
-              variant="filled"
-              label={t('reportFrom')}
-              type="datetime-local"
-              value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-              onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-              fullWidth />
-          </Grid>}
-          {period === 'custom' && <Grid item xs={12} sm={3}>
-            <TextField
-              variant="filled"
-              label={t('reportTo')}
-              type="datetime-local"
-              value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-              onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-              fullWidth />
-          </Grid>}
-        </Grid>
-        <Grid item container spacing={2}>
-          {children && <Grid item xs={12} sm={6}>
-            {children}
-          </Grid>}
-          <Grid item xs={4} sm={!showOnly ? 2 : 4}>
-            <Button 
-              onClick={() => handleClick(false, true)}
-              variant='outlined'
-              color='secondary'
-              fullWidth>
-                {t('reportShow')}
-            </Button>
-          </Grid>
-          <Grid item xs={4} sm={2}>
-            {!showOnly && 
-              <Button 
-                onClick={() => handleClick(false, false)}
-                variant='outlined'
-                color='secondary'
-                fullWidth>
-                  {t('reportExport')}
-              </Button>}
-          </Grid>
-          <Grid item xs={4} sm={2}>
-            {!showOnly && 
-              <Button 
-                onClick={() => handleClick(true, false)}
-                variant='outlined'
-                color='secondary'
-                fullWidth>
-                  {t('reportEmail')}
-              </Button>}
-          </Grid>
-        </Grid>
+    <Grid container spacing={3}>
+      <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+        <FormControl variant="filled" fullWidth>
+          <InputLabel>{t('reportDevice')}</InputLabel>
+          <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
+            {devices.map((device) => (
+              <MenuItem value={device.id}>{device.name}</MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Grid>
+      <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+        <FormControl variant="filled" fullWidth>
+          <InputLabel>{t('reportPeriod')}</InputLabel>
+          <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+            <MenuItem value="today">{t('reportToday')}</MenuItem>
+            <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
+            <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
+            <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
+            <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
+            <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
+            <MenuItem value="custom">{t('reportCustom')}</MenuItem>
+          </Select>
+        </FormControl>
+      </Grid>
+      {period === 'custom' && <Grid item xs={12} sm={3}>
+        <TextField
+          variant="filled"
+          label={t('reportFrom')}
+          type="datetime-local"
+          value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+          onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+          fullWidth />
+      </Grid>}
+      {period === 'custom' && <Grid item xs={12} sm={3}>
+        <TextField
+          variant="filled"
+          label={t('reportTo')}
+          type="datetime-local"
+          value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+          onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+          fullWidth />
+      </Grid>}
+      {children}
+      <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+        <Button 
+          onClick={() => handleClick(false, true)}
+          variant='outlined'
+          color='secondary'
+          fullWidth>
+          {t('reportShow')}
+        </Button>
+      </Grid>
+      <Grid item xs={4} sm={2}>
+        {!showOnly && 
+          <Button 
+            onClick={() => handleClick(false, false)}
+            variant='outlined'
+            color='secondary'
+            fullWidth>
+            {t('reportExport')}
+          </Button>}
+      </Grid>
+      <Grid item xs={4} sm={2}>
+        {!showOnly && 
+          <Button 
+            onClick={() => handleClick(true, false)}
+            variant='outlined'
+            color='secondary'
+            fullWidth>
+            {t('reportEmail')}
+          </Button>}
       </Grid>
-    </>
+    </Grid>
   );
 }
 
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index ae7b3da..e203b5a 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Grid, Paper, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
 import { useTheme } from "@material-ui/core/styles";
 import MenuIcon from '@material-ui/icons/Menu';
 import TimelineIcon from '@material-ui/icons/Timeline';
@@ -16,24 +16,24 @@ import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    height: '100%',
     display: 'flex',
+    height: '100%',
   },
-  drawer: {
-    width: 360,
+  drawerContainer: {
+    width: theme.dimensions.drawerWidth,
     [theme.breakpoints.down("md")]: {
       width: 0,
     }
-  },  
-  content: {
-    flex: 1,
-    padding: theme.spacing(3),
   },
-  drawerPaper: {
-    width: 360,
+  drawer: {
+    width: theme.dimensions.drawerWidth,
     [theme.breakpoints.down("md")]: {
-      width: 320,
+      width: theme.dimensions.tabletDrawerWidth,
     }
+  }, 
+  content: {
+    flex: 1,
+    padding: theme.spacing(5, 3, 3, 3),
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
@@ -41,14 +41,16 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
     padding: theme.spacing(0, 1),
   },
+  backArrowIconContainer: {
+    '&:hover': {
+      backgroundColor:"transparent"
+    }  
+  },
   toolbar: {
     [theme.breakpoints.down("md")]: {
       ...theme.mixins.toolbar,
     }
   },
-  form: {
-    padding: theme.spacing(1, 2, 2),
-  },
 }));
 
 const ReportLayoutPage = ({ children, filter }) => {
@@ -73,8 +75,7 @@ const ReportLayoutPage = ({ children, filter }) => {
         <ListItem
           key={`${route}${route.activeIndex}`}
           button
-          onClick={() => handleListItemClick(route)}
-        >
+          onClick={() => handleListItemClick(route)}>
           <ListItemIcon>
             {route.icon}
           </ListItemIcon>
@@ -87,11 +88,13 @@ const ReportLayoutPage = ({ children, filter }) => {
   const drawerHeader = (
     <> 
       <div className={classes.drawerHeader}>
-        <IconButton>
+        <IconButton 
+          className={classes.backArrowIconContainer} 
+          disableRipple>
           <ArrowBackIcon />
         </IconButton>
-        <Typography variant="h6" color='primary' noWrap>
-          Reports
+        <Typography variant="h6" color="inherit" noWrap>
+          {t('reportTitle')}
         </Typography> 
       </div>
       <Divider />
@@ -99,19 +102,18 @@ const ReportLayoutPage = ({ children, filter }) => {
   );
 
   const appBar = (
-    <AppBar position="fixed">
+    <AppBar position="fixed" color="inherit">
       <Toolbar>
         <IconButton
           color="inherit"
           aria-label="open drawer"
           edge="start"
           onClick={() => setOpenDrawer(!openDrawer)}
-          className={classes.menuButton}
-        >
+          className={classes.menuButton}>
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap>
-          Reports
+          {t('reportTitle')}
         </Typography>        
       </Toolbar>
     </AppBar>   
@@ -123,18 +125,17 @@ const ReportLayoutPage = ({ children, filter }) => {
 
   return (
     <div className={classes.root}>
-      { matchesMD && appBar }
-      <nav className={classes.drawer}>
+      {matchesMD && appBar}
+      <div className={classes.drawerContainer}>
         <Drawer
           variant={matchesMD ? "temporary": "permanent"}
           open={openDrawer}
           onClose={() => setOpenDrawer(!openDrawer)}
-          classes={{ paper: classes.drawerPaper }}
-        >
-          { !matchesMD && drawerHeader }
-          { navigationList }
+          classes={{paper: classes.drawer}}>
+          {!matchesMD && drawerHeader}
+          {navigationList}
         </Drawer>
-      </nav>
+      </div>
       <div className={classes.content}>
         <div className={classes.toolbar} />
         {filter}
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 2af7d3b..f63f50b 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { FormControlLabel, Checkbox } from '@material-ui/core';
+import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
 import t from '../common/localization';
 import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
@@ -28,9 +28,11 @@ const Filter = ({ setItems }) => {
 
   return (
     <ReportFilter handleSubmit={handleSubmit}>
-      <FormControlLabel
-        control={<Checkbox checked={daily} onChange={e => setDaily(e.target.checked)} />}
-        label={t('reportDaily')} />
+      <Grid item xs={12} sm={6}>
+        <FormControlLabel
+          control={<Checkbox checked={daily} onChange={e => setDaily(e.target.checked)} />}
+          label={t('reportDaily')} />
+      </Grid>
     </ReportFilter>
   );
 }
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index e36fc23..59959d7 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -2,5 +2,7 @@ export default {
   inputHeight: '42px',
   borderRadius: '4px',
   sidebarWidth: '28%',
-  tabletSidebarWidth: '52px' 
+  tabletSidebarWidth: '52px',
+  drawerWidth: 360,
+  tabletDrawerWidth: 320,
 };