diff options
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/reports/EventReportPage.js | 6 | ||||
-rw-r--r-- | modern/src/reports/ReportFilter.js | 33 | ||||
-rw-r--r-- | modern/src/reports/RouteReportPage.js | 105 |
3 files changed, 46 insertions, 98 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index fce9597f..6aaf4c55 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -25,13 +25,13 @@ const EventReportPage = () => { const classes = useStyles(); const [data, setData] = useState([]); - const handleSubmit = async (deviceId, from, to) => { + const handleSubmit = async (deviceId, from, to, type) => { const query = new URLSearchParams({ deviceId, from: from.toISOString(), to: to.toISOString(), }); - + type.map(t=>query.append('type',t)); const response = await fetch(`/api/reports/events?${query.toString()}`, { headers: { Accept: 'application/json' } }) if(response.ok) { @@ -47,7 +47,7 @@ const EventReportPage = () => { <Grid container spacing={2}> <Grid item xs={12} md={3} lg={2}> <Paper className={classes.form}> - <ReportFilter handleSubmit={handleSubmit} /> + <ReportFilter reportType='event' handleSubmit={handleSubmit} /> </Paper> </Grid> <Grid item xs={12} md={9} lg={10}> diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index be48413b..032b1976 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -5,11 +5,13 @@ import { useSelector } from 'react-redux'; import moment from 'moment'; const ReportFilter = (props) => { + const { reportType } = props; 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 [eventType, setEventType] = useState(['allEvents']); const handleShow = () => { let selectedFrom; @@ -45,8 +47,10 @@ const ReportFilter = (props) => { break; } - props.handleSubmit(deviceId, selectedFrom, selectedTo); - + if(reportType && reportType === 'event') + props.handleSubmit(deviceId, selectedFrom, selectedTo, eventType); + else + props.handleSubmit(deviceId, selectedFrom, selectedTo); } return ( @@ -59,6 +63,31 @@ const ReportFilter = (props) => { ))} </Select> </FormControl> + {reportType && reportType === 'event' && ( + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('reportEventTypes')}</InputLabel> + <Select value={eventType} onChange={(e) => setEventType(e.target.value)} multiple> + <MenuItem value="allEvents">{t('eventAll')}</MenuItem> + <MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem> + <MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem> + <MenuItem value="deviceOffline">{t('eventDeviceOffline')}</MenuItem> + <MenuItem value="deviceInactive">{t('eventDeviceInactive')}</MenuItem> + <MenuItem value="deviceMoving">{t('eventDeviceMoving')}</MenuItem> + <MenuItem value="deviceStopped">{t('eventDeviceStopped')}</MenuItem> + <MenuItem value="deviceOverspeed">{t('eventDeviceOverspeed')}</MenuItem> + <MenuItem value="deviceFuelDrop">{t('eventDeviceFuelDrop')}</MenuItem> + <MenuItem value="commandResult">{t('eventCommandResult')}</MenuItem> + <MenuItem value="geofenceEnter">{t('eventGeofenceEnter')}</MenuItem> + <MenuItem value="geofenceExit">{t('eventGeofenceExit')}</MenuItem> + <MenuItem value="alarm">{t('eventAlarm')}</MenuItem> + <MenuItem value="ignitionOn">{t('eventIgnitionOn')}</MenuItem> + <MenuItem value="ignitionOff">{t('eventIgnitionOff')}</MenuItem> + <MenuItem value="maintenance">{t('eventMaintenance')}</MenuItem> + <MenuItem value="textMessage">{t('eventTextMessage')}</MenuItem> + <MenuItem value="driverChanged">{t('eventDriverChanged')}</MenuItem> + </Select> + </FormControl> + )} <FormControl variant="filled" margin="normal" fullWidth> <InputLabel>{t('reportPeriod')}</InputLabel> <Select value={period} onChange={(e) => setPeriod(e.target.value)}> diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 5e577838..7d34c177 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -2,9 +2,8 @@ import React, { useState } from 'react'; import MainToolbar from '../MainToolbar'; 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 { formatPosition } from '../common/formatter'; +import ReportFilter from './ReportFilter'; const useStyles = makeStyles(theme => ({ root: { @@ -24,57 +23,21 @@ const useStyles = makeStyles(theme => ({ const RouteReportPage = () => { 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 handleSubmit = async (deviceId, from, to) => { const query = new URLSearchParams({ deviceId, - from: selectedFrom.toISOString(), - to: selectedTo.toISOString(), + from: from.toISOString(), + to: to.toISOString(), }); - fetch(`/api/reports/route?${query.toString()}`, { headers: { 'Accept': 'application/json' } }) - .then(response => { - if (response.ok) { - response.json().then(setData); - } - }); + + const response = await fetch(`/api/reports/route?${query.toString()}`, { headers: { Accept: 'application/json' } }) + + if(response.ok) { + const data = await response.json(); + setData(data); + } } return ( @@ -84,51 +47,7 @@ const RouteReportPage = () => { <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> + <ReportFilter handleSubmit={handleSubmit} /> </Paper> </Grid> <Grid item xs={12} md={9} lg={10}> |