`<Gpx>` component

src/components/all-gpxes/AllGpxes.tsx

@@ -1,21 +1,16 @@
-import {
-  Component,
-  createEffect,
-  createResource,
-  createSignal,
-} from 'solid-js';
+import { Component, createEffect, createResource, For } from 'solid-js';
 
 import OlMap from 'ol/Map';
 
 import dispatch from '../../workers/dispatcher-main';
-// import Gpx from './Gpx';
+import Gpx from '../gpx';
 
 interface Props {
-  map: OlMap | null;
+  map: () => OlMap | null;
 }
 
 export const AllGpxes: Component<Props> = ({ map }) => {
-  const [allGpxes] = createResource(
+  const [allGpxIds] = createResource(
     async () =>
       await dispatch({
         action: 'getAllGpxes',
@@ -24,10 +19,17 @@ export const AllGpxes: Component<Props> = ({ map }) => {
   );
 
   createEffect(() => {
-    console.log({ caller: 'AllGpxes', allGpxes: allGpxes() });
+    console.log({ caller: 'AllGpxes', allGpxes: allGpxIds(), map: map() });
   });
 
-  return <></>;
+  return (
+    <For each={allGpxIds()}>
+      {(gpxId) => {
+        console.log({ caller: 'AllGpxes / loop', gpxId });
+        return <Gpx map={map} gpxId={gpxId} />;
+      }}
+    </For>
+  );
 };
 
 export default AllGpxes;

src/components/gpx/Gpx.tsx

@@ -0,0 +1,33 @@
+import { Component, createEffect, createResource } from 'solid-js';
+
+import OlMap from 'ol/Map';
+
+import dispatch from '../../workers/dispatcher-main';
+//import Trk from './Trk';
+import getUri from '../../lib/ids';
+
+interface Props {
+  gpxId: string;
+  map: () => OlMap | null;
+}
+
+export const Gpx: Component<Props> = ({ map, gpxId }) => {
+  const [gpx] = createResource(
+    gpxId,
+    async () =>
+      await dispatch({
+        action: 'getGpx',
+        params: {
+          id: gpxId,
+        },
+      })
+  );
+
+  createEffect(() => {
+    console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx() });
+  });
+
+  return <></>;
+};
+
+export default Gpx;

src/components/gpx/index.ts

@@ -0,0 +1 @@
+export { default } from './Gpx';

src/components/map/Map.tsx

@@ -185,7 +185,7 @@ const Map: Component = () => {
       <Forward />
       <Back />
       <GpxImport />
-      <AllGpxes map={getMap()} />
+      <AllGpxes map={getMap} />
     </div>
   );
 };

src/db/gpx.ts

@@ -187,7 +187,7 @@ export const pruneAndSaveImportedGpx = async (params: any) => {
 };
 
 export const getAllGpxes = async () => {
-  return await getDocsByType('gpx');
+  return (await getDocsByType('gpx')).map((doc: any) => doc._id);
 };
 
 export const getGpxesForViewport = async (params: any) => {
@@ -261,13 +261,30 @@ export const getFullGpx = async (params: any) => {
 export const getGpx = async (params: any) => {
   const { id } = params;
   const docs = await getFamily(id, { include_docs: true });
-  console.log(`getGpx, uri: ${id} docs: ${JSON.stringify(docs)}`);
-  return docs.rows.filter(
-    (row: any) =>
-      row.doc.type === 'gpx' ||
+  let target: any[];
+  let gpx: Gpx | undefined = undefined;
+  docs.rows.forEach((row: any) => {
+    // level 0
+    if (row.doc.type === 'gpx') {
+      target = [row.doc.doc];
+      gpx = row.doc.doc;
+    }
+    //level 1 (extensions)
+    if (row.doc.type === 'extensions') {
+      target.splice(1);
+      appendToArray(target.at(-1), row.doc.type, row.doc.doc);
+      target.push(row.doc.doc);
+    }
+    //level 1 (others)
+    if (
       row.doc.type === 'wpt' ||
       row.doc.type === 'rte' ||
-      row.doc.type === 'trk' ||
-      row.doc.type === 'extensions'
-  );
+      row.doc.type === 'trk'
+    ) {
+      target.splice(1);
+      appendToArray(target.at(-1), row.doc.type, row.doc._id);
+      target.push(row.doc.doc);
+    }
+  });
+  return gpx;
 };

src/workers/dispatcher-main.ts

@@ -25,6 +25,7 @@ const dispatch = (
   payload: any,
   callBack?: (error: any, result: any) => void
 ) => {
+  console.log({ caller: 'dispatcher-main / dispatch', payload });
   if (worker === undefined) {
     init();
   }
@@ -47,7 +48,7 @@ const dispatch = (
     payload: payload,
   };
   worker.postMessage(message);
-  console.log({ caller: 'dispatcher-main / dispatch', message });
+  console.log({ caller: 'dispatcher-main / message sent', message });
 };
 
 export default dispatch;

src/workers/dispatcher-worker.ts

@@ -31,7 +31,6 @@ console.log({ caller: 'dispatcher-worker', actions });
 onmessage = async function (e) {
   console.log({ caller: 'dispatcher-worker / onmessage', e });
   const { id, payload } = e.data;
-  console.log(`payload.action in actions: ${payload.action in actions}`);
   var returnValue: any = 'unknownAction';
   if (payload.action in actions) {
     returnValue = await actions[<keyof typeof actions>payload.action](
@@ -39,6 +38,7 @@ onmessage = async function (e) {
     );
   }
   postMessage({ id: id, payload: returnValue });
+  console.log({ caller: 'dispatcher-worker / response sent', id, returnValue });
 };
 
 //export default self;