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}

src/icons/human-footprints-svgrepo-com.svg

@@ -0,0 +1,6 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 209.289 209.289" xml:space="preserve" stroke="#000000" stroke-width="0.8371559999999999">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M88.428,127.885c-2.506-3.788-5.712-7.119-8.413-10.791c-1.887-2.588-3.939-5.242-5.036-8.201 c-3.504-9.49-1.827-18.319,4.795-25.846c3.215-3.647,6.993-6.777,10.543-10.108c4.993-4.67,8.254-10.132,8.528-17.326 c0.283-7.657-3.477-13.911-10.336-15.789c-3.492-0.953-10.787-1.477-10.805-1.321c-10.489,0.518-20.572,2.706-29.8,8.013 c-8.418,4.838-14.453,11.71-16.13,21.748c-1.416,8.442-0.63,16.86,2.344,24.816c2.658,7.122,6.016,13.957,9.161,20.892 c3.696,8.141,6.135,16.593,6.333,25.629c0.052,2.332,0.137,4.689,0.582,6.96c1.458,7.636,5.017,13.786,12.208,17.135 c4.333,2.016,8.902,1.608,13.43,0.956c8.5-1.224,14.075-6.266,15.777-14.248C93.312,142.504,92.979,134.79,88.428,127.885z"/> <path d="M100.588,26.887c3.154-3.879,4.39-8.446,4.545-13.944c-0.101-0.804-0.176-2.155-0.432-3.486 c-0.204-1.108-0.536-2.207-0.936-3.261c-2.548-6.789-8.896-8.223-13.999-3.185c-5.087,5.03-6.744,16.018-3.371,22.438 C89.707,31.755,96.079,32.416,100.588,26.887z"/> <path d="M76.332,26.394c3.885-3.867,4.783-11.594,1.884-16.289c-2.576-4.177-7.079-4.414-10.12-0.478 c-1.979,2.554-2.789,5.547-2.765,8.783c-0.03,2.789,0.625,5.17,1.921,7.085C69.616,28.982,73.37,29.347,76.332,26.394z"/> <path d="M59.297,28.948c1.632-2.019,2.125-4.427,2.232-6.951c-0.119-2.6-0.63-5.063-2.338-7.091c-2.089-2.469-5.039-2.451-7.127,0 c-3.005,3.535-3.054,10.458-0.094,14.057C54.116,31.588,57.178,31.588,59.297,28.948z"/> <path d="M48.066,33.6c1.772-3.178,0.725-8.567-2.113-10.823c-2.137-1.702-4.658-1.236-5.849,1.239 c-0.536,1.142-0.709,2.451-1.053,3.687c0.28,2.838,1.071,5.313,3.248,7.094C44.37,36.496,46.757,35.951,48.066,33.6z"/> <path d="M38.695,42.019c0.804-1.254,1.129-2.832,1.696-4.372c-0.56-1.47-0.877-2.929-1.62-4.107 c-1.23-1.952-3.468-1.939-4.957-0.155c-1.833,2.18-1.964,6.333-0.262,8.646C35.042,44.046,37.349,44.138,38.695,42.019z"/> <path d="M134.024,84.308c0.018-0.159-7.149-1.604-10.778-1.604c-7.118-0.019-12.392,5.014-14.157,12.464 c-1.675,7.009,0.043,13.141,3.604,18.974c2.527,4.159,5.341,8.185,7.466,12.568c4.378,9,3.666,17.957-2.247,26.172 c-1.845,2.562-4.542,4.572-7.039,6.576c-3.574,2.837-7.541,5.176-10.979,8.171c-6.229,5.438-8.592,12.788-9.058,20.868 c-0.481,8.153,3.541,14.479,11.411,17.932c4.198,1.84,8.485,3.441,13.198,2.655c7.824-1.315,12.902-6.32,16.331-13.262 c1.022-2.077,1.747-4.329,2.411-6.57c2.594-8.671,7.191-16.167,12.928-23.023c4.865-5.846,9.931-11.545,14.4-17.688 c4.98-6.887,7.965-14.785,8.859-23.297c1.06-10.127-2.947-18.354-9.748-25.262C153.113,92.382,143.992,87.599,134.024,84.308z"/> <path d="M129.14,69.423c4.95-5.289,6.278-16.325,2.71-22.533c-3.562-6.211-10.054-6.519-14.334-0.652 c-0.658,0.914-1.279,1.885-1.778,2.902c-0.591,1.202-1.029,2.481-1.34,3.242c-1.309,5.337-1.333,10.074,0.676,14.65 C117.936,73.563,124.25,74.623,129.14,69.423z"/> <path d="M147.572,74.553c1.766-1.501,3.021-3.623,3.732-6.321c0.896-3.118,0.914-6.217-0.328-9.216 c-1.882-4.594-6.284-5.562-9.883-2.219c-4.031,3.76-5.237,11.442-2.521,16.197C140.63,76.635,144.357,77.272,147.572,74.553z"/> <path d="M161.376,81.969c3.812-2.682,5.607-9.358,3.647-13.569c-1.364-2.926-4.196-3.724-6.863-1.903 c-2.204,1.498-3.337,3.736-4.146,6.211c-0.561,2.469-0.725,4.914,0.305,7.294C155.665,83.108,158.593,83.927,161.376,81.969z"/> <path d="M163.897,87.486c0.64,2.606,2.801,3.766,5.249,2.688c2.569-1.142,3.994-3.312,5.011-5.973 c0-1.285,0.189-2.594-0.036-3.836c-0.481-2.712-2.782-3.82-5.304-2.749C165.48,79.032,163.026,83.946,163.897,87.486z"/> <path d="M177.695,91.054c-0.962-2.109-3.117-2.733-4.816-1.175c-1.029,0.944-1.717,2.259-2.655,3.532 c0.135,1.638,0.037,3.239,0.47,4.665c0.736,2.398,2.983,2.922,4.956,1.376C177.902,97.673,178.871,93.639,177.695,91.054z"/> </g> </g> </g>
+
</svg>