Displaying routes.

src/components/gpx/Gpx.tsx

@@ -18,6 +18,7 @@ import VectorLayer from 'ol/layer/Vector';
 
 import style from './styles';
 import Wpt from '../wpt';
+import Rte from '../rte';
 
 interface Props {
   gpxId: string;
@@ -83,6 +84,16 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
           );
         }}
       </For>
+      <For each={gpx() ? gpx().rte || [] : []}>
+        {(rteId: string) => {
+          console.log({ caller: 'Gpx / loop', rteId });
+          return (
+            <Suspense>
+              <Rte vectorSource={vectorSource} rteId={rteId} />
+            </Suspense>
+          );
+        }}
+      </For>
       <For each={gpx() ? gpx().wpt || [] : []}>
         {(wptId: string) => {
           console.log({ caller: 'Gpx / loop', wptId });

src/components/gpx/styles.ts

@@ -113,6 +113,28 @@ const styles = {
         anchor: [0.5, 1],
       }),
     },
+    rte: {
+      stroke: new Stroke({
+        color: 'green',
+        width: 5,
+      }),
+    },
+    'rte-start': {
+      image: new Icon({
+        src: startIcon,
+        scale: 0.3,
+        opacity: 0.6,
+        anchor: [0.5, 1],
+      }),
+    },
+    'rte-finish': {
+      image: new Icon({
+        src: finishIcon,
+        scale: 0.3,
+        opacity: 0.6,
+        anchor: [0.5, 1],
+      }),
+    },
     wpt: {
       image: (feature: Feature, zoom: number) => {
         const minZoom = feature.get('extensions')?.['dyo:minZoom'];
@@ -145,6 +167,12 @@ const styles = {
         width: 3,
       }),
     },
+    rte: {
+      stroke: new Stroke({
+        color: 'red',
+        width: 5,
+      }),
+    },
     wpt: {
       image: new Icon({
         src: wptIconSel,

src/components/rte/Rte.tsx

@@ -0,0 +1,100 @@
+import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
+
+import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
+import VectorSource from 'ol/source/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
+
+interface Props {
+  rteId: string;
+  vectorSource: VectorSource;
+}
+
+export const Rte: Component<Props> = ({ vectorSource, rteId }) => {
+  const [rte, setRte] = createSignal<Rte>();
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+
+  const rteCallBack = (error: any, result: any, id?: number) => {
+    if (error) {
+      console.error({ caller: 'rteCallBack', error });
+    } else {
+      console.log({ caller: 'rteCallBack', result });
+      setRte(result);
+    }
+    if (id) {
+      setDispatchId(id);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
+      params: {
+        id: rteId,
+        method: 'getRte',
+      },
+    },
+    rteCallBack,
+    true
+  );
+
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: rteId,
+        method: 'getRte',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
+  createEffect(() => {
+    console.log({ caller: 'Rte', vectorSource, rteId, rte: rte() });
+
+    if (rte()) {
+      let geo: any = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [rte().rtept[0].$.lon, rte().rtept[0].$.lat],
+            },
+            properties: { type: 'rte-start', id: rteId },
+          },
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'LineString',
+              coordinates: rte().rtept.map((rtept: any) => [
+                rtept.$.lon,
+                rtept.$.lat,
+              ]),
+            },
+            properties: { type: 'rte', id: rteId },
+          },
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [
+                rte().rtept.at(-1).$.lon,
+                rte().rtept.at(-1).$.lat,
+              ],
+            },
+            properties: { type: 'rte-finish', id: rteId },
+          },
+        ],
+      };
+
+      const features = new GeoJSON().readFeatures(geo);
+      console.log({ caller: 'Rte', features });
+      vectorSource.addFeatures(features);
+    }
+  });
+
+  return <></>;
+};
+
+export default Rte;

src/components/rte/index.tsx

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

src/db/change-handler.ts

@@ -1,6 +1,7 @@
 import { getWpt } from '../db/wpt';
 import { returnAgain } from '../workers/dispatcher-worker';
 import { getAllGpxes, getGpx } from './gpx';
+import { getRte } from './rte';
 import { getTrk } from './trk';
 import { getTrkseg } from './trkseg';
 
@@ -14,6 +15,7 @@ const methods = {
   getTrk,
   getTrkseg,
   getWpt,
+  getRte,
 };
 
 const sendUpdate = async (params: any) => {

src/db/rte.ts

@@ -1,6 +1,6 @@
 import getUri from '../lib/ids';
-import { putNewGpx } from './gpx';
-import { put } from './lib';
+import { appendToArray, putNewGpx } from './gpx';
+import { getFamily, put } from './lib';
 
 export const emptyRte: Rte = {
   name: undefined,
@@ -31,3 +31,24 @@ export const putNewRte = async (id?: IdRte | IdGpx) => {
   );
   return finalId as IdRte;
 };
+
+export const getRte = async (params: any) => {
+  const { id } = params;
+  const docs = await getFamily(id, { include_docs: true });
+  let target: any[];
+  let rte: Rte | undefined = undefined;
+  docs.rows.forEach((row: any) => {
+    // level 0
+    if (row.doc.type === 'rte') {
+      target = [row.doc.doc];
+      rte = row.doc.doc;
+    }
+    //level 1
+    if (row.doc.type === 'rtept') {
+      target.splice(1);
+      appendToArray(target.at(-1), row.doc.type, row.doc.doc);
+      target.push(row.doc.doc);
+    }
+  });
+  return rte;
+};

src/i18n/en.ts

@@ -10,7 +10,9 @@ const dict = {
   trkseg: 'track segment',
   'trkseg-start': 'start of track segment',
   'trkseg-finish': 'end of track segment',
-
+  rte: 'route',
+  'rte-start': 'start of route',
+  'rte-finish': 'end of route',
 
   name: 'Name',
   sym: 'Symbol',

src/i18n/fr.ts

@@ -12,6 +12,11 @@ const dict = {
   trkseg: 'segment de trace',
   'trkseg-start': 'début de segment de trace',
   'trkseg-finish': 'fin de segment de trace',
+  rte: 'route',
+  'rte-start': 'début de route',
+  'rte-finish': 'fin de route',
+
+
 
   name: 'Nom',
   sym: 'Symbole',