Update position page

4 files changed, 47 insertions, 156 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
deleted file mode 100644
index b98f2224..00000000
--- a/modern/src/MainToolbar.js
+++ /dev/null
@@ -1,122 +0,0 @@
-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 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 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 ShuffleIcon from '@material-ui/icons/Shuffle';
-import DescriptionIcon from '@material-ui/icons/Description';
-import ReplayIcon from '@material-ui/icons/Replay';
-import { sessionActions } from './store';
-import * as selectors from './common/selectors';
-import { useTranslation } from './LocalizationProvider';
-
-const useStyles = makeStyles((theme) => ({
-  flex: {
-    flexGrow: 1,
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1,
-  },
-  list: {
-    width: 250,
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
-  },
-}));
-
-const MainToolbar = () => {
-  const classes = useStyles();
-  const history = useHistory();
-  const dispatch = useDispatch();
-  const t = useTranslation();
-
-  const userId = useSelector(selectors.getUserId);
-
-  const [drawer, setDrawer] = useState(false);
-
-  const openDrawer = () => { setDrawer(true); };
-  const closeDrawer = () => { setDrawer(false); };
-
-  const handleLogout = async () => {
-    const response = await fetch('/api/session', { method: 'DELETE' });
-    if (response.ok) {
-      dispatch(sessionActions.updateUser(null));
-      history.push('/login');
-    }
-  };
-
-  return (
-    <>
-      <AppBar position="static" className={classes.appBar}>
-        <Toolbar>
-          <IconButton
-            className={classes.menuButton}
-            color="inherit"
-            onClick={openDrawer}
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography variant="h6" color="inherit" className={classes.flex}>
-            Traccar
-          </Typography>
-          <Button color="inherit" onClick={handleLogout}>{t('loginLogout')}</Button>
-        </Toolbar>
-      </AppBar>
-      <Drawer open={drawer} onClose={closeDrawer}>
-        <div
-          tabIndex={0}
-          className={classes.list}
-          role="button"
-          onClick={closeDrawer}
-          onKeyDown={closeDrawer}
-        >
-          <List>
-            <ListItem button onClick={() => history.push('/')}>
-              <ListItemIcon>
-                <MapIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('mapTitle')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/replay')}>
-              <ListItemIcon>
-                <ReplayIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportReplay')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/route')}>
-              <ListItemIcon>
-                <DescriptionIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportTitle')} />
-            </ListItem>
-            <ListItem
-              button
-              disabled={!userId}
-              onClick={() => history.push('/settings/notifications')}
-            >
-              <ListItemIcon>
-                <ShuffleIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('settingsTitle')} />
-            </ListItem>
-          </List>
-        </div>
-      </Drawer>
-    </>
-  );
-};
-
-export default MainToolbar;
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js
index 2fd320a5..b8bbc191 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/PositionPage.js
@@ -1,24 +1,26 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
-  makeStyles, Typography, ListItem, ListItemText, ListItemSecondaryAction, List, Container, Paper, Divider,
+  makeStyles, Typography, Container, Paper, AppBar, Toolbar, IconButton, Table, TableHead, TableRow, TableCell, TableBody,
 } from '@material-ui/core';
-import { useParams } from 'react-router-dom';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import { useHistory, useParams } from 'react-router-dom';
 import { useEffectAsync } from './reactHelper';
-import MainToolbar from './MainToolbar';
 import { formatPosition } from './common/formatter';
 import { prefixString } from './common/stringUtils';
 import { useTranslation } from './LocalizationProvider';
+import { useSelector } from 'react-redux';
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
   },
 }));
 
 const PositionPage = () => {
   const classes = useStyles();
+  const history = useHistory();
   const t = useTranslation();
 
   const { id } = useParams();
@@ -41,7 +43,15 @@ const PositionPage = () => {
     }
   }, [id]);
 
-  const formatKey = (key) => t(prefixString('position', key)) || `${t('sharedAttribute')} "${key}"`;
+  const deviceName = useSelector((state) => {
+    if (item) {
+      const device = state.devices.items[item.deviceId];
+      if (device) {
+        return device.name;
+      }
+    }
+    return null;
+  });
 
   const attributesList = () => {
     const combinedList = { ...item, ...item.attributes };
@@ -50,29 +60,36 @@ const PositionPage = () => {
 
   return (
     <>
-      <MainToolbar />
+      <AppBar position="sticky" color="inherit">
+        <Toolbar>
+          <IconButton color="inherit" edge="start" onClick={() => history.push('/')}>
+            <ArrowBackIcon />
+          </IconButton>
+          <Typography variant="h6">
+            {deviceName}
+          </Typography>
+        </Toolbar>
+      </AppBar>
       <Container maxWidth="sm" className={classes.root}>
         <Paper>
-          {item
-            && (
-            <List>
-              {attributesList().map(([key, value], index, list) => (
-                <Fragment key={key}>
-                  <ListItem>
-                    <ListItemText
-                      primary={formatKey(key)}
-                    />
-                    <ListItemSecondaryAction>
-                      <Typography variant="body2">
-                        {formatPosition(value, key, t)}
-                      </Typography>
-                    </ListItemSecondaryAction>
-                  </ListItem>
-                  {index < list.length - 1 ? <Divider /> : null}
-                </Fragment>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>{t('stateName')}</TableCell>
+                <TableCell>{t('sharedName')}</TableCell>
+                <TableCell>{t('stateValue')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {item && attributesList().map(([key, value]) => (
+                <TableRow key={key}>
+                  <TableCell>{key}</TableCell>
+                  <TableCell><strong>{t(prefixString('position', key))}</strong></TableCell>
+                  <TableCell>{formatPosition(value, key, t)}</TableCell>
+                </TableRow>
               ))}
-            </List>
-            )}
+            </TableBody>
+          </Table>
         </Paper>
       </Container>
     </>
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 32df04c2..1d4806e8 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -5,6 +5,7 @@ export const formatBoolean = (value, t) => (value ? t('sharedYes') : t('sharedNo
 export const formatNumber = (value, precision = 1) => Number(value.toFixed(precision));
 
 export const formatDate = (value, format = 'YYYY-MM-DD HH:mm') => moment(value).format(format);
+export const formatTime = (value, format = 'YYYY-MM-DD HH:mm:ss') => moment(value).format(format);
 
 export const formatPosition = (value, key, t) => {
   if (value != null && typeof value === 'object') {
@@ -15,7 +16,7 @@ export const formatPosition = (value, key, t) => {
     case 'deviceTime':
     case 'serverTime':
     case 'eventTime':
-      return moment(value).format('LLL');
+      return formatTime(value);
     case 'latitude':
     case 'longitude':
       return value.toFixed(5);
diff --git a/modern/src/components/NavBar.js b/modern/src/components/NavBar.js
index 93e79bbb..83dcd6e0 100644
--- a/modern/src/components/NavBar.js
+++ b/modern/src/components/NavBar.js
@@ -7,12 +7,7 @@ import MenuIcon from '@material-ui/icons/Menu';
 const Navbar = ({ setOpenDrawer, title }) => (
   <AppBar position="fixed" color="inherit">
     <Toolbar>
-      <IconButton
-        color="inherit"
-        aria-label="open drawer"
-        edge="start"
-        onClick={() => setOpenDrawer(true)}
-      >
+      <IconButton color="inherit" edge="start" onClick={() => setOpenDrawer(true)}>
         <MenuIcon />
       </IconButton>
       <Typography variant="h6" noWrap>