140 lines
3.7 KiB
TypeScript
140 lines
3.7 KiB
TypeScript
import { useI18n } from '@solid-primitives/i18n';
|
|
import {
|
|
FormControlLabel,
|
|
Grid,
|
|
Typography,
|
|
Switch,
|
|
FormGroup,
|
|
RadioGroup,
|
|
Radio,
|
|
Divider,
|
|
FormControl,
|
|
FormLabel,
|
|
} from '@suid/material';
|
|
import { Component, createEffect, createSignal, Show } from 'solid-js';
|
|
import { findStartTime } from '../../lib/gpx';
|
|
import GPX from '../../lib/gpx-parser-builder/src/gpx';
|
|
|
|
interface Props {
|
|
gpxFile: File;
|
|
}
|
|
|
|
interface StatsAndGpx {
|
|
gpx: Gpx;
|
|
stats: any;
|
|
}
|
|
|
|
const analyzeGpx = (gpx: Gpx | undefined) => {
|
|
if (gpx === undefined) {
|
|
return {};
|
|
}
|
|
const stats = {
|
|
creator: gpx.$.creator,
|
|
nbWpts: gpx.wpt ? gpx.wpt?.length : 0,
|
|
nbRtes: gpx.rte ? gpx.rte?.length : 0,
|
|
nbTrks: gpx.trk ? gpx.trk?.length : 0,
|
|
trkMaybeRte:
|
|
gpx.trk &&
|
|
gpx.trk[0].trkseg &&
|
|
gpx.trk[0].trkseg[0] &&
|
|
gpx.trk[0].trkseg[0].trkpt &&
|
|
!gpx.trk[0].trkseg[0].trkpt[0].time,
|
|
startTime: findStartTime(gpx),
|
|
};
|
|
|
|
return stats;
|
|
};
|
|
|
|
const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
|
|
const [t] = useI18n();
|
|
const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
|
|
|
|
const gpxReader = new FileReader();
|
|
gpxReader.readAsText(gpxFile);
|
|
|
|
gpxReader.addEventListener(
|
|
'load',
|
|
async () => {
|
|
// this will then display a text gpxfile
|
|
console.log({
|
|
caller: 'GpxImportSingleFile / XML',
|
|
gpxFile,
|
|
result: gpxReader.result,
|
|
});
|
|
const gpx = GPX.parse(gpxReader.result);
|
|
console.log({ caller: 'GpxImportSingleFile / JSON', gpxFile, gpx });
|
|
setStatsAndGpx({ gpx, stats: analyzeGpx(gpx) });
|
|
// if (gpx) {
|
|
// const startTime = new Date(findStartTime(gpx)!);
|
|
// }
|
|
},
|
|
false
|
|
);
|
|
|
|
const [selectedTrkTransform, setSelectedTrkTransform] = createSignal(
|
|
'importNonTimedTrksAsRtes'
|
|
);
|
|
|
|
const handleTrkTransformChange = (event: any) => {
|
|
setSelectedTrkTransform(event.target.value);
|
|
};
|
|
|
|
const controlTrkTransformProps = (item: string) => ({
|
|
checked: selectedTrkTransform() === item,
|
|
onChange: handleTrkTransformChange,
|
|
value: item,
|
|
name: 'trkTransform',
|
|
label: t(item),
|
|
inputProps: { 'aria-label': item },
|
|
});
|
|
|
|
return (
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Typography variant='subtitle1'>
|
|
{t('file')}
|
|
{gpxFile.name}
|
|
</Typography>
|
|
</Grid>
|
|
<Show when={statsAndGpx() !== undefined}>
|
|
<Grid item xs={12}>
|
|
<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}>
|
|
<Typography variant='body1'>{t('trkMaybeRte')}</Typography>
|
|
</Grid>
|
|
</Show>
|
|
<Show when={statsAndGpx().stats.nbTrks > 0}>
|
|
<Grid item xs={12}>
|
|
<FormControl>
|
|
<FormLabel>{t('importTrk')}</FormLabel>
|
|
<RadioGroup>
|
|
<FormControlLabel
|
|
control={<Radio color='success' />}
|
|
{...controlTrkTransformProps('importNonTimedTrksAsRtes')}
|
|
/>
|
|
<FormControlLabel
|
|
control={<Radio color='secondary' />}
|
|
{...controlTrkTransformProps('importAllTrksAsRtes')}
|
|
/>
|
|
<FormControlLabel
|
|
control={<Radio color='error' />}
|
|
{...controlTrkTransformProps('importTrksAsTrks')}
|
|
/>
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
</Show>
|
|
</Show>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default GpxImportSingleFile;
|