Fixing issues in report implementations

11 files changed, 74 insertions, 75 deletions

diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 9ce4ab21..c100df14 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -38,7 +38,6 @@ const SocketController = () => {
 
     socket.onmessage = (event) => {
       const data = JSON.parse(event.data);
-      console.log('socket message received ', data);
       if (data.devices) {
         dispatch(devicesActions.update(data.devices));
       }
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
index 3167c758..ac01fad9 100644
--- a/modern/src/components/reports/ReportNavbar.js
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -3,7 +3,7 @@ import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import t from '../../common/localization';
 
-const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => {
+const ReportNavbar = ({ setOpenDrawer, reportTitle }) => {
 
   return (
     <AppBar position="fixed" color="inherit">
@@ -12,11 +12,11 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => {
           color="inherit"
           aria-label="open drawer"
           edge="start"
-          onClick={() => setOpenDrawer(!openDrawer)}>
+          onClick={() => setOpenDrawer(true)}>
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap>
-          {t('reportTitle')} {reportTitle ? `/ ${reportTitle}` : ''}
+          {t('reportTitle')} {` / ${reportTitle}`}
         </Typography>        
       </Toolbar>
     </AppBar> 
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
index 2d4c47c1..90e20c05 100644
--- a/modern/src/components/reports/ReportSidebar.js
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core';
 import { Link, useLocation } from 'react-router-dom';
 
-const ReportNavbar = ({ routes }) => {
+const ReportSidebar = ({ routes }) => {
 
   const location = useLocation();
 
@@ -26,4 +26,4 @@ const ReportNavbar = ({ routes }) => {
   )
 }
 
-export default ReportNavbar;
+export default ReportSidebar;
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 8b217694..6d80860c 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -78,24 +78,24 @@ const EventReportPage = () => {
     headerName: t('positionFixTime'),
     field: 'serverTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('sharedType'),
     field: 'type',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => t(prefixString('event', value)),
   }, {
     headerName: t('sharedGeofence'),
     field: 'geofenceId',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatGeofence(value),
   }, {
     headerName: t('sharedMaintenance'),
     field: 'maintenanceId',
     type: 'number',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
   }];
 
   return (
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index c7835e7f..8055d30c 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -121,26 +121,26 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
           {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>
-            <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
-          </Button>}
-      </Grid>
+      {!showOnly && 
+        <Grid item xs={4} sm={2}>
+            <Button 
+              onClick={() => handleClick(false, false)}
+              variant='outlined'
+              color='secondary'
+              fullWidth>
+              {t('reportExport')}
+            </Button>
+        </Grid>}
+      {!showOnly && 
+        <Grid item xs={4} sm={2}>
+            <Button 
+              onClick={() => handleClick(true, false)}
+              variant='outlined'
+              color='secondary'
+              fullWidth>
+              <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
+            </Button>
+        </Grid>}
     </Grid>
   );
 }
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 42804004..fafffc72 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -19,12 +19,12 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
   },
   drawerContainer: {
-    width: theme.dimensions.desktopDrawerWidth,
+    width: theme.dimensions.drawerWidthDesktop,
   },
   drawer: {
-    width: theme.dimensions.desktopDrawerWidth,
+    width: theme.dimensions.drawerWidthDesktop,
     [theme.breakpoints.down("md")]: {
-      width: theme.dimensions.tabletDrawerWidth,
+      width: theme.dimensions.drawerWidthTablet,
     }
   }, 
   content: {
@@ -80,7 +80,7 @@ const ReportLayoutPage = ({ children, filter, }) => {
   return (
     <div className={classes.root}>
       <Hidden only={['lg', 'xl']}>
-        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
+        <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
         <Drawer
           variant="temporary"
           open={openDrawer}
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 6befa479..04b513e9 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -38,36 +38,36 @@ const RouteReportPage = () => {
     headerName: t('positionFixTime'),
     field: 'fixTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('positionLatitude'),
     field: 'latitude',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat),
   }, {
     headerName: t('positionLongitude'),
     field: 'longitude',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat),
   }, {
     headerName: t('positionSpeed'),
     field: 'speed',
     type: 'number',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
   }, {
     headerName: t('positionIgnition'),
     field: 'ignition',
     type: 'boolean',
-    width: theme.dimensions.booleanColumnWidth,
+    width: theme.dimensions.columnWidthBoolean,
     valueGetter: ({ row }) => row.attributes.ignition,
     valueFormatter: ({ value }) => formatBoolean(value),
   }, {
@@ -75,7 +75,7 @@ const RouteReportPage = () => {
     field: 'totalDistance',
     type: 'number',
     hide: true,
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueGetter: ({ row }) => row.attributes.totalDistance,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }]
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index d572742f..6953c464 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -40,43 +40,43 @@ const StopReportPage = () => {
     headerName: t('reportStartTime'),
     field: 'startTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value), 
   }, {
     headerName: t('positionOdometer'),
     field: 'startOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
     type: 'string',
     hide: true,
-    width: theme.dimensions.stringColumnWidth,    
+    width: theme.dimensions.columnWidthString,    
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),    
   }]
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index a2392f2f..e3819a53 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -52,49 +52,49 @@ const SummaryReportPage = () => {
     headerName: t('reportStartDate'),
     field: 'startTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'),
   }, {
     headerName: t('sharedDistance'),
     field: 'distance',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),                
   }]
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index ab5f449f..5f414f44 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -41,74 +41,74 @@ const TripReportPage = () => {
     headerName: t('reportStartTime'),
     field: 'startTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportStartAddress'),
     field: 'startAddress',
     type: 'string',
     hide: true,
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportEndAddress'),
     field: 'endAddress',
     type: 'string',
     hide: true,
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
   }, {
     headerName: t('sharedDistance'),
     field: 'distance',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
   }, {
     headerName: t('sharedDriver'),
     field: 'driverName',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     hide: true                                        
   }]
 
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index ebb393b0..a2403abe 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -2,11 +2,11 @@ export default {
   inputHeight: '42px',
   borderRadius: '4px',
   sidebarWidth: '28%',
-  tabletSidebarWidth: '52px',
-  desktopDrawerWidth: '360px',
-  tabletDrawerWidth: '320px',
-  dateColumnWidth: 160,
-  numberColumnWidth: 130,
-  stringColumnWidth: 160,
-  booleanColumnWidth: 130
+  sidebarWidthTablet: '52px',
+  drawerWidthDesktop: '360px',
+  drawerWidthTablet: '320px',
+  columnWidthDate: 160,
+  columnWidthNumber: 130,
+  columnWidthString: 160,
+  columnWidthBoolean: 130
 };