import { Component, createEffect, createResource, createSignal, For, onCleanup, Suspense, } from 'solid-js'; import OlMap from 'ol/Map'; import dispatch, { cancelDispatch } from '../../workers/dispatcher-main'; import Trk from '../trk'; import getUri from '../../lib/ids'; import VectorSource from 'ol/source/Vector'; import VectorLayer from 'ol/layer/Vector'; import style from './styles'; import Wpt from '../wpt'; import Rte from '../rte'; interface Props { gpxId: string; map: () => OlMap | null; } export const Gpx: Component = ({ map, gpxId }) => { const [gpx, setGpx] = createSignal(); const [dispatchId, setDispatchId] = createSignal(-1); const gpxCallBack = (error: any, result: any, id?: number) => { if (error) { console.error({ caller: 'gpxCallBack', error }); } else { console.log({ caller: 'gpxCallBack', result }); setGpx(result); } if (id) { setDispatchId(id); } }; dispatch( { action: 'getAndWatch', params: { id: gpxId, method: 'getGpx', }, }, gpxCallBack, true ); onCleanup(() => { dispatch({ action: 'cancelWatch', params: { id: gpxId, method: 'getGpx', }, }); cancelDispatch(dispatchId()); }); const vectorSource = new VectorSource(); const vectorLayer = new VectorLayer({ source: vectorSource, style, declutter: true, }); createEffect(() => map()?.addLayer(vectorLayer)); createEffect(() => { console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayer }); }); return ( <> {(trkId: string) => { console.log({ caller: 'Gpx / loop', trkId }); return ( ); }} {(rteId: string) => { console.log({ caller: 'Gpx / loop', rteId }); return ( ); }} {(wptId: string) => { console.log({ caller: 'Gpx / loop', wptId }); return ( ); }} ); }; export default Gpx;