Relying on the change handler for Gpx, Trk and Trkseg too.

This commit is contained in:
Eric van der Vlist 2022-12-09 15:18:14 +01:00
parent c2d6f6f285
commit f84c82bc32
4 changed files with 122 additions and 33 deletions

View File

@ -2,13 +2,15 @@ import {
Component,
createEffect,
createResource,
createSignal,
For,
onCleanup,
Suspense,
} from 'solid-js';
import OlMap from 'ol/Map';
import dispatch from '../../workers/dispatcher-main';
import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
import Trk from '../trk';
import getUri from '../../lib/ids';
import VectorSource from 'ol/source/Vector';
@ -23,17 +25,44 @@ interface Props {
}
export const Gpx: Component<Props> = ({ map, gpxId }) => {
const [gpx] = createResource(
gpxId,
async () =>
await dispatch({
action: 'getGpx',
const [gpx, setGpx] = createSignal<Gpx>();
const [dispatchId, setDispatchId] = createSignal<number>(-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 });
createEffect(() => map()?.addLayer(vectorLayer));

View File

@ -2,13 +2,15 @@ import {
Component,
createEffect,
createResource,
createSignal,
For,
onCleanup,
Suspense,
} from 'solid-js';
import OlMap from 'ol/Map';
import dispatch from '../../workers/dispatcher-main';
import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
import getUri from '../../lib/ids';
import Trkseg from '../trkseg';
@ -19,17 +21,44 @@ interface Props {
vectorSource: VectorSource;
}
export const Trk: Component<Props> = ({ vectorSource, trkId }) => {
const [trk] = createResource(
trkId,
async () =>
await dispatch({
action: 'getTrk',
const [trk, setTrk] = createSignal<Trk>();
const [dispatchId, setDispatchId] = createSignal<number>(-1);
const trkCallBack = (error: any, result: any, id?: number) => {
if (error) {
console.error({ caller: 'trkCallBack', error });
} else {
console.log({ caller: 'trkCallBack', result });
setTrk(result);
}
if (id) {
setDispatchId(id);
}
};
dispatch(
{
action: 'getAndWatch',
params: {
id: trkId,
method: 'getTrk',
},
})
},
trkCallBack,
true
);
onCleanup(() => {
dispatch({
action: 'cancelWatch',
params: {
id: trkId,
method: 'getTrk',
},
});
cancelDispatch(dispatchId());
});
createEffect(() => {
console.log({ caller: 'Trk', vectorSource, trkId, trk: trk() });
});

View File

@ -1,9 +1,8 @@
import { Component, createEffect, createResource } from 'solid-js';
import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
import dispatch from '../../workers/dispatcher-main';
import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import { Feature } from 'ol';
interface Props {
trksegId: string;
@ -11,17 +10,44 @@ interface Props {
}
export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
const [trkseg] = createResource(
trksegId,
async () =>
await dispatch({
action: 'getTrkseg',
const [trkseg, setTrkseg] = createSignal<Trkseg>();
const [dispatchId, setDispatchId] = createSignal<number>(-1);
const trksegCallBack = (error: any, result: any, id?: number) => {
if (error) {
console.error({ caller: 'trksegCallBack', error });
} else {
console.log({ caller: 'trksegCallBack', result });
setTrkseg(result);
}
if (id) {
setDispatchId(id);
}
};
dispatch(
{
action: 'getAndWatch',
params: {
id: trksegId,
method: 'getTrkseg',
},
})
},
trksegCallBack,
true
);
onCleanup(() => {
dispatch({
action: 'cancelWatch',
params: {
id: trksegId,
method: 'getTrkseg',
},
});
cancelDispatch(dispatchId());
});
createEffect(() => {
console.log({ caller: 'Trkseg', vectorSource, trksegId, trkseg: trkseg() });

View File

@ -1,6 +1,8 @@
import { getWpt } from '../db/wpt';
import { returnAgain } from '../workers/dispatcher-worker';
import { getAllGpxes } from './gpx';
import { getAllGpxes, getGpx } from './gpx';
import { getTrk } from './trk';
import { getTrkseg } from './trkseg';
declare global {
var watches: Map<string, any>;
@ -8,6 +10,9 @@ declare global {
const methods = {
getAllGpxes,
getGpx,
getTrk,
getTrkseg,
getWpt,
};