dyomedea/src/components/gpx-import/GpxImport.tsx

68 lines
1.8 KiB
TypeScript

import { Component } from 'solid-js';
import CloudUploadIcon from '@suid/icons-material/CloudUpload';
// @ts-ignore
import GPX from '../../lib/gpx-parser-builder/src/gpx';
import css from './GpxImport.module.css';
import { findStartTime } from '../../lib/gpx';
import dispatch from '../../workers/dispatcher-main';
import { intToGpxId } from '../../lib/ids';
import { refetchGpxList } from '../all-gpxes';
const GpxImport: Component = () => {
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)}`);
const startTime = new Date(findStartTime(gpx)!);
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,
},
},
});
refetchGpxList();
},
false
);
};
return (
<>
<div class={css.container}>
<label for='gpx-import' class={css.label}>
<CloudUploadIcon />
</label>
<input
type='file'
id='gpx-import'
class={css.inputFile}
accept='.gpx'
onChange={onChangeHandler}
/>
</div>
</>
);
};
export default GpxImport;