From 33a1e47af24d87647aa337d234e3435c4498d3a6 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@gmail.com>
Date: Tue, 21 Jul 2020 22:50:54 +0200
Subject: [PATCH] Add upload failed message; fix pump icon

---
 Customizations/Layers/BikeStations.ts |  2 +-
 Logic/Imgur.ts                        | 10 +++++++---
 README.md                             |  3 +++
 UI/ImageUploadFlow.ts                 | 19 +++++++++++++------
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/Customizations/Layers/BikeStations.ts b/Customizations/Layers/BikeStations.ts
index 4d4ae716d..b1ac4a46a 100644
--- a/Customizations/Layers/BikeStations.ts
+++ b/Customizations/Layers/BikeStations.ts
@@ -70,7 +70,7 @@ export default class BikeStations extends LayerDefinition {
                     if (isOperational) {
                         iconName = "pump.svg"
                     } else {
-                        iconName = "pump_broken.svg"
+                        iconName = "broken_pump.svg"
                     }
                 }
             } else {
diff --git a/Logic/Imgur.ts b/Logic/Imgur.ts
index b41929f9d..7d1b0ed49 100644
--- a/Logic/Imgur.ts
+++ b/Logic/Imgur.ts
@@ -8,6 +8,7 @@ export class Imgur {
         title: string, description: string, blobs: FileList,
         handleSuccessfullUpload: ((imageURL: string) => void),
         allDone: (() => void),
+        onFail: ((reason: string) => void),
         offset:number = 0) {
 
         if (blobs.length == offset) {
@@ -24,7 +25,8 @@ export class Imgur {
                     handleSuccessfullUpload,
                     allDone,
                     offset + 1);
-            }
+            },
+            onFail
         );
 
 
@@ -74,7 +76,8 @@ export class Imgur {
     }
 
     static uploadImage(title: string, description: string, blob,
-                       handleSuccessfullUpload: ((imageURL: string) => void)) {
+                       handleSuccessfullUpload: ((imageURL: string) => void),
+                       onFail: (reason:string) => void) {
 
         const apiUrl = 'https://api.imgur.com/3/image';
         const apiKey = '7070e7167f0a25a';
@@ -105,7 +108,8 @@ export class Imgur {
             response = JSON.parse(response);
             handleSuccessfullUpload(response.data.link);
         }).fail((reason) => {
-            console.log("Uploading to IMGUR failed", reason)
+            console.log("Uploading to IMGUR failed", reason);
+            onFail(reason)
         });
     }
 
diff --git a/README.md b/README.md
index 4ca29f4ce..4a48c3a36 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,9 @@ When a map feature is clicked, a popup shows the information, images and questio
 The answers given by the user are sent (after a few seconds) to OpenStreetMap directly - if the user is logged in. If not logged in, the user is prompted to do so. 
 
 
+The UI-event-source is a class where the entire system is built upon, it acts as an observable object: another object can register for changes to update when needed.
+
+
 ### Searching images
 
 Images are fetched from:
diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts
index 110fcd088..048b32ac7 100644
--- a/UI/ImageUploadFlow.ts
+++ b/UI/ImageUploadFlow.ts
@@ -11,12 +11,13 @@ 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 _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
     private _userdetails: UIEventSource<UserDetails>;
 
     constructor(
         userInfo: UIEventSource<UserDetails>,
-        preferedLicense : UIEventSource<string>,
+        preferedLicense: UIEventSource<string>,
         uploadOptions: ((license: string) =>
             {
                 title: string,
@@ -30,6 +31,7 @@ export class ImageUploadFlow extends UIElement {
         this.ListenTo(userInfo);
         this._uploadOptions = uploadOptions;
         this.ListenTo(this._isUploading);
+        this.ListenTo(this._didFail);
 
         const licensePicker = new DropDown(Translations.t.image.willBePublished,
             [
@@ -59,6 +61,10 @@ export class ImageUploadFlow extends UIElement {
         if (this._isUploading.data > 0) {
             uploadingMessage = "<b>Uploading multiple pictures, " + this._isUploading.data + " left...</b>"
         }
+        
+        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/>"
+        }
 
         return "" +
             "<div class='imageflow'>" +
@@ -68,20 +74,20 @@ export class ImageUploadFlow extends UIElement {
             "<div class='imageflow-file-input-wrapper'>" +
             "<img src='./assets/camera-plus.svg' alt='upload image'/> " +
             `<span class='imageflow-add-picture'>${Translations.t.image.addPicture.R()}</span>` +
-            "<div class='break'></div>"+
+            "<div class='break'></div>" +
             "</div>" +
 
             this._licensePicker.Render() + "<br/>" +
             uploadingMessage +
 
             "</label>" +
-            
+
             "<input id='fileselector-" + this.id + "' " +
             "type='file' " +
             "class='imageflow-file-input' " +
             "accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
             "/>" +
-            
+
             "</div>"
             ;
     }
@@ -116,11 +122,12 @@ export class ImageUploadFlow extends UIElement {
                     function () {
                         console.log("All uploads completed")
                         opts.allDone();
+                    },
+                    function(failReason) {
+                    
                     }
                 )
             }
         }
     }
-
-
 }
\ No newline at end of file