Cosmetics

src/components/gpx-import/GpxImport.tsx

@@ -1,17 +1,13 @@
-import { Component, createSignal, For, Show } from 'solid-js';
+import { Component, createSignal, For } from 'solid-js';
 
 import CloudUploadIcon from '@suid/icons-material/CloudUpload';
 
 // @ts-ignore
-import GPX from '../../lib/gpx-parser-builder/src/gpx';
 
 import css from './GpxImport.module.css';
-import { findStartTime } from '../../lib/gpx';
-import dispatch from '../../workers/dispatcher-main';
-import { intToGpxId } from '../../lib/ids';
 import Dialog from '../dialog';
 import { useI18n } from '@solid-primitives/i18n';
-import { Box, Grid, Typography } from '@suid/material';
+import { Box } from '@suid/material';
 import GpxImportSingleFile from './GpxImportSingleFile';
 
 const GpxImport: Component = () => {

src/components/gpx-import/GpxImportSingleFile.tsx

@@ -1,24 +1,19 @@
 import { useI18n } from '@solid-primitives/i18n';
 import {
-  FormControlLabel,
-  Grid,
   Typography,
-  Switch,
-  FormGroup,
-  RadioGroup,
-  Radio,
-  Divider,
-  FormControl,
-  FormLabel,
   Card,
   CardContent,
   CardActions,
-  CardHeader,
   Button,
+  Box,
+  LinearProgress,
+  CircularProgress,
 } 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';
+import GpxChooser from '../gpx-chooser';
+import { currentGpxId } from '../gpx-dialog';
 
 interface Props {
   gpxFile: File;
@@ -54,6 +49,10 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
   const [t] = useI18n();
   const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
   const [state, setState] = createSignal('init');
+  const [gpxId, setGpxId] = createSignal<string>('');
+  createEffect(() => {
+    setGpxId(currentGpxId());
+  });
 
   const gpxReader = new FileReader();
   gpxReader.readAsText(gpxFile);
@@ -78,7 +77,7 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
   );
 
   const doImport = () => {
-    setState('imported');
+    setState('importing');
   };
 
   const [selectedTrkTransform, setSelectedTrkTransform] = createSignal(
@@ -136,16 +135,20 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
               </RadioGroup>
             </FormControl>
           </Show> */}
+          <Show when={state() === 'importing'}>
+            <LinearProgress />
+          </Show>
+          <CardActions>
+            <GpxChooser gpxId={gpxId} setGpxId={setGpxId} disabled={state() != 'init'} />
+            <Button
+              variant='contained'
+              disabled={state() != 'init'}
+              onClick={doImport}
+            >
+              {t('import')}
+            </Button>
+          </CardActions>
         </Show>
-        <CardActions>
-          <Button
-            variant='contained'
-            disabled={state() != 'init'}
-            onClick={doImport}
-          >
-            {t('import')}
-          </Button>
-        </CardActions>
       </CardContent>
     </Card>
   );