diff options
author | Anton Tananaev <anton@traccar.org> | 2022-06-15 18:49:15 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-06-15 18:49:15 -0700 |
commit | 5154c9be13ad1446b09feaaa843e621555ac7581 (patch) | |
tree | b6af81051fb500cb228476a64f90b1fe376ae5e3 /modern/src | |
parent | c407acaadc5dadbc7db917a11c8294aa7710b2cc (diff) | |
download | trackermap-web-5154c9be13ad1446b09feaaa843e621555ac7581.tar.gz trackermap-web-5154c9be13ad1446b09feaaa843e621555ac7581.tar.bz2 trackermap-web-5154c9be13ad1446b09feaaa843e621555ac7581.zip |
Address for trips and stops
Diffstat (limited to 'modern/src')
-rw-r--r-- | modern/src/common/components/AddressValue.js | 31 | ||||
-rw-r--r-- | modern/src/common/components/PositionValue.js | 28 | ||||
-rw-r--r-- | modern/src/reports/StopReportPage.js | 3 | ||||
-rw-r--r-- | modern/src/reports/TripReportPage.js | 5 |
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]; } |