import React, { useState } from 'react'; import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, FormControlLabel, Checkbox } 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 [daily, setDaily] = useState(false); const handleSubmit = async (deviceId, from, to) => { const query = new URLSearchParams({ deviceId, from: from.toISOString(), to: to.toISOString(), daily }); const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers: { Accept: 'application/json' } }); if (response.ok) { onResult(await response.json()); } } return ( setDaily(event.target.checked)} />} label={t('reportDaily')} /> ); } const SummaryReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const [items, setItems] = useState([]); return ( {t('reportStartDate')} {t('sharedDistance')} {t('reportStartOdometer')} {t('reportEndOdometer')} {t('reportAverageSpeed')} {t('reportMaximumSpeed')} {t('reportEngineHours')} {t('reportSpentFuel')} {items.map((item) => ( {formatDate(item.startTime, 'YYYY-MM-DD')} {formatDistance(item.distance, distanceUnit)} {formatDistance(item.startOdometer, distanceUnit)} {formatDistance(item.endOdometer, distanceUnit)} {formatSpeed(item.averageSpeed, speedUnit)} {formatSpeed(item.maxSpeed, speedUnit)} {formatHours(item.engineHours)} {formatVolume(item.spentFuel)} ))}
); } export default SummaryReportPage;