diff options
Diffstat (limited to 'modern/src/reports')
| -rw-r--r-- | modern/src/reports/EventReportPage.js | 95 | ||||
| -rw-r--r-- | modern/src/reports/ReportFilter.js | 119 |
2 files changed, 214 insertions, 0 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js new file mode 100644 index 00000000..acd6f637 --- /dev/null +++ b/modern/src/reports/EventReportPage.js @@ -0,0 +1,95 @@ +import React, { useState } from "react"; +import MainToolbar from "../MainToolbar"; +import { + Grid, + TableContainer, + Table, + TableRow, + TableCell, + TableHead, + TableBody, + Paper, + makeStyles, +} from "@material-ui/core"; +import t from "../common/localization"; +import { formatPosition } from "../common/formatter"; +import ReportFilter from "./ReportFilter"; + +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 EventReportPage = () => { + const classes = useStyles(); + const [data, setData] = useState([]); + + const handleSubmit = (deviceId, from, to) => { + const query = new URLSearchParams({ + deviceId, + from: from.toISOString(), + to: to.toISOString(), + }); + fetch(`/api/reports/events?${query.toString()}`, { + headers: { Accept: "application/json" }, + }).then((response) => { + if (response.ok) { + response.json().then(setData); + } + }); + }; + + return ( + <div className={classes.root}> + <MainToolbar /> + <div className={classes.content}> + <Grid container spacing={2}> + <Grid item xs={12} md={3} lg={2}> + <Paper className={classes.form}> + <ReportFilter handleSubmit={handleSubmit} /> + </Paper> + </Grid> + <Grid item xs={12} md={9} lg={10}> + <TableContainer component={Paper}> + <Table> + <TableHead> + <TableRow> + <TableCell>{t("positionFixTime")}</TableCell> + <TableCell>{t("sharedType")}</TableCell> + <TableCell>{t("sharedGeofence")}</TableCell> + <TableCell>{t("sharedMaintenance")}</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map((item) => ( + <TableRow key={item.id}> + <TableCell> + {formatPosition(item, "serverTime")} + </TableCell> + <TableCell>{item.type}</TableCell> + <TableCell>{}</TableCell> + <TableCell>{}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + </Grid> + </Grid> + </div> + </div> + ); +}; + +export default EventReportPage; diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js new file mode 100644 index 00000000..91fc9fa0 --- /dev/null +++ b/modern/src/reports/ReportFilter.js @@ -0,0 +1,119 @@ +import React, { useState } from "react"; +import { + FormControl, + InputLabel, + Select, + MenuItem, + Button, + TextField, +} from "@material-ui/core"; +import t from "../common/localization"; +import { useSelector } from "react-redux"; +import moment from "moment"; + +const ReportFilter = (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 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; + } + + props.handleSubmit(deviceId, selectedFrom, selectedTo); + }; + return ( + <> + <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> + </> + ); +}; + +export default ReportFilter; |