From 54f2ab06d9ebdca59c1e25307d4c461a6ed407bc Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sun, 27 Nov 2022 16:09:08 +0100
Subject: [PATCH] `<Trk>` component

---
 src/components/all-gpxes/AllGpxes.tsx |  3 ++-
 src/components/gpx/Gpx.tsx            | 14 +++++++++---
 src/components/trk/Trk.tsx            | 33 +++++++++++++++++++++++++++
 src/components/trk/index.ts           |  1 +
 src/db/gpx.ts                         |  2 +-
 src/db/trk.ts                         | 22 ++++++++++++++----
 6 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 src/components/trk/Trk.tsx
 create mode 100644 src/components/trk/index.ts

diff --git a/src/components/all-gpxes/AllGpxes.tsx b/src/components/all-gpxes/AllGpxes.tsx
index 301247b..2ffe6ac 100644
--- a/src/components/all-gpxes/AllGpxes.tsx
+++ b/src/components/all-gpxes/AllGpxes.tsx
@@ -23,8 +23,9 @@ export const AllGpxes: Component<Props> = ({ map }) => {
   });
 
   return (
+    // @ts-ignore
     <For each={allGpxIds()}>
-      {(gpxId) => {
+      {(gpxId: string) => {
         console.log({ caller: 'AllGpxes / loop', gpxId });
         return <Gpx map={map} gpxId={gpxId} />;
       }}
diff --git a/src/components/gpx/Gpx.tsx b/src/components/gpx/Gpx.tsx
index 751a25b..cf8b189 100644
--- a/src/components/gpx/Gpx.tsx
+++ b/src/components/gpx/Gpx.tsx
@@ -1,9 +1,9 @@
-import { Component, createEffect, createResource } from 'solid-js';
+import { Component, createEffect, createResource, For } from 'solid-js';
 
 import OlMap from 'ol/Map';
 
 import dispatch from '../../workers/dispatcher-main';
-//import Trk from './Trk';
+import Trk from '../trk';
 import getUri from '../../lib/ids';
 
 interface Props {
@@ -27,7 +27,15 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
     console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx() });
   });
 
-  return <></>;
+  return (
+    // @ts-ignore
+    <For each={gpx() ? gpx().trk || [] : []}>
+      {(trkId: string) => {
+        console.log({ caller: 'Gpx / loop', trkId });
+        return <Trk map={map} trkId={trkId} />;
+      }}
+    </For>
+  );
 };
 
 export default Gpx;
diff --git a/src/components/trk/Trk.tsx b/src/components/trk/Trk.tsx
new file mode 100644
index 0000000..f347c93
--- /dev/null
+++ b/src/components/trk/Trk.tsx
@@ -0,0 +1,33 @@
+import { Component, createEffect, createResource } from 'solid-js';
+
+import OlMap from 'ol/Map';
+
+import dispatch from '../../workers/dispatcher-main';
+import getUri from '../../lib/ids';
+
+//import Trkseg from './Trkseg';
+
+interface Props {
+  trkId: string;
+  map: () => OlMap | null;
+}
+export const Trk: Component<Props> = ({ map, trkId }) => {
+  const [trk] = createResource(
+    trkId,
+    async () =>
+      await dispatch({
+        action: 'getTrk',
+        params: {
+          id: trkId,
+        },
+      })
+  );
+
+  createEffect(() => {
+    console.log({ caller: 'Trk', map: map(), trkId, trk: trk() });
+  });
+
+  return <></>;
+};
+
+export default Trk;
diff --git a/src/components/trk/index.ts b/src/components/trk/index.ts
new file mode 100644
index 0000000..d12c91a
--- /dev/null
+++ b/src/components/trk/index.ts
@@ -0,0 +1 @@
+export { default } from './Trk';
diff --git a/src/db/gpx.ts b/src/db/gpx.ts
index f5f5778..b4e649c 100644
--- a/src/db/gpx.ts
+++ b/src/db/gpx.ts
@@ -215,7 +215,7 @@ export const getGpxesForViewport = async (params: any) => {
     );
 };
 
-const appendToArray = (target: any, key: string, value: any) => {
+export const appendToArray = (target: any, key: string, value: any) => {
   if (!(key in target)) {
     target[key] = <any>[];
   }
diff --git a/src/db/trk.ts b/src/db/trk.ts
index 70f8f5c..f595a10 100644
--- a/src/db/trk.ts
+++ b/src/db/trk.ts
@@ -1,5 +1,5 @@
 import getUri from '../lib/ids';
-import { putNewGpx } from './gpx';
+import { appendToArray, putNewGpx } from './gpx';
 import { getFamily, put } from './lib';
 
 export const emptyTrk: Trk = {
@@ -35,8 +35,20 @@ export const putNewTrk = async (id?: IdTrk | IdGpx) => {
 export const getTrk = async (params: any) => {
   const { id } = params;
   const docs = await getFamily(id, { include_docs: true });
-  console.log(`getTrk, uri: ${id} docs: ${JSON.stringify(docs)}`);
-  return docs.rows.filter(
-    (row: any) => row.doc.type === 'trk' || row.doc.type === 'trkseg'
-  );
+  let target: any[];
+  let trk: Trk | undefined = undefined;
+  docs.rows.forEach((row: any) => {
+    // level 0
+    if (row.doc.type === 'trk') {
+      target = [row.doc.doc];
+      trk = row.doc.doc;
+    }
+    //level 1
+    if (row.doc.type === 'trkseg') {
+      target.splice(1);
+      appendToArray(target.at(-1), row.doc.type, row.doc._id);
+      target.push(row.doc.doc);
+    }
+  });
+  return trk;
 };