aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/reports')
-rw-r--r--modern/src/reports/ChartReportPage.js69
-rw-r--r--modern/src/reports/EventReportPage.js39
-rw-r--r--modern/src/reports/Graph.js37
-rw-r--r--modern/src/reports/ReplayPage.js36
-rw-r--r--modern/src/reports/ReportFilter.js85
-rw-r--r--modern/src/reports/ReportLayout.js34
-rw-r--r--modern/src/reports/RouteReportPage.js24
-rw-r--r--modern/src/reports/StopReportPage.js33
-rw-r--r--modern/src/reports/SummaryReportPage.js38
-rw-r--r--modern/src/reports/TripReportPage.js33
10 files changed, 228 insertions, 200 deletions
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 8eeedc4b..c55ed6d5 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,5 +1,7 @@
import React, { useState } from 'react';
-import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import {
+ Grid, FormControl, InputLabel, Select, MenuItem,
+} from '@material-ui/core';
import ReportLayout from './ReportLayout';
import ReportFilter from './ReportFilter';
import Graph from './Graph';
@@ -9,66 +11,61 @@ import { speedFromKnots } from '../common/converter';
import t from '../common/localization';
const Filter = ({ children, setItems }) => {
-
const speedUnit = useAttributePreference('speedUnit');
const handleSubmit = async (deviceId, from, to, mail, headers) => {
- const query = new URLSearchParams({ deviceId, from, to, mail });
+ const query = new URLSearchParams({
+ deviceId, from, to, mail,
+ });
const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
if (response.ok) {
const positions = await response.json();
- let formattedPositions = positions.map(position => {
- return {
- speed: Number(speedFromKnots(position.speed, speedUnit)),
- altitude: position.altitude,
- accuracy: position.accuracy,
- fixTime: formatDate(position.fixTime)
- }
- });
+ const formattedPositions = positions.map((position) => ({
+ speed: Number(speedFromKnots(position.speed, speedUnit)),
+ altitude: position.altitude,
+ accuracy: position.accuracy,
+ fixTime: formatDate(position.fixTime),
+ }));
setItems(formattedPositions);
}
- }
+ };
return (
<>
<ReportFilter handleSubmit={handleSubmit} showOnly />
{children}
</>
- )
-}
-
-const ChartType = ({ type, setType }) => {
+ );
+};
- return (
- <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>
+const ChartType = ({ type, setType }) => (
+ <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>
+);
const ChartReportPage = () => {
-
const [items, setItems] = useState([]);
const [type, setType] = useState('speed');
return (
- <ReportLayout filter={
+ <ReportLayout filter={(
<Filter setItems={setItems}>
<ChartType type={type} setType={setType} />
</Filter>
- }>
+ )}
+ >
<Graph items={items} type={type} />
</ReportLayout>
- )
-}
+ );
+};
export default ChartReportPage;
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index b938dc85..b5c3daeb 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,7 +1,9 @@
import React, { useState } from 'react';
import { DataGrid } from '@material-ui/data-grid';
-import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import { useTheme } from "@material-ui/core/styles";
+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';
@@ -10,12 +12,13 @@ import { prefixString } from '../common/stringUtils';
import t from '../common/localization';
const Filter = ({ setItems }) => {
-
const [eventTypes, setEventTypes] = useState(['allEvents']);
const handleSubmit = async (deviceId, from, to, mail, headers) => {
- const query = new URLSearchParams({ deviceId, from, to, mail });
- eventTypes.forEach(it => query.append('type', it));
+ const query = new URLSearchParams({
+ deviceId, from, to, mail,
+ });
+ eventTypes.forEach((it) => query.append('type', it));
const response = await fetch(`/api/reports/events?${query.toString()}`, { headers });
if (response.ok) {
const contentType = response.headers.get('content-type');
@@ -34,7 +37,7 @@ const Filter = ({ setItems }) => {
<Grid item xs={12} sm={6}>
<FormControl variant="filled" fullWidth>
<InputLabel>{t('reportEventTypes')}</InputLabel>
- <Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
+ <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>
@@ -58,21 +61,20 @@ const Filter = ({ setItems }) => {
</Grid>
</ReportFilter>
);
-}
+};
const EventReportPage = () => {
-
const theme = useTheme();
- const geofences = useSelector(state => state.geofences.items);
+ const geofences = useSelector((state) => state.geofences.items);
const [items, setItems] = useState([]);
- const formatGeofence = value => {
+ const formatGeofence = (value) => {
if (value > 0) {
- const geofence = geofences[value];
- return geofence ? geofence.name : '';
+ const geofence = geofences[value];
+ return geofence ? geofence.name : '';
}
return null;
- }
+ };
const columns = [{
headerName: t('positionFixTime'),
@@ -101,12 +103,13 @@ const EventReportPage = () => {
return (
<ReportLayout filter={<Filter setItems={setItems} />}>
<DataGrid
- rows={items}
- columns={columns}
- hideFooter
- autoHeight />
+ rows={items}
+ columns={columns}
+ hideFooter
+ autoHeight
+ />
</ReportLayout>
);
-}
+};
export default EventReportPage;
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js
index 990eb5d5..63d24eee 100644
--- a/modern/src/reports/Graph.js
+++ b/modern/src/reports/Graph.js
@@ -1,9 +1,11 @@
import React from 'react';
import { withWidth } from '@material-ui/core';
-import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import {
+ LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+} from 'recharts';
-const CustomizedAxisTick = ({ x, y, payload }) =>{
- if(!payload.value) {
+const CustomizedAxisTick = ({ x, y, payload }) => {
+ if (!payload.value) {
return payload.value;
}
const parts = payload.value.split(' ');
@@ -13,22 +15,19 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{
<text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text>
</g>
);
-}
+};
-const Graph = ({ type, items }) => {
-
- return (
- <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>
- );
-}
+const Graph = ({ type, items }) => (
+ <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 withWidth()(Graph);
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index dfa99997..12bbd351 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -1,5 +1,7 @@
import React, { useState } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography } from '@material-ui/core';
+import {
+ Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography,
+} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import MainToolbar from '../MainToolbar';
import Map from '../map/Map';
@@ -9,7 +11,7 @@ import PositionsMap from '../map/PositionsMap';
import { formatPosition } from '../common/formatter';
import ReportFilter from './ReportFilter';
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
root: {
height: '100%',
display: 'flex',
@@ -31,13 +33,11 @@ const useStyles = makeStyles(theme => ({
},
}));
-const TimeLabel = ({ children, open, value }) => {
- return (
- <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
- {children}
- </Tooltip>
- );
-};
+const TimeLabel = ({ children, open, value }) => (
+ <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
+ {children}
+ </Tooltip>
+);
const ReplayPage = () => {
const classes = useStyles();
@@ -61,12 +61,12 @@ const ReplayPage = () => {
<MainToolbar />
<Map>
<ReplayPathMap positions={positions} />
- {index < positions.length &&
- <PositionsMap positions={[positions[index]]} />
- }
+ {index < positions.length
+ && <PositionsMap positions={[positions[index]]} />}
</Map>
<Container maxWidth="sm" className={classes.controlPanel}>
- {!!positions.length &&
+ {!!positions.length
+ && (
<Paper className={classes.controlContent}>
<Slider
max={positions.length - 1}
@@ -75,15 +75,15 @@ const ReplayPage = () => {
value={index}
onChange={(_, index) => setIndex(index)}
valueLabelDisplay="auto"
- valueLabelFormat={i => i < positions.length ? formatPosition(positions[i], 'fixTime') : ''}
+ valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime') : '')}
ValueLabelComponent={TimeLabel}
- />
+ />
</Paper>
- }
+ )}
<div>
<Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
- <Typography align='center'>
+ <Typography align="center">
{t('reportConfigure')}
</Typography>
</AccordionSummary>
@@ -95,6 +95,6 @@ const ReplayPage = () => {
</Container>
</div>
);
-}
+};
export default ReplayPage;
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 524f7bbf..dec8d018 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,11 +1,13 @@
import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
+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 }) => {
- const devices = useSelector(state => Object.values(state.devices.items));
+ const devices = useSelector((state) => Object.values(state.devices.items));
const [deviceId, setDeviceId] = useState();
const [period, setPeriod] = useState('today');
const [from, setFrom] = useState(moment().subtract(1, 'hour'));
@@ -51,9 +53,9 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
selectedFrom.toISOString(),
selectedTo.toISOString(),
mail,
- { Accept: accept }
+ { Accept: accept },
);
- }
+ };
return (
<Grid container spacing={2} justify="flex-end">
@@ -81,56 +83,69 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
</Select>
</FormControl>
</Grid>
- {period === 'custom' && <Grid item xs={12} sm={3}>
+ {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}>
+ 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>}
+ onChange={(e) => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+ fullWidth
+ />
+ </Grid>
+ )}
{children}
<Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}>
- <Button
+ <Button
onClick={() => handleClick(false, true)}
- variant='outlined'
- color='secondary'
- fullWidth>
+ variant="outlined"
+ color="secondary"
+ fullWidth
+ >
{t('reportShow')}
</Button>
</Grid>
- {!showOnly &&
+ {!showOnly
+ && (
<Grid item xs={4} sm={2}>
- <Button
- onClick={() => handleClick(false, false)}
- variant='outlined'
- color='secondary'
- fullWidth>
- {t('reportExport')}
- </Button>
- </Grid>}
- {!showOnly &&
+ <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>}
+ <Button
+ onClick={() => handleClick(true, false)}
+ variant="outlined"
+ color="secondary"
+ fullWidth
+ >
+ <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
+ </Button>
+ </Grid>
+ )}
</Grid>
);
-}
+};
export default ReportFilter;
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 5b543355..92ffc0c9 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -7,7 +7,7 @@ import {
Drawer,
makeStyles,
IconButton,
- Hidden
+ Hidden,
} from '@material-ui/core';
import TimelineIcon from '@material-ui/icons/Timeline';
import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
@@ -21,35 +21,35 @@ import SideNav from '../components/SideNav';
import NavBar from '../components/NavBar';
import t from '../common/localization';
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
- height: '100%'
+ height: '100%',
},
drawerContainer: {
- width: theme.dimensions.drawerWidthDesktop
+ width: theme.dimensions.drawerWidthDesktop,
},
drawer: {
width: theme.dimensions.drawerWidthDesktop,
[theme.breakpoints.down('md')]: {
- width: theme.dimensions.drawerWidthTablet
- }
+ width: theme.dimensions.drawerWidthTablet,
+ },
},
content: {
flex: 1,
- padding: theme.spacing(5, 3, 3, 3)
+ padding: theme.spacing(5, 3, 3, 3),
},
drawerHeader: {
...theme.mixins.toolbar,
display: 'flex',
alignItems: 'center',
- padding: theme.spacing(0, 1)
+ padding: theme.spacing(0, 1),
},
toolbar: {
[theme.breakpoints.down('md')]: {
- ...theme.mixins.toolbar
- }
- }
+ ...theme.mixins.toolbar,
+ },
+ },
}));
const routes = [
@@ -57,24 +57,24 @@ const routes = [
{
name: t('reportEvents'),
href: '/reports/event',
- icon: <NotificationsActiveIcon />
+ icon: <NotificationsActiveIcon />,
},
{
name: t('reportTrips'),
href: '/reports/trip',
- icon: <PlayCircleFilledIcon />
+ icon: <PlayCircleFilledIcon />,
},
{
name: t('reportStops'),
href: '/reports/stop',
- icon: <PauseCircleFilledIcon />
+ icon: <PauseCircleFilledIcon />,
},
{
name: t('reportSummary'),
href: '/reports/summary',
- icon: <FormatListBulletedIcon />
+ icon: <FormatListBulletedIcon />,
},
- { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> }
+ { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
];
const ReportLayout = ({ children, filter }) => {
@@ -85,7 +85,7 @@ const ReportLayout = ({ children, filter }) => {
const [reportTitle, setReportTitle] = useState();
useEffect(() => {
- routes.forEach(route => {
+ routes.forEach((route) => {
switch (location.pathname) {
case `${route.href}`:
setReportTitle(route.name);
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index c09d4f5c..fffcdcb5 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,17 +1,20 @@
import React, { useState } from 'react';
import { Paper } from '@material-ui/core';
import { DataGrid } from '@material-ui/data-grid';
-import { useTheme } from "@material-ui/core/styles";
-import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter';
+import { useTheme } from '@material-ui/core/styles';
+import {
+ formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate,
+} from '../common/formatter';
import ReportFilter from './ReportFilter';
import ReportLayout from './ReportLayout';
import { useAttributePreference, usePreference } from '../common/preferences';
import t from '../common/localization';
const Filter = ({ setItems }) => {
-
const handleSubmit = async (deviceId, from, to, mail, headers) => {
- const query = new URLSearchParams({ deviceId, from, to, mail });
+ const query = new URLSearchParams({
+ deviceId, from, to, mail,
+ });
const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
if (response.ok) {
const contentType = response.headers.get('content-type');
@@ -23,7 +26,7 @@ const Filter = ({ setItems }) => {
}
}
}
- }
+ };
return <ReportFilter handleSubmit={handleSubmit} />;
};
@@ -78,7 +81,7 @@ const RouteReportPage = () => {
width: theme.dimensions.columnWidthNumber,
valueGetter: ({ row }) => row.attributes.totalDistance,
valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
- }]
+ }];
const [items, setItems] = useState([]);
@@ -86,10 +89,11 @@ const RouteReportPage = () => {
<ReportLayout filter={<Filter setItems={setItems} />}>
<Paper>
<DataGrid
- rows={items}
- columns={columns}
- hideFooter
- autoHeight />
+ rows={items}
+ columns={columns}
+ hideFooter
+ autoHeight
+ />
</Paper>
</ReportLayout>
);
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 57f59564..d2e7e7ed 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -1,16 +1,19 @@
import React, { useState } from 'react';
import { DataGrid } from '@material-ui/data-grid';
-import { useTheme } from "@material-ui/core/styles";
-import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter';
+import { useTheme } from '@material-ui/core/styles';
+import {
+ formatDistance, formatHours, formatDate, formatVolume,
+} from '../common/formatter';
import ReportFilter from './ReportFilter';
import ReportLayout from './ReportLayout';
import { useAttributePreference } from '../common/preferences';
import t from '../common/localization';
const Filter = ({ setItems }) => {
-
const handleSubmit = async (deviceId, from, to, mail, headers) => {
- const query = new URLSearchParams({ deviceId, from, to, mail });
+ const query = new URLSearchParams({
+ deviceId, from, to, mail,
+ });
const response = await fetch(`/api/reports/stops?${query.toString()}`, { headers });
if (response.ok) {
const contentType = response.headers.get('content-type');
@@ -22,13 +25,12 @@ const Filter = ({ setItems }) => {
}
}
}
- }
+ };
return <ReportFilter handleSubmit={handleSubmit} />;
};
const StopReportPage = () => {
-
const theme = useTheme();
const distanceUnit = useAttributePreference('distanceUnit');
@@ -41,7 +43,7 @@ const StopReportPage = () => {
field: 'startTime',
type: 'dateTime',
width: theme.dimensions.columnWidthDate,
- valueFormatter: ({ value }) => formatDate(value),
+ valueFormatter: ({ value }) => formatDate(value),
}, {
headerName: t('positionOdometer'),
field: 'startOdometer',
@@ -53,7 +55,7 @@ const StopReportPage = () => {
field: 'address',
type: 'string',
hide: true,
- width: theme.dimensions.columnWidthString,
+ width: theme.dimensions.columnWidthString,
}, {
headerName: t('reportEndTime'),
field: 'endTime',
@@ -78,17 +80,18 @@ const StopReportPage = () => {
type: 'number',
width: theme.dimensions.columnWidthNumber,
hide: true,
- valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
- }]
-
+ valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+ }];
+
return (
<ReportLayout filter={<Filter setItems={setItems} />}>
<DataGrid
- rows={items}
- columns={columns}
- hideFooter
+ rows={items}
+ columns={columns}
+ hideFooter
autoHeight
- getRowId={() => Math.random()} />
+ getRowId={() => Math.random()}
+ />
</ReportLayout>
);
};
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 53e697d0..4523e652 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,19 +1,22 @@
import React, { useState } from 'react';
import { DataGrid } from '@material-ui/data-grid';
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 { useTheme } from '@material-ui/core/styles';
+import {
+ formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
+} from '../common/formatter';
import ReportFilter from './ReportFilter';
import ReportLayout from './ReportLayout';
import { useAttributePreference } from '../common/preferences';
import t from '../common/localization';
const Filter = ({ setItems }) => {
-
const [daily, setDaily] = useState(false);
const handleSubmit = async (deviceId, from, to, mail, headers) => {
- const query = new URLSearchParams({ deviceId, from, to, daily, mail });
+ const query = new URLSearchParams({
+ deviceId, from, to, daily, mail,
+ });
const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers });
if (response.ok) {
const contentType = response.headers.get('content-type');
@@ -25,21 +28,21 @@ const Filter = ({ setItems }) => {
}
}
}
- }
+ };
return (
<ReportFilter handleSubmit={handleSubmit}>
<Grid item xs={12} sm={6}>
<FormControlLabel
- control={<Checkbox checked={daily} onChange={e => setDaily(e.target.checked)} />}
- label={t('reportDaily')} />
+ control={<Checkbox checked={daily} onChange={(e) => setDaily(e.target.checked)} />}
+ label={t('reportDaily')}
+ />
</Grid>
</ReportFilter>
);
-}
+};
const SummaryReportPage = () => {
-
const theme = useTheme();
const distanceUnit = useAttributePreference('distanceUnit');
@@ -96,19 +99,20 @@ const SummaryReportPage = () => {
type: 'number',
width: theme.dimensions.columnWidthNumber,
hide: true,
- valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
- }]
-
+ valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+ }];
+
return (
<ReportLayout filter={<Filter setItems={setItems} />}>
<DataGrid
- rows={items}
- columns={columns}
- hideFooter
+ rows={items}
+ columns={columns}
+ hideFooter
autoHeight
- getRowId={() => Math.random()} />
+ getRowId={() => Math.random()}
+ />
</ReportLayout>
);
-}
+};
export default SummaryReportPage;
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index e8c91295..f611dde1 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -1,16 +1,19 @@
import React, { useState } from 'react';
import { DataGrid } from '@material-ui/data-grid';
-import { useTheme } from "@material-ui/core/styles";
-import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter';
+import { useTheme } from '@material-ui/core/styles';
+import {
+ formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
+} from '../common/formatter';
import ReportFilter from './ReportFilter';
import ReportLayout from './ReportLayout';
import { useAttributePreference } from '../common/preferences';
import t from '../common/localization';
const Filter = ({ setItems }) => {
-
const handleSubmit = async (deviceId, from, to, mail, headers) => {
- const query = new URLSearchParams({ deviceId, from, to, mail });
+ const query = new URLSearchParams({
+ deviceId, from, to, mail,
+ });
const response = await fetch(`/api/reports/trips?${query.toString()}`, { headers });
if (response.ok) {
const contentType = response.headers.get('content-type');
@@ -22,15 +25,14 @@ const Filter = ({ setItems }) => {
}
}
}
- }
+ };
return <ReportFilter handleSubmit={handleSubmit} />;
-}
+};
const TripReportPage = () => {
-
const theme = useTheme();
-
+
const distanceUnit = useAttributePreference('distanceUnit');
const speedUnit = useAttributePreference('speedUnit');
const volumeUnit = useAttributePreference('volumeUnit');
@@ -109,19 +111,20 @@ const TripReportPage = () => {
field: 'driverName',
type: 'string',
width: theme.dimensions.columnWidthString,
- hide: true
- }]
+ hide: true,
+ }];
return (
<ReportLayout filter={<Filter setItems={setItems} />}>
<DataGrid
- rows={items}
- columns={columns}
- hideFooter
+ rows={items}
+ columns={columns}
+ hideFooter
autoHeight
- getRowId={() => Math.random()} />
+ getRowId={() => Math.random()}
+ />
</ReportLayout>
);
-}
+};
export default TripReportPage;
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 16:45:21 +0000