diff --git a/map/src/infoblock/components/favorite/WptEditPanel.jsx b/map/src/infoblock/components/favorite/WptEditPanel.jsx index 7bd91037b..07ae48cfa 100644 --- a/map/src/infoblock/components/favorite/WptEditPanel.jsx +++ b/map/src/infoblock/components/favorite/WptEditPanel.jsx @@ -55,7 +55,7 @@ export default function WptEditPanel({ setShowInfoBlock }) { const [favoriteName, setFavoriteName] = useState(editWpt?.name ?? ''); const [favoriteAddress, setFavoriteAddress] = useState(editWpt?.address ?? ctx.addFavorite?.address ?? ''); const [favoriteDescription, setFavoriteDescription] = useState(editWpt?.desc ?? ''); - const [addAddress, setAddAddress] = useState(isEditMode || isPoi); + const [addAddress, setAddAddress] = useState(isEditMode || isPoi || (isAddMode && !isAddTrackWpt)); const [addDescription, setAddDescription] = useState(isEditMode); const [favoriteGroup, setFavoriteGroup] = useState(null); const [favoriteIcon, setFavoriteIcon] = useState( @@ -486,8 +486,8 @@ export default function WptEditPanel({ setShowInfoBlock }) { )} {!addDescription && ( diff --git a/map/src/infoblock/components/favorite/structure/FavoriteAddress.jsx b/map/src/infoblock/components/favorite/structure/FavoriteAddress.jsx index a8463f0c2..be13d0ce7 100644 --- a/map/src/infoblock/components/favorite/structure/FavoriteAddress.jsx +++ b/map/src/infoblock/components/favorite/structure/FavoriteAddress.jsx @@ -1,48 +1,59 @@ -import { IconButton, ListItemText, TextField } from '@mui/material'; -import { Delete } from '@mui/icons-material'; -import React from 'react'; +import { Box, IconButton, InputAdornment, TextField, Tooltip } from '@mui/material'; +import { ReactComponent as CancelIcon } from '../../../../assets/icons/ic_action_cancel.svg'; +import { ReactComponent as LocationIcon } from '../../../../assets/icons/ic_action_location_marker_outlined.svg'; +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { getAddressByLatLon } from '../../wpt/WptDetails'; +import styles from '../wptEditPanel.module.css'; + +export default function FavoriteAddress({ favoriteAddress, setFavoriteAddress, widthDialog, latLon }) { + const { t } = useTranslation(); + + const [searching, setSearching] = useState(false); + + useEffect(() => { + if (!latLon?.lat || !latLon?.lon || favoriteAddress) return; + searchAddress(); + }, [latLon]); + + function searchAddress() { + if (!latLon?.lat || !latLon?.lon) return; + setSearching(true); + getAddressByLatLon(latLon.lat, latLon.lon).then((address) => { + setFavoriteAddress(address ?? ''); + setSearching(false); + }); + } -export default function FavoriteAddress({ favoriteAddress, setFavoriteAddress, setClose, widthDialog }) { return ( - + setFavoriteAddress(e.target.value)} - value={favoriteAddress} - autoFocus - sx={{ - maxWidth: '450px !important', - resize: 'none', - fontFamily: 'Arial', - color: 'black', - fontSize: 20, - ml: '-2px', - borderColor: '#bebdb4', - backgroundColor: 'transparent', - outlineColor: '#757575', - cursor: 'pointer', - '&[disabled]': { border: 'none' }, - mb: '-10px', - pb: '8px', - pt: '8px', + value={searching ? t('web:fav_address_searching') : favoriteAddress} + inputProps={{ className: styles.fieldInput }} + InputProps={{ + endAdornment: ( + + {favoriteAddress ? ( + setFavoriteAddress('')}> + + + ) : ( + + + + + + )} + + ), }} /> - {favoriteAddress && favoriteAddress !== '' && ( - { - if (setClose) { - setClose(false); - } - setFavoriteAddress(''); - }} - > - - - )} - + ); } diff --git a/map/src/infoblock/components/favorite/structure/FavoriteName.jsx b/map/src/infoblock/components/favorite/structure/FavoriteName.jsx index cd21001c9..6658555ad 100644 --- a/map/src/infoblock/components/favorite/structure/FavoriteName.jsx +++ b/map/src/infoblock/components/favorite/structure/FavoriteName.jsx @@ -1,8 +1,9 @@ -import { ListItemText, TextField } from '@mui/material'; +import { Box, TextField } from '@mui/material'; import React, { useContext, useEffect, useState } from 'react'; import AppContext from '../../../../context/AppContext'; import { getPropsFromSearchResultItem } from '../../../../menu/search/search/SearchResultItem'; import { useTranslation } from 'react-i18next'; +import styles from '../wptEditPanel.module.css'; export default function FavoriteName({ favoriteName, @@ -27,16 +28,15 @@ export default function FavoriteName({ } let group = ctx.favorites?.mapObjs?.[id]; let names = []; - group && - group.wpts.forEach((wpt) => { - if (favorite) { - if (wpt.name !== favorite.name) { - names.push(wpt.name); - } - } else { + group?.wpts.forEach((wpt) => { + if (favorite) { + if (wpt.name !== favorite.name) { names.push(wpt.name); } - }); + } else { + names.push(wpt.name); + } + }); validateName(favoriteName, names); setFavNames(names); }, [favoriteGroup]); @@ -60,14 +60,14 @@ export default function FavoriteName({ setErrorName(nameExists); } - function gerErrorText(favoriteName) { - if (favoriteName === '') { - return 'Empty name!'; + function getErrorText(name) { + if (name === '') { + return t('web:fav_name_empty'); } else if (nameAlreadyExist) { - return 'This name already exists!'; - } else { - return ' '; + return t('web:fav_name_already_exists'); } + + return ' '; } useEffect(() => { @@ -86,33 +86,19 @@ export default function FavoriteName({ }, [ctx.selectedWpt]); return ( - + setFavoriteName(e.target.value)} value={favoriteName} autoFocus error={favoriteName === '' || nameAlreadyExist} - helperText={gerErrorText(favoriteName)} - sx={{ - maxWidth: '450px !important', - resize: 'none', - fontFamily: 'Arial', - color: 'black', - fontSize: 20, - ml: '-2px', - borderColor: '#bebdb4', - backgroundColor: 'transparent', - outlineColor: '#757575', - cursor: 'pointer', - '&[disabled]': { border: 'none' }, - mb: '-10px', - pb: '8px', - pt: '8px', - }} + helperText={getErrorText(favoriteName)} + FormHelperTextProps={{ className: styles.helperText }} /> - + ); } diff --git a/map/src/infoblock/components/favorite/wptEditPanel.module.css b/map/src/infoblock/components/favorite/wptEditPanel.module.css index 29d107d42..4178acf00 100644 --- a/map/src/infoblock/components/favorite/wptEditPanel.module.css +++ b/map/src/infoblock/components/favorite/wptEditPanel.module.css @@ -13,7 +13,20 @@ } .fields { - padding: 8px 16px 16px 16px; + padding: 16px; +} + +.helperText { + height: 16px; + line-height: 16px; + margin: 2px 0 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.fieldInput { + padding-left: 8px !important; } .actions { diff --git a/map/src/infoblock/components/wpt/WptDetails.jsx b/map/src/infoblock/components/wpt/WptDetails.jsx index 5dc444ec7..ad0959bb8 100644 --- a/map/src/infoblock/components/wpt/WptDetails.jsx +++ b/map/src/infoblock/components/wpt/WptDetails.jsx @@ -161,6 +161,22 @@ export const ADDRESS_NOT_FOUND = i18n.t('web:no_data'); export const TYPE_NOT_FOUND = 'No type'; export const EMPTY_STRING = ''; +export async function getAddressByLatLon(lat, lon) { + if (lat == null || lon == null) return null; + const response = await apiGet(`${process.env.REACT_APP_ROUTING_API_SITE}/search/get-poi-address`, { + apiCache: true, + params: { lat, lon }, + }); + if (response?.data) { + return response.data + .replace(/ str\./g, '') + .replace(/ city/g, ',') + .replace(/ dist.*/g, ''); + } + + return null; +} + export default function WptDetails({ setOpenWptTab, setShowInfoBlock }) { const ctx = useContext(AppContext); const { t } = useTranslation(); @@ -639,25 +655,8 @@ export default function WptDetails({ setOpenWptTab, setShowInfoBlock }) { return fmt.dateTimeShort(time); } - async function getPoiAddress(wpt) { - if (wpt.latlon?.lat == null || wpt.latlon?.lon == null) { - return null; - } - const response = await apiGet(`${process.env.REACT_APP_ROUTING_API_SITE}/search/get-poi-address`, { - apiCache: true, - params: { - lat: wpt.latlon.lat, - lon: wpt.latlon.lon, - }, - }); - if (response?.data) { - return response.data - .replace(/ str\./g, '') - .replace(/ city/g, ',') - .replace(/ dist.*/g, ''); - } else { - return null; - } + function getPoiAddress(wpt) { + return getAddressByLatLon(wpt.latlon?.lat, wpt.latlon?.lon); } async function getPhotos(wpt) { diff --git a/map/src/resources/translations/en/web-translation.json b/map/src/resources/translations/en/web-translation.json index 7be8f228e..c4013029c 100644 --- a/map/src/resources/translations/en/web-translation.json +++ b/map/src/resources/translations/en/web-translation.json @@ -315,6 +315,11 @@ "rename_track_not_found": "Track not found.", "rename_empty_folder_name": "Empty folder name.", "rename_folder_already_exists": "Folder already exists.", + "fav_name_empty": "Empty name.", + "fav_name_already_exists": "This name already exists.", + "fav_address": "Address", + "fav_address_searching": "Searching...", + "fav_address_autofill": "Auto-fill address", "rename_item_not_found": "Folder or track was not found.", "garmin_sync_title": "Sync your activities", "garmin_sync_description": "Connect your account to sync Garmin Connectâ„¢ activities with OsmAnd.",