import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { Table, TableBody, TableCell, TableHead, TableRow, } from '@mui/material'; import ReportFilter from './components/ReportFilter'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import { useCatch } from '../reactHelper'; import MapView from '../map/core/MapView'; import MapRoutePath from '../map/MapRoutePath'; import useReportStyles from './common/useReportStyles'; import TableShimmer from '../common/components/TableShimmer'; import MapCamera from '../map/MapCamera'; import MapGeofence from '../map/MapGeofence'; import { formatTime } from '../common/util/formatter'; import { usePreference } from '../common/util/preferences'; import { prefixString } from '../common/util/stringUtils'; import MapMarkers from '../map/MapMarkers'; const CombinedReportPage = () => { const classes = useReportStyles(); const t = useTranslation(); const devices = useSelector((state) => state.devices.items); const hours12 = usePreference('twelveHourFormat'); const [items, setItems] = useState([]); const [loading, setLoading] = useState(false); const createMarkers = () => items.flatMap((item) => item.events.map((event) => { const position = item.positions.find((p) => event.positionId === p.id); return { latitude: position.latitude, longitude: position.longitude, }; })); const handleSubmit = useCatch(async ({ deviceIds, groupIds, from, to }) => { const query = new URLSearchParams({ from, to }); deviceIds.forEach((deviceId) => query.append('deviceId', deviceId)); groupIds.forEach((groupId) => query.append('groupId', groupId)); setLoading(true); try { const response = await fetch(`/api/reports/combined?${query.toString()}`); if (response.ok) { setItems(await response.json()); } else { throw Error(await response.text()); } } finally { setLoading(false); } }); return ( } breadcrumbs={['reportTitle', 'reportRoute']}>
{Boolean(items.length) && (
{items.map((item) => ( ))} item.route)} />
)}
{t('sharedDevice')} {t('positionFixTime')} {t('sharedType')} {!loading ? items.flatMap((item) => item.events.map((event, index) => ( {index ? '' : devices[item.deviceId].name} {formatTime(event.eventTime, 'seconds', hours12)} {t(prefixString('event', event.type))} ))) : ()}
); }; export default CombinedReportPage;