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

src/components/finder/Finder.tsx

@@ -12,6 +12,7 @@ import Dialog from '../dialog';
 import { getMap, getState } from '../map';
 import { Overlay } from 'ol';
 import { fromLonLat } from 'ol/proj';
+import WptEditDialog from '../wpt/WptEditDialog';
 
 interface Props {}
 
@@ -22,6 +23,7 @@ const Finder: Component<Props> = (props) => {
   const navigate = useNavigate();
   const [t, { add, locale, dict }] = useI18n();
   const [popup, setPopup] = createSignal<Overlay>();
+  const [coordinate, setCoordinate] = createSignal<Coordinate>();
   const searchStringChangeHandler = (event: any) => {
     setSearchString(event.target.value);
   };
@@ -33,38 +35,37 @@ const Finder: Component<Props> = (props) => {
   let popupElement: HTMLElement;
 
   const submitHandler = () => {
-    let coordinates: Coordinate | undefined = undefined;
     const latLonRegExp = /(-?[0-9]+.[0-9]+)\s*,\s*(-?[0-9]+.[0-9]+)/;
     const latLonMatch = searchString().match(latLonRegExp);
 
     if (!!latLonMatch) {
-      coordinates = [+latLonMatch[2], +latLonMatch[1]];
+      setCoordinate([+latLonMatch[2], +latLonMatch[1]]);
       setPopupContent(<>{latLonMatch[0]}</>);
       console.log({
         caller: 'Finder / submitHandler',
         searchString: searchString(),
         latLonMatch,
-        coordinates,
+        coordinate: coordinate(),
       });
     } else {
       const utmRegExp = /([0-6]?[0-9])\s*([C-X])\s*([0-9]+)\s*([0-9]+)/;
       const utmMatch = searchString().match(utmRegExp);
       if (!!utmMatch) {
         const utm = `+proj=utm +zone=${utmMatch[1]}`;
-        coordinates = proj4(utm, 'EPSG:4326', [+utmMatch[3], +utmMatch[4]]);
+        setCoordinate(proj4(utm, 'EPSG:4326', [+utmMatch[3], +utmMatch[4]]));
         setPopupContent(
-          <>{`${coordinates[0]}, ${coordinates[1]} (UTM ${utmMatch[0]})`}</>
+          <>{`${coordinate()[0]}, ${coordinate()[1]} (UTM ${utmMatch[0]})`}</>
         );
       }
       console.log({
         caller: 'Finder / submitHandler',
         searchString: searchString(),
         utmMatch,
-        coordinates,
+        coordinate: coordinate(),
       });
     }
 
-    if (!!coordinates) {
+    if (!!coordinate()) {
       setOpen(false);
       if (popup() === undefined) {
         setPopup(
@@ -77,22 +78,29 @@ const Finder: Component<Props> = (props) => {
       console.log({
         caller: 'Finder / submitHandler / popup',
         searchString: searchString(),
-        coordinates,
+        coordinate: coordinate(),
         popup: popup(),
         popupElement,
       });
       popup().setMap(getMap());
-      popup().setPosition(fromLonLat(coordinates));
+      popup().setPosition(fromLonLat(coordinate()));
       getMap()?.addOverlay(popup());
 
       navigate(
-        `/map/${getState().provider}/${coordinates[0]}/${coordinates[1]}/16/${
+        `/map/${getState().provider}/${coordinate()[0]}/${coordinate()[1]}/16/${
           getState().rotation
         }`
       );
     }
   };
 
+  const [openCreateWptDialog, setOpenCreateWptDialog] = createSignal(false);
+
+  const createWptCloseHandler = () => {
+    setOpenCreateWptDialog(false);
+    popupCloseHandler();
+  };
+
   return (
     <>
       <div class={style.control}>
@@ -135,8 +143,19 @@ const Finder: Component<Props> = (props) => {
         <div>
           <div>{popupContent()}</div>
           <div>
-            <Button>New waypoint</Button>
+            <Button
+              onClick={() => {
+                setOpenCreateWptDialog(true);
+              }}
+            >
+              New waypoint
+            </Button>
           </div>
+          <WptEditDialog
+            open={openCreateWptDialog}
+            closeHandler={createWptCloseHandler}
+            coordinate={coordinate}
+          />
         </div>
       </div>
     </>