import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; import { useTheme } from '@material-ui/core/styles'; import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume, } from '../common/util/formatter'; import ReportFilter from './components/ReportFilter'; import { useAttributePreference } from '../common/util/preferences'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; const Filter = ({ setItems }) => { const handleSubmit = async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, mail, }); const response = await fetch(`/api/reports/trips?${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 TripReportPage = () => { const theme = useTheme(); const t = useTranslation(); const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const volumeUnit = useAttributePreference('volumeUnit'); const [items, setItems] = useState([]); const columns = [{ headerName: t('reportStartTime'), field: 'startTime', type: 'dateTime', width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportStartOdometer'), field: 'startOdometer', type: 'number', width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t), }, { headerName: t('reportStartAddress'), field: 'startAddress', type: 'string', hide: true, width: theme.dimensions.columnWidthString, }, { headerName: t('reportEndTime'), field: 'endTime', type: 'dateTime', width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportEndOdometer'), field: 'endOdometer', type: 'number', width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t), }, { headerName: t('reportEndAddress'), field: 'endAddress', type: 'string', hide: true, width: theme.dimensions.columnWidthString, }, { headerName: t('sharedDistance'), field: 'distance', type: 'number', width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t), }, { headerName: t('reportAverageSpeed'), field: 'averageSpeed', type: 'number', width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t), }, { headerName: t('reportMaximumSpeed'), field: 'maxSpeed', type: 'number', width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t), }, { headerName: t('reportDuration'), field: 'duration', type: 'string', width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', width: theme.dimensions.columnWidthNumber, hide: true, valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t), }, { headerName: t('sharedDriver'), field: 'driverName', type: 'string', width: theme.dimensions.columnWidthString, hide: true, }]; return ( } breadcrumbs={['reportTitle', 'reportTrips']}> Math.random()} /> ); }; export default TripReportPage;