import React, { useState, useRef } from 'react'; import { DataGrid } from '@material-ui/data-grid'; import { useTheme } from '@material-ui/core/styles'; import { formatDistance, 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/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 { // 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 StopReportPage = () => { const theme = useTheme(); const t = useTranslation(); const distanceUnit = useAttributePreference('distanceUnit'); 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('positionOdometer'), field: 'startOdometer', type: 'number', width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t), }, { headerName: t('reportEndTime'), field: 'endTime', type: 'dateTime', width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { 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('positionAddress'), field: 'address', type: 'string', width: theme.dimensions.columnWidthString, // valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t), }]; return ( }> Math.random()} /> ); }; export default StopReportPage;