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'; import { useI18n } from '@solid-primitives/i18n'; import { cloneDeep } from 'lodash'; import Dialog from '../dialog'; import { Box, Button, 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 [editedWpt, setEditedWpt] = 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); setEditedWpt(cloneDeep(wpt())); }; createEffect(() => { console.log({ caller: 'Wpt', vectorSource, wptId, wpt: cloneDeep(wpt()) }); if (wpt()) { const existingFeature = vectorSource.getFeatureById(wptId); if (existingFeature) { vectorSource.removeFeature(existingFeature); } let geo: any = { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [wpt()?.$.lon, wpt()?.$.lat], }, properties: { type: 'wpt', ...wpt(), id: wptId, getTitle, edit }, id: wptId, }, ], }; const features = new GeoJSON().readFeatures(geo); console.log({ caller: 'Wpt', features }); vectorSource.addFeatures(features); } }); const closeHandler = () => { setMode(Mode.CLOSED); }; const saveHandler = () => { console.log({ caller: 'Wpt / saveHandler', wptId, editedWpt: editedWpt(), }); dispatch({ action: 'putWpt', params: { id: wptId, wpt: editedWpt() } }); setMode(Mode.CLOSED); }; return (
{ setEditedWpt({ ...editedWpt(), name: value }); }} /> { setEditedWpt({ ...editedWpt(), sym: value }); }} /> { const extensions = { ...editedWpt()?.extensions, 'dyo:minZoom': parseFloat(value), }; setEditedWpt({ ...editedWpt(), extensions }); }} />
); }; export default Wpt;