From 59f266de37ba31cd69d80b42c54755cf2f44e6c4 Mon Sep 17 00:00:00 2001
From: Eric van der Vlist <vdv@dyomedea.com>
Date: Tue, 4 Apr 2023 19:33:22 +0200
Subject: [PATCH] Displaying thumbnails

---
 src/components/import/ImportSingleFile.tsx | 26 +++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/import/ImportSingleFile.tsx b/src/components/import/ImportSingleFile.tsx
index ef6d942..308a223 100644
--- a/src/components/import/ImportSingleFile.tsx
+++ b/src/components/import/ImportSingleFile.tsx
@@ -30,6 +30,13 @@ interface StatsAndGpx {
   stats: any;
 }
 
+interface Picture {
+  id: string;
+  date: string;
+  gpx: { Latitude: number; Longitude: number; Altitude: number };
+  thumbnailUrl: string;
+}
+
 const analyzeGpx = (gpx: Gpx | undefined) => {
   if (gpx === undefined) {
     return {};
@@ -54,6 +61,7 @@ const analyzeGpx = (gpx: Gpx | undefined) => {
 const ImportSingleFile: Component<Props> = ({ file: file }) => {
   const [t] = useI18n();
   const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
+  const [picture, setPicture] = createSignal<Picture>();
   const [state, setState] = createSignal('init');
   const [gpxId, setGpxId] = createSignal<string>('');
   createEffect(() => {
@@ -102,7 +110,7 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
           const id = exif?.ImageUniqueID?.value[0];
           const gps = tags.gps;
           const thumbnail = tags.Thumbnail;
-          const thumbnailSrc = `data:${thumbnail?.type};base64,${thumbnail?.base64}`;
+          const thumbnailUrl = `data:${thumbnail?.type};base64,${thumbnail?.base64}`;
           console.log({
             caller: 'ImportSingleFile / Jpeg',
             file,
@@ -112,9 +120,9 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
             date,
             id,
             gps,
-            thumbnailSrc,
+            thumbnailUrl,
           });
-          //parseGpx(reader.result);
+          setPicture({ id, gps, thumbnailUrl, date });
         },
         false
       );
@@ -237,6 +245,18 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
             </Button>
           </CardActions>
         </Show>
+        <Show when={picture() !== undefined}>
+          <img src={picture()?.thumbnailUrl} />
+          <CardActions>
+            <Button
+              variant='contained'
+              disabled={state() != 'init'}
+              onClick={doImport}
+            >
+              {t('import')}
+            </Button>
+          </CardActions>
+        </Show>
       </CardContent>
     </Card>
   );