import React, { useState, useRef } from 'react'; import { DataGrid } from '@material-ui/data-grid'; import { useTheme } from '@material-ui/core/styles'; import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume, } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayout from './ReportLayout'; import { useAttributePreference } from '../common/preferences'; import { useTranslation } from '../LocalizationProvider'; const Filter = ({ setItems }) => { const inputElement = useRef(); const [data, setData] = useState({url: '', filename: ''}); 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 { // Copied from /web/app/view/ReportController.js (but without Ext) const disposition = response.headers.get('content-disposition'); const filename = disposition.slice(disposition.indexOf('=') + 1, disposition.length); const blob = new Blob([await response.blob()], { type: contentType }); if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE workaround window.navigator.msSaveBlob(blob, filename); } else { const url = window.URL || window.webkitURL; const downloadUrl = url.createObjectURL(blob); if (filename) { setData({url: downloadUrl, filename: filename}); setTimeout(() => { inputElement.current.click(); }, 100); } setTimeout(() => { url.revokeObjectURL(downloadUrl); }, 100); } } } } }; 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([]); console.log(items); 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', 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', 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, hide: true, valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t), }, { headerName: t('reportDuration'), field: 'duration', type: 'string', width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatHours(value, t), }, { 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 ( }> Math.random()} /> ); }; export default TripReportPage;