Calling WptEditDialog to import pictures as wpts

src/components/import/ImportSingleFile.tsx

@@ -22,6 +22,8 @@ import {
 import piexif from 'piexifjs';
 import { getDate, getGps } from '../../lib/exif';
 import { downsize } from '../../lib/image';
+import { Coordinate } from 'ol/coordinate';
+import WptEditDialog, { Category } from '../wpt/WptEditDialog';
 
 interface Props {
   file: File;
@@ -66,6 +68,40 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
   const [picture, setPicture] = createSignal<Picture>();
   const [state, setState] = createSignal('init');
   const [gpxId, setGpxId] = createSignal<string>('new');
+
+  const [open, setOpen] = createSignal<boolean>(false);
+  const [coordinate, setCoordinate] = createSignal<Coordinate>();
+  const [initialWpt, setInitialWpt] = createSignal({
+    $: { lat: 0, lon: 0 },
+    ele: undefined,
+    time: undefined,
+    magvar: undefined,
+    geoidheight: undefined,
+    name: undefined,
+    cmt: undefined,
+    desc: undefined,
+    src: undefined,
+    link: undefined,
+    sym: undefined,
+    type: undefined,
+    fix: undefined,
+    sat: undefined,
+    hdop: undefined,
+    vdop: undefined,
+    pdop: undefined,
+    ageofdgpsdata: undefined,
+    dgpsid: undefined,
+    extensions: {
+      address: undefined,
+      startTime: undefined,
+      endTime: undefined,
+      category: Category.PICTURE,
+      subCategory: undefined,
+      pictureId: '',
+      thumbnailUrl: '',
+    },
+  });
+
   createEffect(() => {
     setGpxId(currentGpxId());
   });
@@ -140,6 +176,18 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
             bigThumbnailUrl,
             downsizedUrl,
           });
+          setCoordinate([gps.longitude, gps.latitude]);
+          setInitialWpt({
+            ...initialWpt(),
+            extensions: {
+              ...initialWpt().extensions,
+              category: Category.PICTURE,
+              startTime: date.toISOString(),
+              endTime: date.toISOString(),
+              pictureId: id,
+              thumbnailUrl: thumbnailUrl,
+            },
+          });
         },
         false
       );
@@ -281,11 +329,22 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
             <Button
               variant='contained'
               disabled={state() != 'init'}
-              onClick={doImport}
+              onClick={() => setOpen(true)}
             >
               {t('import')}
             </Button>
           </CardActions>
+          <Show when={open()}>
+            <WptEditDialog
+              open={open}
+              closeHandler={() => {
+                setOpen(false);
+                setState('imported');
+              }}
+              coordinate={coordinate}
+              initialWpt={initialWpt}
+            />
+          </Show>
         </Show>
       </CardContent>
     </Card>

src/components/wpt/WptEditDialog.tsx

@@ -26,6 +26,7 @@ import { Coordinate } from 'ol/coordinate';
 export enum Category {
   NOTE = 'note',
   POI = 'poi',
+  PICTURE = 'picture',
   UNKNOWN = '',
 }
 
@@ -220,6 +221,14 @@ const WptEditDialog: Component<Props> = (props) => {
               >
                 Note
               </option>
+              <option
+                value={Category.PICTURE}
+                selected={
+                  editedWpt()?.extensions?.category === Category.PICTURE
+                }
+              >
+                Picture
+              </option>
               <option
                 value={undefined}
                 selected={!editedWpt()?.extensions?.category}