Isolating a GpxChooser component
This commit is contained in:
parent
56c9eb37bb
commit
a6b5be4f11
|
@ -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;
|
|
@ -0,0 +1 @@
|
|||
export { default } from './GpxChooser';
|
|
@ -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')}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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).',
|
||||
|
|
Loading…
Reference in New Issue