Cosmetics

src/components/gpx-chooser/GpxChooser.tsx

@@ -6,10 +6,11 @@ import dispatch from '../../workers/dispatcher-main';
 interface Props {
   gpxId: () => string;
   setGpxId: (id: string) => void;
+  disabled?: boolean;
 }
 
 const GpxChooser: Component<Props> = (props: Props) => {
-  const { gpxId, setGpxId } = props;
+  const { gpxId, setGpxId, disabled } = props;
 
   const [t] = useI18n();
 
@@ -36,7 +37,7 @@ const GpxChooser: Component<Props> = (props: Props) => {
   };
 
   return (
-    <FormControl>
+    <FormControl disabled={disabled}>
       <InputLabel variant='normal' htmlFor='gpx-chooser'>
         {t('gpxChooser')}
       </InputLabel>

src/components/gpx-dialog/GpxDialog.tsx

@@ -2,16 +2,12 @@ import { useI18n } from '@solid-primitives/i18n';
 import {
   Box,
   Button,
-  FormControl,
   IconButton,
-  Input,
-  InputLabel,
-  NativeSelect,
   SvgIcon,
   TextField,
 } from '@suid/material';
 import { cloneDeep } from 'lodash';
-import { Component, createSignal, For, Show } from 'solid-js';
+import { Component, createSignal, Show } from 'solid-js';
 import dispatch from '../../workers/dispatcher-main';
 import Dialog from '../dialog';
 import GpxChooser from '../gpx-chooser';

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>
   );