import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; import { Grid, FormControl, InputLabel, Select, MenuItem, } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; import { useSelector } from 'react-redux'; import { formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayout from './ReportLayout'; import { prefixString } from '../common/stringUtils'; import t from '../common/localization'; const Filter = ({ setItems }) => { const [eventTypes, setEventTypes] = useState(['allEvents']); const handleSubmit = async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, mail, }); eventTypes.forEach((it) => query.append('type', it)); const response = await fetch(`/api/reports/events?${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 ( {t('reportEventTypes')} ); }; const EventReportPage = () => { const theme = useTheme(); const geofences = useSelector((state) => state.geofences.items); const [items, setItems] = useState([]); const formatGeofence = (value) => { if (value > 0) { const geofence = geofences[value]; return geofence ? geofence.name : ''; } return null; }; const columns = [{ headerName: t('positionFixTime'), field: 'serverTime', type: 'dateTime', width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('sharedType'), field: 'type', type: 'string', width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => t(prefixString('event', value)), }, { headerName: t('sharedGeofence'), field: 'geofenceId', width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatGeofence(value), }, { headerName: t('sharedMaintenance'), field: 'maintenanceId', type: 'number', width: theme.dimensions.columnWidthString, }]; return ( }> ); }; export default EventReportPage;