UX: add progress bar to panoramax upload, fix hanging upload in case of multiple selected images, rm old log statements

src/Logic/ImageProviders/ImageUploadManager.ts

@@ -166,8 +166,9 @@ export class ImageUploadManager {
         console.log("Checking image upload queue and uploading if needed")
         this.uploadingAll = true
         try {
-            for (const imageToUpload of queue) {
-                await this.handleQueueItem(imageToUpload)
+            while (queue.length > 0) {
+                const currentItem = queue[0]
+                await this.handleQueueItem(currentItem)
             }
         } catch (e) {
             console.error("Error while handling the queue:", e)
@@ -183,10 +184,12 @@ export class ImageUploadManager {
      * - indicates that the upload is busy
      * - Applies the action to the correct element
      * - indicates failure
+     *
+     * Modifies the queue: if the upload is successfull, deletes the item from the queue
      * @private
      */
     private async handleQueueItem(args: ImageUploadArguments): Promise<void> {
-        console.log("Handling queue item", args)
+        console.log("Handling queue item", args.blob.name, args)
         if (!args) {
             return
         }
@@ -197,18 +200,22 @@ export class ImageUploadManager {
         while (attempts > 0 && result === undefined) {
             attempts--
             const doReport = attempts == 0
-            result = await this.attemptSingleUpload(args, doReport)
+            try {
+                result = await this.attemptSingleUpload(args, doReport)
+            } catch (e) {
+                console.error("Uploading failed with error", e)
+            }
             if (!result) {
                 console.log("Upload attempt failed, attempts left:", attempts)
             }
         }
         this._isUploading.set(undefined)
+        this._fails.set(this._fails.data.filter((a) => a !== args))
         if (result === undefined) {
             this._fails.data.push(args)
             this._fails.ping()
             return
         }
-        this._fails.set(this._fails.data.filter((a) => a !== args))
         let properties: UIEventSource<Record<string, string>> = this._featureProperties.getStore(
             args.featureId
         )

src/Logic/ImageProviders/ImageUploader.ts

@@ -11,7 +11,7 @@ export interface ImageUploader {
         currentGps: [number, number],
         author: string,
         noblur: boolean,
-        progress?: UIEventSource<number>
+        progress?: UIEventSource<number | undefined>
     ): Promise<UploadResult>
 }
 

src/Logic/ImageProviders/Panoramax.ts

@@ -11,6 +11,7 @@ import SvelteUIElement from "../../UI/Base/SvelteUIElement"
 import Panoramax_bw from "../../assets/svg/Panoramax_bw.svelte"
 import Link from "../../UI/Base/Link"
 import { Feature, Point } from "geojson"
+import { AddImageOptions } from "panoramax-js/dist/Panoramax"
 
 export default class PanoramaxImageProvider extends ImageProvider {
     public static readonly singleton: PanoramaxImageProvider = new PanoramaxImageProvider()
@@ -166,7 +167,6 @@ export default class PanoramaxImageProvider extends ImageProvider {
 
     getRelevantUrls(tags: Record<string, string>, prefixes: string[]): Store<ProvidedImage[]> {
         const source = UIEventSource.FromPromise(super.getRelevantUrlsFor(tags, prefixes))
-        console.trace("Getting relevant URLS for panoramax yielded", source.data)
         function hasLoading(data: ProvidedImage[]) {
             if (data === undefined) {
                 return true
@@ -252,7 +252,7 @@ export class PanoramaxUploader implements ImageUploader {
         currentGps: [number, number],
         author: string,
         noblur: boolean = false,
-        progress?: UIEventSource<number>,
+        progress?: UIEventSource<number | undefined>,
         sequenceId?: string,
         datetime?: string
     ): Promise<{
@@ -320,12 +320,13 @@ export class PanoramaxUploader implements ImageUploader {
         const sequence: { id: string; "stats:items": { count: number } } = (
             await p.mySequences()
         ).find((s) => s.id === sequenceId)
-        const options = {
+        const options: AddImageOptions = {
             lon,
             lat,
             datetime,
             isBlurred: noblur,
             onProgress: undefined,
+            indexInSequence: sequence["stats:items"].count + 1, // stats:items is '1'-indexed, so .count is also the last index
             exifOverride: {
                 Artist: author,
             },
@@ -337,9 +338,11 @@ export class PanoramaxUploader implements ImageUploader {
                     progress.set(Math.round(percentage))
                 }
             }
+            progress.set(0)
         }
-        const img = <ImageData>await p.addImage(blob, sequence, options)
+        const img = <ImageData>await p.addImage(blob, sequenceId, options)
         PanoramaxImageProvider.singleton.addKnownMeta(img)
+        progress.set(undefined)
         return {
             key: "panoramax",
             value: img.id,

src/Logic/Web/ThemeViewStateHashActor.ts

@@ -105,7 +105,7 @@ export default class ThemeViewStateHashActor {
         if (found.properties.id.startsWith("last_click")) {
             return true
         }
-        console.log("Setting selected element based on hash", hash, "; found", found)
+        console.log("Setting selected element based on hash", hash, "; found", found, "current:", selectedElement.data?.properties?.id)
         selectedElement.setData(found)
         return true
     }