Implement simple users screen

5 files changed, 103 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;
+      }
   }
 }