import { Component, createEffect, createResource, createSignal, onCleanup, } from 'solid-js'; import dispatch, { cancelDispatch } from '../../workers/dispatcher-main'; import VectorSource from 'ol/source/Vector'; import GeoJSON from 'ol/format/GeoJSON'; import { setBranch, tree } from '../map'; import { Feature } from 'ol'; import { useI18n } from '@solid-primitives/i18n'; import Dialog from '../dialog'; import { Box, Button, Grid, Stack, TextField } from '@suid/material'; interface Props { wptId: string; vectorSource: VectorSource; } enum Mode { CLOSED, EDIT, } export const Wpt: Component = ({ vectorSource, wptId: wptId }) => { const [t, { add, locale, dict }] = useI18n(); const [wpt, setWpt] = createSignal(); const [dispatchId, setDispatchId] = createSignal(-1); const getTitle = () => { if (wpt()?.name) { return `${wpt()?.name} (${t('wpt')})`; } return t('wpt'); }; const wptCallBack = (error: any, result: any, id?: number) => { if (error) { console.error({ caller: 'wptCallBack', error }); } else { console.log({ caller: 'wptCallBack', result }); setWpt(result); } if (id) { setDispatchId(id); } }; dispatch( { action: 'getAndWatch', params: { id: wptId, method: 'getWpt', }, }, wptCallBack, true ); onCleanup(() => { dispatch({ action: 'cancelWatch', params: { id: wptId, method: 'getWpt', }, }); cancelDispatch(dispatchId()); }); const [mode, setMode] = createSignal(Mode.CLOSED); const edit = () => { setMode(Mode.EDIT); }; createEffect(() => { console.log({ caller: 'Wpt', vectorSource, wptId, wpt: wpt() }); if (wpt() && !tree[wptId]) { let geo: any = { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [wpt()?.$.lon, wpt()?.$.lat], }, properties: { type: 'wpt', ...wpt(), id: wptId, getTitle, edit }, }, ], }; const features = new GeoJSON().readFeatures(geo); console.log({ caller: 'Wpt', features }); vectorSource.addFeatures(features); setBranch(wptId, { features, updateHandler }); } }); const updateHandler = (feature: Feature) => { console.log({ caller: 'Wpt / updateHandler / clicked', feature, }); }; const closeHandler = () => { setMode(Mode.CLOSED); }; return (
); }; export default Wpt;