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 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 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 (
{t('reportDevice')} {t('reportPeriod')} {period === 'custom' && setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))} fullWidth /> } {period === 'custom' && setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))} fullWidth /> } {t('positionFixTime')} {t('positionLatitude')} {t('positionLongitude')} {t('positionSpeed')} {t('positionAddress')} {data.map((item) => ( {formatter(item, 'fixTime')} {formatter(item, 'latitude')} {formatter(item, 'longitude')} {formatter(item, 'speed')} {formatter(item, 'address')} ))}
); } export default RouteReportPage;