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 { 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')}
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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).',
|
||||||
|
|
Loading…
Reference in New Issue