diff options
19 files changed, 375 insertions, 221 deletions
diff --git a/modern/package.json b/modern/package.json index b796e17..6902d37 100644 --- a/modern/package.json +++ b/modern/package.json @@ -21,7 +21,7 @@ "react-redux": "^7.2.1", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3", - "recharts": "^1.8.5", + "recharts": "^2.0.9", "redux": "^4.0.5", "typeface-roboto": "0.0.75", "wellknown": "^0.5.0" diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 54994f4..6843e12 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/MainToolbar.js b/modern/src/MainToolbar.js index 702a7e5..63d8efe 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -22,12 +22,7 @@ import PeopleIcon from '@material-ui/icons/People'; import StorageIcon from '@material-ui/icons/Storage'; import PersonIcon from '@material-ui/icons/Person'; import NotificationsIcon from '@material-ui/icons/Notifications'; -import TimelineIcon from '@material-ui/icons/Timeline'; -import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; -import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; -import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; -import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; -import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import DescriptionIcon from '@material-ui/icons/Description'; import FolderIcon from '@material-ui/icons/Folder'; import ReplayIcon from '@material-ui/icons/Replay'; import BuildIcon from '@material-ui/icons/Build'; @@ -104,50 +99,12 @@ const MainToolbar = () => { </ListItemIcon> <ListItemText primary={t('reportReplay')} /> </ListItem> - </List> - <Divider /> - <List - subheader={ - <ListSubheader> - {t('reportTitle')} - </ListSubheader> - }> <ListItem button onClick={() => history.push('/reports/route')}> <ListItemIcon> - <TimelineIcon /> - </ListItemIcon> - <ListItemText primary={t('reportRoute')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/event')}> - <ListItemIcon> - <NotificationsActiveIcon /> + <DescriptionIcon /> </ListItemIcon> - <ListItemText primary={t('reportEvents')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/trip')}> - <ListItemIcon> - <PlayCircleFilledIcon /> - </ListItemIcon> - <ListItemText primary={t('reportTrips')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/stop')}> - <ListItemIcon> - <PauseCircleFilledIcon /> - </ListItemIcon> - <ListItemText primary={t('reportStops')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/summary')}> - <ListItemIcon> - <FormatListBulletedIcon /> - </ListItemIcon> - <ListItemText primary={t('reportSummary')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/chart')}> - <ListItemIcon> - <TrendingUpIcon /> - </ListItemIcon> - <ListItemText primary={t('reportChart')} /> - </ListItem> + <ListItemText primary={t('reportTitle')} /> + </ListItem> </List> <Divider /> <List diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index cda693a..c100df1 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -27,11 +27,13 @@ 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) => { diff --git a/modern/src/components/LoginForm.js b/modern/src/components/registration/LoginForm.js index bb76213..235f0ef 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..ac01fad --- /dev/null +++ b/modern/src/components/reports/ReportNavbar.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core'; +import MenuIcon from '@material-ui/icons/Menu'; +import t from '../../common/localization'; + +const ReportNavbar = ({ setOpenDrawer, reportTitle }) => { + + return ( + <AppBar position="fixed" color="inherit"> + <Toolbar> + <IconButton + color="inherit" + aria-label="open drawer" + edge="start" + onClick={() => setOpenDrawer(true)}> + <MenuIcon /> + </IconButton> + <Typography variant="h6" noWrap> + {t('reportTitle')} {` / ${reportTitle}`} + </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..90e20c0 --- /dev/null +++ b/modern/src/components/reports/ReportSidebar.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core'; +import { Link, useLocation } from 'react-router-dom'; + +const ReportSidebar = ({ routes }) => { + + const location = useLocation(); + + return ( + <List disablePadding style={{paddingTop: '16px'}}> + {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> + ) +} + +export default ReportSidebar; diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js index 80424cc..0a5c8e1 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> ) } @@ -57,15 +61,13 @@ const ChartReportPage = () => { const [type, setType] = useState('speed'); return ( - <> - <ReportLayoutPage filter={ - <Filter setItems={setItems}> - <ChartType type={type} setType={setType} /> - </Filter> - }> - <Graph items={items} type={type} /> - </ReportLayoutPage> - </> + <ReportLayoutPage filter={ + <Filter setItems={setItems}> + <ChartType type={type} setType={setType} /> + </Filter> + }> + <Graph items={items} type={type} /> + </ReportLayoutPage> ) } diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index a14fc93..6d80860 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,12 +1,13 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; -import t from '../common/localization'; +import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; +import { useTheme } from "@material-ui/core/styles"; +import { useSelector } from 'react-redux'; import { formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { prefixString } from '../common/stringUtils'; -import { useSelector } from 'react-redux'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -30,35 +31,38 @@ const Filter = ({ setItems }) => { return ( <ReportFilter handleSubmit={handleSubmit}> - <FormControl variant="filled" margin="normal" 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> ); } const EventReportPage = () => { + const theme = useTheme(); const geofences = useSelector(state => state.geofences.items); const [items, setItems] = useState([]); @@ -74,24 +78,24 @@ const EventReportPage = () => { headerName: t('positionFixTime'), field: 'serverTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('sharedType'), field: 'type', type: 'string', - flex:1, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => t(prefixString('event', value)), }, { headerName: t('sharedGeofence'), field: 'geofenceId', - flex: 1, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatGeofence(value), }, { headerName: t('sharedMaintenance'), field: 'maintenanceId', type: 'number', - flex: 1 + width: theme.dimensions.columnWidthString, }]; return ( diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js index af54e10..990eb5d 100644 --- a/modern/src/reports/Graph.js +++ b/modern/src/reports/Graph.js @@ -1,8 +1,11 @@ import React from 'react'; -import { Box, Paper } from '@material-ui/core'; +import { withWidth } from '@material-ui/core'; import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; const CustomizedAxisTick = ({ x, y, payload }) =>{ + if(!payload.value) { + return payload.value; + } const parts = payload.value.split(' '); return ( <g transform={`translate(${x},${y})`}> @@ -15,21 +18,17 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{ const Graph = ({ type, items }) => { return ( - <Paper> - <Box height={400}> - <ResponsiveContainer> - <LineChart data={items}> - <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} /> - <YAxis /> - <CartesianGrid strokeDasharray="3 3" /> - <Tooltip /> - <Legend /> - <Line type="natural" dataKey={type} /> - </LineChart> - </ResponsiveContainer> - </Box> - </Paper> + <ResponsiveContainer height={400} width="100%" debounce={1}> + <LineChart data={items}> + <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Line type="natural" dataKey={type} /> + </LineChart> + </ResponsiveContainer> ); } -export default Graph; +export default withWidth()(Graph); diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 164dbf9..8055d30 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -1,10 +1,22 @@ import React, { useState } from 'react'; -import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup } from '@material-ui/core'; -import t from '../common/localization'; +import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography, makeStyles } from '@material-ui/core'; import { useSelector } from 'react-redux'; import moment from 'moment'; +import t from '../common/localization'; + +const useStyles = makeStyles(theme => ({ + gridContainer: { + margin: theme.spacing(0, -1), + '& > .MuiGrid-item': { + padding: theme.spacing(1.5, 1) + } + } +})); const ReportFilter = ({ children, handleSubmit, showOnly }) => { + + const classes = useStyles(); + const devices = useSelector(state => Object.values(state.devices.items)); const [deviceId, setDeviceId] = useState(); const [period, setPeriod] = useState('today'); @@ -56,56 +68,80 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => { } return ( - <> - <FormControl variant="filled" margin="normal" 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> - <FormControl variant="filled" margin="normal" 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> - {period === 'custom' && ( + <Grid container spacing={2} className={classes.gridContainer}> + <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 - margin="normal" 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 /> - )} - {period === 'custom' && ( + </Grid>} + {period === 'custom' && <Grid item xs={12} sm={3}> <TextField - margin="normal" 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} - <FormControl margin="normal" fullWidth> - <ButtonGroup color="primary" orientation="vertical" disabled={!deviceId}> - <Button onClick={() => handleClick(false, true)}>{t('reportShow')}</Button> - {!showOnly && <Button onClick={() => handleClick(false, false)}>{t('reportExport')}</Button>} - {!showOnly && <Button onClick={() => handleClick(true, false)}>{t('reportEmail')}</Button>} - </ButtonGroup> - </FormControl> - </> + <Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}> + <Button + onClick={() => handleClick(false, true)} + variant='outlined' + color='secondary' + fullWidth> + {t('reportShow')} + </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 e5eda05..fafffc7 100644 --- a/modern/src/reports/ReportLayoutPage.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -1,42 +1,122 @@ -import React from 'react'; -import { Grid, Paper, makeStyles } from '@material-ui/core'; -import MainToolbar from '../MainToolbar'; +import React, { useState, useEffect } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; +import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; +import TimelineIcon from '@material-ui/icons/Timeline'; +import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; +import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; +import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; +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 t from '../common/localization'; const useStyles = makeStyles(theme => ({ root: { - height: '100%', display: 'flex', - flexDirection: 'column', + height: '100%', }, + drawerContainer: { + width: theme.dimensions.drawerWidthDesktop, + }, + drawer: { + width: theme.dimensions.drawerWidthDesktop, + [theme.breakpoints.down("md")]: { + width: theme.dimensions.drawerWidthTablet, + } + }, content: { flex: 1, - overflow: 'auto', - padding: theme.spacing(2), + padding: theme.spacing(5, 3, 3, 3), + }, + drawerHeader: { + ...theme.mixins.toolbar, + display: 'flex', + alignItems: 'center', + padding: theme.spacing(0, 1), + }, + backArrowIconContainer: { + '&:hover': { + backgroundColor:"transparent" + } }, - form: { - padding: theme.spacing(1, 2, 2), + toolbar: { + [theme.breakpoints.down("md")]: { + ...theme.mixins.toolbar, + } }, })); -const ReportLayoutPage = ({ children, filter }) => { +const routes = [ + { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> }, + { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> }, + { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> }, + { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> }, + { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> }, + { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> }, +]; + +const ReportLayoutPage = ({ children, filter, }) => { const classes = useStyles(); + const history = useHistory(); + const location = useLocation(); + const [openDrawer, setOpenDrawer] = useState(false); + const [reportTitle, setReportTitle] = useState(); + + useEffect(() => { + routes.forEach(route => { + switch (location.pathname) { + case `${route.href}`: + setReportTitle(route.name); + break; + default: + break; + } + }); + }, []); + return ( <div className={classes.root}> - <MainToolbar /> + <Hidden only={['lg', 'xl']}> + <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} /> + <Drawer + variant="temporary" + open={openDrawer} + onClose={() => setOpenDrawer(!openDrawer)} + classes={{paper: classes.drawer}}> + <ReportSidebar routes={routes} /> + </Drawer> + </Hidden> + <Hidden only={['xs', 'sm', 'md']}> + <div className={classes.drawerContainer}> + <Drawer + variant="permanent" + classes={{paper: classes.drawer}}> + <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}> - <Grid container spacing={2}> - <Grid item xs={12} md={3} lg={2}> - <Paper className={classes.form}> - {filter} - </Paper> - </Grid> - <Grid item xs={12} md={9} lg={10}> - <Paper> - {children} - </Paper> - </Grid> + <div className={classes.toolbar} /> + <Grid container direction="column" spacing={2}> + <Grid item>{filter}</Grid> + <Grid item>{children}</Grid> </Grid> - </div> + </div> </div> ); } diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 02d41a2..04b513e 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -1,11 +1,12 @@ import React, { useState } from 'react'; +import { Paper } from '@material-ui/core'; import { DataGrid } from '@material-ui/data-grid'; -import t from '../common/localization'; +import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference, usePreference } from '../common/preferences'; -import { Paper } from '@material-ui/core'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -31,41 +32,42 @@ const RouteReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const coordinateFormat = usePreference('coordinateFormat'); + const theme = useTheme(); const columns = [{ headerName: t('positionFixTime'), field: 'fixTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('positionLatitude'), field: 'latitude', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat), }, { headerName: t('positionLongitude'), field: 'longitude', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat), }, { headerName: t('positionSpeed'), field: 'speed', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('positionAddress'), field: 'address', type: 'string', - flex: 1, + width: theme.dimensions.columnWidthString, }, { headerName: t('positionIgnition'), field: 'ignition', type: 'boolean', - flex: 1, + width: theme.dimensions.columnWidthBoolean, valueGetter: ({ row }) => row.attributes.ignition, valueFormatter: ({ value }) => formatBoolean(value), }, { @@ -73,7 +75,7 @@ const RouteReportPage = () => { field: 'totalDistance', type: 'number', hide: true, - flex: 1, + 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 7873151..6953c46 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import t from '../common/localization'; +import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -28,6 +29,8 @@ const Filter = ({ setItems }) => { const StopReportPage = () => { + const theme = useTheme(); + const distanceUnit = useAttributePreference('distanceUnit'); const volumeUnit = useAttributePreference('volumeUnit'); @@ -37,43 +40,43 @@ const StopReportPage = () => { headerName: t('reportStartTime'), field: 'startTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('positionOdometer'), field: 'startOdometer', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('positionAddress'), field: 'address', type: 'string', hide: true, - flex: 1, + width: theme.dimensions.columnWidthString, }, { headerName: t('reportEndTime'), field: 'endTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportDuration'), field: 'duration', type: 'string', - flex: 1, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportEngineHours'), field: 'engineHours', type: 'string', - flex: 1, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - flex: 1, + 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 2af7d3b..e3819a5 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -1,11 +1,12 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import { FormControlLabel, Checkbox } from '@material-ui/core'; -import t from '../common/localization'; +import { Grid, FormControlLabel, Checkbox } from '@material-ui/core'; +import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -28,15 +29,19 @@ 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> ); } const SummaryReportPage = () => { + const theme = useTheme(); + const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const volumeUnit = useAttributePreference('volumeUnit'); @@ -47,49 +52,49 @@ const SummaryReportPage = () => { headerName: t('reportStartDate'), field: 'startTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'), }, { headerName: t('sharedDistance'), field: 'distance', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportStartOdometer'), field: 'startOdometer', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportEndOdometer'), field: 'endOdometer', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportAverageSpeed'), field: 'averageSpeed', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportMaximumSpeed'), field: 'maxSpeed', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportEngineHours'), field: 'engineHours', type: 'string', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - flex: 1, + 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 45a7786..5f414f4 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import t from '../common/localization'; +import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -27,6 +28,8 @@ const Filter = ({ setItems }) => { } const TripReportPage = () => { + + const theme = useTheme(); const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); @@ -38,74 +41,74 @@ const TripReportPage = () => { headerName: t('reportStartTime'), field: 'startTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportStartOdometer'), field: 'startOdometer', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportStartAddress'), field: 'startAddress', type: 'string', hide: true, - flex: 1, + width: theme.dimensions.columnWidthString, }, { headerName: t('reportEndTime'), field: 'endTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportEndOdometer'), field: 'endOdometer', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportEndAddress'), field: 'endAddress', type: 'string', hide: true, - flex: 1, + width: theme.dimensions.columnWidthString, }, { headerName: t('sharedDistance'), field: 'distance', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportAverageSpeed'), field: 'averageSpeed', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportMaximumSpeed'), field: 'maxSpeed', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportDuration'), field: 'duration', type: 'string', - flex: 1, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - flex: 1, + width: theme.dimensions.columnWidthNumber, hide: true, valueFormatter: ({ value }) => formatVolume(value, volumeUnit), }, { headerName: t('sharedDriver'), field: 'driverName', type: 'string', - flex: 1, + width: theme.dimensions.columnWidthString, hide: true }] diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js index e36fc23..a2403ab 100644 --- a/modern/src/theme/dimensions.js +++ b/modern/src/theme/dimensions.js @@ -2,5 +2,11 @@ export default { inputHeight: '42px', borderRadius: '4px', sidebarWidth: '28%', - tabletSidebarWidth: '52px' + sidebarWidthTablet: '52px', + drawerWidthDesktop: '360px', + drawerWidthTablet: '320px', + columnWidthDate: 160, + columnWidthNumber: 130, + columnWidthString: 160, + columnWidthBoolean: 130 }; |