111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
import { Component, createSignal, Show } 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 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<FileList>();
|
|
|
|
const [t] = useI18n();
|
|
|
|
const onChangeHandler = (event: any) => {
|
|
console.log({
|
|
caller: 'GpxImport / On change handler',
|
|
files: event.target.files,
|
|
});
|
|
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
|
|
// );
|
|
// }
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setFilesToImport(undefined);
|
|
};
|
|
|
|
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'
|
|
multiple={true}
|
|
onChange={onChangeHandler}
|
|
/>
|
|
</div>
|
|
<Dialog
|
|
open={filesToImport() !== undefined}
|
|
title={t('gpxImport')}
|
|
closeHandler={handleClose}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<GpxImportSingleFile gpxFile={filesToImport()[0]} />
|
|
</Box>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GpxImport;
|