From da053dcb508de84e1cdc622f50e83b52b5062e2f Mon Sep 17 00:00:00 2001 From: evlist Date: Fri, 9 Dec 2022 17:31:56 +0100 Subject: [PATCH] Displaying routes. --- src/components/gpx/Gpx.tsx | 11 ++++ src/components/gpx/styles.ts | 28 ++++++++++ src/components/rte/Rte.tsx | 100 +++++++++++++++++++++++++++++++++++ src/components/rte/index.tsx | 1 + src/db/change-handler.ts | 2 + src/db/rte.ts | 25 ++++++++- src/i18n/en.ts | 4 +- src/i18n/fr.ts | 5 ++ 8 files changed, 173 insertions(+), 3 deletions(-) create mode 100644 src/components/rte/Rte.tsx create mode 100644 src/components/rte/index.tsx diff --git a/src/components/gpx/Gpx.tsx b/src/components/gpx/Gpx.tsx index e7c9285..6367245 100644 --- a/src/components/gpx/Gpx.tsx +++ b/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 = ({ map, gpxId }) => { ); }} + + {(rteId: string) => { + console.log({ caller: 'Gpx / loop', rteId }); + return ( + + + + ); + }} + {(wptId: string) => { console.log({ caller: 'Gpx / loop', wptId }); diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 0bc2872..a50dafe 100644 --- a/src/components/gpx/styles.ts +++ b/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, diff --git a/src/components/rte/Rte.tsx b/src/components/rte/Rte.tsx new file mode 100644 index 0000000..b0b9eae --- /dev/null +++ b/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 = ({ vectorSource, rteId }) => { + const [rte, setRte] = createSignal(); + const [dispatchId, setDispatchId] = createSignal(-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; diff --git a/src/components/rte/index.tsx b/src/components/rte/index.tsx new file mode 100644 index 0000000..6928516 --- /dev/null +++ b/src/components/rte/index.tsx @@ -0,0 +1 @@ +export { default } from './Rte'; diff --git a/src/db/change-handler.ts b/src/db/change-handler.ts index 2a42fd4..a10ce27 100644 --- a/src/db/change-handler.ts +++ b/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) => { diff --git a/src/db/rte.ts b/src/db/rte.ts index 8febbc9..0a61df8 100644 --- a/src/db/rte.ts +++ b/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; +}; diff --git a/src/i18n/en.ts b/src/i18n/en.ts index ec1d02a..19ddc5a 100644 --- a/src/i18n/en.ts +++ b/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', diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts index 31cae95..1a59408 100644 --- a/src/i18n/fr.ts +++ b/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',