import React, { useState } from 'react'; import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; import t from '../common/localization'; import { formatDistance, formatSpeed, formatHours, formatDate } 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, to }); const response = await fetch(`/api/reports/trips?${query.toString()}`, { headers: { Accept: 'application/json' } }); if (response.ok) { onResult(await response.json()); } } return ; } const TripReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const [items, setItems] = useState([]); return ( {t('reportStartTime')} {t('reportStartOdometer')} {t('reportEndTime')} {t('reportEndOdometer')} {t('sharedDistance')} {t('reportAverageSpeed')} {t('reportMaximumSpeed')} {t('reportDuration')} {items.map((item) => ( {formatDate(item.startTime)} {formatDistance(item.startOdometer, distanceUnit)} {formatDate(item.endTime)} {formatDistance(item.endOdometer, distanceUnit)} {formatDistance(item.distance, distanceUnit)} {formatSpeed(item.averageSpeed, speedUnit)} {formatSpeed(item.maxSpeed, speedUnit)} {formatHours(item.duration)} ))}
); } export default TripReportPage;