aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/reports/DailySummaryReportPage.js68
-rw-r--r--modern/src/reports/EventReportPage.js9
-rw-r--r--modern/src/reports/ReportFilter.js16
-rw-r--r--modern/src/reports/ReportLayoutPage.js6
4 files changed, 12 insertions, 87 deletions
diff --git a/modern/src/reports/DailySummaryReportPage.js b/modern/src/reports/DailySummaryReportPage.js
deleted file mode 100644
index c628a9bc..00000000
--- a/modern/src/reports/DailySummaryReportPage.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useState } from 'react';
-import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core';
-import t from '../common/localization';
-import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
-import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
-import { useAttributePreference } from '../common/preferences';
-
-const ReportFilterForm = ({ onResult }) => {
-
- const handleSubmit = async (deviceId, from, to) => {
- const query = new URLSearchParams({
- deviceId,
- from: from.toISOString(),
- to: to.toISOString(),
- daily: true
- });
- const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers: { Accept: 'application/json' } });
- if (response.ok) {
- onResult(await response.json());
- }
- }
- return <ReportFilter handleSubmit={handleSubmit} />;
-}
-
-const DailySummaryReportPage = () => {
-
- const distanceUnit = useAttributePreference('distanceUnit');
- const speedUnit = useAttributePreference('speedUnit');
- const [items, setItems] = useState([]);
-
- return (
- <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}>
- <TableContainer component={Paper}>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('reportStartDate')}</TableCell>
- <TableCell>{t('sharedDistance')}</TableCell>
- <TableCell>{t('reportStartOdometer')}</TableCell>
- <TableCell>{t('reportEndOdometer')}</TableCell>
- <TableCell>{t('reportAverageSpeed')}</TableCell>
- <TableCell>{t('reportMaximumSpeed')}</TableCell>
- <TableCell>{t('reportEngineHours')}</TableCell>
- <TableCell>{t('reportSpentFuel')}</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{formatDate(item.startTime, 'YYYY-MM-DD')}</TableCell>
- <TableCell>{formatDistance(item.distance, distanceUnit)}</TableCell>
- <TableCell>{formatDistance(item.startOdometer, distanceUnit)}</TableCell>
- <TableCell>{formatDistance(item.endOdometer, distanceUnit)}</TableCell>
- <TableCell>{formatSpeed(item.averageSpeed, speedUnit)}</TableCell>
- <TableCell>{formatSpeed(item.maxSpeed, speedUnit)}</TableCell>
- <TableCell>{formatHours(item.engineHours)}</TableCell>
- <TableCell>{formatVolume(item.spentFuel)}</TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
- </ReportLayoutPage>
- );
-}
-
-export default DailySummaryReportPage;
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index e9bca4ef..3e12af98 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -21,11 +21,12 @@ const ReportFilterForm = ({ onResult }) => {
onResult(await response.json());
}
}
+
return (
<ReportFilter handleSubmit={handleSubmit}>
<FormControl variant="filled" margin="normal" fullWidth>
<InputLabel>{t('reportEventTypes')}</InputLabel>
- <Select value={eventType} onChange={(e) => setEventType(e.target.value)} multiple>
+ <Select value={eventType} onChange={e => setEventType(e.target.value)} multiple>
<MenuItem value="allEvents">{t('eventAll')}</MenuItem>
<MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem>
<MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem>
@@ -66,11 +67,9 @@ const EventReportPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {items.map(item => (
<TableRow key={item.id}>
- <TableCell>
- {formatPosition(item, 'serverTime')}
- </TableCell>
+ <TableCell>{formatPosition(item, 'serverTime')}</TableCell>
<TableCell>{item.type}</TableCell>
<TableCell>{}</TableCell>
<TableCell>{}</TableCell>
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 0d3223ff..8fc5ca70 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -4,7 +4,7 @@ import t from '../common/localization';
import { useSelector } from 'react-redux';
import moment from 'moment';
-const ReportFilter = (props) => {
+const ReportFilter = ({ children, handleSubmit }) => {
const devices = useSelector((state) => Object.values(state.devices.items));
const [deviceId, setDeviceId] = useState();
const [period, setPeriod] = useState('today');
@@ -45,7 +45,7 @@ const ReportFilter = (props) => {
break;
}
- props.handleSubmit(deviceId, selectedFrom, selectedTo);
+ handleSubmit(deviceId, selectedFrom, selectedTo);
}
return (
@@ -58,9 +58,6 @@ const ReportFilter = (props) => {
))}
</Select>
</FormControl>
-
- {props.children}
-
<FormControl variant="filled" margin="normal" fullWidth>
<InputLabel>{t('reportPeriod')}</InputLabel>
<Select value={period} onChange={(e) => setPeriod(e.target.value)}>
@@ -80,9 +77,7 @@ const ReportFilter = (props) => {
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))
- }
+ onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
fullWidth />
)}
{period === 'custom' && (
@@ -92,11 +87,10 @@ const ReportFilter = (props) => {
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))
- }
+ onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
fullWidth />
)}
+ {children}
<FormControl margin="normal" fullWidth>
<Button type="button" color="primary" variant="contained" disabled={!deviceId} onClick={handleShow}>
{t('reportShow')}
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 57a2cefd..296b7c66 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
import { Grid, Paper, makeStyles } from '@material-ui/core';
import MainToolbar from '../MainToolbar';
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
},
}));
-const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, ...rest }) => {
+const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, children }) => {
const classes = useStyles();
const onResult = (data) => {
@@ -35,7 +35,7 @@ const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, ...rest
</Paper>
</Grid>
<Grid item xs={12} md={9} lg={10}>
- {rest.children}
+ {children}
</Grid>
</Grid>
</div>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 13:43:01 +0000