aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-02 19:18:21 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-02 19:18:21 -0700
commit76e3a4189f282afc391a948a9a818157df99de97 (patch)
treee39bec1e4d86a0a979cd4d7c24530c319b5305af /modern
parent69251d6252aaee71acf54f5e403551a807afb2fa (diff)
downloadtrackermap-web-76e3a4189f282afc391a948a9a818157df99de97.tar.gz
trackermap-web-76e3a4189f282afc391a948a9a818157df99de97.tar.bz2
trackermap-web-76e3a4189f282afc391a948a9a818157df99de97.zip
Implement show address
Diffstat (limited to 'modern')
-rw-r--r--modern/src/components/PositionValue.js30
-rw-r--r--modern/src/map/StatusCard.js33
-rw-r--r--modern/src/theme/dimensions.js1
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,
};