1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
import React, { useState } from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import { Switch, Route, useHistory } from 'react-router-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles, LinearProgress, useMediaQuery } from '@material-ui/core';
import MainPage from './MainPage';
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';
import ReplayPage from './reports/ReplayPage';
import TripReportPage from './reports/TripReportPage';
import StopReportPage from './reports/StopReportPage';
import SummaryReportPage from './reports/SummaryReportPage';
import ChartReportPage from './reports/ChartReportPage';
import DriversPage from './settings/DriversPage';
import DriverPage from './settings/DriverPage';
import CalendarsPage from './settings/CalendarsPage';
import CalendarPage from './settings/CalendarPage';
import ComputedAttributesPage from './settings/ComputedAttributesPage';
import ComputedAttributePage from './settings/ComputedAttributePage';
import MaintenancesPage from './settings/MaintenancesPage';
import MaintenancePage from './settings/MaintenancePage';
import CommandsPage from './settings/CommandsPage';
import CommandPage from './settings/CommandPage';
import StatisticsPage from './admin/StatisticsPage';
import CachingController from './CachingController';
import LoginForm from './components/registration/LoginForm';
import RegisterForm from './components/registration/RegisterForm';
import ResetPasswordForm from './components/registration/ResetPasswordForm';
import theme from './theme';
import GeofencesPage from './GeofencesPage';
import GeofencePage from './GeofencePage';
import { LocalizationProvider } from './LocalizationProvider';
import useQuery from './common/useQuery';
import { useEffectAsync } from './reactHelper';
import { devicesActions } from './store';
import EventPage from './EventPage';
import PreferencesPage from './settings/PreferencesPage';
import BottomMenu from './components/BottomMenu';
const useStyles = makeStyles(() => ({
root: {
display: 'flex',
flexDirection: 'column',
height: '100%',
},
page: {
flexGrow: 1,
overflow: 'auto',
},
menu: {
zIndex: 4,
},
}));
const App = () => {
const history = useHistory();
const dispatch = useDispatch();
const classes = useStyles();
const desktop = useMediaQuery(theme.breakpoints.up('lg'));
const initialized = useSelector((state) => !!state.session.server && !!state.session.user);
const [redirectsHandled, setRedirectsHandled] = useState(false);
const query = useQuery();
useEffectAsync(async () => {
if (query.get('token')) {
const token = query.get('token');
await fetch(`/api/session?token=${encodeURIComponent(token)}`);
history.push('/');
} else if (query.get('deviceId')) {
const deviceId = query.get('deviceId');
const response = await fetch(`/api/devices?uniqueId=${deviceId}`);
if (response.ok) {
const items = await response.json();
if (items.length > 0) {
dispatch(devicesActions.select(items[0].id));
}
}
history.push('/');
} else if (query.get('eventId')) {
const eventId = parseInt(query.get('eventId'), 10);
history.push(`/event/${eventId}`);
} else {
setRedirectsHandled(true);
}
}, [query]);
return (!redirectsHandled ? (<LinearProgress />) : (
<LocalizationProvider>
<ThemeProvider theme={theme}>
<CssBaseline />
<SocketController />
<CachingController />
<Switch>
<Route exact path="/login" component={LoginForm} />
<Route exact path="/register" component={RegisterForm} />
<Route exact path="/reset-password" component={ResetPasswordForm} />
<Route>
{!initialized ? (<LinearProgress />) : (
<div className={classes.root}>
<div className={classes.page}>
<Switch>
<Route exact path="/" component={MainPage} />
<Route exact path="/replay" component={ReplayPage} />
<Route exact path="/position/:id?" component={PositionPage} />
<Route exact path="/event/:id?" component={EventPage} />
<Route exact path="/user/:id?" component={UserPage} />
<Route exact path="/device/:id?" component={DevicePage} />
<Route exact path="/geofence/:id?" component={GeofencePage} />
<Route exact path="/geofences" component={GeofencesPage} />
<Route exact path="/settings/preferences" component={PreferencesPage} />
<Route exact path="/settings/notifications" component={NotificationsPage} />
<Route exact path="/settings/notification/:id?" component={NotificationPage} />
<Route exact path="/settings/groups" component={GroupsPage} />
<Route exact path="/settings/group/:id?" component={GroupPage} />
<Route exact path="/settings/drivers" component={DriversPage} />
<Route exact path="/settings/driver/:id?" component={DriverPage} />
<Route exact path="/settings/calendars" component={CalendarsPage} />
<Route exact path="/settings/calendar/:id?" component={CalendarPage} />
<Route exact path="/settings/attributes" component={ComputedAttributesPage} />
<Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} />
<Route exact path="/settings/maintenances" component={MaintenancesPage} />
<Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
<Route exact path="/settings/commands" component={CommandsPage} />
<Route exact path="/settings/command/:id?" component={CommandPage} />
<Route exact path="/admin/server" component={ServerPage} />
<Route exact path="/admin/users" component={UsersPage} />
<Route exact path="/admin/statistics" component={StatisticsPage} />
<Route exact path="/reports/route" component={RouteReportPage} />
<Route exact path="/reports/event" component={EventReportPage} />
<Route exact path="/reports/trip" component={TripReportPage} />
<Route exact path="/reports/stop" component={StopReportPage} />
<Route exact path="/reports/summary" component={SummaryReportPage} />
<Route exact path="/reports/chart" component={ChartReportPage} />
</Switch>
</div>
{!desktop && (
<div className={classes.menu}>
<BottomMenu />
</div>
)}
</div>
)}
</Route>
</Switch>
</ThemeProvider>
</LocalizationProvider>
));
};
export default App;
|
