Better upload image flow: more feedback for users

Logic/Imgur.ts

@@ -113,7 +113,7 @@ export class Imgur {
             handleSuccessfullUpload(response.data.link);
         }).fail((reason) => {
             console.log("Uploading to IMGUR failed", reason);
-            onFail(reason)
+            onFail(reason);
         });
     }
 

Logic/LayerUpdater.ts

@@ -10,7 +10,7 @@ export class LayerUpdater {
     private _layers: FilteredLayer[];
 
     public readonly runningQuery: UIEventSource<boolean> = new UIEventSource<boolean>(false);
-    
+    public readonly retries: UIEventSource<number> = new UIEventSource<number>(0);
      /**
      * The previous bounds for which the query has been run
      */
@@ -69,15 +69,16 @@ export class LayerUpdater {
 
     }
 
-    private _failCount = 0;
     private handleFail(reason: any) {
-        console.log("QUERY FAILED (retrying in 5 sec)", reason);
+        console.log(`QUERY FAILED (retrying in ${5 * this.retries.data} sec)`, reason);
         this.previousBounds = undefined;
+        this.retries.data ++;
+        this.retries.ping();
         const self = this;
-        this._failCount++;
         window?.setTimeout(
-            function(){self.update()}, this._failCount * 5000
+            function(){self.update()}, this.retries.data * 5000
         )
+        
     }
 
 

UI/ImageUploadFlow.ts

@@ -6,12 +6,16 @@ import {UserDetails} from "../Logic/Osm/OsmConnection";
 import {DropDown} from "./Input/DropDown";
 import {VariableUiElement} from "./Base/VariableUIElement";
 import Translations from "./i18n/Translations";
+import {fail} from "assert";
+import Combine from "./Base/Combine";
+import {VerticalCombine} from "./Base/VerticalCombine";
 
 export class ImageUploadFlow extends UIElement {
     private _licensePicker: UIElement;
     private _selectedLicence: UIEventSource<string>;
     private _isUploading: UIEventSource<number> = new UIEventSource<number>(0)
     private _didFail: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+    private _allDone: UIEventSource<boolean> = new UIEventSource<boolean>(false);
     private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
     private _userdetails: UIEventSource<UserDetails>;
 
@@ -32,6 +36,7 @@ export class ImageUploadFlow extends UIElement {
         this._uploadOptions = uploadOptions;
         this.ListenTo(this._isUploading);
         this.ListenTo(this._didFail);
+        this.ListenTo(this._allDone);
 
         const licensePicker = new DropDown(Translations.t.image.willBePublished,
             [
@@ -50,20 +55,28 @@ export class ImageUploadFlow extends UIElement {
 
     InnerRender(): string {
 
+        const t = Translations.t.image;
+        if (this._userdetails === undefined) {
+            return ""; // No user details -> logging in is probably disabled or smthing
+        }
+
         if (!this._userdetails.data.loggedIn) {
-            return `<div class='activate-osm-authentication'>${Translations.t.image.pleaseLogin.Render()}</div>`;
+            return `<div class='activate-osm-authentication'>${t.pleaseLogin.Render()}</div>`;
         }
 
-        let uploadingMessage = "";
+        let currentState: UIElement[] = [];
         if (this._isUploading.data == 1) {
-            return `<b>${Translations.t.image.uploadingPicture.Render()}</b>`
+            currentState.push(t.uploadingPicture);
-        }
+        } else if (this._isUploading.data > 0) {
-        if (this._isUploading.data > 0) {
+            currentState.push(t.uploadingMultiple.Subs({count: this._isUploading.data}));
-            uploadingMessage = "<b>Uploading multiple pictures, " + this._isUploading.data + " left...</b>"
         }
 
-        if(this._didFail.data){
+        if (this._didFail.data) {
-            uploadingMessage += "<b>Some images failed to upload. Imgur migth be down or you might block third-party API's (e.g. by using Brave or UMatrix)</b><br/>"
+            currentState.push(t.uploadFailed);
+        }
+
+        if (this._allDone.data) {
+            currentState.push(t.uploadDone)
         }
 
         return "" +
@@ -78,8 +91,7 @@ export class ImageUploadFlow extends UIElement {
             "</div>" +
             Translations.t.image.respectPrivacy.Render() + "<br/>" +
             this._licensePicker.Render() + "<br/>" +
-            uploadingMessage +
+            new VerticalCombine(currentState).Render() +
-
             "</label>" +
             "<form id='fileselector-form-" + this.id + "'>" +
             "<input id='fileselector-" + this.id + "' " +
@@ -88,7 +100,6 @@ export class ImageUploadFlow extends UIElement {
             "accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
             "/>" +
             "</form>" +
-
             "</div>"
             ;
     }
@@ -111,6 +122,7 @@ export class ImageUploadFlow extends UIElement {
         function submitHandler() {
             const files = $(selector).prop('files');
             self._isUploading.setData(files.length);
+            self._allDone.setData(false);
 
             const opts = self._uploadOptions(self._selectedLicence.data);
 
@@ -121,11 +133,16 @@ export class ImageUploadFlow extends UIElement {
                     opts.handleURL(url);
                 },
                 function () {
-                    console.log("All uploads completed")
+                    console.log("All uploads completed");
+                    self._allDone.setData(true);
                     opts.allDone();
                 },
                 function(failReason) {
-                
+                    console.log("Upload failed due to ", failReason)
+                    // No need to call something from the options -> we handle this here
+                    self._didFail.setData(true);
+                    self._isUploading.data--;
+                    self._isUploading.ping();
                 },0
             )
         }

UI/i18n/Translation.ts

@@ -45,7 +45,6 @@ export default class Translation extends UIElement {
             return txt;
         }
         const en = this.translations["en"];
-        console.warn("No translation for language ", Locale.language.data, "for", en);
         if (en !== undefined) {
             return en;
         }

UI/i18n/Translations.ts

@@ -629,6 +629,11 @@ export default class Translations {
                 nl: 'Bezig met een foto te uploaden...',
                 fr: 'Mettre votre photo en ligne'
             }),
+            uploadingMultiple: new T({
+                en: 'Uploading {count} of your picture...',
+                nl: 'Bezig met {count} foto\'s te uploaden...',
+                fr: 'Mettre votre {count} photos en ligne'
+            }),
             pleaseLogin: new T({
                 en: 'Please login to add a picure or to answer questions',
                 nl: 'Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden',
@@ -646,6 +651,14 @@ export default class Translations {
                 en: "Please respect privacy. Do not photograph people nor license plates",
                 nl: "Respecteer privacy. Fotografeer geen mensen of nummerplaten",
                 fr: "TODO: fr"
+            }),
+            uploadFailed: new T({
+                en: "Could not upload your picture. Do you have internet and are third party API's allowed? Brave browser or UMatrix might block them.",
+                nl: "Afbeelding uploaden mislukt. Heb je internet? Gebruik je Brave of UMatrix? Dan moet je derde partijen toelaten."
+            }),
+            uploadDone: new T({
+                en: "<span class='thanks'>Your picture has been added. Thanks for helping out!</span>",
+                nl: "<span class='thanks'>Je afbeelding is toegevoegd. Bedankt om te helpen!</span>"
             })
         },
         centerMessage: {

createLayouts.ts

@@ -17,7 +17,7 @@ import Translations from "./UI/i18n/Translations";
 import {UIElement} from "./UI/UIElement";
 import {LayerDefinition} from "./Customizations/LayerDefinition";
 
-console.log("Building routers")
+console.log("Building the layouts")
 
 UIElement.runningFromConsole = true;
 
@@ -55,7 +55,7 @@ function validate(layout: Layout) {
             const txt = translation.translations[ln];
             const isMissing = txt === undefined || txt === "" || txt.toLowerCase().indexOf("todo") >= 0;
             if (isMissing) {
-                console.log("Missing or suspicious translation for '", translation.txt, "'in", ln, ":", txt)
+                console.log(`Missing or suspicious ${ln}-translation for '`, translation.txt, ":", txt)
                 missing[ln]++
             } else {
                 present[ln]++;

index.css

@@ -74,6 +74,17 @@ form {
     padding-bottom: 0.15em;
 }
 
+.thanks {
+    background-color: #43d904;
+    font-weight: bold;
+    border-radius: 1em;
+    padding: 0.3em;
+    margin: 0.25em;
+    text-align: center;
+    padding-top: 0.15em;
+    padding-bottom: 0.15em;
+}
+
 
 .activate-osm-authentication {
     cursor: pointer;

test.ts

@@ -0,0 +1,32 @@
+import {ImageUploadFlow} from "./UI/ImageUploadFlow";
+import {OsmConnection, UserDetails} from "./Logic/Osm/OsmConnection";
+import {OsmImageUploadHandler} from "./Logic/Osm/OsmImageUploadHandler";
+import {UIEventSource} from "./UI/UIEventSource";
+import {Changes} from "./Logic/Osm/Changes";
+import {SlideShow} from "./UI/SlideShow";
+import {ElementStorage} from "./Logic/ElementStorage";
+import {isNullOrUndefined} from "util";
+import Locale from "./UI/i18n/Locale";
+
+const osmConnection = new OsmConnection(true, new UIEventSource<string>(undefined));
+const uploadHandler = new OsmImageUploadHandler(
+    new UIEventSource<any>({}),
+    osmConnection.userDetails,
+    new UIEventSource<string>("cc0"),
+    new Changes("blabla", osmConnection, new ElementStorage()),
+    undefined);
+
+new ImageUploadFlow(
+    osmConnection.userDetails,
+    new UIEventSource<string>("cc0"),
+    (license: string) => {
+        return {
+            title: "test",
+            description: "test",
+            handleURL: console.log,
+            allDone: () => {
+            }
+        }
+    }).AttachTo("maindiv")
+
+Locale.language.setData("nl")