aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/LoginPage.js2
-rw-r--r--modern/src/SocketController.js5
-rw-r--r--modern/src/components/registration/LoginForm.js (renamed from modern/src/components/LoginForm.js)4
-rw-r--r--modern/src/components/registration/RegisterForm.js (renamed from modern/src/components/RegisterForm.js)2
-rw-r--r--modern/src/components/registration/ResetPasswordForm.js (renamed from modern/src/components/ResetPasswordForm.js)0
-rw-r--r--modern/src/components/reports/ReportNavbar.js34
-rw-r--r--modern/src/components/reports/ReportSidebar.js30
-rw-r--r--modern/src/reports/ReportFilter.js8
-rw-r--r--modern/src/reports/ReportLayoutPage.js87
-rw-r--r--modern/src/theme/dimensions.js4
10 files changed, 101 insertions, 75 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index 3d4b17f..c16fd19 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 cda693a..9ce4ab2 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 d52a51d..6469b31 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 6d013f7..c2af04b 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 c268f80..c268f80 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 0000000..93c01a0
--- /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 0000000..e42c36e
--- /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 1d67691..0e5ab69 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 4ffc881..fbb8a30 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 59959d7..16e6aad 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',
};
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-03 02:53:09 +0000