GpxDialog (wip)

src/components/gpx-dialog/GpxDialog.tsx

@@ -1,14 +1,11 @@
 import { useI18n } from '@solid-primitives/i18n';
-import { OpenInBrowserTwoTone } from '@suid/icons-material';
 import {
   Box,
   FormControl,
   IconButton,
   InputLabel,
-  MenuItem,
   NativeSelect,
   SvgIcon,
-  TextField,
 } from '@suid/material';
 import { Component, createSignal, For } from 'solid-js';
 import dispatch from '../../workers/dispatcher-main';
@@ -16,21 +13,56 @@ import Dialog from '../dialog';
 //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
 import style from './GpxDialog.module.css';
 
-const GpxChooser: Component<{}> = (props) => {
+export const [currentGpxId, setCurrentGpxId] = createSignal<string>('');
+
+const GpxDialog: Component<{}> = (props) => {
   const [t] = useI18n();
   const [open, setOpen] = createSignal(false);
   const [allGpxes, setAllGpxes] = createSignal<any[]>([]);
+  const [selectedGpxId, setSelectedGpxId] = createSignal<string>('');
+  const [gpx, setGpx] = createSignal<Gpx>();
+
+  console.log({ caller: 'GpxDialog', currentGpx: currentGpxId() });
 
   const handleClickOpen = async () => {
     setOpen(true);
-    const newAllGpxes: any[] = await dispatch({
+    const newAllGpxes = await dispatch({
       action: 'getAllGpxesWithSummary',
     });
-    setAllGpxes(newAllGpxes);
+    setAllGpxes(newAllGpxes as any[]);
+    setSelectedGpxId(currentGpxId());
+    if (currentGpxId() !== '') {
+      const newGpx = await dispatch({
+        action: 'getGpx',
+        params: {
+          id: currentGpxId(),
+        },
+      });
+      setGpx(newGpx as Gpx);
+    }
+    console.log({
+      caller: 'GpxDialog / handleClickOpen',
+      currentGpxId: currentGpxId(),
+      gpx: gpx(),
+    });
   };
   const handleClose = () => {
     setOpen(false);
   };
+  const gpxChangeHandler = async (event: any) => {
+    console.log({
+      caller: 'GpxDialog / gpxChangeHandler',
+      value: event.target.value,
+    });
+    setSelectedGpxId(event.target.value);
+    const newGpx = await dispatch({
+      action: 'getGpx',
+      params: {
+        id: event.target.value,
+      },
+    });
+    setGpx(newGpx as Gpx);
+  };
 
   return (
     <>
@@ -75,17 +107,18 @@ const GpxChooser: Component<{}> = (props) => {
               {t('gpxChooser')}
             </InputLabel>
             <NativeSelect
-              defaultValue={30}
               inputProps={{
                 name: 'gpx-chooser',
                 id: 'gpx-chooser',
               }}
+              onChange={gpxChangeHandler}
             >
               <For each={allGpxes()}>
                 {(gpx) => (
-                  <option value={gpx.id}>{`${gpx.name || ''} (${
+                  <option
-                    gpx.creator
+                    value={gpx.id}
-                  })`}</option>
+                    selected={gpx.id === selectedGpxId()}
+                  >{`${gpx.name || gpx.id} (${gpx.creator})`}</option>
                 )}
               </For>
             </NativeSelect>
@@ -96,4 +129,4 @@ const GpxChooser: Component<{}> = (props) => {
   );
 };
 
-export default GpxChooser;
+export default GpxDialog;

src/components/gpx-dialog/index.ts

@@ -1 +1 @@
-export { default } from './GpxDialog';
+export { default, currentGpxId, setCurrentGpxId } from './GpxDialog';

src/components/map/Map.tsx

@@ -1,5 +1,4 @@
 import { Component, createEffect, createSignal, onMount } from 'solid-js';
-import { createStore } from 'solid-js/store';
 import { useParams, useNavigate } from '@solidjs/router';
 import OlMap from 'ol/Map';
 import View from 'ol/View';