diff options
| -rw-r--r-- | modern/src/reports/RouteReportPage.js | 110 |
1 files changed, 78 insertions, 32 deletions
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index c88da633..152d0ead 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -1,8 +1,10 @@ import React, { useState } from 'react'; import { - Table, TableBody, TableCell, TableHead, TableRow, + IconButton, Table, TableBody, TableCell, TableHead, TableRow, } from '@mui/material'; import { makeStyles } from '@mui/styles'; +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'; @@ -12,8 +14,23 @@ import PositionValue from '../common/components/PositionValue'; import ColumnSelect from './components/ColumnSelect'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; import { useCatch } from '../reactHelper'; +import Map from '../map/core/Map'; +import MapRoutePath from '../map/MapRoutePath'; +import MapPositions from '../map/MapPositions'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles((theme) => ({ + container: { + height: '100%', + display: 'flex', + flexDirection: 'column', + }, + containerMap: { + flexBasis: '40%', + flexShrink: 0, + }, + containerMain: { + overflow: 'auto', + }, header: { position: 'sticky', left: 0, @@ -21,6 +38,10 @@ const useStyles = makeStyles(() => ({ flexDirection: 'column', alignItems: 'stretch', }, + columnAction: { + width: '1%', + paddingLeft: theme.spacing(1), + }, })); const RouteReportPage = () => { @@ -31,6 +52,7 @@ const RouteReportPage = () => { const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']); const [items, setItems] = useState([]); + const [selectedItem, setSelectedItem] = useState(null); const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ @@ -53,37 +75,61 @@ const RouteReportPage = () => { return ( <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}> - <div className={classes.header}> - <ReportFilter handleSubmit={handleSubmit}> - <ColumnSelect - columns={columns} - setColumns={setColumns} - columnsObject={positionAttributes} - /> - </ReportFilter> - </div> - <Table> - <TableHead> - <TableRow> - {columns.map((key) => (<TableCell key={key}>{positionAttributes[key].name}</TableCell>))} - </TableRow> - </TableHead> - <TableBody> - {items.map((item) => ( - <TableRow key={item.id}> - {columns.map((key) => ( - <TableCell key={key}> - <PositionValue - position={item} - property={item.hasOwnProperty(key) ? key : null} - attribute={item.hasOwnProperty(key) ? null : key} - /> - </TableCell> + <div className={classes.container}> + {selectedItem && ( + <div className={classes.containerMap}> + <Map> + <MapRoutePath positions={items} /> + <MapPositions positions={[selectedItem]} /> + </Map> + </div> + )} + <div className={classes.containerMain}> + <div className={classes.header}> + <ReportFilter handleSubmit={handleSubmit}> + <ColumnSelect + columns={columns} + setColumns={setColumns} + columnsObject={positionAttributes} + /> + </ReportFilter> + </div> + <Table> + <TableHead> + <TableRow> + <TableCell className={classes.columnAction} /> + {columns.map((key) => (<TableCell key={key}>{positionAttributes[key].name}</TableCell>))} + </TableRow> + </TableHead> + <TableBody> + {items.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> + {columns.map((key) => ( + <TableCell key={key}> + <PositionValue + position={item} + property={item.hasOwnProperty(key) ? key : null} + attribute={item.hasOwnProperty(key) ? null : key} + /> + </TableCell> + ))} + </TableRow> ))} - </TableRow> - ))} - </TableBody> - </Table> + </TableBody> + </Table> + </div> + </div> </PageLayout> ); }; |