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 = ({ setItems }) => { const [daily, setDaily] = useState(false); const handleSubmit = async (deviceId, from, to, mail, headers) => { 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'); if (contentType) { if (contentType === 'application/json') { setItems(await response.json()); } else { window.location.assign(window.URL.createObjectURL(await response.blob())); } } } } return ( setDaily(e.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;