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 counter = this.getCounterFor(collection, key)
-        const global = this.getCounterFor(collection, "*")
+            counter.setData(counter.data + 1)
-        global.setData(counter.data + 1)
+        }
+        {
+            const global = this.getCounterFor(collection, "*")
+            global.setData(global.data + 1)
+        }
     }
 }

src/UI/Image/UploadingImageCounter.svelte

@@ -1,33 +1,38 @@
 <script lang="ts">
-  /**
+    /**
-   * Shows information about how much images are uploaded for the given feature
+     * 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"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import { Store } from "../../Logic/UIEventSource"
+    import { Store } from "../../Logic/UIEventSource"
-  import type { OsmTags } from "../../Models/OsmFeature"
+    import type { OsmTags } from "../../Models/OsmFeature"
-  import Translations from "../i18n/Translations"
+    import Translations from "../i18n/Translations"
-  import Tr from "../Base/Tr.svelte"
+    import Tr from "../Base/Tr.svelte"
-  import Loading from "../Base/Loading.svelte"
+    import Loading from "../Base/Loading.svelte"
 
-  export let state: SpecialVisualizationState
+    export let state: SpecialVisualizationState
-  export let tags: Store<OsmTags>
+    export let tags: Store<OsmTags>
-  const featureId = tags.data.id
+    export let featureId = tags.data.id
-  const { uploadStarted, uploadFinished, retried, failed } =
+    export let showThankYou: boolean = true
-    state.imageUploadManager.getCountsFor(featureId)
+    const { uploadStarted, uploadFinished, retried, failed } =
-  const t = Translations.t.image
+        state.imageUploadManager.getCountsFor(featureId)
+    const t = Translations.t.image
 </script>
 
-{#if $uploadStarted == 1}
+{#if $uploadStarted === 1}
-  {#if $uploadFinished == 1}
+  {#if $uploadFinished === 1}
-    <Tr cls="thanks" t={t.upload.one.done} />
+    {#if showThankYou}
-  {:else if $failed == 1}
+      <Tr cls="thanks" t={t.upload.one.done} />
+    {/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}
-    <Tr cls="thanks" t={t.upload.multiple.done.Subs({ count: $uploadFinished })} />
+    {#if showThankYou}
-  {:else if $uploadFinished == 0}
+      <Tr cls="thanks" t={t.upload.multiple.done.Subs({ count: $uploadFinished })} />
+    {/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>