diff options
author | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
commit | f418231b6b2f5e030a0d2dcc390c314602b1f740 (patch) | |
tree | 10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /src/other/PositionPage.jsx | |
parent | b392a4af78e01c8e0f50aad5468e9583675b24be (diff) | |
download | trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.gz trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.bz2 trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.zip |
Move modern to the top
Diffstat (limited to 'src/other/PositionPage.jsx')
-rw-r--r-- | src/other/PositionPage.jsx | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/src/other/PositionPage.jsx b/src/other/PositionPage.jsx new file mode 100644 index 00000000..f253cd2c --- /dev/null +++ b/src/other/PositionPage.jsx @@ -0,0 +1,110 @@ +import React, { useState } from 'react'; +import { useSelector } from 'react-redux'; + +import { + Typography, Container, Paper, AppBar, Toolbar, IconButton, Table, TableHead, TableRow, TableCell, TableBody, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import { useNavigate, useParams } from 'react-router-dom'; +import { useEffectAsync } from '../reactHelper'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import PositionValue from '../common/components/PositionValue'; +import usePositionAttributes from '../common/attributes/usePositionAttributes'; + +const useStyles = makeStyles((theme) => ({ + root: { + height: '100%', + display: 'flex', + flexDirection: 'column', + }, + content: { + overflow: 'auto', + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), + }, +})); + +const PositionPage = () => { + const classes = useStyles(); + const navigate = useNavigate(); + const t = useTranslation(); + + const positionAttributes = usePositionAttributes(t); + + const { id } = useParams(); + + const [item, setItem] = useState(); + + useEffectAsync(async () => { + if (id) { + const response = await fetch(`/api/positions?id=${id}`); + if (response.ok) { + const positions = await response.json(); + if (positions.length > 0) { + setItem(positions[0]); + } + } else { + throw Error(await response.text()); + } + } + }, [id]); + + const deviceName = useSelector((state) => { + if (item) { + const device = state.devices.items[item.deviceId]; + if (device) { + return device.name; + } + } + return null; + }); + + return ( + <div className={classes.root}> + <AppBar position="sticky" color="inherit"> + <Toolbar> + <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate(-1)}> + <ArrowBackIcon /> + </IconButton> + <Typography variant="h6"> + {deviceName} + </Typography> + </Toolbar> + </AppBar> + <div className={classes.content}> + <Container maxWidth="sm"> + <Paper> + <Table> + <TableHead> + <TableRow> + <TableCell>{t('stateName')}</TableCell> + <TableCell>{t('sharedName')}</TableCell> + <TableCell>{t('stateValue')}</TableCell> + </TableRow> + </TableHead> + <TableBody> + {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => ( + <TableRow key={property}> + <TableCell>{property}</TableCell> + <TableCell><strong>{positionAttributes[property]?.name || property}</strong></TableCell> + <TableCell><PositionValue position={item} property={property} /></TableCell> + </TableRow> + ))} + {item && Object.getOwnPropertyNames(item.attributes).map((attribute) => ( + <TableRow key={attribute}> + <TableCell>{attribute}</TableCell> + <TableCell><strong>{positionAttributes[attribute]?.name || attribute}</strong></TableCell> + <TableCell><PositionValue position={item} attribute={attribute} /></TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </Paper> + </Container> + </div> + </div> + ); +}; + +export default PositionPage; |