Implement show address

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,
 };