Fixed image loading (again)

UI/Image/ImageCarousel.ts

@@ -9,7 +9,9 @@ import ImageProvider from "../../Logic/ImageProviders/ImageProvider";
 
 export class ImageCarousel extends Toggle {
 
-    constructor(images: UIEventSource<{ key: string, url: string, provider: ImageProvider }[]>, tags: UIEventSource<any>) {
+    constructor(images: UIEventSource<{ key: string, url: string, provider: ImageProvider }[]>, 
+                tags: UIEventSource<any>,
+                keys: string[]) {
         const uiElements = images.map((imageURLS: { key: string, url: string, provider: ImageProvider }[]) => {
             const uiElements: BaseUIElement[] = [];
             for (const url of imageURLS) {

UI/Image/ImageUploadFlow.ts

@@ -9,14 +9,15 @@ import LicensePicker from "../BigComponents/LicensePicker";
 import Toggle from "../Input/Toggle";
 import FileSelectorButton from "../Input/FileSelectorButton";
 import ImgurUploader from "../../Logic/ImageProviders/ImgurUploader";
-import UploadFlowStateUI from "../BigComponents/UploadFlowStateUI";
 import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction";
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
 import {FixedUiElement} from "../Base/FixedUiElement";
+import {VariableUiElement} from "../Base/VariableUIElement";
 
 export class ImageUploadFlow extends Toggle {
 
     constructor(tagsSource: UIEventSource<any>, imagePrefix: string = "image", text: string = undefined) {
+        const uploadedCount = new UIEventSource<number>(0)
         const uploader = new ImgurUploader(url => {
             // A file was uploaded - we add it to the tags of the object
 
@@ -30,6 +31,8 @@ export class ImageUploadFlow extends Toggle {
                 key = imagePrefix + ":" + freeIndex;
             }
             console.log("Adding image:" + key, url);
+            uploadedCount.data ++
+            uploadedCount.ping()
             Promise.resolve(State.state.changes
                 .applyAction(new ChangeTagAction(
                     tags.id, new Tag(key, url), tagsSource.data,
@@ -40,10 +43,6 @@ export class ImageUploadFlow extends Toggle {
                 )))
         })
         
-        uploader.queue.addCallbackD(q => console.log("Image upload queue is ", q))
-        uploader.failed.addCallbackD(q => console.log("Image upload fail list is ", q))
-        uploader.success.addCallbackD(q => console.log("Image upload success list is ", q))
-
         const licensePicker = new LicensePicker()
 
         const t = Translations.t.image;
@@ -105,10 +104,30 @@ export class ImageUploadFlow extends Toggle {
         })
 
 
-        const uploadStateUi = new UploadFlowStateUI(uploader.queue, uploader.failed, uploader.success)
-
         const uploadFlow: BaseUIElement = new Combine([
-            uploadStateUi,
+            new VariableUiElement(uploader.queue.map(q => q.length).map(l => {
+                if(l == 0){
+                    return undefined;
+                }
+                if(l == 1){
+                   return t.uploadingPicture.Clone().SetClass("alert")
+                }else{
+                    return t.uploadingMultiple.Subs({count: "" + l}).SetClass("alert")
+                }
+            })),
+            new VariableUiElement(uploader.failed.map(q => q.length).map(l => {
+                if(l==0){
+                    return undefined
+                }
+                return t.uploadFailed.Clone().SetClass("alert");
+            })),
+            new VariableUiElement(uploadedCount.map(l => {
+                if(l == 0){
+                    return  undefined;
+                }
+                return t.uploadDone.Clone().SetClass("thanks");
+            })),
+            
             fileSelector,
             Translations.t.image.respectPrivacy.Clone().SetStyle("font-size:small;"),
             licensePicker

UI/SpecialVisualizations.ts

@@ -83,15 +83,15 @@ export default class SpecialVisualizations {
                 docs: "Creates an image carousel for the given sources. An attempt will be made to guess what source is used. Supported: Wikidata identifiers, Wikipedia pages, Wikimedia categories, IMGUR (with attribution, direct links)",
                 args: [{
                     name: "image key/prefix (multiple values allowed if comma-seperated)",
-                    defaultValue: "image",
+                    defaultValue: AllImageProviders.defaultKeys.join(","),
                     doc: "The keys given to the images, e.g. if <span class='literal-code'>image</span> is given, the first picture URL will be added as <span class='literal-code'>image</span>, the second as <span class='literal-code'>image:0</span>, the third as <span class='literal-code'>image:1</span>, etc... "
                 }],
                 constr: (state: State, tags, args) => {
-                    let imagePrefixes = undefined;
+                    let imagePrefixes: string[] = undefined;
                     if(args.length > 0){
-                        imagePrefixes = args;
+                        imagePrefixes = [].concat(...args.map(a => a.split(",")));
                     }
-                    return new ImageCarousel(AllImageProviders.LoadImagesFor(tags, imagePrefixes), tags);
+                    return new ImageCarousel(AllImageProviders.LoadImagesFor(tags, imagePrefixes), tags, imagePrefixes);
                 }
             },
             {