diff --git a/src/components/gpx-import/GpxImport.tsx b/src/components/gpx-import/GpxImport.tsx index ecd4e14..6eacee1 100644 --- a/src/components/gpx-import/GpxImport.tsx +++ b/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(); + + 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} /> + + + + + ); }; diff --git a/src/components/gpx-import/GpxImportSingleFile.tsx b/src/components/gpx-import/GpxImportSingleFile.tsx new file mode 100644 index 0000000..b2e6d3c --- /dev/null +++ b/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 = ({ gpxFile }) => { + const [t] = useI18n(); + const [gpx, setGpx] = createSignal(); + + 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 ( + + + + {t('file')} + {gpxFile.name} + + + + + + {t('gpxStats', analyzeGpx(gpx()))} + + + + + ); +}; + +export default GpxImportSingleFile; diff --git a/src/db/change-handler.ts b/src/db/change-handler.ts index d1d3465..cae6754 100644 --- a/src/db/change-handler.ts +++ b/src/db/change-handler.ts @@ -50,7 +50,7 @@ const changeHandler = async (change: any) => { (doc) => { console.log({ caller: 'changeHandler / gpxes', doc }); doc.push(id); - doc.sort().reverse(); + doc.reverse().sort().reverse(); return doc; }, [] diff --git a/src/db/lib.ts b/src/db/lib.ts index df641f4..092d64c 100644 --- a/src/db/lib.ts +++ b/src/db/lib.ts @@ -20,13 +20,10 @@ export const put = async ( db.put({ _id, _rev: current._rev, type, doc: update(current.doc) }); } catch (error: any) { if (error.name === 'conflict') { + console.log({ caller: 'db.put', _id, type, defaultDoc, error }); await put(_id, type, update, defaultDoc); } else { - console.error( - `put(${_id}, ${JSON.stringify( - update(current.doc) - )}), error: ${JSON.stringify(error)}` - ); + console.error({ caller: 'db.put', _id, type, defaultDoc, error }); } } }; diff --git a/src/i18n/en.ts b/src/i18n/en.ts index 19ddc5a..ba97e7c 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -20,6 +20,11 @@ const dict = { save: 'SAVE', cancel: 'CANCEL', + + gpxImport: 'GPX import', + file: 'File: ', + gpxStats: + 'This file has been created with "{{creator}}" and includes {{nbWpts}} place(s), {{nbRte}} routes(s) et {{nbTrks}} track(s).', }; export default dict; diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts index 1a59408..b31d4a1 100644 --- a/src/i18n/fr.ts +++ b/src/i18n/fr.ts @@ -16,14 +16,17 @@ const dict = { 'rte-start': 'début de route', 'rte-finish': 'fin de route', - - name: 'Nom', sym: 'Symbole', minZoom: 'Niveau de zoom minimum', save: 'SAUVEGARDER', cancel: 'ANNULER', + + gpxImport: 'Import de fichier(s) GPX ', + file: 'Fichier\u00a0: ', + gpxStats: + 'Ce fichier a été créé avec "{{creator}}" et contient {{nbWpts}} lieu(x), {{nbRtes}} itineraire(s) et {{nbTrks}} trace(s).', }; export default dict; diff --git a/src/lib/gpx-parser-builder/src/waypoint.js b/src/lib/gpx-parser-builder/src/waypoint.js index 2910ff8..d833a39 100644 --- a/src/lib/gpx-parser-builder/src/waypoint.js +++ b/src/lib/gpx-parser-builder/src/waypoint.js @@ -3,10 +3,16 @@ import Link from './link'; export default class Waypoint { constructor(object) { this.$ = {}; - this.$.lat = object.$.lat === 0 || object.lat === 0 ? 0 : object.$.lat || object.lat || -1; - this.$.lon = object.$.lon === 0 || object.lon === 0 ? 0 : object.$.lon || object.lon || -1; + this.$.lat = + object.$.lat === 0 || object.lat === 0 + ? 0 + : object.$.lat || object.lat || -1; + this.$.lon = + object.$.lon === 0 || object.lon === 0 + ? 0 + : object.$.lon || object.lon || -1; this.ele = object.ele; - this.time = object.time ? new Date(object.time) : new Date(); + this.time = object.time ? new Date(object.time) : undefined; this.magvar = object.magvar; this.geoidheight = object.geoidheight; this.name = object.name; @@ -26,7 +32,7 @@ export default class Waypoint { if (!Array.isArray(object.link)) { object.link = [object.link]; } - this.link = object.link.map(l => new Link(l)); + this.link = object.link.map((l) => new Link(l)); } } -} \ No newline at end of file +}