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 { Component, createSignal, For, Show } from 'solid-js';
import dispatch from '../../workers/dispatcher-main'; import dispatch from '../../workers/dispatcher-main';
import Dialog from '../dialog'; import Dialog from '../dialog';
import GpxChooser from '../gpx-chooser';
//import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg'; //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
import style from './GpxDialog.module.css'; import style from './GpxDialog.module.css';
@ -22,7 +23,7 @@ export const [currentGpxId, setCurrentGpxId] = createSignal<string>('new');
const GpxDialog: Component<{}> = (props) => { const GpxDialog: Component<{}> = (props) => {
const [t] = useI18n(); const [t] = useI18n();
const [open, setOpen] = createSignal(false); const [open, setOpen] = createSignal(false);
const [allGpxes, setAllGpxes] = createSignal<any[]>([]);
const [selectedGpxId, setSelectedGpxId] = createSignal<string>(''); const [selectedGpxId, setSelectedGpxId] = createSignal<string>('');
const [gpx, setGpx] = createSignal<Gpx>(); const [gpx, setGpx] = createSignal<Gpx>();
@ -30,13 +31,6 @@ const GpxDialog: Component<{}> = (props) => {
const handleClickOpen = async () => { const handleClickOpen = async () => {
setOpen(true); setOpen(true);
const newAllGpxes = (await dispatch({
action: 'getAllGpxesWithSummary',
})) as any[];
setAllGpxes([
{ id: 'new', name: t('newGpx'), creator: 'dyomedea' },
...newAllGpxes,
]);
setSelectedGpxId(currentGpxId()); setSelectedGpxId(currentGpxId());
if (currentGpxId() !== '') { if (currentGpxId() !== '') {
const newGpx = await dispatch({ const newGpx = await dispatch({
@ -63,18 +57,17 @@ const GpxDialog: Component<{}> = (props) => {
setOpen(false); setOpen(false);
} }
}; };
const gpxChangeHandler = async (event: any) => { const gpxChangeHandler = async (gpxId: string) => {
setSelectedGpxId(event.target.value); setSelectedGpxId(gpxId);
const newGpx = await dispatch({ const newGpx = await dispatch({
action: 'getGpx', action: 'getGpx',
params: { params: {
id: event.target.value, id: gpxId,
}, },
}); });
setGpx(newGpx as Gpx); setGpx(newGpx as Gpx);
console.log({ console.log({
caller: 'GpxDialog / gpxChangeHandler', caller: 'GpxDialog / gpxChangeHandler',
value: event.target.value,
gpx: gpx(), gpx: gpx(),
}); });
}; };
@ -172,26 +165,8 @@ const GpxDialog: Component<{}> = (props) => {
noValidate noValidate
autoComplete='off' autoComplete='off'
> >
<FormControl> <GpxChooser gpxId={selectedGpxId} setGpxId={gpxChangeHandler} />
<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>
<Show when={gpx() != undefined}> <Show when={gpx() != undefined}>
<TextField <TextField
label={t('gpxName')} 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'; import CloudUploadIcon from '@suid/icons-material/CloudUpload';
@ -107,7 +107,9 @@ const GpxImport: Component = () => {
width: '100%', width: '100%',
}} }}
> >
<GpxImportSingleFile gpxFile={filesToImport()[0]} /> <For each={filesToImport()}>
{(gpxFile) => <GpxImportSingleFile gpxFile={gpxFile} />}
</For>
</Box> </Box>
</Dialog> </Dialog>
</> </>

View File

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

View File

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