TrkViewer and TrksegViewer skeletons.

src/components/gpx/GpxViewer.tsx

@@ -2,6 +2,7 @@ import { Component, For } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import { RteViewer } from '../rte';
 import Tree from '../tree';
+import { TrkViewer } from '../trk';
 import { WptViewer } from '../wpt';
 import GpxIcon from './GpxIcon';
 
@@ -38,6 +39,9 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
             if (child.type === 'rte') {
               return <RteViewer rteId={key} />;
             }
+            if (child.type === 'trk') {
+              return <TrkViewer trkId={key} restrictToHierarchy={child} />;
+            }
             return <></>;
           }}
         </For>

src/components/rte/RteViewer.tsx

@@ -19,7 +19,7 @@ const RteViewer: Component<Props> = ({ rteId }) => {
     <Tree
       title={
         <>
-          <RteIcon fill='black' width='32' height='32' /> {title()}
+          <RteIcon fill='black' width='24' height='24' /> {title()}
         </>
       }
       content={undefined}

src/components/trk/TrkViewer.tsx

@@ -0,0 +1,42 @@
+import { Component, For, from } 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 { TrksegViewer } from '../trkseg';
+
+interface Props {
+  trkId: string;
+  restrictToHierarchy?: any;
+}
+
+const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
+  const trk = peekCachedSignal({ id: trkId, method: 'getTrk' });
+  console.log({ caller: 'TrkViewer', trkId, restrictToHierarchy, trk: trk() });
+  const title = () => {
+    return trk().name;
+  };
+
+  return (
+    <Tree
+      title={
+        <>
+          <TrkIcon width='24' height='24' /> {title()}
+        </>
+      }
+      content={undefined}
+      subTree={
+        <For
+          each={Object.keys(restrictToHierarchy).filter((key: string) =>
+            key.startsWith('gpx/')
+          )}
+        >
+          {(key: string) => {
+            return <TrksegViewer trksegId={key} />;
+          }}
+        </For>
+      }
+    />
+  );
+};
+
+export default TrkViewer;

src/components/trk/index.ts

@@ -1 +1,3 @@
 export { default } from './Trk';
+
+export { default as TrkViewer } from './TrkViewer';

src/components/trkseg/TrksegViewer.tsx

@@ -0,0 +1,30 @@
+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';
+
+interface Props {
+  trksegId: string;
+}
+
+const TrksegViewer: Component<Props> = ({ trksegId }) => {
+  const trkseg = peekCachedSignal({ id: trksegId, method: 'getTrkseg' });
+  console.log({ caller: 'TrksegViewer', trksegId, trkseg: trkseg() });
+  const title = () => {
+    return trkseg().name;
+  };
+
+  return (
+    <Tree
+      title={
+        <>
+          <TrkIcon fill='grey' width='16' height='16' /> {title()}
+        </>
+      }
+      content={undefined}
+      subTree={undefined}
+    />
+  );
+};
+
+export default TrksegViewer;

src/components/trkseg/index.ts

@@ -1 +1,3 @@
 export { default } from './Trkseg';
+
+export { default as TrksegViewer } from './TrksegViewer';

src/components/wpt/WptViewer.tsx

@@ -18,7 +18,7 @@ const WptViewer: Component<Props> = ({ wptId }) => {
     <Tree
       title={
         <>
-          <WptIcon fill='black' width="30" height="30" viewBox="0 0 300 300" /> {title()}
+          <WptIcon fill='black' width="24" height="24" viewBox="0 0 300 300" /> {title()}
         </>
       }
       content={undefined}