Improving TrkSegViewer

src/components/display-or-get-address/DisplayOrGetAddress.tsx

@@ -8,7 +8,7 @@ import { useI18n } from '@solid-primitives/i18n';
 import dispatch from '../../workers/dispatcher-main';
 
 interface Props {
-  target: any;
+  target: () => any;
   putAction: string;
   putParamName: string;
 }
@@ -20,14 +20,14 @@ const DisplayOrGetAddress: Component<Props> = ({
 }) => {
   const [t, { add, locale, dict }] = useI18n();
 
-  const findClickHandlerFactory = (target: any) => async () => {
+  const findClickHandler = async () => {
-    const address = await findAddress(target.$.lon, target.$.lat, locale);
+    const address = await findAddress(target().$.lon, target().$.lat, locale);
-    const updatedTarget = cloneDeep(target);
+    const updatedTarget = cloneDeep(target());
     if (updatedTarget.extensions === undefined) {
       updatedTarget.extensions = {};
     }
     updatedTarget.extensions.address = address;
-    const params: any = { id: target.id };
+    const params: any = { id: target().id };
     params[putParamName] = updatedTarget;
     dispatch({
       action: putAction,
@@ -37,14 +37,14 @@ const DisplayOrGetAddress: Component<Props> = ({
 
   return (
     <Show
-      when={target.extensions?.address}
+      when={target().extensions?.address}
       fallback={
-        <IconButton color='primary' onClick={findClickHandlerFactory(target)}>
+        <IconButton color='primary' onClick={findClickHandler}>
           <SearchIcon />
         </IconButton>
       }
     >
-      <>{getVillageOrTown(target.extensions?.address)}</>
+      <>{getVillageOrTown(target().extensions?.address)}</>
     </Show>
   );
 };

src/components/rte/RteViewer.tsx

@@ -4,7 +4,6 @@ import RteIcon from '../../icons/directions-svgrepo-com.svg?component-solid';
 import { useI18n } from '@solid-primitives/i18n';
 
 import Tree from '../tree';
-import { getLength } from 'ol/sphere';
 import { LineString } from 'ol/geom';
 import DisplayOrGetAddress from '../display-or-get-address';
 import { getFormatedLength } from '../../lib/ol';
@@ -16,7 +15,7 @@ interface Props {
 const RteViewer: Component<Props> = ({ rteId }) => {
   const [t, { add, locale, dict }] = useI18n();
 
-  const rte = peekCachedSignal({ id: rteId, method: 'getRte' });
+  const rte = peekCachedSignal({ id: rteId, action: 'getRte' });
   console.log({ caller: 'RteViewer', rteId, rte: rte() });
   const title = () => {
     return rte().name;
@@ -38,13 +37,13 @@ const RteViewer: Component<Props> = ({ rteId }) => {
           <div>
             {getFormatedLength(lineString)} {t('from')}{' '}
             <DisplayOrGetAddress
-              target={rte().rtept.at(0)}
+              target={() => rte().rtept.at(0)}
               putAction='putRtept'
               putParamName='rtept'
             />{' '}
             {t('to')}{' '}
             <DisplayOrGetAddress
-              target={rte().rtept.at(-1)}
+              target={() => rte().rtept.at(-1)}
               putAction='putRtept'
               putParamName='rtept'
             />

src/components/trkseg/TrksegViewer.tsx

@@ -2,18 +2,28 @@ import { Component } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import Tree from '../tree';
 import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';
+import { useI18n } from '@solid-primitives/i18n';
+import { getFormatedLength } from '../../lib/ol';
+import DisplayOrGetAddress from '../display-or-get-address';
+import { LineString } from 'ol/geom';
 
 interface Props {
   trksegId: string;
 }
 
 const TrksegViewer: Component<Props> = ({ trksegId }) => {
-  const trkseg = peekCachedSignal({ id: trksegId, method: 'getTrkseg' });
+  const [t, { add, locale, dict }] = useI18n();
+
+  const trkseg = peekCachedSignal({ id: trksegId, action: 'getTrkseg' });
   console.log({ caller: 'TrksegViewer', trksegId, trkseg: trkseg() });
   const title = () => {
     return trkseg().name;
   };
 
+  const lineString = new LineString(
+    trkseg().trkpt.map((trkpt: any) => [trkpt.$.lon, trkpt.$.lat])
+  );
+
   return (
     <Tree
       title={
@@ -21,7 +31,24 @@ const TrksegViewer: Component<Props> = ({ trksegId }) => {
           <TrkIcon fill='grey' width='16' height='16' /> {title()}
         </>
       }
-      content={undefined}
+      content={
+        <>
+          <div>
+            {getFormatedLength(lineString)} {t('from')}{' '}
+            <DisplayOrGetAddress
+              target={() => trkseg().trkpt.at(0)}
+              putAction='putTrkpt'
+              putParamName='trkpt'
+            />{' '}
+            {t('to')}{' '}
+            <DisplayOrGetAddress
+              target={() => trkseg().trkpt.at(-1)}
+              putAction='putTrkpt'
+              putParamName='trkpt'
+            />
+          </div>
+        </>
+      }
       subTree={undefined}
     />
   );

src/db/trkpt.ts

@@ -48,3 +48,11 @@ export const putNewTrkpt = async (id?: IdTrk | IdGpx | IdTrkseg | IdTrkpt) => {
   );
   return finalId;
 };
+
+
+export const putTrkpt = async (params: any) => {
+  const { id, trkpt } = params;
+  trkpt.id = undefined;
+  await put(id, 'trkpt', (doc) => trkpt, trkpt);
+  return trkpt;
+};

src/db/trkseg.ts

@@ -41,6 +41,7 @@ export const getTrkseg = async (params: any) => {
     //level 1
     if (row.doc.type === 'trkpt') {
       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/workers/dispatcher-worker.ts

@@ -17,6 +17,7 @@ import { putRtept } from '../db/rtept';
 import { getSettings, putSettings } from '../db/settings';
 import { getState, setState } from '../db/state';
 import { getTrk, putNewTrk } from '../db/trk';
+import { putTrkpt } from '../db/trkpt';
 import { getTrkseg, appendTrkpt } from '../db/trkseg';
 import { getWpt, putWpt } from '../db/wpt';
 import { until } from '../lib/async-wait';
@@ -51,6 +52,7 @@ onmessage = async function (e) {
     putWpt,
     putRte,
     putRtept,
+    putTrkpt,
 
     getState,
     setState,