From 9863efc26a5e20fde58b97a45438c69699edaf9c Mon Sep 17 00:00:00 2001 From: Eric van der Vlist Date: Mon, 3 Apr 2023 14:39:55 +0200 Subject: [PATCH] Refactoring to prepare jpg imports --- src/components/gpx-import/index.ts | 1 - .../Import.module.css} | 0 .../GpxImport.tsx => import/Import.tsx} | 8 ++--- .../ImportSingleFile.tsx} | 34 +++++++++---------- src/components/import/index.ts | 1 + src/components/map/Map.tsx | 2 +- 6 files changed, 23 insertions(+), 23 deletions(-) delete mode 100644 src/components/gpx-import/index.ts rename src/components/{gpx-import/GpxImport.module.css => import/Import.module.css} (100%) rename src/components/{gpx-import/GpxImport.tsx => import/Import.tsx} (89%) rename src/components/{gpx-import/GpxImportSingleFile.tsx => import/ImportSingleFile.tsx} (88%) create mode 100644 src/components/import/index.ts diff --git a/src/components/gpx-import/index.ts b/src/components/gpx-import/index.ts deleted file mode 100644 index 55613bf..0000000 --- a/src/components/gpx-import/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default, importUrls } from './GpxImport'; diff --git a/src/components/gpx-import/GpxImport.module.css b/src/components/import/Import.module.css similarity index 100% rename from src/components/gpx-import/GpxImport.module.css rename to src/components/import/Import.module.css diff --git a/src/components/gpx-import/GpxImport.tsx b/src/components/import/Import.tsx similarity index 89% rename from src/components/gpx-import/GpxImport.tsx rename to src/components/import/Import.tsx index ef25006..b598dfb 100644 --- a/src/components/gpx-import/GpxImport.tsx +++ b/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(); @@ -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 = () => { }} > - {(gpxFile) => } + {(file) => } diff --git a/src/components/gpx-import/GpxImportSingleFile.tsx b/src/components/import/ImportSingleFile.tsx similarity index 88% rename from src/components/gpx-import/GpxImportSingleFile.tsx rename to src/components/import/ImportSingleFile.tsx index 60f9fa2..098c07b 100644 --- a/src/components/gpx-import/GpxImportSingleFile.tsx +++ b/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 = ({ gpxFile }) => { +const ImportSingleFile: Component = ({ file: file }) => { const [t] = useI18n(); const [statsAndGpx, setStatsAndGpx] = createSignal(); const [state, setState] = createSignal('init'); @@ -61,11 +61,11 @@ const GpxImportSingleFile: Component = ({ 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 = ({ 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 = ({ 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 = ({ gpxFile }) => { {t('file')} - {gpxFile.name} + {file.name} @@ -205,4 +205,4 @@ const GpxImportSingleFile: Component = ({ gpxFile }) => { ); }; -export default GpxImportSingleFile; +export default ImportSingleFile; diff --git a/src/components/import/index.ts b/src/components/import/index.ts new file mode 100644 index 0000000..8bd19e3 --- /dev/null +++ b/src/components/import/index.ts @@ -0,0 +1 @@ +export { default, importUrls } from './Import'; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index bf5cc08..ed0dc44 100644 --- a/src/components/map/Map.tsx +++ b/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';