Refactoring to prepare jpg imports

src/components/gpx-import/index.ts

@@ -1 +0,0 @@
-export { default, importUrls } from './GpxImport';

src/components/import/Import.tsx

@@ -4,11 +4,11 @@ import CloudUploadIcon from '@suid/icons-material/CloudUpload';
 
 // @ts-ignore
 
-import css from './GpxImport.module.css';
+import css from './Import.module.css';
 import Dialog from '../dialog';
 import { useI18n } from '@solid-primitives/i18n';
 import { Box } from '@suid/material';
-import GpxImportSingleFile from './GpxImportSingleFile';
+import ImportSingleFile from './ImportSingleFile';
 
 const [filesToImport, setFilesToImport] = createSignal<FileList | string[]>();
 
@@ -48,7 +48,7 @@ const GpxImport: Component = () => {
           type='file'
           id='gpx-import'
           class={css.inputFile}
-          accept='.gpx'
+          accept='.gpx, .jpg'
           multiple={true}
           onChange={onChangeHandler}
         />
@@ -65,7 +65,7 @@ const GpxImport: Component = () => {
           }}
         >
           <For each={filesToImport()}>
-            {(gpxFile) => <GpxImportSingleFile gpxFile={gpxFile} />}
+            {(file) => <ImportSingleFile file={file} />}
           </For>
         </Box>
       </Dialog>

src/components/import/ImportSingleFile.tsx

@@ -21,7 +21,7 @@ import {
 } from '@capacitor/filesystem';
 
 interface Props {
-  gpxFile: File;
+  file: File;
 }
 
 interface StatsAndGpx {
@@ -50,7 +50,7 @@ const analyzeGpx = (gpx: Gpx | undefined) => {
   return stats;
 };
 
-const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
+const ImportSingleFile: Component<Props> = ({ file: file }) => {
   const [t] = useI18n();
   const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
   const [state, setState] = createSignal('init');
@@ -61,11 +61,11 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
 
   const parseGpx = (content: string) => {
     const gpx = GPX.parse(content);
-    console.log({ caller: 'GpxImportSingleFile / JSON', gpxFile, gpx });
+    console.log({ caller: 'GpxImportSingleFile / JSON', gpxFile: file, gpx });
     setStatsAndGpx({ gpx, stats: analyzeGpx(gpx) });
   };
 
-  if (typeof gpxFile === 'string') {
+  if (typeof file === 'string') {
     CapacitorFileSystem.requestPermissions().then((permissionStatus) => {
       console.log({
         caller: 'GpxImportSingleFile / content',
@@ -73,26 +73,26 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
       });
     });
     CapacitorFileSystem.readFile({
-      path: gpxFile,
+      path: file,
       encoding: Encoding.UTF8,
     }).then((content) => {
       console.log({
         caller: 'GpxImportSingleFile / content',
-        gpxFile,
+        gpxFile: file,
         content,
       });
       parseGpx(content.data);
     });
   } else {
     const gpxReader = new FileReader();
-    gpxReader.readAsText(gpxFile);
+    gpxReader.readAsText(file);
     gpxReader.addEventListener(
       'load',
       async () => {
         // this will then display a text gpxfile
         console.log({
           caller: 'GpxImportSingleFile / XML',
-          gpxFile,
+          gpxFile: file,
           result: gpxReader.result,
         });
         parseGpx(gpxReader.result);
@@ -111,23 +111,23 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
         id: gpxId(),
         gpx: statsAndGpx()?.gpx,
         tech:
-          typeof gpxFile === 'string'
+          typeof file === 'string'
             ? {
                  importDate: new Date().toISOString(),
-                uri: gpxFile,
+                uri: file,
                  }
             : {
-                lastModified: new Date(gpxFile.lastModified).toISOString(),
+                lastModified: new Date(file.lastModified).toISOString(),
                 importDate: new Date().toISOString(),
-                name: gpxFile.name,
-                size: gpxFile.size,
-                type: gpxFile.type,
+                name: file.name,
+                size: file.size,
+                type: file.type,
               },
       },
     });
     console.log({
       caller: 'GpxImport / JSON / done',
-      gpxFile,
+      gpxFile: file,
       gpx: statsAndGpx()?.gpx,
     });
     setState('done');
@@ -168,7 +168,7 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
       <CardContent>
         <Typography variant='h6'>
           {t('file')}
-          {gpxFile.name}
+          {file.name}
         </Typography>
       </CardContent>
       <CardContent>
@@ -205,4 +205,4 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
   );
 };
 
-export default GpxImportSingleFile;
+export default ImportSingleFile;

src/components/import/index.ts

@@ -0,0 +1 @@
+export { default, importUrls } from './Import';

src/components/map/Map.tsx

@@ -22,7 +22,7 @@ import { Style, Icon } from 'ol/style';
 import GetLocation, { getCurrentLocation } from '../get-location';
 import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
 import { Back, Forward } from '../back-forward';
-import GpxImport, { importUrls } from '../gpx-import';
+import GpxImport, { importUrls } from '../import';
 import AllGpxes from '../all-gpxes';
 import MapTileProvider, { mapTileProviders } from '../map-tile-provider';
 import Interaction from 'ol/interaction/Interaction';