diff options
Diffstat (limited to 'modern/src/reports/RouteReportPage.js')
| -rw-r--r-- | modern/src/reports/RouteReportPage.js | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js new file mode 100644 index 00000000..eb0ccc55 --- /dev/null +++ b/modern/src/reports/RouteReportPage.js @@ -0,0 +1,168 @@ +import React, { useState } from 'react'; +import MainToobar from '../MainToolbar'; +import { useHistory } from 'react-router-dom'; +import { Grid, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, makeStyles, FormControl, InputLabel, Select, MenuItem, Button, TextField } from '@material-ui/core'; +import t from '../common/localization'; +import { useSelector } from 'react-redux'; +import moment from 'moment'; +import formatter from '../common/formatter'; + +const useStyles = makeStyles(theme => ({ + root: { + height: '100%', + display: 'flex', + flexDirection: 'column', + }, + content: { + flex: 1, + overflow: 'auto', + padding: theme.spacing(2), + }, + form: { + padding: theme.spacing(1, 2, 2), + }, +})); + +const RouteReportPage = () => { + const history = useHistory(); + const classes = useStyles(); + const devices = useSelector(state => Object.values(state.devices.items)); + const [deviceId, setDeviceId] = useState(); + const [period, setPeriod] = useState('today'); + const [from, setFrom] = useState(moment().subtract(1, 'hour')); + const [to, setTo] = useState(moment()); + const [data, setData] = useState([]); + + const handleShow = () => { + let selectedFrom; + let selectedTo; + switch (period) { + case 'today': + selectedFrom = moment().startOf('day'); + selectedTo = moment().endOf('day'); + break; + case 'yesterday': + selectedFrom = moment().subtract(1, 'day').startOf('day'); + selectedTo = moment().subtract(1, 'day').endOf('day'); + break; + case 'thisWeek': + selectedFrom = moment().startOf('week'); + selectedTo = moment().endOf('week'); + break; + case 'previousWeek': + selectedFrom = moment().subtract(1, 'week').startOf('week'); + selectedTo = moment().subtract(1, 'week').endOf('week'); + break; + case 'thisMonth': + selectedFrom = moment().startOf('month'); + selectedTo = moment().endOf('month'); + break; + case 'previousMonth': + selectedFrom = moment().subtract(1, 'month').startOf('month'); + selectedTo = moment().subtract(1, 'month').endOf('month'); + break; + default: + selectedFrom = from; + selectedTo = to; + break; + } + const query = new URLSearchParams({ + deviceId, + from: selectedFrom.toISOString(), + to: selectedTo.toISOString(), + }); + fetch(`/api/reports/route?${query.toString()}`, { headers: { 'Accept': 'application/json' } }) + .then(response => { + if (response.ok) { + response.json().then(setData); + } + }); + } + + return ( + <div className={classes.root}> + <MainToobar history={history} /> + <div className={classes.content}> + <Grid container spacing={2}> + <Grid item xs={12} md={3} lg={2}> + <Paper className={classes.form}> + <FormControl variant='filled' margin='normal' fullWidth> + <InputLabel>{t('reportDevice')}</InputLabel> + <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}> + {devices.map((device) => ( + <MenuItem value={device.id}>{device.name}</MenuItem> + ))} + </Select> + </FormControl> + <FormControl variant='filled' margin='normal' fullWidth> + <InputLabel>{t('reportPeriod')}</InputLabel> + <Select value={period} onChange={(e) => setPeriod(e.target.value)}> + <MenuItem value='today'>{t('reportToday')}</MenuItem> + <MenuItem value='yesterday'>{t('reportYesterday')}</MenuItem> + <MenuItem value='thisWeek'>{t('reportThisWeek')}</MenuItem> + <MenuItem value='previousWeek'>{t('reportPreviousWeek')}</MenuItem> + <MenuItem value='thisMonth'>{t('reportThisMonth')}</MenuItem> + <MenuItem value='previousMonth'>{t('reportPreviousMonth')}</MenuItem> + <MenuItem value='custom'>{t('reportCustom')}</MenuItem> + </Select> + </FormControl> + {period === 'custom' && + <TextField + margin='normal' + variant='filled' + label={t('reportFrom')} + type='datetime-local' + value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)} + onChange={(e) => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))} + fullWidth /> + } + {period === 'custom' && + <TextField + margin='normal' + variant='filled' + label={t('reportTo')} + type='datetime-local' + value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)} + onChange={(e) => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))} + fullWidth /> + } + <FormControl margin='normal' fullWidth> + <Button type='button' color='primary' variant='contained' disabled={!deviceId} onClick={handleShow}> + {t('reportShow')} + </Button> + </FormControl> + </Paper> + </Grid> + <Grid item xs={12} md={9} lg={10}> + <TableContainer component={Paper}> + <Table> + <TableHead> + <TableRow> + <TableCell>{t('positionFixTime')}</TableCell> + <TableCell>{t('positionLatitude')}</TableCell> + <TableCell>{t('positionLongitude')}</TableCell> + <TableCell>{t('positionSpeed')}</TableCell> + <TableCell>{t('positionAddress')}</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map((item) => ( + <TableRow key={item.id}> + <TableCell>{formatter(item, 'fixTime')}</TableCell> + <TableCell>{formatter(item, 'latitude')}</TableCell> + <TableCell>{formatter(item, 'longitude')}</TableCell> + <TableCell>{formatter(item, 'speed')}</TableCell> + <TableCell>{formatter(item, 'address')}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + </Grid> + </Grid> + </div> + </div> + ); +} + +export default RouteReportPage; |