Allowing multiple Gpx files import

src/components/gpx-import/GpxImport.tsx

@@ -12,44 +12,54 @@ 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',
-    const fileReader = new FileReader();
+      files: event.target.files,
-    fileReader.readAsText(file);
+    });
+    for (const file of event.target.files) {
+      const fileReader = new FileReader();
+      fileReader.readAsText(file);
 
-    fileReader.addEventListener(
+      fileReader.addEventListener(
-      'load',
+        'load',
-      () => {
+        async () => {
-        // this will then display a text file
+          // this will then display a text file
-        console.log({ caller: 'GpxImport / XML', result: fileReader.result });
+          console.log({
-        const gpx = GPX.parse(fileReader.result);
+            caller: 'GpxImport / XML',
-        console.log({ caller: 'GpxImport / JSON', gpx });
+            file,
-        if (gpx) {
+            result: fileReader.result,
-          const startTime = new Date(findStartTime(gpx)!);
+          });
-          dispatch({
+          const gpx = GPX.parse(fileReader.result);
-            action: 'pruneAndSaveImportedGpx',
+          console.log({ caller: 'GpxImport / JSON', file, gpx });
-            params: {
+          if (gpx) {
-              id: { gpx: intToGpxId(startTime.valueOf()) },
+            const startTime = new Date(findStartTime(gpx)!);
-              gpx: gpx,
+            await dispatch({
-              tech: {
+              action: 'pruneAndSaveImportedGpx',
-                lastModified: new Date(file.lastModified).toISOString(),
+              params: {
-                importDate: new Date().toISOString(),
+                id: { gpx: intToGpxId(startTime.valueOf()) },
-                name: file.name,
+                gpx: gpx,
-                size: file.size,
+                tech: {
-                type: file.type,
+                  lastModified: new Date(file.lastModified).toISOString(),
+                  importDate: new Date().toISOString(),
+                  name: file.name,
+                  size: file.size,
+                  type: file.type,
+                },
               },
-            },
+            });
-          });
+            console.log({ caller: 'GpxImport / JSON / done', file, gpx });
-        } else {
+          } else {
-          console.error({
+            console.error({
-            message: "can't parse GPX file",
+              message: "can't parse GPX file",
-            xml: fileReader.result,
+              file,
-          });
+              xml: fileReader.result,
-        }
+            });
-        // TODO: error handling
+          }
-      },
+          // TODO: error handling
-      false
+        },
-    );
+        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;