Isolating a GpxChooser component

This commit is contained in:
Eric van der Vlist 2022-12-13 07:59:28 +01:00
parent 56c9eb37bb
commit a6b5be4f11
6 changed files with 108 additions and 51 deletions

View File

@ -0,0 +1,62 @@
import { useI18n } from '@solid-primitives/i18n';
import { FormControl, InputLabel, NativeSelect } from '@suid/material';
import { Component, createSignal, For } from 'solid-js';
import dispatch from '../../workers/dispatcher-main';
interface Props {
gpxId: () => string;
setGpxId: (id: string) => void;
}
const GpxChooser: Component<Props> = (props: Props) => {
const { gpxId, setGpxId } = props;
const [t] = useI18n();
const [allGpxes, setAllGpxes] = createSignal<any[]>([
{ id: 'new', name: t('newGpx'), creator: 'dyomedea' },
]);
dispatch(
{
action: 'getAllGpxesWithSummary',
},
(error, result) => {
if (!error) {
setAllGpxes([
{ id: 'new', name: t('newGpx'), creator: 'dyomedea' },
...result,
]);
}
}
);
const gpxChangeHandler = async (event: any) => {
setGpxId(event.target.value);
};
return (
<FormControl>
<InputLabel variant='normal' htmlFor='gpx-chooser'>
{t('gpxChooser')}
</InputLabel>
<NativeSelect
inputProps={{
name: 'gpx-chooser',
id: 'gpx-chooser',
}}
onChange={gpxChangeHandler}
>
<For each={allGpxes()}>
{(gpx) => (
<option value={gpx.id} selected={gpx.id === gpxId()}>
{gpx.name || `${t('gpxNoName')} (${gpx.creator})`}
</option>
)}
</For>
</NativeSelect>
</FormControl>
);
};
export default GpxChooser;

View File

@ -0,0 +1 @@
export { default } from './GpxChooser';

View File

@ -14,6 +14,7 @@ import { cloneDeep } from 'lodash';
import { Component, createSignal, For, Show } from 'solid-js';
import dispatch from '../../workers/dispatcher-main';
import Dialog from '../dialog';
import GpxChooser from '../gpx-chooser';
//import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
import style from './GpxDialog.module.css';
@ -22,7 +23,7 @@ export const [currentGpxId, setCurrentGpxId] = createSignal<string>('new');
const GpxDialog: Component<{}> = (props) => {
const [t] = useI18n();
const [open, setOpen] = createSignal(false);
const [allGpxes, setAllGpxes] = createSignal<any[]>([]);
const [selectedGpxId, setSelectedGpxId] = createSignal<string>('');
const [gpx, setGpx] = createSignal<Gpx>();
@ -30,13 +31,6 @@ const GpxDialog: Component<{}> = (props) => {
const handleClickOpen = async () => {
setOpen(true);
const newAllGpxes = (await dispatch({
action: 'getAllGpxesWithSummary',
})) as any[];
setAllGpxes([
{ id: 'new', name: t('newGpx'), creator: 'dyomedea' },
...newAllGpxes,
]);
setSelectedGpxId(currentGpxId());
if (currentGpxId() !== '') {
const newGpx = await dispatch({
@ -63,18 +57,17 @@ const GpxDialog: Component<{}> = (props) => {
setOpen(false);
}
};
const gpxChangeHandler = async (event: any) => {
setSelectedGpxId(event.target.value);
const gpxChangeHandler = async (gpxId: string) => {
setSelectedGpxId(gpxId);
const newGpx = await dispatch({
action: 'getGpx',
params: {
id: event.target.value,
id: gpxId,
},
});
setGpx(newGpx as Gpx);
console.log({
caller: 'GpxDialog / gpxChangeHandler',
value: event.target.value,
gpx: gpx(),
});
};
@ -172,26 +165,8 @@ const GpxDialog: Component<{}> = (props) => {
noValidate
autoComplete='off'
>
<FormControl>
<InputLabel variant='normal' htmlFor='gpx-chooser'>
{t('gpxChooser')}
</InputLabel>
<NativeSelect
inputProps={{
name: 'gpx-chooser',
id: 'gpx-chooser',
}}
onChange={gpxChangeHandler}
>
<For each={allGpxes()}>
{(gpx) => (
<option value={gpx.id} selected={gpx.id === selectedGpxId()}>
{gpx.name || `${t('gpxNoName')} (${gpx.creator})`}
</option>
)}
</For>
</NativeSelect>
</FormControl>
<GpxChooser gpxId={selectedGpxId} setGpxId={gpxChangeHandler} />
<Show when={gpx() != undefined}>
<TextField
label={t('gpxName')}

View File

@ -1,4 +1,4 @@
import { Component, createSignal, Show } from 'solid-js';
import { Component, createSignal, For, Show } from 'solid-js';
import CloudUploadIcon from '@suid/icons-material/CloudUpload';
@ -107,7 +107,9 @@ const GpxImport: Component = () => {
width: '100%',
}}
>
<GpxImportSingleFile gpxFile={filesToImport()[0]} />
<For each={filesToImport()}>
{(gpxFile) => <GpxImportSingleFile gpxFile={gpxFile} />}
</For>
</Box>
</Dialog>
</>

View File

@ -10,6 +10,11 @@ import {
Divider,
FormControl,
FormLabel,
Card,
CardContent,
CardActions,
CardHeader,
Button,
} from '@suid/material';
import { Component, createEffect, createSignal, Show } from 'solid-js';
import { findStartTime } from '../../lib/gpx';
@ -48,6 +53,7 @@ const analyzeGpx = (gpx: Gpx | undefined) => {
const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
const [t] = useI18n();
const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
const [state, setState] = createSignal('init');
const gpxReader = new FileReader();
gpxReader.readAsText(gpxFile);
@ -71,6 +77,10 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
false
);
const doImport = () => {
setState('imported');
};
const [selectedTrkTransform, setSelectedTrkTransform] = createSignal(
'importNonTimedTrksAsRtes'
);
@ -89,30 +99,26 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
});
return (
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant='subtitle1'>
<Card raised>
<CardContent>
<Typography variant='h6'>
{t('file')}
{gpxFile.name}
</Typography>
</Grid>
<Show when={statsAndGpx() !== undefined}>
<Grid item xs={12}>
</CardContent>
<CardContent>
<Show when={statsAndGpx() !== undefined}>
<Typography variant='body1'>
{t('gpxStats', statsAndGpx().stats)}{' '}
{statsAndGpx()?.stats.startTime
? t('gpxStartTime', statsAndGpx().stats)
: t('gpxNoStartTime')}
</Typography>
</Grid>
<Show when={statsAndGpx().stats.trkMaybeRte}>
<Grid item xs={12}>
<Show when={statsAndGpx().stats.trkMaybeRte}>
<Typography variant='body1'>{t('trkMaybeRte')}</Typography>
</Grid>
</Show>
<Show when={statsAndGpx().stats.nbTrks > 0}>
<Grid item xs={12}>
<FormControl>
</Show>
{/* <Show when={statsAndGpx().stats.nbTrks > 0}>
<FormControl fullWidth>
<FormLabel>{t('importTrk')}</FormLabel>
<RadioGroup>
<FormControlLabel
@ -129,10 +135,19 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
/>
</RadioGroup>
</FormControl>
</Grid>
</Show> */}
</Show>
</Show>
</Grid>
<CardActions>
<Button
variant='contained'
disabled={state() != 'init'}
onClick={doImport}
>
{t('import')}
</Button>
</CardActions>
</CardContent>
</Card>
);
};

View File

@ -24,6 +24,8 @@ const dict = {
cancel: 'ANNULER',
gpxImport: 'Import de fichier(s) GPX ',
import: 'Importer',
file: 'Fichier\u00a0: ',
gpxStats:
'Ce fichier a été créé avec "{{creator}}" et contient {{nbWpts}} lieu(x), {{nbRtes}} itineraire(s) et {{nbTrks}} trace(s).',