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 { prefixString } from '../common/util/stringUtils'; 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 (
navigate(-1)}> {deviceName}
{t('stateName')} {t('sharedName')} {t('stateValue')} {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => ( {property} {positionAttributes[property]?.name || property} ))} {item && Object.getOwnPropertyNames(item.attributes).map((attribute) => ( {attribute} {positionAttributes[attribute]?.name || attribute} ))}
); }; export default PositionPage;