aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/reports')
-rw-r--r--modern/src/reports/ChartReportPage.js38
-rw-r--r--modern/src/reports/EventReportPage.js64
-rw-r--r--modern/src/reports/Graph.js31
-rw-r--r--modern/src/reports/ReportFilter.js110
-rw-r--r--modern/src/reports/ReportLayoutPage.js126
-rw-r--r--modern/src/reports/RouteReportPage.js20
-rw-r--r--modern/src/reports/StopReportPage.js19
-rw-r--r--modern/src/reports/SummaryReportPage.js31
-rw-r--r--modern/src/reports/TripReportPage.js29
9 files changed, 301 insertions, 167 deletions
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 80424cce..0a5c8e18 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 a14fc930..6d80860c 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 af54e10e..990eb5d5 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 164dbf9b..8055d30c 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 e5eda05e..fafffc72 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 02d41a2e..04b513e9 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 78731510..6953c464 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 2af7d3b0..e3819a53 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 45a7786c..5f414f44 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
}]
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 13:34:57 +0000