diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-28 20:43:47 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-28 20:43:47 -0700 |
commit | 94e8c40f52b239562aded5e70e334ddbb2eea23b (patch) | |
tree | bd5d8b9425a08ac055f0617818e6e54930c4d557 /modern/src/PositionPage.js | |
parent | 9d72339c8365da80154f635dc8184b135a53bab0 (diff) | |
download | trackermap-web-94e8c40f52b239562aded5e70e334ddbb2eea23b.tar.gz trackermap-web-94e8c40f52b239562aded5e70e334ddbb2eea23b.tar.bz2 trackermap-web-94e8c40f52b239562aded5e70e334ddbb2eea23b.zip |
Page for all attributes
Diffstat (limited to 'modern/src/PositionPage.js')
-rw-r--r-- | modern/src/PositionPage.js | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js new file mode 100644 index 00000000..a91a7a15 --- /dev/null +++ b/modern/src/PositionPage.js @@ -0,0 +1,80 @@ +import React, { Fragment, useState } from 'react'; + +import t from './common/localization'; +import { makeStyles, Typography, ListItem, ListItemText, ListItemSecondaryAction, List, Container, Paper, Divider } from '@material-ui/core'; +import { useParams } from 'react-router-dom'; +import { useEffectAsync } from './reactHelper'; +import MainToolbar from './MainToolbar'; +import { formatPosition } from './common/formatter'; +import { prefixString } from './common/stringUtils'; + +const useStyles = makeStyles(theme => ({ + root: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + }, +})); + +const PositionPage = () => { + const classes = useStyles(); + + const { id } = useParams(); + + const [item, setItem] = useState(); + + useEffectAsync(async () => { + if (id) { + const response = await fetch(`/api/positions?id=${id}`, { + headers: { + 'Accept': 'application/json' + }, + }); + if (response.ok) { + const items = await response.json(); + setItem(items[0]); + } + } else { + setItem({}); + } + }, [id]); + + const formatKey = (key) => { + return t(prefixString('position', key)) || `${t('sharedAttribute')} "${key}"`; + }; + + const attributesList = () => { + const combinedList = {...item, ...item.attributes}; + return Object.entries(combinedList).filter(([_, value]) => typeof value !== 'object'); + } + + return ( + <> + <MainToolbar /> + <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)} + </Typography> + </ListItemSecondaryAction> + </ListItem> + {index < list.length - 1 ? <Divider /> : null} + </Fragment> + ))} + </List> + } + </Paper> + </Container> + </> + ); +} + +export default PositionPage; |