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, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; const ReportFilterForm = ({ setItems }) => { const handleSubmit = async (deviceId, from, to, mail, headers) => { 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'); if (contentType) { if (contentType === 'application/json') { setItems(await response.json()); } else { window.location.assign(window.URL.createObjectURL(await response.blob())); } } } } return ; }; const StopReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const [items, setItems] = useState([]); return ( {t('reportStartTime')} {t('positionOdometer')} {t('reportEndTime')} {t('reportDuration')} {t('reportEngineHours')} {t('reportSpentFuel')} {items.map((item) => ( {formatDate(item.startTime)} {formatDistance(item.startOdometer, distanceUnit)} {formatDate(item.endTime)} {formatHours(item.duration)} {formatHours(item.engineHours)} {formatVolume(item.spentFuel)} ))}
); }; export default StopReportPage;