aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/common/components/AddressValue.js31
-rw-r--r--modern/src/common/components/PositionValue.js28
-rw-r--r--modern/src/reports/StopReportPage.js3
-rw-r--r--modern/src/reports/TripReportPage.js5
4 files changed, 42 insertions, 25 deletions
diff --git a/modern/src/common/components/AddressValue.js b/modern/src/common/components/AddressValue.js
new file mode 100644
index 00000000..767f516b
--- /dev/null
+++ b/modern/src/common/components/AddressValue.js
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from '@mui/material';
+import { useTranslation } from './LocalizationProvider';
+import { useCatch } from '../../reactHelper';
+
+const AddressValue = ({ latitude, longitude, originalAddress }) => {
+ const t = useTranslation();
+
+ const [address, setAddress] = useState();
+
+ useEffect(() => {
+ setAddress(originalAddress);
+ }, [originalAddress]);
+
+ const showAddress = useCatch(async () => {
+ const query = new URLSearchParams({ latitude, longitude });
+ const response = await fetch(`/api/server/geocode?${query.toString()}`);
+ if (response.ok) {
+ setAddress(await response.text());
+ } else {
+ throw Error(await response.text());
+ }
+ });
+
+ if (address) {
+ return address;
+ }
+ return (<Link href="#" onClick={showAddress}>{t('sharedShowAddress')}</Link>);
+};
+
+export default AddressValue;
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index 76de2862..5810ae5e 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
import { Link } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import {
@@ -7,7 +7,7 @@ import {
import { useAttributePreference, usePreference } from '../util/preferences';
import { useTranslation } from './LocalizationProvider';
import { useAdministrator } from '../util/permissions';
-import { useCatch } from '../../reactHelper';
+import AddressValue from './AddressValue';
const PositionValue = ({ position, property, attribute }) => {
const t = useTranslation();
@@ -21,25 +21,6 @@ const PositionValue = ({ position, property, attribute }) => {
const speedUnit = useAttributePreference('speedUnit');
const coordinateFormat = usePreference('coordinateFormat');
- const [address, setAddress] = useState();
-
- useEffect(() => {
- setAddress(position.address);
- }, [position]);
-
- const showAddress = useCatch(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());
- } else {
- throw Error(await response.text());
- }
- });
-
const formatValue = () => {
switch (key) {
case 'fixTime':
@@ -83,10 +64,7 @@ const PositionValue = ({ position, property, attribute }) => {
</>
);
case 'address':
- if (address) {
- return address;
- }
- return (<Link href="#" onClick={showAddress}>{t('sharedShowAddress')}</Link>);
+ return (<AddressValue latitude={position.latitude} longitude={position.longitude} originalAddress={value} />);
case 'network':
if (value) {
return (<Link component={RouterLink} to={`/network/${position.id}`}>{t('sharedInfoTitle')}</Link>);
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index c5bb1003..9e42cb33 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -20,6 +20,7 @@ import useReportStyles from './common/useReportStyles';
import MapPositions from '../map/MapPositions';
import MapView from '../map/core/MapView';
import MapCamera from '../map/MapCamera';
+import AddressValue from '../common/components/AddressValue';
const columnsArray = [
['startTime', 'reportStartTime'],
@@ -73,6 +74,8 @@ const StopReportPage = () => {
return formatHours(item[key]);
case 'spentFuel':
return formatVolume(item[key], volumeUnit, t);
+ case 'address':
+ return (<AddressValue latitude={item.latitude} longitude={item.longitude} originalAddress={item[key]} />);
default:
return item[key];
}
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 4b8f4d40..d2b4d9ef 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -18,6 +18,7 @@ import { useCatch, useEffectAsync } from '../reactHelper';
import useReportStyles from './common/useReportStyles';
import MapView from '../map/core/MapView';
import MapRoutePath from '../map/MapRoutePath';
+import AddressValue from '../common/components/AddressValue';
const columnsArray = [
['startTime', 'reportStartTime'],
@@ -103,6 +104,10 @@ const TripReportPage = () => {
return formatHours(item[key]);
case 'spentFuel':
return formatVolume(item[key], volumeUnit, t);
+ case 'startAddress':
+ return (<AddressValue latitude={item.startLat} longitude={item.startLon} originalAddress={item[key]} />);
+ case 'endAddress':
+ return (<AddressValue latitude={item.endLat} longitude={item.endLon} originalAddress={item[key]} />);
default:
return item[key];
}