diff options
| -rw-r--r-- | modern/src/components/PositionValue.js | 30 | ||||
| -rw-r--r-- | modern/src/map/StatusCard.js | 33 | ||||
| -rw-r--r-- | modern/src/theme/dimensions.js | 1 |
3 files changed, 42 insertions, 22 deletions
diff --git a/modern/src/components/PositionValue.js b/modern/src/components/PositionValue.js index 442ac859..9127ecf4 100644 --- a/modern/src/components/PositionValue.js +++ b/modern/src/components/PositionValue.js @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; +import { Link } from '@material-ui/core'; import { formatAlarm, formatBoolean, formatCoordinate, formatCourse, formatDistance, formatNumber, formatPercentage, formatSpeed, formatTime, } from '../common/formatter'; @@ -15,6 +16,23 @@ const PositionValue = ({ position, property, attribute }) => { const speedUnit = useAttributePreference('speedUnit'); const coordinateFormat = usePreference('coordinateFormat'); + const [address, setAddress] = useState(); + + useEffect(() => { + setAddress(position.address); + }, [position]); + + const showAddress = async () => { + const query = new URLSearchParams({ + latitude: position.latitude, + longitude: position.longitude, + }); + const response = await fetch(`/api/server/geocode?${query.toString()}`); + if (response.ok) { + setAddress(await response.text()); + } + }; + const formatValue = () => { switch (key) { case 'fixTime': @@ -47,7 +65,15 @@ const PositionValue = ({ position, property, attribute }) => { } }; - return (<>{formatValue(value)}</>); + if (property === 'address') { + if (address) { + return (<>{address}</>); + } else { + return (<Link onClick={showAddress}>{t('sharedShowAddress')}</Link>) + } + } else { + return (<>{formatValue(value)}</>); + } }; export default PositionValue; diff --git a/modern/src/map/StatusCard.js b/modern/src/map/StatusCard.js index 38d8833f..962023c8 100644 --- a/modern/src/map/StatusCard.js +++ b/modern/src/map/StatusCard.js @@ -11,22 +11,18 @@ import EditIcon from '@material-ui/icons/Edit'; import DeleteIcon from '@material-ui/icons/Delete'; import { useTranslation } from '../LocalizationProvider'; -import { - formatCourse, formatDistance, formatSpeed, formatStatus, -} from '../common/formatter'; +import { formatStatus } from '../common/formatter'; import RemoveDialog from '../RemoveDialog'; -import { useAttributePreference } from '../common/preferences'; +import PositionValue from '../components/PositionValue'; +import dimensions from '../theme/dimensions'; const useStyles = makeStyles((theme) => ({ - paper: { - width: '300px', + card: { + width: dimensions.popupMaxWidth, }, negative: { color: theme.palette.colors.negative, }, - listItemContainer: { - maxWidth: '240px', - }, icon: { width: '25px', height: '25px', @@ -43,7 +39,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -const StatusRow = ({ name, value }) => { +const StatusRow = ({ name, content }) => { const classes = useStyles(); return ( @@ -52,7 +48,7 @@ const StatusRow = ({ name, value }) => { <Typography variant="body2">{name}</Typography> </TableCell> <TableCell className={classes.cell}> - <Typography variant="body2" color="textSecondary">{value}</Typography> + <Typography variant="body2" color="textSecondary">{content}</Typography> </TableCell> </TableRow> ); @@ -66,15 +62,12 @@ const StatusCard = ({ deviceId, onClose }) => { const device = useSelector((state) => state.devices.items[deviceId]); const position = useSelector((state) => state.positions.items[deviceId]); - const distanceUnit = useAttributePreference('distanceUnit'); - const speedUnit = useAttributePreference('speedUnit'); - const [removeDialogShown, setRemoveDialogShown] = useState(false); return ( <> {device && ( - <Card elevation={3}> + <Card elevation={3} className={classes.card}> <CardHeader avatar={( <Avatar> @@ -94,12 +87,12 @@ const StatusCard = ({ deviceId, onClose }) => { <TableContainer> <Table size="small" classes={{ root: classes.table }}> <TableBody> - <StatusRow name={t('positionSpeed')} value={formatSpeed(position.speed, speedUnit, t)} /> - <StatusRow name={t('positionBattery')} value={formatSpeed(position.speed, speedUnit, t)} /> + <StatusRow name={t('positionSpeed')} content={<PositionValue position={position} property="speed" />} /> + <StatusRow name={t('positionAddress')} content={<PositionValue position={position} property="address" />} /> {position.attributes.odometer - ? <StatusRow name={t('positionOdometer')} value={formatDistance(position.attributes.odometer, distanceUnit, t)} /> - : <StatusRow name={t('deviceTotalDistance')} value={formatDistance(position.attributes.totalDistance, distanceUnit, t)} />} - <StatusRow name={t('positionCourse')} value={formatCourse(position.course)} /> + ? <StatusRow name={t('positionOdometer')} content={<PositionValue position={position} attribute="odometer" />} /> + : <StatusRow name={t('deviceTotalDistance')} content={<PositionValue position={position} attribute="totalDistance" />} />} + <StatusRow name={t('positionCourse')} content={<PositionValue position={position} property="course" />} /> </TableBody> </Table> </TableContainer> diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js index c2d60bb5..fa7d3b25 100644 --- a/modern/src/theme/dimensions.js +++ b/modern/src/theme/dimensions.js @@ -11,4 +11,5 @@ export default { columnWidthString: 160, columnWidthBoolean: 130, popupMapOffset: 300, + popupMaxWidth: 272, }; |