aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2020-10-30 14:02:16 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2020-10-30 14:02:16 +0530
commitf75cf89d3b4bdb160b4cc7f0a938fe074aed7192 (patch)
tree3bddaca13e0f3aa132a22b8ad755b1b116ea72cc /modern/src/reports
parentdac214c3ac6066a6f23cf92807da89cc1a86c105 (diff)
downloadetbsa-traccar-web-f75cf89d3b4bdb160b4cc7f0a938fe074aed7192.tar.gz
etbsa-traccar-web-f75cf89d3b4bdb160b4cc7f0a938fe074aed7192.tar.bz2
etbsa-traccar-web-f75cf89d3b4bdb160b4cc7f0a938fe074aed7192.zip
Added Event report with Report Filter as a seperate component
Diffstat (limited to 'modern/src/reports')
-rw-r--r--modern/src/reports/EventReportPage.js95
-rw-r--r--modern/src/reports/ReportFilter.js119
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 0000000..acd6f63
--- /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 0000000..91fc9fa
--- /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;