diff options
| -rw-r--r-- | modern/src/App.js | 34 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 116 | ||||
| -rw-r--r-- | modern/src/reports/EventReportPage.js | 32 | ||||
| -rw-r--r-- | modern/src/reports/ReportFilter.js | 78 |
4 files changed, 130 insertions, 130 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index a173a50..edfaa55 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 46d4649..7cca74f 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 </Typography> <Button color="inherit" onClick={handleLogout}> - {t("loginLogout")} + {t('loginLogout')} </Button> </Toolbar> </AppBar> @@ -102,54 +102,54 @@ const MainToolbar = () => { onKeyDown={closeDrawer} > <List> - <ListItem button onClick={() => history.push("/")}> + <ListItem button onClick={() => history.push('/')}> <ListItemIcon> <MapIcon /> </ListItemIcon> - <ListItemText primary={t("mapTitle")} /> + <ListItemText primary={t('mapTitle')} /> </ListItem> </List> <Divider /> - <List subheader={<ListSubheader>{t("reportTitle")}</ListSubheader>}> - <ListItem button onClick={() => history.push("/reports/route")}> + <List subheader={<ListSubheader>{t('reportTitle')}</ListSubheader>}> + <ListItem button onClick={() => history.push('/reports/route')}> <ListItemIcon> <TimelineIcon /> </ListItemIcon> - <ListItemText primary={t("reportRoute")} /> + <ListItemText primary={t('reportRoute')} /> </ListItem> - <ListItem button onClick={() => history.push("/reports/event")}> + <ListItem button onClick={() => history.push('/reports/event')}> <ListItemIcon> <NotificationsActiveIcon /> </ListItemIcon> - <ListItemText primary={t("reportEvents")} /> + <ListItemText primary={t('reportEvents')} /> </ListItem> <ListItem button disabled> <ListItemIcon> <PlayCircleFilledIcon /> </ListItemIcon> - <ListItemText primary={t("reportTrips")} /> + <ListItemText primary={t('reportTrips')} /> </ListItem> <ListItem button disabled> <ListItemIcon> <PauseCircleFilledIcon /> </ListItemIcon> - <ListItemText primary={t("reportStops")} /> + <ListItemText primary={t('reportStops')} /> </ListItem> <ListItem button disabled> <ListItemIcon> <FormatListBulletedIcon /> </ListItemIcon> - <ListItemText primary={t("reportSummary")} /> + <ListItemText primary={t('reportSummary')} /> </ListItem> <ListItem button disabled> <ListItemIcon> <TrendingUpIcon /> </ListItemIcon> - <ListItemText primary={t("reportChart")} /> + <ListItemText primary={t('reportChart')} /> </ListItem> </List> <Divider /> - <List subheader={<ListSubheader>{t("settingsTitle")}</ListSubheader>}> + <List subheader={<ListSubheader>{t('settingsTitle')}</ListSubheader>}> <ListItem button disabled={!userId} @@ -158,45 +158,45 @@ const MainToolbar = () => { <ListItemIcon> <PersonIcon /> </ListItemIcon> - <ListItemText primary={t("settingsUser")} /> + <ListItemText primary={t('settingsUser')} /> </ListItem> <ListItem button - onClick={() => history.push("/settings/notifications")} + onClick={() => history.push('/settings/notifications')} > <ListItemIcon> <NotificationsIcon /> </ListItemIcon> - <ListItemText primary={t("sharedNotifications")} /> + <ListItemText primary={t('sharedNotifications')} /> </ListItem> - <ListItem button onClick={() => history.push("/settings/groups")}> + <ListItem button onClick={() => history.push('/settings/groups')}> <ListItemIcon> <FolderIcon /> </ListItemIcon> - <ListItemText primary={t("settingsGroups")} /> + <ListItemText primary={t('settingsGroups')} /> </ListItem> </List> {adminEnabled && ( <> <Divider /> - <List subheader={<ListSubheader>{t("userAdmin")}</ListSubheader>}> - <ListItem button onClick={() => history.push("/admin/server")}> + <List subheader={<ListSubheader>{t('userAdmin')}</ListSubheader>}> + <ListItem button onClick={() => history.push('/admin/server')}> <ListItemIcon> <StorageIcon /> </ListItemIcon> - <ListItemText primary={t("settingsServer")} /> + <ListItemText primary={t('settingsServer')} /> </ListItem> - <ListItem button onClick={() => history.push("/admin/users")}> + <ListItem button onClick={() => history.push('/admin/users')}> <ListItemIcon> <PeopleIcon /> </ListItemIcon> - <ListItemText primary={t("settingsUsers")} /> + <ListItemText primary={t('settingsUsers')} /> </ListItem> <ListItem button disabled> <ListItemIcon> <BarChartIcon /> </ListItemIcon> - <ListItemText primary={t("statisticsTitle")} /> + <ListItemText primary={t('statisticsTitle')} /> </ListItem> </List> </> diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index acd6f63..0a451c1 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 = () => { <Table> <TableHead> <TableRow> - <TableCell>{t("positionFixTime")}</TableCell> - <TableCell>{t("sharedType")}</TableCell> - <TableCell>{t("sharedGeofence")}</TableCell> - <TableCell>{t("sharedMaintenance")}</TableCell> + <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")} + {formatPosition(item, 'serverTime')} </TableCell> <TableCell>{item.type}</TableCell> <TableCell>{}</TableCell> diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 91fc9fa..55f73e3 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 ( <> <FormControl variant="filled" margin="normal" fullWidth> - <InputLabel>{t("reportDevice")}</InputLabel> + <InputLabel>{t('reportDevice')}</InputLabel> <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}> {devices.map((device) => ( <MenuItem value={device.id}>{device.name}</MenuItem> @@ -64,22 +64,22 @@ const ReportFilter = (props) => { </Select> </FormControl> <FormControl variant="filled" margin="normal" fullWidth> - <InputLabel>{t("reportPeriod")}</InputLabel> + <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> + <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" && ( + {period === 'custom' && ( <TextField margin="normal" variant="filled" - label={t("reportFrom")} + label={t('reportFrom')} type="datetime-local" value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)} onChange={(e) => @@ -88,11 +88,11 @@ const ReportFilter = (props) => { fullWidth /> )} - {period === "custom" && ( + {period === 'custom' && ( <TextField margin="normal" variant="filled" - label={t("reportTo")} + label={t('reportTo')} type="datetime-local" value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)} onChange={(e) => @@ -109,7 +109,7 @@ const ReportFilter = (props) => { disabled={!deviceId} onClick={handleShow} > - {t("reportShow")} + {t('reportShow')} </Button> </FormControl> </> |