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

72 lines
1.6 KiB
TypeScript
Raw Normal View History

2022-12-13 07:24:50 +00:00
import { Component, createSignal, For } from 'solid-js';
2022-11-26 21:04:08 +00:00
import CloudUploadIcon from '@suid/icons-material/CloudUpload';
2022-11-27 11:29:30 +00:00
// @ts-ignore
2022-11-26 21:04:08 +00:00
import css from './GpxImport.module.css';
import Dialog from '../dialog';
import { useI18n } from '@solid-primitives/i18n';
2022-12-13 07:24:50 +00:00
import { Box } from '@suid/material';
import GpxImportSingleFile from './GpxImportSingleFile';
2022-11-26 21:04:08 +00:00
const GpxImport: Component = () => {
const [filesToImport, setFilesToImport] = createSignal<FileList>();
const [t] = useI18n();
2022-11-26 21:04:08 +00:00
const onChangeHandler = (event: any) => {
2022-12-10 20:25:15 +00:00
console.log({
caller: 'GpxImport / On change handler',
files: event.target.files,
});
setFilesToImport(event.target.files);
};
2022-11-26 21:04:08 +00:00
2022-12-12 20:35:00 +00:00
const handleClose = (event: any, reason?: string) => {
console.log({
caller: 'GpxImport / handleClose',
event,
reason,
});
if (reason === undefined) {
setFilesToImport(undefined);
}
2022-11-26 21:04:08 +00:00
};
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'
2022-12-10 20:25:15 +00:00
multiple={true}
2022-11-26 21:04:08 +00:00
onChange={onChangeHandler}
/>
</div>
<Dialog
open={filesToImport() !== undefined}
title={t('gpxImport')}
closeHandler={handleClose}
>
<Box
sx={{
width: '100%',
}}
>
2022-12-13 06:59:28 +00:00
<For each={filesToImport()}>
{(gpxFile) => <GpxImportSingleFile gpxFile={gpxFile} />}
</For>
</Box>
</Dialog>
2022-11-26 21:04:08 +00:00
</>
);
};
export default GpxImport;