Chore: rework image uploading, should work better now

src/UI/Image/ImageUploadFlow.ts

@@ -15,8 +15,9 @@ import Loading from "../Base/Loading"
 import { LoginToggle } from "../Popup/LoginButton"
 import Constants from "../../Models/Constants"
 import { SpecialVisualizationState } from "../SpecialVisualization"
+import exp from "constants";
 
-export class ImageUploadFlow extends Toggle {
+export class ImageUploadFlow extends Combine {
     private static readonly uploadCountsPerId = new Map<string, UIEventSource<number>>()
 
     constructor(
@@ -129,7 +130,7 @@ export class ImageUploadFlow extends Toggle {
             uploader.uploadMany(title, description, filelist)
         })
 
-        const uploadFlow: BaseUIElement = new Combine([
+        super([
             new VariableUiElement(
                 uploader.queue
                     .map((q) => q.length)
@@ -183,17 +184,9 @@ export class ImageUploadFlow extends Toggle {
                     })
                     .SetClass("underline"),
             ]).SetStyle("font-size:small;"),
-        ]).SetClass("flex flex-col image-upload-flow mt-4 mb-8 text-center leading-none")
+        ])
+        this.SetClass("flex flex-col image-upload-flow mt-4 mb-8 text-center leading-none")
+
 
-        super(
-            new LoginToggle(
-                /*We can show the actual upload button!*/
-                uploadFlow,
-                /* User not logged in*/ t.pleaseLogin.Clone(),
-                state
-            ),
-            undefined /* Nothing as the user badge is disabled*/,
-            state?.featureSwitchUserbadge
-        )
     }
 }

src/UI/Image/UploadImage.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">/**
+ * Shows an 'upload'-button which will start the upload for this feature
+ */
+
+import type { SpecialVisualizationState } from "../SpecialVisualization";
+import { Store } from "../../Logic/UIEventSource";
+import type { OsmTags } from "../../Models/OsmFeature";
+import LoginToggle from "../Base/LoginToggle.svelte";
+import Translations from "../i18n/Translations";
+import Tr from "../Base/Tr.svelte";
+import UploadingImageCounter from "./UploadingImageCounter.svelte";
+import FileSelector from "../Base/FileSelector.svelte";
+import ToSvelte from "../Base/ToSvelte.svelte";
+import Svg from "../../Svg";
+
+export let state: SpecialVisualizationState;
+
+export let tags: Store<OsmTags>;
+export let image: string = undefined;
+if (image === "") {
+  image = undefined;
+}
+export let labelText: string = undefined;
+const t = Translations.t.image;
+
+let licenseStore = state.userRelatedState.imageLicense;
+
+function handleFiles(files: FileList) {
+  for (let i = 0; i < files.length; i++) {
+    const file = files.item(i);
+    console.log("Got file", file.name)
+    try {
+      state.imageUploadManager.uploadImageAndApply(file, tags.data);
+    } catch (e) {
+      alert(e);
+    }
+  }
+}
+
+</script>
+
+
+<LoginToggle {state}>
+
+  <Tr slot="not-logged-in" t={t.pleaseLogin} />
+  <div class="flex flex-col">
+
+    <UploadingImageCounter {state} {tags} />
+    <FileSelector accept="image/*" cls="button border-2 text-2xl" multiple={true}
+                  on:submit={e => handleFiles(e.detail)}>
+      <div class="flex items-center">
+
+        {#if image !== undefined}
+          <img src={image} />
+        {:else}
+          <ToSvelte construct={ Svg.camera_plus_svg().SetClass("block w-12 h-12 p-1 text-4xl ")} />
+        {/if}
+        {#if labelText}
+          {labelText}
+        {:else}
+          <Tr t={t.addPicture} />
+        {/if}
+      </div>
+    </FileSelector>
+    <div class="text-sm">
+      <Tr t={t.respectPrivacy} />
+      <a class="cursor-pointer" on:click={() => {state.guistate.openUsersettings("picture-license")}}>
+        <Tr t={t.currentLicense.Subs({license: $licenseStore})} />
+      </a>
+    </div>
+  </div>
+
+</LoginToggle>

src/UI/Image/UploadingImageCounter.svelte

@@ -1,31 +1,67 @@
 <script lang="ts">/**
- * Shows an 'upload'-button which will start the upload for this feature
+ * Shows information about how much images are uploaded for the given feature
  */
 
 import type { SpecialVisualizationState } from "../SpecialVisualization";
-import type { Feature } from "geojson";
 import { Store } from "../../Logic/UIEventSource";
 import type { OsmTags } from "../../Models/OsmFeature";
-import { ImageUploader } from "../../Logic/ImageProviders/ImageUploader";
-import LoginToggle from "../Base/LoginToggle.svelte";
 import Translations from "../i18n/Translations";
 import Tr from "../Base/Tr.svelte";
-import { ImageUploadManager } from "../../Logic/ImageProviders/ImageUploadManager";
+import Loading from "../Base/Loading.svelte";
 
 export let state: SpecialVisualizationState;
-export let feature: Feature;
-
 export let tags: Store<OsmTags>;
-export let state: SpecialVisualizationState;
-export let lon: number;
-export let lat: number;
-const t = Translations.t.image
+const featureId = tags.data.id;
+const {
+  uploadStarted,
+  uploadFinished,
+  retried,
+  failed
+} = state.imageUploadManager.getCountsFor(featureId);
+const t = Translations.t.image;
 
 </script>
 
+{#if $uploadStarted == 1}
+  {#if $uploadFinished == 1 }
+    <Tr cls="thanks" t={t.upload.one.done} />
+  {:else if $failed == 1}
+    <div class="flex flex-col alert">
+      <Tr cls="self-center" t={t.upload.one.failed} />
+      <Tr t={t.upload.failReasons} />
+      <Tr t={t.upload.failReasonsAdvanced} />
+    </div>
+  {:else if $retried == 1}
+    <Loading cls="alert">
+      <Tr t={t.upload.one.retrying} />
+    </Loading>
+  {:else }
+    <Loading cls="alert">
+      <Tr t={t.upload.one.uploading} />
+    </Loading>
+  {/if}
+{:else if $uploadStarted > 1}
+  {#if ($uploadFinished + $failed) == $uploadStarted && $uploadFinished > 0}
+    <Tr cls="thanks" t={t.upload.multiple.done.Subs({count: $uploadFinished})} />
+  {:else if $uploadFinished == 0}
+    <Loading cls="alert">
+      <Tr t={t.upload.multiple.uploading.Subs({count: $uploadStarted})} />
+    </Loading>
+  {:else if $uploadFinished > 0}
+    <Loading cls="alert">
+      <Tr t={t.upload.multiple.partiallyDone.Subs({count: $uploadStarted -  $uploadFinished, done: $uploadFinished})} />
+    </Loading>
+  {/if}
+  {#if $failed > 0}
+    <div class="flex flex-col alert">
+      {#if failed === 1}
+        <Tr cls="self-center" t={t.upload.one.failed} />
+      {:else}
+        <Tr cls="self-center" t={t.upload.multiple.someFailed.Subs({count: $failed})} />
 
-<LoginToggle>
-  
-  <Tr slot="not-logged-in" t={t.pleaseLogin}/>
-  
-</LoginToggle>
+      {/if}
+      <Tr t={t.upload.failReasons} />
+      <Tr t={t.upload.failReasonsAdvanced} />
+    </div>
+  {/if}
+{/if}