diff options
Diffstat (limited to 'modern/src/reports/TripReportPage.jsx')
| -rw-r--r-- | modern/src/reports/TripReportPage.jsx | 216 |
1 files changed, 0 insertions, 216 deletions
diff --git a/modern/src/reports/TripReportPage.jsx b/modern/src/reports/TripReportPage.jsx deleted file mode 100644 index 897ee506..00000000 --- a/modern/src/reports/TripReportPage.jsx +++ /dev/null @@ -1,216 +0,0 @@ -import React, { useState } from 'react'; -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 { - formatDistance, formatSpeed, formatVolume, formatTime, formatNumericHours, -} from '../common/util/formatter'; -import ReportFilter from './components/ReportFilter'; -import { useAttributePreference, usePreference } from '../common/util/preferences'; -import { useTranslation } from '../common/components/LocalizationProvider'; -import PageLayout from '../common/components/PageLayout'; -import ReportsMenu from './components/ReportsMenu'; -import ColumnSelect from './components/ColumnSelect'; -import usePersistedState from '../common/util/usePersistedState'; -import { useCatch, useEffectAsync } from '../reactHelper'; -import useReportStyles from './common/useReportStyles'; -import MapView from '../map/core/MapView'; -import MapRoutePath from '../map/MapRoutePath'; -import AddressValue from '../common/components/AddressValue'; -import TableShimmer from '../common/components/TableShimmer'; -import MapMarkers from '../map/MapMarkers'; -import MapCamera from '../map/MapCamera'; -import MapGeofence from '../map/MapGeofence'; -import scheduleReport from './common/scheduleReport'; - -const columnsArray = [ - ['startTime', 'reportStartTime'], - ['startOdometer', 'reportStartOdometer'], - ['startAddress', 'reportStartAddress'], - ['endTime', 'reportEndTime'], - ['endOdometer', 'reportEndOdometer'], - ['endAddress', 'reportEndAddress'], - ['distance', 'sharedDistance'], - ['averageSpeed', 'reportAverageSpeed'], - ['maxSpeed', 'reportMaximumSpeed'], - ['duration', 'reportDuration'], - ['spentFuel', 'reportSpentFuel'], - ['driverName', 'sharedDriver'], -]; -const columnsMap = new Map(columnsArray); - -const TripReportPage = () => { - const navigate = useNavigate(); - const classes = useReportStyles(); - const t = useTranslation(); - - const distanceUnit = useAttributePreference('distanceUnit'); - const speedUnit = useAttributePreference('speedUnit'); - const volumeUnit = useAttributePreference('volumeUnit'); - const hours12 = usePreference('twelveHourFormat'); - - const [columns, setColumns] = usePersistedState('tripColumns', ['startTime', 'endTime', 'distance', 'averageSpeed']); - const [items, setItems] = useState([]); - const [loading, setLoading] = useState(false); - const [selectedItem, setSelectedItem] = useState(null); - const [route, setRoute] = useState(null); - - const createMarkers = () => ([ - { - latitude: selectedItem.startLat, - longitude: selectedItem.startLon, - image: 'default-error', - }, - { - latitude: selectedItem.endLat, - longitude: selectedItem.endLon, - image: 'default-success', - }, - ]); - - useEffectAsync(async () => { - if (selectedItem) { - const query = new URLSearchParams({ - deviceId: selectedItem.deviceId, - from: selectedItem.startTime, - to: selectedItem.endTime, - }); - const response = await fetch(`/api/reports/route?${query.toString()}`, { - headers: { - Accept: 'application/json', - }, - }); - if (response.ok) { - setRoute(await response.json()); - } else { - throw Error(await response.text()); - } - } else { - setRoute(null); - } - }, [selectedItem]); - - const handleSubmit = useCatch(async ({ deviceId, from, to, type }) => { - const query = new URLSearchParams({ deviceId, from, to }); - if (type === 'export') { - window.location.assign(`/api/reports/trips/xlsx?${query.toString()}`); - } else if (type === 'mail') { - const response = await fetch(`/api/reports/trips/mail?${query.toString()}`); - if (!response.ok) { - throw Error(await response.text()); - } - } else { - setLoading(true); - try { - const response = await fetch(`/api/reports/trips?${query.toString()}`, { - headers: { Accept: 'application/json' }, - }); - if (response.ok) { - setItems(await response.json()); - } else { - throw Error(await response.text()); - } - } finally { - setLoading(false); - } - } - }); - - const handleSchedule = useCatch(async (deviceIds, groupIds, report) => { - report.type = 'trips'; - const error = await scheduleReport(deviceIds, groupIds, report); - if (error) { - throw Error(error); - } else { - navigate('/reports/scheduled'); - } - }); - - const formatValue = (item, key) => { - switch (key) { - case 'startTime': - case 'endTime': - return formatTime(item[key], 'minutes', hours12); - case 'startOdometer': - case 'endOdometer': - case 'distance': - return formatDistance(item[key], distanceUnit, t); - case 'averageSpeed': - case 'maxSpeed': - return formatSpeed(item[key], speedUnit, t); - case 'duration': - return formatNumericHours(item[key], t); - case 'spentFuel': - return formatVolume(item[key], volumeUnit, t); - case 'startAddress': - return (<AddressValue latitude={item.startLat} longitude={item.startLon} originalAddress={item[key]} />); - case 'endAddress': - return (<AddressValue latitude={item.endLat} longitude={item.endLon} originalAddress={item[key]} />); - default: - return item[key]; - } - }; - - return ( - <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportTrips']}> - <div className={classes.container}> - {selectedItem && ( - <div className={classes.containerMap}> - <MapView> - <MapGeofence /> - {route && ( - <> - <MapRoutePath positions={route} /> - <MapMarkers markers={createMarkers()} /> - <MapCamera positions={route} /> - </> - )} - </MapView> - </div> - )} - <div className={classes.containerMain}> - <div className={classes.header}> - <ReportFilter handleSubmit={handleSubmit} handleSchedule={handleSchedule}> - <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} /> - </ReportFilter> - </div> - <Table> - <TableHead> - <TableRow> - <TableCell className={classes.columnAction} /> - {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))} - </TableRow> - </TableHead> - <TableBody> - {!loading ? items.map((item) => ( - <TableRow key={item.startPositionId}> - <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> - {columns.map((key) => ( - <TableCell key={key}> - {formatValue(item, key)} - </TableCell> - ))} - </TableRow> - )) : (<TableShimmer columns={columns.length + 1} startAction />)} - </TableBody> - </Table> - </div> - </div> - </PageLayout> - ); -}; - -export default TripReportPage; |