aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-09-20 18:22:36 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-09-20 18:22:36 -0700
commitb124908d9f9f2a24963871cac982cc5b5e172ba5 (patch)
tree87ccaa2cbb104af3547dab06703821fe48c4bc00
parentb2cd88bbbad82654057cec8aec7415a8caca667e (diff)
downloadtrackermap-web-b124908d9f9f2a24963871cac982cc5b5e172ba5.tar.gz
trackermap-web-b124908d9f9f2a24963871cac982cc5b5e172ba5.tar.bz2
trackermap-web-b124908d9f9f2a24963871cac982cc5b5e172ba5.zip
Implement simple users screen
-rw-r--r--modern/src/App.js2
-rw-r--r--modern/src/MainToolbar.js28
-rw-r--r--modern/src/SocketController.js1
-rw-r--r--modern/src/admin/UsersPage.js66
-rw-r--r--modern/src/common/formatter.js9
-rw-r--r--web/l10n/en.json2
6 files changed, 105 insertions, 3 deletions
diff --git a/modern/src/App.js b/modern/src/App.js
index f45c64de..0f2a69b7 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -4,6 +4,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
import MainPage from './MainPage';
import LoginPage from './LoginPage';
import RouteReportPage from './reports/RouteReportPage';
+import UsersPage from './admin/UsersPage';
import DevicePage from './DevicePage';
import SocketController from './SocketController';
@@ -17,6 +18,7 @@ const App = () => {
<Route exact path='/login' component={LoginPage} />
<Route exact path='/device/:id?' component={DevicePage} />
<Route exact path='/reports/route' component={RouteReportPage} />
+ <Route exact path='/admin/users' component={UsersPage} />
</Switch>
</>
);
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index e627f52c..338e961b 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import { sessionActions } from './store';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
@@ -19,6 +19,7 @@ import ListItemText from '@material-ui/core/ListItemText';
import DashboardIcon from '@material-ui/icons/Dashboard';
import BarChartIcon from '@material-ui/icons/BarChart';
import SettingsIcon from '@material-ui/icons/Settings';
+import PeopleIcon from '@material-ui/icons/People';
import t from './common/localization';
const useStyles = makeStyles(theme => ({
@@ -42,6 +43,7 @@ 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 openDrawer = () => { setDrawer(true) }
const closeDrawer = () => { setDrawer(false) }
@@ -155,6 +157,30 @@ const MainToolbar = () => {
<ListItemText primary={t('sharedNotifications')} />
</ListItem>
</List>
+ {adminEnabled && (
+ <>
+ <Divider />
+ <List
+ subheader={
+ <ListSubheader>
+ {t('userAdmin')}
+ </ListSubheader>
+ }>
+ <ListItem button onClick={() => { history.push('/admin/users') }}>
+ <ListItemIcon>
+ <PeopleIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('settingsUsers')} />
+ </ListItem>
+ <ListItem button disabled>
+ <ListItemIcon>
+ <BarChartIcon />
+ </ListItemIcon>
+ <ListItemText primary={t('statisticsTitle')} />
+ </ListItem>
+ </List>
+ </>
+ )}
</div>
</Drawer>
</>
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 787527cc..3d9748bd 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { connect } from 'react-redux';
import { positionsActions, devicesActions, sessionActions } from './store';
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
new file mode 100644
index 00000000..15368c75
--- /dev/null
+++ b/modern/src/admin/UsersPage.js
@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import MainToobar from '../MainToolbar';
+import { useHistory } from 'react-router-dom';
+import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles } from '@material-ui/core';
+import t from '../common/localization';
+import formatter from '../common/formatter';
+import { useEffectAsync } from '../reactHelper';
+
+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 UsersPage = () => {
+ const history = useHistory();
+ const classes = useStyles();
+ const [data, setData] = useState([]);
+
+ useEffectAsync(async () => {
+ const response = await fetch('/api/users');
+ if (response.ok) {
+ setData(await response.json());
+ }
+ }, []);
+
+ return (
+ <div className={classes.root}>
+ <MainToobar history={history} />
+ <TableContainer>
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell>{t('userEmail')}</TableCell>
+ <TableCell>{t('userAdmin')}</TableCell>
+ <TableCell>{t('sharedDisabled')}</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {data.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{formatter(item, 'name')}</TableCell>
+ <TableCell>{formatter(item, 'email')}</TableCell>
+ <TableCell>{formatter(item, 'administrator')}</TableCell>
+ <TableCell>{formatter(item, 'disabled')}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ </div>
+ );
+}
+
+export default UsersPage;
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 9a61b178..8ad87e70 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -1,4 +1,5 @@
import moment from 'moment';
+import t from '../common/localization';
const formatValue = (key, value) => {
switch (key) {
@@ -13,7 +14,13 @@ const formatValue = (key, value) => {
case 'batteryLevel':
return value + '%';
default:
- return value;
+ if (typeof value === 'number') {
+ return Number(value.toFixed(1));
+ } else if (typeof value === 'boolean') {
+ return value ? t('sharedYes') : t('sharedNo');
+ } else {
+ return value;
+ }
}
}
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 627edece..27043437 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -8,6 +8,8 @@
"sharedEdit": "Edit",
"sharedRemove": "Remove",
"sharedRemoveConfirm": "Remove item?",
+ "sharedYes": "Yes",
+ "sharedNo": "No",
"sharedKm": "km",
"sharedMi": "mi",
"sharedNmi": "nmi",