From f75cf89d3b4bdb160b4cc7f0a938fe074aed7192 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 30 Oct 2020 14:02:16 +0530 Subject: Added Event report with Report Filter as a seperate component --- modern/src/App.js | 68 +++++++------ modern/src/MainToolbar.js | 176 +++++++++++++++++----------------- modern/src/reports/EventReportPage.js | 95 ++++++++++++++++++ modern/src/reports/ReportFilter.js | 119 +++++++++++++++++++++++ 4 files changed, 343 insertions(+), 115 deletions(-) create mode 100644 modern/src/reports/EventReportPage.js create mode 100644 modern/src/reports/ReportFilter.js (limited to 'modern') diff --git a/modern/src/App.js b/modern/src/App.js index 1f6b55a4..a173a500 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,19 +1,20 @@ -import React from 'react'; -import { Switch, Route } from 'react-router-dom' -import CssBaseline from '@material-ui/core/CssBaseline'; -import MainPage from './MainPage'; -import LoginPage from './LoginPage'; -import RouteReportPage from './reports/RouteReportPage'; -import ServerPage from './admin/ServerPage'; -import UsersPage from './admin/UsersPage'; -import DevicePage from './DevicePage'; -import UserPage from './UserPage'; -import SocketController from './SocketController'; -import NotificationsPage from './settings/NotificationsPage'; -import NotificationPage from './settings/NotificationPage'; -import GroupsPage from './settings/GroupsPage'; -import GroupPage from './settings/GroupPage'; -import PositionPage from './PositionPage'; +import React from "react"; +import { Switch, Route } from "react-router-dom"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import MainPage from "./MainPage"; +import LoginPage from "./LoginPage"; +import RouteReportPage from "./reports/RouteReportPage"; +import EventReportPage from "./reports/EventReportPage"; +import ServerPage from "./admin/ServerPage"; +import UsersPage from "./admin/UsersPage"; +import DevicePage from "./DevicePage"; +import UserPage from "./UserPage"; +import SocketController from "./SocketController"; +import NotificationsPage from "./settings/NotificationsPage"; +import NotificationPage from "./settings/NotificationPage"; +import GroupsPage from "./settings/GroupsPage"; +import GroupPage from "./settings/GroupPage"; +import PositionPage from "./PositionPage"; const App = () => { return ( @@ -21,21 +22,30 @@ const App = () => { - - - - - - - - - - - - + + + + + + + + + + + + + ); -} +}; export default App; diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 374c694c..46d46496 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -1,45 +1,45 @@ -import React, { useState } from 'react'; -import { useHistory } from 'react-router-dom'; -import { makeStyles } from '@material-ui/core/styles'; -import { useDispatch, useSelector } from 'react-redux'; -import { sessionActions } from './store'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; -import Button from '@material-ui/core/Button'; -import IconButton from '@material-ui/core/IconButton'; -import MenuIcon from '@material-ui/icons/Menu'; -import Drawer from '@material-ui/core/Drawer'; -import List from '@material-ui/core/List'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import Divider from '@material-ui/core/Divider'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import MapIcon from '@material-ui/icons/Map'; -import BarChartIcon from '@material-ui/icons/BarChart'; -import PeopleIcon from '@material-ui/icons/People'; -import StorageIcon from '@material-ui/icons/Storage'; -import PersonIcon from '@material-ui/icons/Person'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import TimelineIcon from '@material-ui/icons/Timeline'; -import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; -import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; -import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; -import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; -import TrendingUpIcon from '@material-ui/icons/TrendingUp'; -import FolderIcon from '@material-ui/icons/Folder'; -import t from './common/localization'; +import React, { useState } from "react"; +import { useHistory } from "react-router-dom"; +import { makeStyles } from "@material-ui/core/styles"; +import { useDispatch, useSelector } from "react-redux"; +import { sessionActions } from "./store"; +import AppBar from "@material-ui/core/AppBar"; +import Toolbar from "@material-ui/core/Toolbar"; +import Typography from "@material-ui/core/Typography"; +import Button from "@material-ui/core/Button"; +import IconButton from "@material-ui/core/IconButton"; +import MenuIcon from "@material-ui/icons/Menu"; +import Drawer from "@material-ui/core/Drawer"; +import List from "@material-ui/core/List"; +import ListSubheader from "@material-ui/core/ListSubheader"; +import Divider from "@material-ui/core/Divider"; +import ListItem from "@material-ui/core/ListItem"; +import ListItemIcon from "@material-ui/core/ListItemIcon"; +import ListItemText from "@material-ui/core/ListItemText"; +import MapIcon from "@material-ui/icons/Map"; +import BarChartIcon from "@material-ui/icons/BarChart"; +import PeopleIcon from "@material-ui/icons/People"; +import StorageIcon from "@material-ui/icons/Storage"; +import PersonIcon from "@material-ui/icons/Person"; +import NotificationsIcon from "@material-ui/icons/Notifications"; +import TimelineIcon from "@material-ui/icons/Timeline"; +import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled"; +import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled"; +import NotificationsActiveIcon from "@material-ui/icons/NotificationsActive"; +import FormatListBulletedIcon from "@material-ui/icons/FormatListBulleted"; +import TrendingUpIcon from "@material-ui/icons/TrendingUp"; +import FolderIcon from "@material-ui/icons/Folder"; +import t from "./common/localization"; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ flex: { - flexGrow: 1 + flexGrow: 1, }, appBar: { zIndex: theme.zIndex.drawer + 1, }, list: { - width: 250 + width: 250, }, menuButton: { marginLeft: -12, @@ -52,19 +52,27 @@ const MainToolbar = () => { const [drawer, setDrawer] = useState(false); const classes = useStyles(); const history = useHistory(); - const adminEnabled = useSelector(state => state.session.user && state.session.user.administrator); - const userId = useSelector(state => state.session.user && state.session.user.id); + const adminEnabled = useSelector( + (state) => state.session.user && state.session.user.administrator + ); + const userId = useSelector( + (state) => state.session.user && state.session.user.id + ); - const openDrawer = () => { setDrawer(true) } - const closeDrawer = () => { setDrawer(false) } + const openDrawer = () => { + setDrawer(true); + }; + const closeDrawer = () => { + setDrawer(false); + }; const handleLogout = async () => { - const response = await fetch('/api/session', { method: 'DELETE' }); + const response = await fetch("/api/session", { method: "DELETE" }); if (response.ok) { dispatch(sessionActions.updateUser(null)); - history.push('/login'); + history.push("/login"); } - } + }; return ( <> @@ -73,13 +81,16 @@ const MainToolbar = () => { + onClick={openDrawer} + > Traccar - - + + @@ -88,111 +99,104 @@ const MainToolbar = () => { className={classes.list} role="button" onClick={closeDrawer} - onKeyDown={closeDrawer}> + onKeyDown={closeDrawer} + > - history.push('/')}> + history.push("/")}> - + - - {t('reportTitle')} - - }> - history.push('/reports/route')}> + {t("reportTitle")}}> + history.push("/reports/route")}> - + - + history.push("/reports/event")}> - + - + - + - + - + - - {t('settingsTitle')} - - }> - history.push(`/user/${userId}`)}> + {t("settingsTitle")}}> + history.push(`/user/${userId}`)} + > - + - history.push('/settings/notifications')}> + history.push("/settings/notifications")} + > - + - history.push('/settings/groups')}> + history.push("/settings/groups")}> - + {adminEnabled && ( <> - - {t('userAdmin')} - - }> - history.push('/admin/server')}> + {t("userAdmin")}}> + history.push("/admin/server")}> - + - history.push('/admin/users')}> + history.push("/admin/users")}> - + - + @@ -201,6 +205,6 @@ const MainToolbar = () => { ); -} +}; export default MainToolbar; 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 ( +
+ +
+ + + + + + + + + + + + {t("positionFixTime")} + {t("sharedType")} + {t("sharedGeofence")} + {t("sharedMaintenance")} + + + + {data.map((item) => ( + + + {formatPosition(item, "serverTime")} + + {item.type} + {} + {} + + ))} + +
+ + + +
+
+ ); +}; + +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 ( + <> + + {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 + /> + )} + + + + + ); +}; + +export default ReportFilter; -- cgit v1.2.3 From 71892bfca5c4c7fe6d691aaf84baaae54c335939 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Sat, 31 Oct 2020 16:32:54 +0530 Subject: Changed code style from double quotes to single quotes --- modern/src/App.js | 34 +++++----- modern/src/MainToolbar.js | 116 +++++++++++++++++----------------- modern/src/reports/EventReportPage.js | 32 +++++----- modern/src/reports/ReportFilter.js | 78 +++++++++++------------ 4 files changed, 130 insertions(+), 130 deletions(-) (limited to 'modern') diff --git a/modern/src/App.js b/modern/src/App.js index a173a500..edfaa55b 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,20 +1,20 @@ -import React from "react"; -import { Switch, Route } from "react-router-dom"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import MainPage from "./MainPage"; -import LoginPage from "./LoginPage"; -import RouteReportPage from "./reports/RouteReportPage"; -import EventReportPage from "./reports/EventReportPage"; -import ServerPage from "./admin/ServerPage"; -import UsersPage from "./admin/UsersPage"; -import DevicePage from "./DevicePage"; -import UserPage from "./UserPage"; -import SocketController from "./SocketController"; -import NotificationsPage from "./settings/NotificationsPage"; -import NotificationPage from "./settings/NotificationPage"; -import GroupsPage from "./settings/GroupsPage"; -import GroupPage from "./settings/GroupPage"; -import PositionPage from "./PositionPage"; +import React from 'react'; +import { Switch, Route } from 'react-router-dom'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import MainPage from './MainPage'; +import LoginPage from './LoginPage'; +import RouteReportPage from './reports/RouteReportPage'; +import ServerPage from './admin/ServerPage'; +import UsersPage from './admin/UsersPage'; +import DevicePage from './DevicePage'; +import UserPage from './UserPage'; +import SocketController from './SocketController'; +import NotificationsPage from './settings/NotificationsPage'; +import NotificationPage from './settings/NotificationPage'; +import GroupsPage from './settings/GroupsPage'; +import GroupPage from './settings/GroupPage'; +import PositionPage from './PositionPage'; +import EventReportPage from './reports/EventReportPage'; const App = () => { return ( diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 46d46496..7cca74ff 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -1,35 +1,35 @@ -import React, { useState } from "react"; -import { useHistory } from "react-router-dom"; -import { makeStyles } from "@material-ui/core/styles"; -import { useDispatch, useSelector } from "react-redux"; -import { sessionActions } from "./store"; -import AppBar from "@material-ui/core/AppBar"; -import Toolbar from "@material-ui/core/Toolbar"; -import Typography from "@material-ui/core/Typography"; -import Button from "@material-ui/core/Button"; -import IconButton from "@material-ui/core/IconButton"; -import MenuIcon from "@material-ui/icons/Menu"; -import Drawer from "@material-ui/core/Drawer"; -import List from "@material-ui/core/List"; -import ListSubheader from "@material-ui/core/ListSubheader"; -import Divider from "@material-ui/core/Divider"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemIcon from "@material-ui/core/ListItemIcon"; -import ListItemText from "@material-ui/core/ListItemText"; -import MapIcon from "@material-ui/icons/Map"; -import BarChartIcon from "@material-ui/icons/BarChart"; -import PeopleIcon from "@material-ui/icons/People"; -import StorageIcon from "@material-ui/icons/Storage"; -import PersonIcon from "@material-ui/icons/Person"; -import NotificationsIcon from "@material-ui/icons/Notifications"; -import TimelineIcon from "@material-ui/icons/Timeline"; -import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled"; -import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled"; -import NotificationsActiveIcon from "@material-ui/icons/NotificationsActive"; -import FormatListBulletedIcon from "@material-ui/icons/FormatListBulleted"; -import TrendingUpIcon from "@material-ui/icons/TrendingUp"; -import FolderIcon from "@material-ui/icons/Folder"; -import t from "./common/localization"; +import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; +import { makeStyles } from '@material-ui/core/styles'; +import { useDispatch, useSelector } from 'react-redux'; +import { sessionActions } from './store'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import Drawer from '@material-ui/core/Drawer'; +import List from '@material-ui/core/List'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Divider from '@material-ui/core/Divider'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import MapIcon from '@material-ui/icons/Map'; +import BarChartIcon from '@material-ui/icons/BarChart'; +import PeopleIcon from '@material-ui/icons/People'; +import StorageIcon from '@material-ui/icons/Storage'; +import PersonIcon from '@material-ui/icons/Person'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import TimelineIcon from '@material-ui/icons/Timeline'; +import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; +import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; +import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; +import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; +import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import FolderIcon from '@material-ui/icons/Folder'; +import t from './common/localization'; const useStyles = makeStyles((theme) => ({ flex: { @@ -67,10 +67,10 @@ const MainToolbar = () => { }; const handleLogout = async () => { - const response = await fetch("/api/session", { method: "DELETE" }); + const response = await fetch('/api/session', { method: 'DELETE' }); if (response.ok) { dispatch(sessionActions.updateUser(null)); - history.push("/login"); + history.push('/login'); } }; @@ -89,7 +89,7 @@ const MainToolbar = () => { Traccar @@ -102,54 +102,54 @@ const MainToolbar = () => { onKeyDown={closeDrawer} > - history.push("/")}> + history.push('/')}> - + - {t("reportTitle")}}> - history.push("/reports/route")}> + {t('reportTitle')}}> + history.push('/reports/route')}> - + - history.push("/reports/event")}> + history.push('/reports/event')}> - + - + - + - + - + - {t("settingsTitle")}}> + {t('settingsTitle')}}> { - + history.push("/settings/notifications")} + onClick={() => history.push('/settings/notifications')} > - + - history.push("/settings/groups")}> + history.push('/settings/groups')}> - + {adminEnabled && ( <> - {t("userAdmin")}}> - history.push("/admin/server")}> + {t('userAdmin')}}> + history.push('/admin/server')}> - + - history.push("/admin/users")}> + history.push('/admin/users')}> - + - + diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index acd6f637..0a451c13 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,5 +1,5 @@ -import React, { useState } from "react"; -import MainToolbar from "../MainToolbar"; +import React, { useState } from 'react'; +import MainToolbar from '../MainToolbar'; import { Grid, TableContainer, @@ -10,20 +10,20 @@ import { TableBody, Paper, makeStyles, -} from "@material-ui/core"; -import t from "../common/localization"; -import { formatPosition } from "../common/formatter"; -import ReportFilter from "./ReportFilter"; +} 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", + height: '100%', + display: 'flex', + flexDirection: 'column', }, content: { flex: 1, - overflow: "auto", + overflow: 'auto', padding: theme.spacing(2), }, form: { @@ -42,7 +42,7 @@ const EventReportPage = () => { to: to.toISOString(), }); fetch(`/api/reports/events?${query.toString()}`, { - headers: { Accept: "application/json" }, + headers: { Accept: 'application/json' }, }).then((response) => { if (response.ok) { response.json().then(setData); @@ -65,17 +65,17 @@ const EventReportPage = () => { - {t("positionFixTime")} - {t("sharedType")} - {t("sharedGeofence")} - {t("sharedMaintenance")} + {t('positionFixTime')} + {t('sharedType')} + {t('sharedGeofence')} + {t('sharedMaintenance')} {data.map((item) => ( - {formatPosition(item, "serverTime")} + {formatPosition(item, 'serverTime')} {item.type} {} diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 91fc9fa0..55f73e36 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState } from 'react'; import { FormControl, InputLabel, @@ -6,44 +6,44 @@ import { MenuItem, Button, TextField, -} from "@material-ui/core"; -import t from "../common/localization"; -import { useSelector } from "react-redux"; -import moment from "moment"; +} 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 [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"); + 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"); + 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"); + 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"); + 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"); + 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"); + case 'previousMonth': + selectedFrom = moment().subtract(1, 'month').startOf('month'); + selectedTo = moment().subtract(1, 'month').endOf('month'); break; default: selectedFrom = from; @@ -56,7 +56,7 @@ const ReportFilter = (props) => { return ( <> - {t("reportDevice")} + {t('reportDevice')} - {t("reportPeriod")} + {t('reportPeriod')} - {period === "custom" && ( + {period === 'custom' && ( @@ -88,11 +88,11 @@ const ReportFilter = (props) => { fullWidth /> )} - {period === "custom" && ( + {period === 'custom' && ( @@ -109,7 +109,7 @@ const ReportFilter = (props) => { disabled={!deviceId} onClick={handleShow} > - {t("reportShow")} + {t('reportShow')} -- cgit v1.2.3 From 8c167d82b75b764d3b12845aae7827550607a148 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Sun, 1 Nov 2020 18:46:06 +0530 Subject: Revert all the code formatting applied by vscode --- modern/src/App.js | 38 ++++++++----------- modern/src/MainToolbar.js | 70 +++++++++++++++++------------------ modern/src/reports/EventReportPage.js | 28 +++++--------- modern/src/reports/ReportFilter.js | 19 ++++------ 4 files changed, 65 insertions(+), 90 deletions(-) (limited to 'modern') diff --git a/modern/src/App.js b/modern/src/App.js index edfaa55b..6ea74297 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Switch, Route } from 'react-router-dom'; +import { Switch, Route } from 'react-router-dom' import CssBaseline from '@material-ui/core/CssBaseline'; import MainPage from './MainPage'; import LoginPage from './LoginPage'; @@ -22,30 +22,22 @@ const App = () => { - - - - - - - - - - - - - + + + + + + + + + + + + + ); -}; +} export default App; diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 7cca74ff..897fd37e 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -31,15 +31,15 @@ import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import FolderIcon from '@material-ui/icons/Folder'; import t from './common/localization'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ flex: { - flexGrow: 1, + flexGrow: 1 }, appBar: { zIndex: theme.zIndex.drawer + 1, }, list: { - width: 250, + width: 250 }, menuButton: { marginLeft: -12, @@ -52,19 +52,11 @@ const MainToolbar = () => { const [drawer, setDrawer] = useState(false); const classes = useStyles(); const history = useHistory(); - const adminEnabled = useSelector( - (state) => state.session.user && state.session.user.administrator - ); - const userId = useSelector( - (state) => state.session.user && state.session.user.id - ); + const adminEnabled = useSelector(state => state.session.user && state.session.user.administrator); + const userId = useSelector(state => state.session.user && state.session.user.id); - const openDrawer = () => { - setDrawer(true); - }; - const closeDrawer = () => { - setDrawer(false); - }; + const openDrawer = () => { setDrawer(true) } + const closeDrawer = () => { setDrawer(false) } const handleLogout = async () => { const response = await fetch('/api/session', { method: 'DELETE' }); @@ -72,7 +64,7 @@ const MainToolbar = () => { dispatch(sessionActions.updateUser(null)); history.push('/login'); } - }; + } return ( <> @@ -81,16 +73,13 @@ const MainToolbar = () => { + onClick={openDrawer}> Traccar - - + + @@ -99,8 +88,7 @@ const MainToolbar = () => { className={classes.list} role="button" onClick={closeDrawer} - onKeyDown={closeDrawer} - > + onKeyDown={closeDrawer}> history.push('/')}> @@ -110,7 +98,12 @@ const MainToolbar = () => { - {t('reportTitle')}}> + + {t('reportTitle')} + + }> history.push('/reports/route')}> @@ -149,21 +142,19 @@ const MainToolbar = () => { - {t('settingsTitle')}}> - history.push(`/user/${userId}`)} - > + + {t('settingsTitle')} + + }> + history.push(`/user/${userId}`)}> - history.push('/settings/notifications')} - > + history.push('/settings/notifications')}> @@ -179,7 +170,12 @@ const MainToolbar = () => { {adminEnabled && ( <> - {t('userAdmin')}}> + + {t('userAdmin')} + + }> history.push('/admin/server')}> @@ -205,6 +201,6 @@ const MainToolbar = () => { ); -}; +} export default MainToolbar; diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 0a451c13..4134de3d 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,21 +1,11 @@ import React, { useState } from 'react'; import MainToolbar from '../MainToolbar'; -import { - Grid, - TableContainer, - Table, - TableRow, - TableCell, - TableHead, - TableBody, - Paper, - makeStyles, -} from '@material-ui/core'; +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) => ({ +const useStyles = makeStyles(theme => ({ root: { height: '100%', display: 'flex', @@ -41,14 +31,14 @@ const EventReportPage = () => { 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); + + fetch(`/api/reports/events?${query.toString()}`, { headers: { Accept: 'application/json' } }) + .then((response) => { + if (response.ok) { + response.json().then(setData); } }); - }; + } return (
@@ -90,6 +80,6 @@ const EventReportPage = () => {
); -}; +} export default EventReportPage; diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 55f73e36..6f248048 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -1,12 +1,5 @@ import React, { useState } from 'react'; -import { - FormControl, - InputLabel, - Select, - MenuItem, - Button, - TextField, -} from '@material-ui/core'; +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'; @@ -17,6 +10,7 @@ const ReportFilter = (props) => { const [period, setPeriod] = useState('today'); const [from, setFrom] = useState(moment().subtract(1, 'hour')); const [to, setTo] = useState(moment()); + const handleShow = () => { let selectedFrom; let selectedTo; @@ -52,7 +46,9 @@ const ReportFilter = (props) => { } props.handleSubmit(deviceId, selectedFrom, selectedTo); - }; + + } + return ( <> @@ -114,6 +110,7 @@ const ReportFilter = (props) => { ); -}; + +} -export default ReportFilter; +export default ReportFilter; \ No newline at end of file -- cgit v1.2.3 From 3780cf9986947e409ffccd9e7a06d9554ce3cdcf Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Mon, 2 Nov 2020 18:29:47 +0530 Subject: Code formatting changes and use of async/await --- modern/src/reports/EventReportPage.js | 14 +++++++------- modern/src/reports/ReportFilter.js | 17 ++++------------- 2 files changed, 11 insertions(+), 20 deletions(-) (limited to 'modern') diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 4134de3d..fce9597f 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -25,19 +25,19 @@ const EventReportPage = () => { const classes = useStyles(); const [data, setData] = useState([]); - const handleSubmit = (deviceId, from, to) => { + const handleSubmit = async (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); - } - }); + const response = await fetch(`/api/reports/events?${query.toString()}`, { headers: { Accept: 'application/json' } }) + + if(response.ok) { + const data = await response.json(); + setData(data); + } } return ( diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 6f248048..be48413b 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -81,8 +81,7 @@ const ReportFilter = (props) => { onChange={(e) => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL)) } - fullWidth - /> + fullWidth /> )} {period === 'custom' && ( { onChange={(e) => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL)) } - fullWidth - /> + fullWidth /> )} - ); - } -export default ReportFilter; \ No newline at end of file +export default ReportFilter; -- cgit v1.2.3 From b217a08d311a7c21e88594894c01651c31cbf18e Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Thu, 5 Nov 2020 17:04:13 +0530 Subject: adding custome field to Report Filter on the basis of report type --- modern/src/reports/EventReportPage.js | 6 +- modern/src/reports/ReportFilter.js | 33 ++++++++++- modern/src/reports/RouteReportPage.js | 105 ++++------------------------------ 3 files changed, 46 insertions(+), 98 deletions(-) (limited to 'modern') 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 = () => { - + 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) => { ))} + {reportType && reportType === 'event' && ( + + {t('reportEventTypes')} + + + )} {t('reportPeriod')} setDeviceId(e.target.value)}> - {devices.map((device) => ( - {device.name} - ))} - - - - {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 /> - } - - - + -- cgit v1.2.3 From d706803b28ffba0e07de48292a732526ed9d34bd Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 6 Nov 2020 17:09:50 +0530 Subject: Changes EcventReportPage and ReportFilter to include custom fields --- modern/.env | 2 +- modern/src/reports/EventReportPage.js | 32 +++++++++++++++++++++++++++++--- modern/src/reports/ReportFilter.js | 34 ++++------------------------------ 3 files changed, 34 insertions(+), 34 deletions(-) (limited to 'modern') diff --git a/modern/.env b/modern/.env index 69efd744..a3ae7639 100644 --- a/modern/.env +++ b/modern/.env @@ -1,2 +1,2 @@ SKIP_PREFLIGHT_CHECK=true -REACT_APP_URL_NAME='localhost:8082' +REACT_APP_URL_NAME='13.235.202.9:8082' diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 6aaf4c55..fb037597 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import MainToolbar from '../MainToolbar'; import { Grid, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, makeStyles } from '@material-ui/core'; +import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; import t from '../common/localization'; import { formatPosition } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -24,14 +25,15 @@ const useStyles = makeStyles(theme => ({ const EventReportPage = () => { const classes = useStyles(); const [data, setData] = useState([]); + const [eventType, setEventType] = useState(['allEvents']); - const handleSubmit = async (deviceId, from, to, type) => { + const handleSubmit = async (deviceId, from, to) => { const query = new URLSearchParams({ deviceId, from: from.toISOString(), to: to.toISOString(), }); - type.map(t=>query.append('type',t)); + eventType.map(t=>query.append('type',t)); const response = await fetch(`/api/reports/events?${query.toString()}`, { headers: { Accept: 'application/json' } }) if(response.ok) { @@ -47,7 +49,31 @@ const EventReportPage = () => { - + + + {t('reportEventTypes')} + + + diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 032b1976..6fe6a529 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -11,7 +11,6 @@ const ReportFilter = (props) => { 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; @@ -47,10 +46,7 @@ const ReportFilter = (props) => { break; } - if(reportType && reportType === 'event') - props.handleSubmit(deviceId, selectedFrom, selectedTo, eventType); - else - props.handleSubmit(deviceId, selectedFrom, selectedTo); + props.handleSubmit(deviceId, selectedFrom, selectedTo); } return ( @@ -63,31 +59,9 @@ const ReportFilter = (props) => { ))} - {reportType && reportType === 'event' && ( - - {t('reportEventTypes')} - - - )} + + {props.children} + {t('reportPeriod')} setEventType(e.target.value)} multiple> + {t('eventAll')} + {t('eventDeviceOnline')} + {t('eventDeviceUnknown')} + {t('eventDeviceOffline')} + {t('eventDeviceInactive')} + {t('eventDeviceMoving')} + {t('eventDeviceStopped')} + {t('eventDeviceOverspeed')} + {t('eventDeviceFuelDrop')} + {t('eventCommandResult')} + {t('eventGeofenceEnter')} + {t('eventGeofenceExit')} + {t('eventAlarm')} + {t('eventIgnitionOn')} + {t('eventIgnitionOff')} + {t('eventMaintenance')} + {t('eventTextMessage')} + {t('eventDriverChanged')} + + + + ); + } + + const ReportListView = ({items}) => { - if(response.ok) { - const data = await response.json(); - setData(data); - } + return ( + +
+ + + {t('positionFixTime')} + {t('sharedType')} + {t('sharedGeofence')} + {t('sharedMaintenance')} + + + + {items.map((item) => ( + + + {formatPosition(item, 'serverTime')} + + {item.type} + {} + {} + + ))} + +
+ + ); } - return ( -
- -
- - - - - - {t('reportEventTypes')} - - - - - - - - - - - {t('positionFixTime')} - {t('sharedType')} - {t('sharedGeofence')} - {t('sharedMaintenance')} - - - - {data.map((item) => ( - - - {formatPosition(item, 'serverTime')} - - {item.type} - {} - {} - - ))} - -
- - - -
-
- ); + return ; } export default EventReportPage; diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 6fe6a529..0d3223ff 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -5,7 +5,6 @@ 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'); @@ -61,7 +60,7 @@ const ReportFilter = (props) => { {props.children} - + {t('reportPeriod')} setEventType(e.target.value)} multiple> + {t('eventAll')} + {t('eventDeviceOnline')} + {t('eventDeviceUnknown')} + {t('eventDeviceOffline')} + {t('eventDeviceInactive')} + {t('eventDeviceMoving')} + {t('eventDeviceStopped')} + {t('eventDeviceOverspeed')} + {t('eventDeviceFuelDrop')} + {t('eventCommandResult')} + {t('eventGeofenceEnter')} + {t('eventGeofenceExit')} + {t('eventAlarm')} + {t('eventIgnitionOn')} + {t('eventIgnitionOff')} + {t('eventMaintenance')} + {t('eventTextMessage')} + {t('eventDriverChanged')} + + + + ); +} - const handleSubmit = async (deviceId, from, to) => { - const query = new URLSearchParams({ - deviceId, - from: from.toISOString(), - to: to.toISOString(), - }); - eventType.map(t=>query.append('type',t)); - const response = await fetch(`/api/reports/events?${query.toString()}`, { headers: { Accept: 'application/json' } }); - if(response.ok) { - onResult(await response.json()); - } - } - return ( - - - {t('reportEventTypes')} - - - - ); - } +const EventReportPage = () => { + const [items, setItems] = useState([]); - const ReportListView = ({items}) => { - - return ( + return ( + @@ -79,10 +79,8 @@ const EventReportPage = () => {
- ); - } - - return ; + + ); } export default EventReportPage; diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js new file mode 100644 index 00000000..57a2cefd --- /dev/null +++ b/modern/src/reports/ReportLayoutPage.js @@ -0,0 +1,46 @@ +import React, { useState } from 'react'; +import { Grid, Paper, makeStyles } from '@material-ui/core'; +import MainToolbar from '../MainToolbar'; + +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 ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, ...rest }) => { + const classes = useStyles(); + + const onResult = (data) => { + setItems(data); + } + return ( +
+ +
+ + + + + + + + {rest.children} + + +
+
+ ); +} + +export default ReportLayoutPage; diff --git a/modern/src/reports/ReportView.js b/modern/src/reports/ReportView.js deleted file mode 100644 index 249ef724..00000000 --- a/modern/src/reports/ReportView.js +++ /dev/null @@ -1,47 +0,0 @@ -import React, { useState } from 'react'; -import { Grid, Paper, makeStyles } from '@material-ui/core'; -import MainToolbar from '../MainToolbar'; - -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 ReportView= ({ reportFilterForm:ReportFilterForm, reportListView:ReportListView }) => { - const classes = useStyles(); - const [data, setData] = useState([]); - - const onResult = (data) => { - setData(data); - } - return ( -
- -
- - - - - - - - - - -
-
- ); -} - -export default ReportView; diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 30272c49..0f8d98ab 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -3,29 +3,28 @@ import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper import t from '../common/localization'; import { formatPosition } from '../common/formatter'; import ReportFilter from './ReportFilter'; -import ReportView from './ReportView'; +import ReportLayoutPage from './ReportLayoutPage'; -const RouteReportPage = () => { - - const ReportFilterForm = ({ onResult }) => { +const ReportFilterForm = ({ onResult }) => { - const handleSubmit = async (deviceId, from, to) => { - const query = new URLSearchParams({ - deviceId, - from: from.toISOString(), - to: to.toISOString(), - }); - const response = await fetch(`/api/reports/route?${query.toString()}`, { headers: { Accept: 'application/json' } }); - if(response.ok) { - onResult(await response.json()); - } + const handleSubmit = async (deviceId, from, to) => { + const query = new URLSearchParams({ + deviceId, + from: from.toISOString(), + to: to.toISOString(), + }); + const response = await fetch(`/api/reports/route?${query.toString()}`, { headers: { Accept: 'application/json' } }); + if(response.ok) { + onResult(await response.json()); } - return ; } + return ; +} - const ReportListView = ({items}) => { - - return ( +const RouteReportPage = () => { + const [items, setItems] = useState([]); + return ( + @@ -50,10 +49,8 @@ const RouteReportPage = () => {
- ); - } - - return ; + + ); } export default RouteReportPage; -- cgit v1.2.3 From 5a116350b3e402ef123a75451737c268a9ebddff Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Tue, 10 Nov 2020 12:40:37 +0530 Subject: commiting .env changes --- modern/.env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'modern') diff --git a/modern/.env b/modern/.env index a3ae7639..69efd744 100644 --- a/modern/.env +++ b/modern/.env @@ -1,2 +1,2 @@ SKIP_PREFLIGHT_CHECK=true -REACT_APP_URL_NAME='13.235.202.9:8082' +REACT_APP_URL_NAME='localhost:8082' -- cgit v1.2.3