diff options
| -rw-r--r-- | modern/src/MainToolbar.js | 122 | ||||
| -rw-r--r-- | modern/src/PositionPage.js | 71 | ||||
| -rw-r--r-- | modern/src/common/formatter.js | 3 | ||||
| -rw-r--r-- | modern/src/components/NavBar.js | 7 |
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> |