aboutsummaryrefslogtreecommitdiff
path: root/modern/src/PositionPage.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-09-28 20:43:47 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-09-28 20:43:47 -0700
commit94e8c40f52b239562aded5e70e334ddbb2eea23b (patch)
treebd5d8b9425a08ac055f0617818e6e54930c4d557 /modern/src/PositionPage.js
parent9d72339c8365da80154f635dc8184b135a53bab0 (diff)
downloadtrackermap-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.js80
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;