diff --git a/src/components/rte/RteViewer.tsx b/src/components/rte/RteViewer.tsx index 8c3005b..d1763f4 100644 --- a/src/components/rte/RteViewer.tsx +++ b/src/components/rte/RteViewer.tsx @@ -1,12 +1,16 @@ -import { Component, createResource } from 'solid-js'; +import { Component, createResource, Show } from 'solid-js'; import { peekCachedSignal } from '../../workers/cached-signals'; import RteIcon from '../../icons/directions-svgrepo-com.svg?component-solid'; +import SearchIcon from '@suid/icons-material/Search'; import { useI18n } from '@solid-primitives/i18n'; import Tree from '../tree'; import { findAddress, getVillageOrTown } from '../../lib/osm'; import { getLength } from 'ol/sphere'; import { Geometry, LineString } from 'ol/geom'; +import { IconButton } from '@suid/material'; +import { cloneDeep } from 'lodash'; +import dispatch from '../../workers/dispatcher-main'; interface Props { rteId: string; @@ -21,12 +25,12 @@ const RteViewer: Component = ({ rteId }) => { return rte().name; }; - const [startAddress] = createResource(rte, (r: Rte) => - findAddress(r.rtept[0].$.lon, r.rtept[0].$.lat, locale) - ); - const [endAddress] = createResource(rte, (r: Rte) => - findAddress(r.rtept.at(-1).$.lon, r.rtept.at(-1).$.lat, locale) - ); + // const [startAddress] = createResource(rte, (r: Rte) => + // findAddress(r.rtept[0].$.lon, r.rtept[0].$.lat, locale) + // ); + // const [endAddress] = createResource(rte, (r: Rte) => + // findAddress(r.rtept.at(-1).$.lon, r.rtept.at(-1).$.lat, locale) + // ); const formatLength = (length: number) => { if (length > 1000) { @@ -48,6 +52,24 @@ const RteViewer: Component = ({ rteId }) => { const length = getLength(geometry, { projection: 'EPSG:4326' }); + const findClickHandlerFactory = (target: string) => async () => { + const index = target === 'from' ? 0 : -1; + const address = await findAddress( + rte().rtept.at(index).$.lon, + rte().rtept.at(index).$.lat, + locale + ); + const updatedRte = cloneDeep(rte()); + if (updatedRte.extensions === undefined) { + updatedRte.extensions = {}; + } + updatedRte.extensions[target] = address; + dispatch({ + action: 'putRte', + params: { id: rteId, rte: updatedRte }, + }); + }; + return ( = ({ rteId }) => { } content={ <> -
{`${formatLength(length)} ${t('from')} ${getVillageOrTown( - startAddress() - )} ${t('to')} ${getVillageOrTown(endAddress())} `}
+
+ {formatLength(length)} {t('from')}{' '} + {getVillageOrTown(rte()?.extensions?.from)}} + > + + + + {' '} + {t('to')}{' '} + {getVillageOrTown(rte()?.extensions?.to)}} + > + + + + +
} subTree={undefined} diff --git a/src/db/rte.ts b/src/db/rte.ts index 0a61df8..eb6d342 100644 --- a/src/db/rte.ts +++ b/src/db/rte.ts @@ -52,3 +52,10 @@ export const getRte = async (params: any) => { }); return rte; }; + +export const putRte = async (params: any) => { + const { id, rte } = params; + rte.rtept = undefined; + await put(id, 'rte', (doc) => rte, rte); + return rte; +}; diff --git a/src/lib/osm.ts b/src/lib/osm.ts index c878a73..43ee3d0 100644 --- a/src/lib/osm.ts +++ b/src/lib/osm.ts @@ -8,7 +8,7 @@ export const _findAddress = async ( try { const response = await fetch( `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=jsonv2&addressdetails=1&extratags=1&namedetails=1&accept-language=${locale()}`, - {} + { headers: { 'User-Agent': 'Dyomedea' } } ); const data = await response.json(); console.log({ caller: 'findAddress', lon, lat, data }); diff --git a/src/workers/dispatcher-worker.ts b/src/workers/dispatcher-worker.ts index 8f6498d..da86f71 100644 --- a/src/workers/dispatcher-worker.ts +++ b/src/workers/dispatcher-worker.ts @@ -12,6 +12,7 @@ import { getAllGpxes, getAllGpxesWithSummary, } from '../db/gpx'; +import { putRte } from '../db/rte'; import { getSettings, putSettings } from '../db/settings'; import { getState, setState } from '../db/state'; import { getTrk, putNewTrk } from '../db/trk'; @@ -47,6 +48,8 @@ onmessage = async function (e) { getWpt, putWpt, + putRte, + getState, setState,