Wpt editor: we can add waypoints (at last !)

src/components/wpt/WptEditDialog.tsx

@@ -1,31 +1,65 @@
 import { Box, Button, Stack, TextField } from '@suid/material';
-import { Component, createEffect, createSignal } from 'solid-js';
+import { Component, createEffect, createSignal, Show } from 'solid-js';
 import { useI18n } from '@solid-primitives/i18n';
 
 import Dialog from '../dialog';
-import { peekCachedSignal } from '../../workers/cached-signals';
+import {
+  cachedSignalValue,
+  peekCachedSignal,
+} from '../../workers/cached-signals';
 import dispatch from '../../workers/dispatcher-main';
+import { emptyWpt } from '../../db/wpt';
+import GpxChooser from '../gpx-chooser';
+import { currentGpxId } from '../gpx-dialog';
+import { emptyGpx } from '../../db/gpx';
+import getUri from '../../lib/ids';
+import { Coordinate } from 'ol/coordinate';
 
 interface Props {
-  wptId: string;
+  wptId?: string;
+  coordinate?: () => Coordinate | undefined;
   open: () => boolean;
   closeHandler?: () => vpod;
 }
 
 const WptEditDialog: Component<Props> = (props) => {
-  const { wptId, closeHandler, open } = props;
+  const { wptId, closeHandler, open, coordinate } = props;
   const [t, { add, locale, dict }] = useI18n();
 
-  const wpt = peekCachedSignal({ id: wptId, method: 'getWpt' });
+  const wpt = !!wptId
+    ? peekCachedSignal({ id: wptId, method: 'getWpt' })
+    : () => emptyWpt;
+
+  const [gpxId, setGpxId] = !wptId
+    ? createSignal<string>(currentGpxId())
+    : [() => '', () => {}];
+
+  createEffect(() => {
+    setGpxId(currentGpxId());
+  });
+
   const [editedWpt, setEditedWpt] = createSignal<Wpt>();
 
   createEffect(() => {
     console.log({
       caller: 'WptEditDialog / createEffect',
       wptId,
+      gpxId: gpxId(),
       wpt: wpt(),
     });
-    setEditedWpt(wpt());
+    const newWpt = editedWpt() || wpt();
+    if (!!coordinate && !!coordinate()) {
+      newWpt.$.lon = coordinate()[0];
+      newWpt.$.lat = coordinate()[1];
+    }
+    console.log({
+      caller: 'WptEditDialog / createEffect',
+      wptId,
+      gpxId: gpxId(),
+      wpt: wpt(),
+      newWpt,
+    });
+    setEditedWpt(newWpt);
   });
 
   const _closeHandler = () => {
@@ -34,13 +68,46 @@ const WptEditDialog: Component<Props> = (props) => {
     }
   };
 
-  const saveHandler = () => {
+  const saveHandler = async () => {
     console.log({
       caller: 'WptEditDialog / saveHandler',
       wptId,
       editedWpt: editedWpt(),
     });
-    dispatch({ action: 'putWpt', params: { id: wptId, wpt: editedWpt() } });
+    let newWptId = wptId;
+    if (!newWptId) {
+      if (gpxId() === 'new') {
+        const id = (await dispatch({
+          action: 'putGpx',
+          params: {
+            id: 'new',
+            gpx: emptyGpx,
+          },
+        })) as string;
+        setGpxId(id);
+      }
+      const gpx = await cachedSignalValue({ method: 'getGpx', id: gpxId() });
+      const gpxIdObj = getUri('gpx', gpxId());
+      const lastWptId = gpx.wpt?.at(-1);
+      const lastWptIdObj = !!lastWptId
+        ? getUri('wpt', lastWptId)
+        : {
+            gpx: gpxIdObj.gpx,
+            wpt: -1,
+          };
+      newWptId = getUri('wpt', { ...lastWptIdObj, wpt: lastWptIdObj.wpt + 1 });
+    }
+    console.log({
+      caller: 'WptEditDialog / saveHandler',
+      wptId,
+      editedWpt: editedWpt(),
+      newWptId,
+    });
+    dispatch({
+      action: 'putWpt',
+      params: { id: newWptId, wpt: editedWpt() },
+    });
+
     _closeHandler();
   };
 
@@ -57,6 +124,10 @@ const WptEditDialog: Component<Props> = (props) => {
       title={getTitle()}
       closeHandler={_closeHandler}
     >
+      <Show when={!wptId}>
+        <GpxChooser gpxId={gpxId} setGpxId={setGpxId} />
+      </Show>
+
       <Box
         component='form'
         sx={{