aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/reports/ChartReportPage.js22
-rw-r--r--modern/src/reports/EventReportPage.js50
-rw-r--r--modern/src/reports/ReportFilter.js157
-rw-r--r--modern/src/reports/ReportLayoutPage.js61
-rw-r--r--modern/src/reports/SummaryReportPage.js10
-rw-r--r--modern/src/theme/dimensions.js4
6 files changed, 154 insertions, 150 deletions
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 80424cce..c75c9b71 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>
)
}
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index daa4ab8b..b20984f8 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { DataGrid } from '@material-ui/data-grid';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
import t from '../common/localization';
import { formatDate } from '../common/formatter';
import ReportFilter from './ReportFilter';
@@ -30,29 +30,31 @@ const Filter = ({ setItems }) => {
return (
<ReportFilter handleSubmit={handleSubmit}>
- <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 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>
);
}
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index e6164e25..1d67691c 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,10 +1,11 @@
import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup, Grid } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid } from '@material-ui/core';
import t from '../common/localization';
import { useSelector } from 'react-redux';
import moment from 'moment';
const ReportFilter = ({ children, handleSubmit, showOnly }) => {
+
const devices = useSelector(state => Object.values(state.devices.items));
const [deviceId, setDeviceId] = useState();
const [period, setPeriod] = useState('today');
@@ -56,88 +57,80 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
}
return (
- <>
- <Grid container spacing={3} direction='column'>
- <Grid item container spacing={2}>
- <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
- 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 />
- </Grid>}
- {period === 'custom' && <Grid item xs={12} sm={3}>
- <TextField
- 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>}
- </Grid>
- <Grid item container spacing={2}>
- {children && <Grid item xs={12} sm={6}>
- {children}
- </Grid>}
- <Grid item xs={4} sm={!showOnly ? 2 : 4}>
- <Button
- onClick={() => handleClick(false, true)}
- variant='outlined'
- color='secondary'
- fullWidth>
- {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>
- {t('reportEmail')}
- </Button>}
- </Grid>
- </Grid>
+ <Grid container spacing={3}>
+ <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
+ 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 />
+ </Grid>}
+ {period === 'custom' && <Grid item xs={12} sm={3}>
+ <TextField
+ 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}
+ <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+ <Button
+ onClick={() => handleClick(false, true)}
+ variant='outlined'
+ color='secondary'
+ fullWidth>
+ {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>
+ {t('reportEmail')}
+ </Button>}
</Grid>
- </>
+ </Grid>
);
}
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index ae7b3daf..e203b5af 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Grid, Paper, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
import { useTheme } from "@material-ui/core/styles";
import MenuIcon from '@material-ui/icons/Menu';
import TimelineIcon from '@material-ui/icons/Timeline';
@@ -16,24 +16,24 @@ import t from '../common/localization';
const useStyles = makeStyles(theme => ({
root: {
- height: '100%',
display: 'flex',
+ height: '100%',
},
- drawer: {
- width: 360,
+ drawerContainer: {
+ width: theme.dimensions.drawerWidth,
[theme.breakpoints.down("md")]: {
width: 0,
}
- },
- content: {
- flex: 1,
- padding: theme.spacing(3),
},
- drawerPaper: {
- width: 360,
+ drawer: {
+ width: theme.dimensions.drawerWidth,
[theme.breakpoints.down("md")]: {
- width: 320,
+ width: theme.dimensions.tabletDrawerWidth,
}
+ },
+ content: {
+ flex: 1,
+ padding: theme.spacing(5, 3, 3, 3),
},
drawerHeader: {
...theme.mixins.toolbar,
@@ -41,14 +41,16 @@ const useStyles = makeStyles(theme => ({
alignItems: 'center',
padding: theme.spacing(0, 1),
},
+ backArrowIconContainer: {
+ '&:hover': {
+ backgroundColor:"transparent"
+ }
+ },
toolbar: {
[theme.breakpoints.down("md")]: {
...theme.mixins.toolbar,
}
},
- form: {
- padding: theme.spacing(1, 2, 2),
- },
}));
const ReportLayoutPage = ({ children, filter }) => {
@@ -73,8 +75,7 @@ const ReportLayoutPage = ({ children, filter }) => {
<ListItem
key={`${route}${route.activeIndex}`}
button
- onClick={() => handleListItemClick(route)}
- >
+ onClick={() => handleListItemClick(route)}>
<ListItemIcon>
{route.icon}
</ListItemIcon>
@@ -87,11 +88,13 @@ const ReportLayoutPage = ({ children, filter }) => {
const drawerHeader = (
<>
<div className={classes.drawerHeader}>
- <IconButton>
+ <IconButton
+ className={classes.backArrowIconContainer}
+ disableRipple>
<ArrowBackIcon />
</IconButton>
- <Typography variant="h6" color='primary' noWrap>
- Reports
+ <Typography variant="h6" color="inherit" noWrap>
+ {t('reportTitle')}
</Typography>
</div>
<Divider />
@@ -99,19 +102,18 @@ const ReportLayoutPage = ({ children, filter }) => {
);
const appBar = (
- <AppBar position="fixed">
+ <AppBar position="fixed" color="inherit">
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={() => setOpenDrawer(!openDrawer)}
- className={classes.menuButton}
- >
+ className={classes.menuButton}>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
- Reports
+ {t('reportTitle')}
</Typography>
</Toolbar>
</AppBar>
@@ -123,18 +125,17 @@ const ReportLayoutPage = ({ children, filter }) => {
return (
<div className={classes.root}>
- { matchesMD && appBar }
- <nav className={classes.drawer}>
+ {matchesMD && appBar}
+ <div className={classes.drawerContainer}>
<Drawer
variant={matchesMD ? "temporary": "permanent"}
open={openDrawer}
onClose={() => setOpenDrawer(!openDrawer)}
- classes={{ paper: classes.drawerPaper }}
- >
- { !matchesMD && drawerHeader }
- { navigationList }
+ classes={{paper: classes.drawer}}>
+ {!matchesMD && drawerHeader}
+ {navigationList}
</Drawer>
- </nav>
+ </div>
<div className={classes.content}>
<div className={classes.toolbar} />
{filter}
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 2af7d3b0..f63f50b5 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { DataGrid } from '@material-ui/data-grid';
-import { FormControlLabel, Checkbox } from '@material-ui/core';
+import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
import t from '../common/localization';
import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
import ReportFilter from './ReportFilter';
@@ -28,9 +28,11 @@ 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>
);
}
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index e36fc23b..59959d7e 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -2,5 +2,7 @@ export default {
inputHeight: '42px',
borderRadius: '4px',
sidebarWidth: '28%',
- tabletSidebarWidth: '52px'
+ tabletSidebarWidth: '52px',
+ drawerWidth: 360,
+ tabletDrawerWidth: 320,
};
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 19:37:52 +0000