Working on Wpt save after edition.

src/components/wpt/Wpt.tsx

@@ -12,6 +12,7 @@ import GeoJSON from 'ol/format/GeoJSON';
 import { setBranch, tree } from '../map';
 import { Feature } from 'ol';
 import { useI18n } from '@solid-primitives/i18n';
+import { cloneDeep } from 'lodash';
 import Dialog from '../dialog';
 import { Box, Button, Grid, Stack, TextField } from '@suid/material';
 
@@ -29,6 +30,7 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
   const [t, { add, locale, dict }] = useI18n();
 
   const [wpt, setWpt] = createSignal<Wpt>();
+  const [editedWpt, setEditedWpt] = createSignal<Wpt>();
   const [dispatchId, setDispatchId] = createSignal<number>(-1);
 
   const getTitle = () => {
@@ -77,6 +79,7 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
 
   const edit = () => {
     setMode(Mode.EDIT);
+    setEditedWpt(cloneDeep(wpt()));
   };
 
   createEffect(() => {
@@ -115,6 +118,20 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
     setMode(Mode.CLOSED);
   };
 
+  const saveHandler = () => {
+    console.log({
+      caller: 'Wpt / saveHandler',
+      wptId,
+      editedWpt: editedWpt(),
+    });
+    // const newWpt = wpt();
+    // if (newWpt) {
+    //   newWpt.name = name.value;
+    // }
+    dispatch({ action: 'putWpt', params: { id: wptId, wpt: editedWpt() } });
+    setMode(Mode.CLOSED);
+  };
+
   return (
     <Dialog
       open={mode() === Mode.EDIT}
@@ -125,15 +142,17 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
         <div>
           <TextField
             required
-            id='name'
             label={t('name')}
             defaultValue={wpt()?.name}
+            onChange={(event: any, value: string) => {
+              setEditedWpt({ ...editedWpt(), name: value });
+            }}
           />
           <Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
             <Button variant='outlined' color='secondary' onClick={closeHandler}>
               {t('cancel')}
             </Button>
-            <Button variant='contained' color='success'>
+            <Button variant='contained' color='success' onClick={saveHandler}>
               {t('save')}
             </Button>
           </Stack>

src/db/change-handler.ts

@@ -11,7 +11,7 @@ const methods = {
 
 const changeHandler = async (change: any) => {
   console.log({ caller: 'ChangeHandler', change });
-  const { id } = change.id;
+  const { id } = change;
   if (!globalThis.watches) {
     globalThis.watches = new Map();
   }
@@ -19,7 +19,7 @@ const changeHandler = async (change: any) => {
   if (params) {
     const { method, _dispatchId, id, ...otherParams } = params;
     const returnValue = await methods[<keyof typeof methods>method](params);
-    if (false) {
+    if (returnValue) {
       returnAgain(_dispatchId, returnValue);
     }
   }

src/db/wpt.ts

@@ -43,9 +43,22 @@ export const putNewWpt = async (id?: IdGpx | IdWpt) => {
   return finalId as IdWpt;
 };
 
+export const putWpt = async (params: any) => {
+  console.log({ caller: 'putWpt', params });
+  const { id, wpt } = params;
+  await put(
+    id,
+    'wpt',
+    (_) => {
+      return wpt;
+    },
+    wpt
+  );
+  return id;
+};
 
 export const getWpt = async (params: any) => {
   const { id } = params;
   const doc = await get(id);
   return doc.doc;
-};
+};

src/workers/dispatcher-worker.ts

@@ -11,7 +11,7 @@ import {
 } from '../db/gpx';
 import { getTrk, putNewTrk } from '../db/trk';
 import { getTrkseg } from '../db/trkseg';
-import { getWpt } from '../db/wpt';
+import { getWpt, putWpt } from '../db/wpt';
 
 //const self = globalThis as unknown as WorkerGlobalScope;
 
@@ -31,6 +31,8 @@ onmessage = async function (e) {
     getTrkseg,
     getWpt,
 
+    putWpt,
+
     getAndWatch,
     cancelWatch,
   };