GpxDialog (looking good).

package-lock.json

@@ -19,7 +19,7 @@
         "@solid-primitives/i18n": "^1.1.2",
         "@solidjs/router": "^0.5.1",
         "@suid/icons-material": "^0.5.1",
-        "@suid/material": "^0.8.0",
+        "@suid/material": "^0.8.1",
         "@suid/vite-plugin": "^0.1.0",
         "isomorphic-xml2js": "^0.1.3",
         "lodash": "^4.17.21",

package.json

@@ -35,7 +35,7 @@
     "@solid-primitives/i18n": "^1.1.2",
     "@solidjs/router": "^0.5.1",
     "@suid/icons-material": "^0.5.1",
-    "@suid/material": "^0.8.0",
+    "@suid/material": "^0.8.1",
     "@suid/vite-plugin": "^0.1.0",
     "isomorphic-xml2js": "^0.1.3",
     "lodash": "^4.17.21",

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>
     </>

src/db/gpx.ts

@@ -219,7 +219,7 @@ export const getAllGpxesWithSummary = async () => {
   const result = await Promise.all(
     allGpxes.map(async (id: string) => {
       const gpxDoc = await get(id);
-//      console.log({ caller: 'getAllGpxesWithSummary', gpx: gpxDoc });
+      //      console.log({ caller: 'getAllGpxesWithSummary', gpx: gpxDoc });
       return {
         id,
         name: gpxDoc.doc.metadata?.name,
@@ -304,3 +304,25 @@ export const getGpx = async (params: any) => {
   });
   return gpx;
 };
+
+export const putGpx = async (params: any) => {
+  const { id, gpx } = params;
+
+  const extensions = gpx?.extensions;
+
+  gpx.extensions = undefined;
+  gpx.wpt = undefined;
+  gpx.trk = undefined;
+  gpx.rte = undefined;
+
+  await put(id, 'gpx', (doc) => gpx, gpx);
+  if (extensions !== undefined) {
+    await put(
+      `${id}/4extensions`,
+      'extensions',
+      (doc) => extensions,
+      extensions
+    );
+  }
+  return id;
+};

src/i18n/en.ts

@@ -36,6 +36,11 @@ const dict = {
 
   gpxDialog: 'Current journey',
   gpxChooser: 'Journey',
+  gpxName: 'Name',
+  gpxDesc: 'Description',
+  gpxTime: 'Start date',
+  gpxSave: 'Save',
+
 };
 
 export default dict;

src/i18n/fr.ts

@@ -40,6 +40,10 @@ const dict = {
 
   gpxDialog: 'Voyage en cours',
   gpxChooser: 'Voyage',
+  gpxName: 'Nom',
+  gpxDesc: 'Description',
+  gpxTime: 'Date de début',
+  gpxSave: 'Sauvegarder',
 };
 
 export default dict;

src/workers/dispatcher-worker.ts

@@ -6,6 +6,7 @@ import {
   existsGpx,
   pruneAndSaveImportedGpx,
   getGpx,
+  putGpx,
   getAllGpxes,
   getAllGpxesWithSummary,
 } from '../db/gpx';
@@ -27,6 +28,7 @@ onmessage = async function (e) {
     getAllGpxes,
     getAllGpxesWithSummary,
     getGpx,
+    putGpx,
     getTrk,
     getTrkseg,
     getWpt,