Resolving Comments and Observations

10 files changed, 101 insertions, 75 deletions

diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index 3d4b17f4..c16fd198 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useMediaQuery, makeStyles, Paper } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 
-import LoginForm from './components/LoginForm';
+import LoginForm from './components/registration/LoginForm';
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index cda693a1..9ce4ab21 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -27,15 +27,18 @@ const SocketController = () => {
   const authenticated = useSelector(state => !!state.session.user);
 
   const connectSocket = () => {
+    console.log('connect socket method invoked');
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(protocol + '//' + window.location.host + '/api/socket');
 
     socket.onclose = () => {
-      setTimeout(() => connectSocket(), 60 * 1000);
+      console.log('socket closed');
+      setTimeout(() => {console.log('socket reconnection try');connectSocket()}, 60 * 1000);
     };
 
     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/LoginForm.js b/modern/src/components/registration/LoginForm.js
index d52a51dd..6469b31b 100644
--- a/modern/src/components/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -3,8 +3,8 @@ import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormCont
 import { useTheme } from '@material-ui/core/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { sessionActions } from './../store';
-import t from './../common/localization';
+import { sessionActions } from '../../store';
+import t from '../../common/localization';
 import RegisterForm from './RegisterForm';
 import ResetPasswordForm from './ResetPasswordForm';
 
diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 6d013f70..c2af04ba 100644
--- a/modern/src/components/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginForm from './LoginForm';
-import t from './../common/localization';
+import t from './../../common/localization';
 
 const useStyles = makeStyles(theme => ({
   register: {
diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js
index c268f808..c268f808 100644
--- a/modern/src/components/ResetPasswordForm.js
+++ b/modern/src/components/registration/ResetPasswordForm.js
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
new file mode 100644
index 00000000..93c01a06
--- /dev/null
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+
+import MenuIcon from '@material-ui/icons/Menu';
+import t from '../../common/localization';
+
+const useStyles = makeStyles(theme => ({
+  menuButton: {
+  }
+}));
+const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => {
+  
+  const classes = useStyles();
+
+  return (
+    <AppBar position="fixed" color="inherit">
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          edge="start"
+          onClick={() => setOpenDrawer(!openDrawer)}
+          className={classes.menuButton}>
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" noWrap>
+          {t('reportTitle')} / {reportName}
+        </Typography>        
+      </Toolbar>
+    </AppBar> 
+  )
+}
+
+export default ReportNavbar;
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
new file mode 100644
index 00000000..e42c36ee
--- /dev/null
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+
+const ReportNavbar = ({ routes, setReportName }) => {
+
+  const location = useLocation();
+
+  return (
+    <List disablePadding>
+      {routes.map((route, index) => (
+        <ListItem
+          disableRipple
+          component={Link}
+          key={`${route}${index}`}
+          button
+          to={route.href}
+          selected={route.href === location.pathname}
+          onClick={() =>  setReportName(route.name)}>
+          <ListItemIcon>
+            {route.icon}
+          </ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+export default ReportNavbar;
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 1d67691c..0e5ab695 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid } from '@material-ui/core';
-import t from '../common/localization';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
+import t from '../common/localization';
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
 
@@ -101,7 +101,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
           fullWidth />
       </Grid>}
       {children}
-      <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+      <Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}>
         <Button 
           onClick={() => handleClick(false, true)}
           variant='outlined'
@@ -127,7 +127,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
             variant='outlined'
             color='secondary'
             fullWidth>
-            {t('reportEmail')}
+            <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 4ffc8816..fbb8a303 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -10,6 +10,9 @@ 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 { Link, useHistory, useLocation } from 'react-router-dom';
 
 import t from '../common/localization';
@@ -20,10 +23,10 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
   },
   drawerContainer: {
-    width: theme.dimensions.drawerWidth,
+    width: theme.dimensions.desktopDrawerWidth,
   },
   drawer: {
-    width: theme.dimensions.drawerWidth,
+    width: theme.dimensions.desktopDrawerWidth,
     [theme.breakpoints.down("md")]: {
       width: theme.dimensions.tabletDrawerWidth,
     }
@@ -62,89 +65,45 @@ const routes = [
 const ReportLayoutPage = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
-  const theme = useTheme();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const location = useLocation();
-
-  const navigationList = (
-    <List disablePadding>
-      {routes.map((route, index) => (
-        <ListItem
-          disableRipple
-          component={Link}
-          key={`${route}${index}`}
-          button
-          to={route.href}
-          selected={route.href === location.pathname}>
-          <ListItemIcon>
-            {route.icon}
-          </ListItemIcon>
-          <ListItemText primary={route.name} />
-        </ListItem>
-      ))}
-    </List>
-  );
-
-  const drawerHeader = (
-    <> 
-      <div className={classes.drawerHeader}>
-        <IconButton 
-          className={classes.backArrowIconContainer} 
-          disableRipple>
-          <ArrowBackIcon />
-        </IconButton>
-        <Typography variant="h6" color="inherit" noWrap>
-          {t('reportTitle')}
-        </Typography> 
-      </div>
-      <Divider />
-    </>
-  );
-
-  const appBar = (
-    <AppBar position="fixed" color="inherit">
-      <Toolbar>
-        <IconButton
-          color="inherit"
-          aria-label="open drawer"
-          edge="start"
-          onClick={() => setOpenDrawer(!openDrawer)}
-          className={classes.menuButton}>
-          <MenuIcon />
-        </IconButton>
-        <Typography variant="h6" noWrap>
-          {t('reportTitle')}
-        </Typography>        
-      </Toolbar>
-    </AppBar>   
-  );
 
   return (
     <div className={classes.root}>
-      <Hidden mdUp>
-        {appBar}
+      <Hidden only={['lg', 'xl']}>
+        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} />
         <Drawer
           variant="temporary"
           open={openDrawer}
           onClose={() => setOpenDrawer(!openDrawer)}
           classes={{paper: classes.drawer}}>
-          {drawerHeader}
-          {navigationList}
+          <ReportSidebar routes={routes} />
         </Drawer>
       </Hidden>
-      <Hidden mdDown>
+      <Hidden only={['xs', 'sm', 'md']}>
         <div className={classes.drawerContainer}>
           <Drawer
             variant="permanent"
             classes={{paper: classes.drawer}}>
-            {drawerHeader}
-            {navigationList}
+            <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>
       </Hidden>
       <div className={classes.content}>
         <div className={classes.toolbar} />
         {filter}
+        {children}
       </div>      
     </div>
   );
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index 59959d7e..16e6aad7 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -3,6 +3,6 @@ export default {
   borderRadius: '4px',
   sidebarWidth: '28%',
   tabletSidebarWidth: '52px',
-  drawerWidth: 360,
-  tabletDrawerWidth: 320,
+  desktopDrawerWidth: '360px',
+  tabletDrawerWidth: '320px',
 };