aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/MainToolbar.js122
-rw-r--r--modern/src/PositionPage.js71
-rw-r--r--modern/src/common/formatter.js3
-rw-r--r--modern/src/components/NavBar.js7
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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 07:33:09 +0000