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}