Better upload image flow: more feedback for users

This commit is contained in:
Pieter Vander Vennet 2020-07-30 11:30:04 +02:00
parent e601807fc5
commit ab0d314330
8 changed files with 97 additions and 24 deletions

View file

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

View file

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

View file

@ -6,12 +6,16 @@ import {UserDetails} from "../Logic/Osm/OsmConnection";
import {DropDown} from "./Input/DropDown"; import {DropDown} from "./Input/DropDown";
import {VariableUiElement} from "./Base/VariableUIElement"; import {VariableUiElement} from "./Base/VariableUIElement";
import Translations from "./i18n/Translations"; import Translations from "./i18n/Translations";
import {fail} from "assert";
import Combine from "./Base/Combine";
import {VerticalCombine} from "./Base/VerticalCombine";
export class ImageUploadFlow extends UIElement { export class ImageUploadFlow extends UIElement {
private _licensePicker: UIElement; private _licensePicker: UIElement;
private _selectedLicence: UIEventSource<string>; private _selectedLicence: UIEventSource<string>;
private _isUploading: UIEventSource<number> = new UIEventSource<number>(0) private _isUploading: UIEventSource<number> = new UIEventSource<number>(0)
private _didFail: UIEventSource<boolean> = new UIEventSource<boolean>(false); 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 _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
private _userdetails: UIEventSource<UserDetails>; private _userdetails: UIEventSource<UserDetails>;
@ -32,6 +36,7 @@ export class ImageUploadFlow extends UIElement {
this._uploadOptions = uploadOptions; this._uploadOptions = uploadOptions;
this.ListenTo(this._isUploading); this.ListenTo(this._isUploading);
this.ListenTo(this._didFail); this.ListenTo(this._didFail);
this.ListenTo(this._allDone);
const licensePicker = new DropDown(Translations.t.image.willBePublished, const licensePicker = new DropDown(Translations.t.image.willBePublished,
[ [
@ -50,20 +55,28 @@ export class ImageUploadFlow extends UIElement {
InnerRender(): string { InnerRender(): string {
if (!this._userdetails.data.loggedIn) { const t = Translations.t.image;
return `<div class='activate-osm-authentication'>${Translations.t.image.pleaseLogin.Render()}</div>`; if (this._userdetails === undefined) {
return ""; // No user details -> logging in is probably disabled or smthing
} }
let uploadingMessage = ""; if (!this._userdetails.data.loggedIn) {
if (this._isUploading.data == 1) { return `<div class='activate-osm-authentication'>${t.pleaseLogin.Render()}</div>`;
return `<b>${Translations.t.image.uploadingPicture.Render()}</b>`
} }
if (this._isUploading.data > 0) {
uploadingMessage = "<b>Uploading multiple pictures, " + this._isUploading.data + " left...</b>" let currentState: UIElement[] = [];
if (this._isUploading.data == 1) {
currentState.push(t.uploadingPicture);
} else if (this._isUploading.data > 0) {
currentState.push(t.uploadingMultiple.Subs({count: this._isUploading.data}));
} }
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 "" + return "" +
@ -78,8 +91,7 @@ export class ImageUploadFlow extends UIElement {
"</div>" + "</div>" +
Translations.t.image.respectPrivacy.Render() + "<br/>" + Translations.t.image.respectPrivacy.Render() + "<br/>" +
this._licensePicker.Render() + "<br/>" + this._licensePicker.Render() + "<br/>" +
uploadingMessage + new VerticalCombine(currentState).Render() +
"</label>" + "</label>" +
"<form id='fileselector-form-" + this.id + "'>" + "<form id='fileselector-form-" + this.id + "'>" +
"<input id='fileselector-" + 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=''" + "accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
"/>" + "/>" +
"</form>" + "</form>" +
"</div>" "</div>"
; ;
} }
@ -111,6 +122,7 @@ export class ImageUploadFlow extends UIElement {
function submitHandler() { function submitHandler() {
const files = $(selector).prop('files'); const files = $(selector).prop('files');
self._isUploading.setData(files.length); self._isUploading.setData(files.length);
self._allDone.setData(false);
const opts = self._uploadOptions(self._selectedLicence.data); const opts = self._uploadOptions(self._selectedLicence.data);
@ -121,11 +133,16 @@ export class ImageUploadFlow extends UIElement {
opts.handleURL(url); opts.handleURL(url);
}, },
function () { function () {
console.log("All uploads completed") console.log("All uploads completed");
self._allDone.setData(true);
opts.allDone(); opts.allDone();
}, },
function(failReason) { 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 },0
) )
} }

View file

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

View file

@ -629,6 +629,11 @@ export default class Translations {
nl: 'Bezig met een foto te uploaden...', nl: 'Bezig met een foto te uploaden...',
fr: 'Mettre votre photo en ligne' 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({ pleaseLogin: new T({
en: 'Please login to add a picure or to answer questions', 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', 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", en: "Please respect privacy. Do not photograph people nor license plates",
nl: "Respecteer privacy. Fotografeer geen mensen of nummerplaten", nl: "Respecteer privacy. Fotografeer geen mensen of nummerplaten",
fr: "TODO: fr" 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: { centerMessage: {

View file

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

View file

@ -74,6 +74,17 @@ form {
padding-bottom: 0.15em; 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 { .activate-osm-authentication {
cursor: pointer; cursor: pointer;

32
test.ts
View file

@ -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")