82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import { Component, createSignal, For } from 'solid-js';
|
|
|
|
import CloudUploadIcon from '@suid/icons-material/CloudUpload';
|
|
|
|
// @ts-ignore
|
|
|
|
import css from './Import.module.css';
|
|
import Dialog from '../dialog';
|
|
import { useI18n } from '@solid-primitives/i18n';
|
|
import { Box } from '@suid/material';
|
|
import ImportSingleFile from './ImportSingleFile';
|
|
|
|
const [filesToImport, setFilesToImport] = createSignal<FileList | string[]>();
|
|
|
|
export const importUrls = (urls: string[]) => {
|
|
setFilesToImport(urls);
|
|
};
|
|
|
|
const GpxImport: Component = () => {
|
|
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);
|
|
}
|
|
};
|
|
|
|
const accept =
|
|
window.Capacitor.platform === 'android'
|
|
? ''
|
|
: '.gpx,.jpg,image/jpeg,application/gpx+xml';
|
|
|
|
return (
|
|
<>
|
|
<div class={css.container}>
|
|
<label for='gpx-import' class={css.label}>
|
|
<CloudUploadIcon />
|
|
</label>
|
|
<input
|
|
type='file'
|
|
id='gpx-import'
|
|
class={css.inputFile}
|
|
accept={accept}
|
|
multiple={true}
|
|
onChange={onChangeHandler}
|
|
/>
|
|
</div>
|
|
<Dialog
|
|
open={filesToImport() !== undefined}
|
|
title={t('gpxImport')}
|
|
closeHandler={handleClose}
|
|
fullScreen
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<For each={filesToImport()}>
|
|
{(file) => <ImportSingleFile file={file} />}
|
|
</For>
|
|
</Box>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GpxImport;
|