From f15034e5fe4e5c702975b8a0f583a9917c4b1b3b Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Sat, 22 May 2021 12:49:22 +0530 Subject: Resolving Comments and Observations --- modern/src/LoginPage.js | 2 +- modern/src/SocketController.js | 5 +- modern/src/components/LoginForm.js | 125 --------------------- modern/src/components/RegisterForm.js | 122 -------------------- modern/src/components/ResetPasswordForm.js | 12 -- modern/src/components/registration/LoginForm.js | 125 +++++++++++++++++++++ modern/src/components/registration/RegisterForm.js | 122 ++++++++++++++++++++ .../components/registration/ResetPasswordForm.js | 12 ++ modern/src/components/reports/ReportNavbar.js | 34 ++++++ modern/src/components/reports/ReportSidebar.js | 30 +++++ modern/src/reports/ReportFilter.js | 8 +- modern/src/reports/ReportLayoutPage.js | 87 ++++---------- modern/src/theme/dimensions.js | 4 +- 13 files changed, 357 insertions(+), 331 deletions(-) delete mode 100644 modern/src/components/LoginForm.js delete mode 100644 modern/src/components/RegisterForm.js delete mode 100644 modern/src/components/ResetPasswordForm.js create mode 100644 modern/src/components/registration/LoginForm.js create mode 100644 modern/src/components/registration/RegisterForm.js create mode 100644 modern/src/components/registration/ResetPasswordForm.js create mode 100644 modern/src/components/reports/ReportNavbar.js create mode 100644 modern/src/components/reports/ReportSidebar.js (limited to 'modern/src') 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/LoginForm.js deleted file mode 100644 index d52a51dd..00000000 --- a/modern/src/components/LoginForm.js +++ /dev/null @@ -1,125 +0,0 @@ -import React, { useState } from 'react'; -import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core'; -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 RegisterForm from './RegisterForm'; -import ResetPasswordForm from './ResetPasswordForm'; - -const useStyles = makeStyles(theme => ({ - logoContainer: { - textAlign: 'center', - }, - resetPassword: { - cursor: 'pointer', - } -})); - -const forms = { - register: () => RegisterForm, - resetPassword: () => ResetPasswordForm, -}; - -const LoginForm = ({ setCurrentForm }) => { - - const classes = useStyles(); - const dispatch = useDispatch(); - const history = useHistory(); - const theme = useTheme(); - const matches = useMediaQuery(theme.breakpoints.down('md')); - - const [failed, setFailed] = useState(false); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); - - const handleEmailChange = (event) => { - setEmail(event.target.value); - } - - const handlePasswordChange = (event) => { - setPassword(event.target.value); - } - - const handleLogin = async (event) => { - event.preventDefault(); - const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) }); - if (response.ok) { - const user = await response.json(); - dispatch(sessionActions.updateUser(user)); - history.push('/'); - } else { - setFailed(true); - setPassword(''); - } - } - - return ( - - - {matches && Traccar} - - - - - - - - - - - - - - - - - {t('loginLanguage')} - - - - - - - setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')} - - - - ) -} - -export default LoginForm; diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/RegisterForm.js deleted file mode 100644 index 6d013f70..00000000 --- a/modern/src/components/RegisterForm.js +++ /dev/null @@ -1,122 +0,0 @@ -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'; - -const useStyles = makeStyles(theme => ({ - register: { - fontSize: theme.spacing(3), - fontWeight: 500 - }, - link: { - fontSize: theme.spacing(3), - fontWeight: 500, - marginTop: theme.spacing(0.5), - cursor: 'pointer' - } -})); - -const forms = { - login: () => LoginForm, -}; - -const RegisterForm = ({ setCurrentForm }) => { - - const classes = useStyles(); - const [name, setName] = useState(''); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [snackbarOpen, setSnackbarOpen] = useState(false); - - const submitDisabled = () => { - return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; - } - - const handleRegister = async () => { - const response = await fetch('/api/users', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({name, email, password}) - }); - - if (response.ok) { - setSnackbarOpen(true); - } - } - - return ( - <> - setCurrentForm(forms.login)} - autoHideDuration={6000} - message={t('loginCreated')} /> - - - - - setCurrentForm(forms.login)}> - - - - - - - {t('loginRegister')} - - - - - setName(event.target.value)} - variant='filled' /> - - - setEmail(event.target.value)} - variant='filled' /> - - - setPassword(event.target.value)} - variant='filled' /> - - - - - - - ) -} - -export default RegisterForm; diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/ResetPasswordForm.js deleted file mode 100644 index c268f808..00000000 --- a/modern/src/components/ResetPasswordForm.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -const ResetPasswordForm = () => { - - return ( - <> -
Reset Password Comming Soon!!!
- - ) -} - -export default ResetPasswordForm; diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js new file mode 100644 index 00000000..6469b31b --- /dev/null +++ b/modern/src/components/registration/LoginForm.js @@ -0,0 +1,125 @@ +import React, { useState } from 'react'; +import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core'; +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 RegisterForm from './RegisterForm'; +import ResetPasswordForm from './ResetPasswordForm'; + +const useStyles = makeStyles(theme => ({ + logoContainer: { + textAlign: 'center', + }, + resetPassword: { + cursor: 'pointer', + } +})); + +const forms = { + register: () => RegisterForm, + resetPassword: () => ResetPasswordForm, +}; + +const LoginForm = ({ setCurrentForm }) => { + + const classes = useStyles(); + const dispatch = useDispatch(); + const history = useHistory(); + const theme = useTheme(); + const matches = useMediaQuery(theme.breakpoints.down('md')); + + const [failed, setFailed] = useState(false); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); + + const handleEmailChange = (event) => { + setEmail(event.target.value); + } + + const handlePasswordChange = (event) => { + setPassword(event.target.value); + } + + const handleLogin = async (event) => { + event.preventDefault(); + const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) }); + if (response.ok) { + const user = await response.json(); + dispatch(sessionActions.updateUser(user)); + history.push('/'); + } else { + setFailed(true); + setPassword(''); + } + } + + return ( + + + {matches && Traccar} + + + + + + + + + + + + + + + + + {t('loginLanguage')} + + + + + + + setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')} + + + + ) +} + +export default LoginForm; diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js new file mode 100644 index 00000000..c2af04ba --- /dev/null +++ b/modern/src/components/registration/RegisterForm.js @@ -0,0 +1,122 @@ +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'; + +const useStyles = makeStyles(theme => ({ + register: { + fontSize: theme.spacing(3), + fontWeight: 500 + }, + link: { + fontSize: theme.spacing(3), + fontWeight: 500, + marginTop: theme.spacing(0.5), + cursor: 'pointer' + } +})); + +const forms = { + login: () => LoginForm, +}; + +const RegisterForm = ({ setCurrentForm }) => { + + const classes = useStyles(); + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [snackbarOpen, setSnackbarOpen] = useState(false); + + const submitDisabled = () => { + return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; + } + + const handleRegister = async () => { + const response = await fetch('/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({name, email, password}) + }); + + if (response.ok) { + setSnackbarOpen(true); + } + } + + return ( + <> + setCurrentForm(forms.login)} + autoHideDuration={6000} + message={t('loginCreated')} /> + + + + + setCurrentForm(forms.login)}> + + + + + + + {t('loginRegister')} + + + + + setName(event.target.value)} + variant='filled' /> + + + setEmail(event.target.value)} + variant='filled' /> + + + setPassword(event.target.value)} + variant='filled' /> + + + + + + + ) +} + +export default RegisterForm; diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js new file mode 100644 index 00000000..c268f808 --- /dev/null +++ b/modern/src/components/registration/ResetPasswordForm.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const ResetPasswordForm = () => { + + return ( + <> +
Reset Password Comming Soon!!!
+ + ) +} + +export default ResetPasswordForm; 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 ( + + + setOpenDrawer(!openDrawer)} + className={classes.menuButton}> + + + + {t('reportTitle')} / {reportName} + + + + ) +} + +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 ( + + {routes.map((route, index) => ( + setReportName(route.name)}> + + {route.icon} + + + + ))} + + ) +} + +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 /> } {children} - + } 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 = ( - - {routes.map((route, index) => ( - - - {route.icon} - - - - ))} - - ); - - const drawerHeader = ( - <> -
- - - - - {t('reportTitle')} - -
- - - ); - - const appBar = ( - - - setOpenDrawer(!openDrawer)} - className={classes.menuButton}> - - - - {t('reportTitle')} - - - - ); return (
- - {appBar} + + setOpenDrawer(!openDrawer)} classes={{paper: classes.drawer}}> - {drawerHeader} - {navigationList} + - +
- {drawerHeader} - {navigationList} +
+ history.push('/')} + className={classes.backArrowIconContainer} + disableRipple> + + + + {t('reportTitle')} + +
+ +
{filter} + {children}
); 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', }; -- cgit v1.2.3