GpxDialog (working).

src/components/gpx-dialog/GpxDialog.tsx

@@ -17,7 +17,7 @@ import Dialog from '../dialog';
 //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
 import style from './GpxDialog.module.css';
 
-export const [currentGpxId, setCurrentGpxId] = createSignal<string>('');
+export const [currentGpxId, setCurrentGpxId] = createSignal<string>('new');
 
 const GpxDialog: Component<{}> = (props) => {
   const [t] = useI18n();
@@ -30,10 +30,13 @@ const GpxDialog: Component<{}> = (props) => {
 
   const handleClickOpen = async () => {
     setOpen(true);
-    const newAllGpxes = await dispatch({
+    const newAllGpxes = (await dispatch({
       action: 'getAllGpxesWithSummary',
-    });
-    setAllGpxes(newAllGpxes as any[]);
+    })) as any[];
+    setAllGpxes([
+      { id: 'new', name: t('newGpx'), creator: 'dyomedea' },
+      ...newAllGpxes,
+    ]);
     setSelectedGpxId(currentGpxId());
     if (currentGpxId() !== '') {
       const newGpx = await dispatch({
@@ -111,14 +114,14 @@ const GpxDialog: Component<{}> = (props) => {
   };
 
   const saveHandler = async (event: any) => {
-    setCurrentGpxId(selectedGpxId());
-    await dispatch({
+    const id = (await dispatch({
       action: 'putGpx',
       params: {
         id: selectedGpxId(),
         gpx: gpx(),
       },
-    });
+    })) as string;
+    setCurrentGpxId(id);
     setOpen(false);
   };
 

src/db/change-handler.ts

@@ -43,7 +43,7 @@ const changeHandler = async (change: any) => {
   if (parentId === 'gpx') {
     const gpxes = await getAllGpxes();
     console.log({ caller: 'changeHandler / gpxes', gpxes, id });
-    if (!(id in gpxes)) {
+    if (!gpxes.includes(id)) {
       await put(
         parentId,
         `idx-${parentId}`,

src/db/gpx.ts

@@ -1,10 +1,11 @@
+import { cloneDeep } from 'lodash';
 import { PureComponent } from 'react';
 import { Point, Rectangle } from '../components/map/types';
 import { lat2tile, lon2tile, rectanglesIntersect } from '../lib/geo';
 import getUri, { intToGpxId, intToTrkptId } from '../lib/ids';
 import { get, getDocsByType, getFamily, put, putAll } from './lib';
 
-const emptyGpx: Gpx = {
+export const emptyGpx: Gpx = {
   $: {
     version: '1.1',
     creator: 'dyomedea version 0.000002',
@@ -276,6 +277,13 @@ export const getFullGpx = async (params: any) => {
 
 export const getGpx = async (params: any) => {
   const { id } = params;
+
+  if (id === 'new') {
+    const newGpx = cloneDeep(emptyGpx);
+    newGpx.metadata!.time = new Date().toISOString();
+    return newGpx;
+  }
+
   const docs = await getFamily(id, { include_docs: true });
   let target: any[];
   let gpx: Gpx | undefined = undefined;
@@ -306,7 +314,13 @@ export const getGpx = async (params: any) => {
 };
 
 export const putGpx = async (params: any) => {
-  const { id, gpx } = params;
+  let { id, gpx } = params;
+
+  if (id === 'new') {
+    id = getUri('gpx', {
+      gpx: intToGpxId(new Date(gpx.metadata.time).valueOf()),
+    });
+  }
 
   const extensions = gpx?.extensions;
 

src/i18n/en.ts

@@ -40,7 +40,7 @@ const dict = {
   gpxDesc: 'Description',
   gpxTime: 'Start date',
   gpxSave: 'Save',
-
+  newGpx: '-- new journey --',
 };
 
 export default dict;

src/i18n/fr.ts

@@ -44,6 +44,7 @@ const dict = {
   gpxDesc: 'Description',
   gpxTime: 'Date de début',
   gpxSave: 'Sauvegarder',
+  newGpx: '-- nouveau voyage --',
 };
 
 export default dict;