Adding buttons to reverse geocode routes.

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<Props> = ({ 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<Props> = ({ 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 (
     <Tree
       title={
@@ -57,9 +79,32 @@ const RteViewer: Component<Props> = ({ rteId }) => {
       }
       content={
         <>
-          <div>{`${formatLength(length)} ${t('from')} ${getVillageOrTown(
-            startAddress()
-          )} ${t('to')} ${getVillageOrTown(endAddress())} `}</div>
+          <div>
+            {formatLength(length)} {t('from')}{' '}
+            <Show
+              when={!rte()?.extensions?.from}
+              fallback={<>{getVillageOrTown(rte()?.extensions?.from)}</>}
+            >
+              <IconButton
+                color='primary'
+                onClick={findClickHandlerFactory('from')}
+              >
+                <SearchIcon />
+              </IconButton>
+            </Show>{' '}
+            {t('to')}{' '}
+            <Show
+              when={!rte()?.extensions?.to}
+              fallback={<>{getVillageOrTown(rte()?.extensions?.to)}</>}
+            >
+              <IconButton
+                color='primary'
+                onClick={findClickHandlerFactory('to')}
+              >
+                <SearchIcon />
+              </IconButton>
+            </Show>
+          </div>
         </>
       }
       subTree={undefined}

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;
+};

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 });

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,