Adding adresses to rtept rather than rte.

src/components/rte/RteViewer.tsx

@@ -50,23 +50,21 @@ const RteViewer: Component<Props> = ({ rteId }) => {
     rte().rtept.map((rtept: any) => [rtept.$.lon, rtept.$.lat])
   );
 
+  const firstRtept = rte().rtept.at(0);
+  const lastRtept = rte().rtept.at(-1);
+
   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 = {};
+  const findClickHandlerFactory = (rtept: any) => async () => {
+    const address = await findAddress(rtept.$.lon, rtept.$.lat, locale);
+    const updatedRtept = cloneDeep(rtept);
+    if (updatedRtept.extensions === undefined) {
+      updatedRtept.extensions = {};
     }
-    updatedRte.extensions[target] = address;
+    updatedRtept.extensions.address = address;
     dispatch({
-      action: 'putRte',
-      params: { id: rteId, rte: updatedRte },
+      action: 'putRtept',
+      params: { id: rtept.id, rtept: updatedRtept },
     });
   };
 
@@ -82,24 +80,28 @@ const RteViewer: Component<Props> = ({ rteId }) => {
           <div>
             {formatLength(length)} {t('from')}{' '}
             <Show
-              when={!rte()?.extensions?.from}
-              fallback={<>{getVillageOrTown(rte()?.extensions?.from)}</>}
+              when={!rte().rtept.at(0).extensions?.address}
+              fallback={
+                <>{getVillageOrTown(rte().rtept.at(0).extensions?.address)}</>
+              }
             >
               <IconButton
                 color='primary'
-                onClick={findClickHandlerFactory('from')}
+                onClick={findClickHandlerFactory(rte().rtept.at(0))}
               >
                 <SearchIcon />
               </IconButton>
             </Show>{' '}
             {t('to')}{' '}
             <Show
-              when={!rte()?.extensions?.to}
-              fallback={<>{getVillageOrTown(rte()?.extensions?.to)}</>}
+              when={!rte().rtept.at(-1).extensions?.address}
+              fallback={
+                <>{getVillageOrTown(rte().rtept.at(-1).extensions?.address)}</>
+              }
             >
               <IconButton
                 color='primary'
-                onClick={findClickHandlerFactory('to')}
+                onClick={findClickHandlerFactory(rte().rtept.at(-1))}
               >
                 <SearchIcon />
               </IconButton>

src/db/rte.ts

@@ -46,6 +46,7 @@ export const getRte = async (params: any) => {
     //level 1
     if (row.doc.type === 'rtept') {
       target.splice(1);
+      row.doc.doc.id = row.doc._id;
       appendToArray(target.at(-1), row.doc.type, row.doc.doc);
       target.push(row.doc.doc);
     }

src/db/rtept.ts

@@ -42,3 +42,10 @@ export const putNewRtept = async (id?: IdGpx | IdRte | IdRtept) => {
   );
   return finalId as IdRtept;
 };
+
+export const putRtept = async (params: any) => {
+  const { id, rtept } = params;
+  rtept.id = undefined;
+  await put(id, 'rtept', (doc) => rtept, rtept);
+  return rtept;
+};

src/db/types.d.ts

@@ -49,6 +49,7 @@ interface Extensions {
   'dyo:batterylevel'?: number;
   'dyo:useragent'?: string;
   'dyo:minZoom'?: number;
+  address: any;
 }
 
 interface Trk {

src/workers/dispatcher-worker.ts

@@ -13,6 +13,7 @@ import {
   getAllGpxesWithSummary,
 } from '../db/gpx';
 import { putRte } from '../db/rte';
+import { putRtept } from '../db/rtept';
 import { getSettings, putSettings } from '../db/settings';
 import { getState, setState } from '../db/state';
 import { getTrk, putNewTrk } from '../db/trk';
@@ -49,6 +50,7 @@ onmessage = async function (e) {
 
     putWpt,
     putRte,
+    putRtept,
 
     getState,
     setState,