import React, { useState, useRef } from 'react';
import { DataGrid } from '@material-ui/data-grid';
import {
Grid, FormControl, InputLabel, Select, MenuItem, Typography
} 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 { useTranslation } from '../LocalizationProvider';
const Filter = ({ setItems }) => {
const t = useTranslation();
const inputElement = useRef();
const [data, setData] = useState({url: '', filename: ''});
const [eventTypes, setEventTypes] = useState([
'deviceOverspeed',
'deviceFuelDrop',
'commandResult',
'geofenceEnter',
'geofenceExit',
'ignitionOn',
'ignitionOff',
'maintenance',
]);
const renderSelectedEvents = (value) => {
return (
{t('sharedSelectedOptions', {0: value.length})}
);
}
const handleSubmit = async (deviceId, from, to, mail, headers) => {
let items = {};
const query = new URLSearchParams({
deviceId, from, to, mail,
});
/* fetch events */
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') {
items['events'] = 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;
}
}
}
/* fetch positions, but only if application/json */
const response2 = await fetch(`/api/reports/route?${query.toString()}`, { headers });
if (response2.ok) {
const contentType = response2.headers.get('content-type');
if (contentType) {
if (contentType === 'application/json') {
items['positions'] = await response2.json();
setItems(items);
}
}
}
};
return (
<>
{t('reportEventTypes')}
>
);
};
const EventReportPage = () => {
const theme = useTheme();
const t = useTranslation();
const geofences = useSelector((state) => state.geofences.items);
const [items, setItems] = useState({positions: [], events: []});
const formatGeofence = (value) => {
if (value > 0) {
const geofence = geofences[value];
return geofence ? geofence.name : '';
}
return '';
};
const formatAddress = (value) => {
if (value > 0) {
const position = items.positions.find(p => p.id === value);
return position && position.address ? position.address : '';
}
return '';
};
const columns = [{
headerName: t('positionFixTime'),
field: 'eventTime',
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',
hide: true,
width: theme.dimensions.columnWidthString,
}, {
headerName: t('positionAddress'),
field: 'positionId',
type: 'string',
width: theme.dimensions.columnWidthString,
valueFormatter: ({ value }) => formatAddress(value),
}];
return (
}>
);
};
export default EventReportPage;