Implement show address

1 files changed, 28 insertions, 2 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;