Improving TrkSegViewer

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