UX: add global indicator that images are uploading

src/Logic/ImageProviders/ImageUploadManager.ts

@@ -97,7 +97,7 @@ export class ImageUploadManager {
         console.log("Upload done, creating ")
         const action = await this.uploadImageWithLicense(featureId, title, description, file)
         if (!isNaN(Number(featureId))) {
-            // THis is a map note
+            // This is a map note
             const url = action._url
             await this._osmConnection.addCommentToNote(featureId, url)
             NoteCommentElement.addCommentTo(url, <UIEventSource<any>>tagsStore, {
@@ -151,9 +151,13 @@ export class ImageUploadManager {
     }
 
     private increaseCountFor(collection: Map<string, UIEventSource<number>>, key: string | "*") {
+        {
             const counter = this.getCounterFor(collection, key)
             counter.setData(counter.data + 1)
+        }
+        {
             const global = this.getCounterFor(collection, "*")
-        global.setData(counter.data + 1)
+            global.setData(global.data + 1)
+        }
     }
 }

src/UI/Image/UploadingImageCounter.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     /**
      * Shows information about how much images are uploaded for the given feature
+     *
+     * Either pass in a store with tags or a featureId.
      */
 
     import type { SpecialVisualizationState } from "../SpecialVisualization"
@@ -12,22 +14,25 @@
 
     export let state: SpecialVisualizationState
     export let tags: Store<OsmTags>
-  const featureId = tags.data.id
+    export let featureId = tags.data.id
+    export let showThankYou: boolean = true
     const { uploadStarted, uploadFinished, retried, failed } =
         state.imageUploadManager.getCountsFor(featureId)
     const t = Translations.t.image
 </script>
 
-{#if $uploadStarted == 1}
-  {#if $uploadFinished == 1}
+{#if $uploadStarted === 1}
+  {#if $uploadFinished === 1}
+    {#if showThankYou}
       <Tr cls="thanks" t={t.upload.one.done} />
-  {:else if $failed == 1}
+    {/if}
+  {:else if $failed === 1}
     <div class="alert flex flex-col">
       <Tr cls="self-center" t={t.upload.one.failed} />
       <Tr t={t.upload.failReasons} />
       <Tr t={t.upload.failReasonsAdvanced} />
     </div>
-  {:else if $retried == 1}
+  {:else if $retried === 1}
     <Loading cls="alert">
       <Tr t={t.upload.one.retrying} />
     </Loading>
@@ -37,9 +42,11 @@
     </Loading>
   {/if}
 {:else if $uploadStarted > 1}
-  {#if $uploadFinished + $failed == $uploadStarted && $uploadFinished > 0}
+  {#if $uploadFinished + $failed === $uploadStarted && $uploadFinished > 0}
+    {#if showThankYou}
       <Tr cls="thanks" t={t.upload.multiple.done.Subs({ count: $uploadFinished })} />
-  {:else if $uploadFinished == 0}
+    {/if}
+  {:else if $uploadFinished === 0}
     <Loading cls="alert">
       <Tr t={t.upload.multiple.uploading.Subs({ count: $uploadStarted })} />
     </Loading>

src/UI/ThemeViewGUI.svelte

@@ -52,6 +52,7 @@
     import LanguagePicker from "./LanguagePicker";
     import Locale from "./i18n/Locale";
     import ShareScreen from "./BigComponents/ShareScreen.svelte";
+    import UploadingImageCounter from "./Image/UploadingImageCounter.svelte"
 
     export let state: ThemeViewState;
     let layout = state.layout;
@@ -154,6 +155,7 @@
     <ToSvelte
       construct={() => new ExtraLinkButton(state, layout.extraLink).SetClass("pointer-events-auto")}
     />
+    <UploadingImageCounter {state} featureId="*" showThankYou={false}/>
     <If condition={state.featureSwitchIsTesting}>
       <div class="alert w-fit">Testmode</div>
     </If>