diff options
Diffstat (limited to 'modern/src/reports/RouteReportPage.jsx')
| -rw-r--r-- | modern/src/reports/RouteReportPage.jsx | 173 |
1 files changed, 0 insertions, 173 deletions
diff --git a/modern/src/reports/RouteReportPage.jsx b/modern/src/reports/RouteReportPage.jsx deleted file mode 100644 index 5003ff31..00000000 --- a/modern/src/reports/RouteReportPage.jsx +++ /dev/null @@ -1,173 +0,0 @@ -import React, { Fragment, useCallback, useState } from 'react'; -import { useSelector } from 'react-redux'; -import { useNavigate } from 'react-router-dom'; -import { - IconButton, Table, TableBody, TableCell, TableHead, TableRow, -} from '@mui/material'; -import GpsFixedIcon from '@mui/icons-material/GpsFixed'; -import LocationSearchingIcon from '@mui/icons-material/LocationSearching'; -import ReportFilter from './components/ReportFilter'; -import { useTranslation } from '../common/components/LocalizationProvider'; -import PageLayout from '../common/components/PageLayout'; -import ReportsMenu from './components/ReportsMenu'; -import PositionValue from '../common/components/PositionValue'; -import ColumnSelect from './components/ColumnSelect'; -import usePositionAttributes from '../common/attributes/usePositionAttributes'; -import { useCatch } from '../reactHelper'; -import MapView from '../map/core/MapView'; -import MapRoutePath from '../map/MapRoutePath'; -import MapRoutePoints from '../map/MapRoutePoints'; -import MapPositions from '../map/MapPositions'; -import useReportStyles from './common/useReportStyles'; -import TableShimmer from '../common/components/TableShimmer'; -import MapCamera from '../map/MapCamera'; -import MapGeofence from '../map/MapGeofence'; -import scheduleReport from './common/scheduleReport'; - -const RouteReportPage = () => { - const navigate = useNavigate(); - const classes = useReportStyles(); - const t = useTranslation(); - - const positionAttributes = usePositionAttributes(t); - - const devices = useSelector((state) => state.devices.items); - - const [available, setAvailable] = useState([]); - const [columns, setColumns] = useState(['fixTime', 'latitude', 'longitude', 'speed', 'address']); - const [items, setItems] = useState([]); - const [loading, setLoading] = useState(false); - const [selectedItem, setSelectedItem] = useState(null); - - const onMapPointClick = useCallback((positionId) => { - setSelectedItem(items.find((it) => it.id === positionId)); - }, [items, setSelectedItem]); - - const handleSubmit = useCatch(async ({ deviceIds, from, to, type }) => { - const query = new URLSearchParams({ from, to }); - deviceIds.forEach((deviceId) => query.append('deviceId', deviceId)); - if (type === 'export') { - window.location.assign(`/api/reports/route/xlsx?${query.toString()}`); - } else if (type === 'mail') { - const response = await fetch(`/api/reports/route/mail?${query.toString()}`); - if (!response.ok) { - throw Error(await response.text()); - } - } else { - setLoading(true); - try { - const response = await fetch(`/api/reports/route?${query.toString()}`, { - headers: { Accept: 'application/json' }, - }); - if (response.ok) { - const data = await response.json(); - const keySet = new Set(); - const keyList = []; - data.forEach((position) => { - Object.keys(position).forEach((it) => keySet.add(it)); - Object.keys(position.attributes).forEach((it) => keySet.add(it)); - }); - ['id', 'deviceId', 'outdated', 'network', 'attributes'].forEach((key) => keySet.delete(key)); - Object.keys(positionAttributes).forEach((key) => { - if (keySet.has(key)) { - keyList.push(key); - keySet.delete(key); - } - }); - setAvailable([...keyList, ...keySet].map((key) => [key, positionAttributes[key]?.name || key])); - setItems(data); - } else { - throw Error(await response.text()); - } - } finally { - setLoading(false); - } - } - }); - - const handleSchedule = useCatch(async (deviceIds, groupIds, report) => { - report.type = 'route'; - const error = await scheduleReport(deviceIds, groupIds, report); - if (error) { - throw Error(error); - } else { - navigate('/reports/scheduled'); - } - }); - - return ( - <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}> - <div className={classes.container}> - {selectedItem && ( - <div className={classes.containerMap}> - <MapView> - <MapGeofence /> - {[...new Set(items.map((it) => it.deviceId))].map((deviceId) => { - const positions = items.filter((position) => position.deviceId === deviceId); - return ( - <Fragment key={deviceId}> - <MapRoutePath positions={positions} /> - <MapRoutePoints positions={positions} onClick={onMapPointClick} /> - </Fragment> - ); - })} - <MapPositions positions={[selectedItem]} titleField="fixTime" /> - </MapView> - <MapCamera positions={items} /> - </div> - )} - <div className={classes.containerMain}> - <div className={classes.header}> - <ReportFilter handleSubmit={handleSubmit} handleSchedule={handleSchedule} multiDevice> - <ColumnSelect - columns={columns} - setColumns={setColumns} - columnsArray={available} - rawValues - disabled={!items.length} - /> - </ReportFilter> - </div> - <Table> - <TableHead> - <TableRow> - <TableCell className={classes.columnAction} /> - <TableCell>{t('sharedDevice')}</TableCell> - {columns.map((key) => (<TableCell key={key}>{positionAttributes[key]?.name || key}</TableCell>))} - </TableRow> - </TableHead> - <TableBody> - {!loading ? items.slice(0, 4000).map((item) => ( - <TableRow key={item.id}> - <TableCell className={classes.columnAction} padding="none"> - {selectedItem === item ? ( - <IconButton size="small" onClick={() => setSelectedItem(null)}> - <GpsFixedIcon fontSize="small" /> - </IconButton> - ) : ( - <IconButton size="small" onClick={() => setSelectedItem(item)}> - <LocationSearchingIcon fontSize="small" /> - </IconButton> - )} - </TableCell> - <TableCell>{devices[item.deviceId].name}</TableCell> - {columns.map((key) => ( - <TableCell key={key}> - <PositionValue - position={item} - property={item.hasOwnProperty(key) ? key : null} - attribute={item.hasOwnProperty(key) ? null : key} - /> - </TableCell> - ))} - </TableRow> - )) : (<TableShimmer columns={columns.length + 2} startAction />)} - </TableBody> - </Table> - </div> - </div> - </PageLayout> - ); -}; - -export default RouteReportPage; |