Starting to implement a proper UI for GPX import.

src/components/gpx-import/GpxImport.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'solid-js';
+import { Component, createSignal, Show } from 'solid-js';
 
 import CloudUploadIcon from '@suid/icons-material/CloudUpload';
 
@@ -9,57 +9,70 @@ import css from './GpxImport.module.css';
 import { findStartTime } from '../../lib/gpx';
 import dispatch from '../../workers/dispatcher-main';
 import { intToGpxId } from '../../lib/ids';
+import Dialog from '../dialog';
+import { useI18n } from '@solid-primitives/i18n';
+import { Box, Grid, Typography } from '@suid/material';
+import GpxImportSingleFile from './GpxImportSingleFile';
 
 const GpxImport: Component = () => {
+  const [filesToImport, setFilesToImport] = createSignal<FileList>();
+
+  const [t] = useI18n();
+
   const onChangeHandler = (event: any) => {
     console.log({
       caller: 'GpxImport / On change handler',
       files: event.target.files,
     });
-    for (const file of event.target.files) {
-      const fileReader = new FileReader();
-      fileReader.readAsText(file);
+    setFilesToImport(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',
-            file,
-            result: fileReader.result,
-          });
-          const gpx = GPX.parse(fileReader.result);
-          console.log({ caller: 'GpxImport / JSON', file, gpx });
-          if (gpx) {
-            const startTime = new Date(findStartTime(gpx)!);
-            await dispatch({
-              action: 'pruneAndSaveImportedGpx',
-              params: {
-                id: { gpx: intToGpxId(startTime.valueOf()) },
-                gpx: gpx,
-                tech: {
-                  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 {
-            console.error({
-              message: "can't parse GPX file",
-              file,
-              xml: fileReader.result,
-            });
-          }
-          // TODO: error handling
-        },
-        false
-      );
-    }
+    //   fileReader.addEventListener(
+    //     'load',
+    //     async () => {
+    //       // this will then display a text file
+    //       console.log({
+    //         caller: 'GpxImport / XML',
+    //         file,
+    //         result: fileReader.result,
+    //       });
+    //       const gpx = GPX.parse(fileReader.result);
+    //       console.log({ caller: 'GpxImport / JSON', file, gpx });
+    //       if (gpx) {
+    //         const startTime = new Date(findStartTime(gpx)!);
+    //         await dispatch({
+    //           action: 'pruneAndSaveImportedGpx',
+    //           params: {
+    //             id: { gpx: intToGpxId(startTime.valueOf()) },
+    //             gpx: gpx,
+    //             tech: {
+    //               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 {
+    //         console.error({
+    //           message: "can't parse GPX file",
+    //           file,
+    //           xml: fileReader.result,
+    //         });
+    //       }
+    //       // TODO: error handling
+    //     },
+    //     false
+    //   );
+    // }
+  };
+
+  const handleClose = () => {
+    setFilesToImport(undefined);
   };
 
   return (
@@ -77,6 +90,19 @@ const GpxImport: Component = () => {
           onChange={onChangeHandler}
         />
       </div>
+      <Dialog
+        open={filesToImport() !== undefined}
+        title={t('gpxImport')}
+        closeHandler={handleClose}
+      >
+        <Box
+          sx={{
+            width: '100%',
+          }}
+        >
+          <GpxImportSingleFile gpxFile={filesToImport()[0]} />
+        </Box>
+      </Dialog>
     </>
   );
 };

src/components/gpx-import/GpxImportSingleFile.tsx

@@ -0,0 +1,71 @@
+import { useI18n } from '@solid-primitives/i18n';
+import { Grid, Typography } from '@suid/material';
+import { Component, createSignal, Show } from 'solid-js';
+import { findStartTime } from '../../lib/gpx';
+import GPX from '../../lib/gpx-parser-builder/src/gpx';
+
+interface Props {
+  gpxFile: File;
+}
+
+const analyzeGpx = (gpx: Gpx | undefined) => {
+  if (gpx === undefined) {
+    return {};
+  }
+  const stats = {
+    creator: gpx.$.creator,
+    nbWpts: gpx.wpt ? gpx.wpt?.length : 0,
+    nbRtes: gpx.rte ? gpx.rte?.length : 0,
+    nbTrks: gpx.trk ? gpx.trk?.length : 0,
+  };
+  return stats;
+};
+
+const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
+  const [t] = useI18n();
+  const [gpx, setGpx] = createSignal<Gpx>();
+
+  const gpxReader = new FileReader();
+  gpxReader.readAsText(gpxFile);
+
+  gpxReader.addEventListener(
+    'load',
+    async () => {
+      // this will then display a text gpxfile
+      console.log({
+        caller: 'GpxImportSingleFile / XML',
+        gpxFile,
+        result: gpxReader.result,
+      });
+      const gpx = GPX.parse(gpxReader.result);
+      console.log({ caller: 'GpxImportSingleFile / JSON', gpxFile, gpx });
+      setGpx(gpx);
+      //   if (gpx) {
+      //     const startTime = new Date(findStartTime(gpx)!);
+      //   }
+    },
+    false
+  );
+
+  const stats = analyzeGpx(gpx());
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Typography variant='subtitle1'>
+          {t('file')}
+          {gpxFile.name}
+        </Typography>
+      </Grid>
+      <Show when={gpx() !== undefined}>
+        <Grid item xs={12}>
+          <Typography variant='body1'>
+            {t('gpxStats', analyzeGpx(gpx()))}
+          </Typography>
+        </Grid>
+      </Show>
+    </Grid>
+  );
+};
+
+export default GpxImportSingleFile;