dyomedea/src/components/dialogs/GpxImport.tsx

63 lines
1.7 KiB
TypeScript
Raw Normal View History

2022-11-14 13:13:12 +00:00
import React from 'react';
import GPX from '../../lib/gpx-parser-builder/src/gpx';
import css from './GpxImport.module.css';
import { IonIcon, IonItem } from '@ionic/react';
import { cloudUpload } from 'ionicons/icons';
2022-11-14 17:35:04 +00:00
import { findStartTime } from '../../lib/gpx';
import dispatch from '../../workers/dispatcher-main';
import { intToGpxId } from '../../lib/ids';
2022-11-14 13:13:12 +00:00
const GpxImport: React.FC<{}> = () => {
const onChangeHandler = (event: any) => {
console.log('On change handler');
const file: File = event.target.files[0];
const fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.addEventListener(
'load',
() => {
// this will then display a text file
console.log(fileReader.result);
const gpx = GPX.parse(fileReader.result);
console.log(`gpx: ${JSON.stringify(gpx)}`);
2022-11-14 17:35:04 +00:00
const startTime = new Date(findStartTime(gpx)!);
dispatch({
action: 'pruneAndSaveImportedGpx',
params: { id: { gpx: intToGpxId(startTime.valueOf()) }, gpx: gpx },
});
2022-11-14 13:13:12 +00:00
// pushGpx(db, {
// gpx,
// metadata: {
// lastModified: new Date(file.lastModified).toISOString(),
// importDate: new Date().toISOString(),
// name: file.name,
// size: file.size,
// type: file.type,
// },
// });
},
false
);
};
return (
<IonItem>
<input
type='file'
id='gpx-import'
className={css.inputFile}
accept='.gpx'
onChange={onChangeHandler}
/>
<label htmlFor='gpx-import'>
<IonIcon slot='icon-only' icon={cloudUpload} title='import' />
</label>
</IonItem>
);
};
export default GpxImport;