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

73 lines
1.7 KiB
TypeScript

import { Component, createSignal, For } from 'solid-js';
import CloudUploadIcon from '@suid/icons-material/CloudUpload';
// @ts-ignore
import css from './GpxImport.module.css';
import Dialog from '../dialog';
import { useI18n } from '@solid-primitives/i18n';
import { Box } 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);
};
const handleClose = (event: any, reason?: string) => {
console.log({
caller: 'GpxImport / handleClose',
event,
reason,
});
if (reason === undefined) {
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}
fullScreen
>
<Box
sx={{
width: '100%',
}}
>
<For each={filesToImport()}>
{(gpxFile) => <GpxImportSingleFile gpxFile={gpxFile} />}
</For>
</Box>
</Dialog>
</>
);
};
export default GpxImport;