midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better upload image flow: more feedback for users

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Logic/Imgur.ts
View file

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

11
Logic/LayerUpdater.ts
View file

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

43
UI/ImageUploadFlow.ts
View file

@ -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 {
if (!this._userdetails.data.loggedIn) {
return `<div class='activate-osm-authentication'>${Translations.t.image.pleaseLogin.Render()}</div>`;
const t = Translations.t.image;
if (this._userdetails === undefined) {
return ""; // No user details -> logging in is probably disabled or smthing
}
let uploadingMessage = "";
if (this._isUploading.data == 1) {
return `<b>${Translations.t.image.uploadingPicture.Render()}</b>`
if (!this._userdetails.data.loggedIn) {
return `<div class='activate-osm-authentication'>${t.pleaseLogin.Render()}</div>`;
}
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) {
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
)
}

1
UI/i18n/Translation.ts
View file

@ -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;
}

13
UI/i18n/Translations.ts
View file

@ -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: {

4
createLayouts.ts
View file

@ -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]++;

11
index.css
View file

@ -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;

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