GpxDialog (looking good).

src/components/gpx-dialog/GpxDialog.tsx

@@ -1,13 +1,17 @@
 import { useI18n } from '@solid-primitives/i18n';
 import {
   Box,
+  Button,
   FormControl,
   IconButton,
+  Input,
   InputLabel,
   NativeSelect,
   SvgIcon,
+  TextField,
 } from '@suid/material';
-import { Component, createSignal, For } from 'solid-js';
+import { cloneDeep } from 'lodash';
+import { Component, createSignal, For, Show } from 'solid-js';
 import dispatch from '../../workers/dispatcher-main';
 import Dialog from '../dialog';
 //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
@@ -50,10 +54,6 @@ const GpxDialog: Component<{}> = (props) => {
     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',
@@ -62,6 +62,64 @@ const GpxDialog: Component<{}> = (props) => {
       },
     });
     setGpx(newGpx as Gpx);
+    console.log({
+      caller: 'GpxDialog / gpxChangeHandler',
+      value: event.target.value,
+      gpx: gpx(),
+    });
+  };
+
+  const gpxNameChangeHandler = (event: any) => {
+    const newGpx: Gpx = cloneDeep(gpx()) as Gpx;
+    if (newGpx.metadata === undefined) {
+      newGpx.metadata = {};
+    }
+    newGpx.metadata.name = event.target.value;
+    setGpx(newGpx);
+    console.log({
+      caller: 'GpxDialog / gpxNameChangeHandler',
+      value: event.target.value,
+      gpx: gpx(),
+    });
+  };
+
+  const gpxDescChangeHandler = (event: any) => {
+    const newGpx: Gpx = cloneDeep(gpx()) as Gpx;
+    if (newGpx.metadata === undefined) {
+      newGpx.metadata = {};
+    }
+    newGpx.metadata.desc = event.target.value;
+    setGpx(newGpx);
+    console.log({
+      caller: 'GpxDialog / gpxDescChangeHandler',
+      value: event.target.value,
+      gpx: gpx(),
+    });
+  };
+  const gpxTimeChangeHandler = (event: any) => {
+    const newGpx: Gpx = cloneDeep(gpx()) as Gpx;
+    if (newGpx.metadata === undefined) {
+      newGpx.metadata = {};
+    }
+    newGpx.metadata.time = new Date(event.target.value).toISOString();
+    setGpx(newGpx);
+    console.log({
+      caller: 'GpxDialog / gpxTimeChangeHandler',
+      value: event.target.value,
+      gpx: gpx(),
+    });
+  };
+
+  const saveHandler = async (event: any) => {
+    setCurrentGpxId(selectedGpxId());
+    await dispatch({
+      action: 'putGpx',
+      params: {
+        id: selectedGpxId(),
+        gpx: gpx(),
+      },
+    });
+    setOpen(false);
   };
 
   return (
@@ -98,11 +156,13 @@ const GpxDialog: Component<{}> = (props) => {
           component='form'
           sx={{
             width: '100%',
-            '& .MuiTextField-root': { m: 1, width: '25ch' },
+            '& .MuiTextField-root': { m: 1, width: '100%' },
             paddingTop: '5px',
           }}
+          noValidate
+          autoComplete='off'
         >
-          <FormControl fullWidth>
+          <FormControl>
             <InputLabel variant='normal' htmlFor='gpx-chooser'>
               {t('gpxChooser')}
             </InputLabel>
@@ -123,6 +183,30 @@ const GpxDialog: Component<{}> = (props) => {
               </For>
             </NativeSelect>
           </FormControl>
+          <Show when={gpx() != undefined}>
+            <TextField
+              label={t('gpxName')}
+              value={gpx()?.metadata?.name || ''}
+              onChange={gpxNameChangeHandler}
+            />
+            <TextField
+              label={t('gpxTime')}
+              type='datetime-local'
+              value={(gpx()?.metadata?.time || '').replace('Z', '')}
+              onChange={gpxTimeChangeHandler}
+            />
+            <TextField
+              label={t('gpxDesc')}
+              multiline={true}
+              rows={5}
+              value={gpx()?.metadata?.desc || ''}
+              onChange={gpxDescChangeHandler}
+              InputProps={{ inputComponent: 'textarea' }}
+            />
+            <Button variant='contained' onClick={saveHandler}>
+              {t('gpxSave')}
+            </Button>
+          </Show>
         </Box>
       </Dialog>
     </>