Allowing multiple Gpx files import

src/components/gpx-import/GpxImport.tsx

@@ -12,21 +12,28 @@ import { intToGpxId } from '../../lib/ids';
 
 const GpxImport: Component = () => {
   const onChangeHandler = (event: any) => {
-    console.log('On change handler');
+    console.log({
-    const file: File = event.target.files[0];
+      caller: 'GpxImport / On change handler',
+      files: event.target.files,
+    });
+    for (const file of event.target.files) {
       const fileReader = new FileReader();
       fileReader.readAsText(file);
 
       fileReader.addEventListener(
         'load',
-      () => {
+        async () => {
           // this will then display a text file
-        console.log({ caller: 'GpxImport / XML', result: fileReader.result });
+          console.log({
+            caller: 'GpxImport / XML',
+            file,
+            result: fileReader.result,
+          });
           const gpx = GPX.parse(fileReader.result);
-        console.log({ caller: 'GpxImport / JSON', gpx });
+          console.log({ caller: 'GpxImport / JSON', file, gpx });
           if (gpx) {
             const startTime = new Date(findStartTime(gpx)!);
-          dispatch({
+            await dispatch({
               action: 'pruneAndSaveImportedGpx',
               params: {
                 id: { gpx: intToGpxId(startTime.valueOf()) },
@@ -40,9 +47,11 @@ const GpxImport: Component = () => {
                 },
               },
             });
+            console.log({ caller: 'GpxImport / JSON / done', file, gpx });
           } else {
             console.error({
               message: "can't parse GPX file",
+              file,
               xml: fileReader.result,
             });
           }
@@ -50,6 +59,7 @@ const GpxImport: Component = () => {
         },
         false
       );
+    }
   };
 
   return (
@@ -63,6 +73,7 @@ const GpxImport: Component = () => {
           id='gpx-import'
           class={css.inputFile}
           accept='.gpx'
+          multiple={true}
           onChange={onChangeHandler}
         />
       </div>

src/db/gpx.ts

@@ -72,12 +72,20 @@ const prune = (id: any, object: any, docs: any[]) => {
         key === 'trkpt'
       ) {
         const subObjects = object[key];
+        let previousId = 0;
         for (const index in subObjects) {
           const subId = { ...id };
-          subId[key] =
+          if (key === 'trkpt') {
-            key === 'trkpt'
+            // fix buggy times in GPX tracks
-              ? intToTrkptId(new Date(object[key][index].time).valueOf())
+            const normalId = intToTrkptId(
-              : index;
+              new Date(object[key][index].time).valueOf()
+            );
+            const id = normalId > previousId ? normalId : previousId + 1;
+            subId[key] = id;
+            previousId = id;
+          } else {
+            subId[key] = index;
+          }
           // console.log({
           //   caller: 'prune',
           //   id,

src/db/index.ts

@@ -25,7 +25,7 @@ export const initDb = async (params: any) => {
   if (globalThis.db === undefined) {
     globalThis.db = new PouchDB('dyomedea', {
       auto_compaction: false,
-      revs_limit: 10,
+  //    revs_limit: 10,
     });
   }
   const db = globalThis.db;