mapcomplete/UI/ImageUploadFlow.ts

169 lines
6.1 KiB
TypeScript
Raw Normal View History

import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import $ from "jquery"
import {Imgur} from "../Logic/Imgur";
2020-07-30 09:59:30 +02:00
import {UserDetails} from "../Logic/Osm/OsmConnection";
2020-07-20 15:54:50 +02:00
import {DropDown} from "./Input/DropDown";
2020-06-29 03:16:34 +02:00
import {VariableUiElement} from "./Base/VariableUIElement";
2020-07-21 00:07:04 +02:00
import Translations from "./i18n/Translations";
import {fail} from "assert";
import Combine from "./Base/Combine";
import {VerticalCombine} from "./Base/VerticalCombine";
import {State} from "../State";
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) };
constructor(
preferedLicense: UIEventSource<string>,
uploadOptions: ((license: string) =>
{
title: string,
description: string,
handleURL: ((url: string) => void),
allDone: (() => void)
})
) {
super(State.state.osmConnection.userDetails);
this._uploadOptions = uploadOptions;
this.ListenTo(this._isUploading);
this.ListenTo(this._didFail);
this.ListenTo(this._allDone);
const licensePicker = new DropDown(Translations.t.image.willBePublished,
[
{value: "CC0", shown: Translations.t.image.cco},
{value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs},
{value: "CC-BY 4.0", shown: Translations.t.image.ccb}
],
preferedLicense
);
this._licensePicker = licensePicker;
2020-07-20 21:39:07 +02:00
this._selectedLicence = licensePicker.GetValue();
}
2020-07-20 21:39:07 +02:00
InnerRender(): string {
const t = Translations.t.image;
if (State.state.osmConnection.userDetails === undefined) {
return ""; // No user details -> logging in is probably disabled or smthing
}
if (!State.state.osmConnection.userDetails.data.loggedIn) {
return `<div class='activate-osm-authentication'>${t.pleaseLogin.Render()}</div>`;
}
2020-07-20 17:30:02 +02:00
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) {
currentState.push(t.uploadFailed);
}
if (this._allDone.data) {
currentState.push(t.uploadDone)
}
let currentStateHtml = "";
if (currentState.length > 0) {
currentStateHtml = new VerticalCombine(currentState).Render();
if (!this._allDone.data) {
currentStateHtml = "<span class='alert'>" +
currentStateHtml +
"</span>";
}
}
return "" +
"<div class='imageflow'>" +
2020-07-20 17:30:02 +02:00
"<label for='fileselector-" + this.id + "'>" +
2020-07-20 17:30:02 +02:00
"<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>" +
currentStateHtml +
2020-07-29 09:57:24 +02:00
Translations.t.image.respectPrivacy.Render() + "<br/>" +
2020-07-20 17:30:02 +02:00
this._licensePicker.Render() + "<br/>" +
"</label>" +
2020-07-27 13:04:38 +02:00
"<form id='fileselector-form-" + this.id + "'>" +
"<input id='fileselector-" + this.id + "' " +
"type='file' " +
"class='imageflow-file-input' " +
"accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
"/>" +
2020-07-27 13:04:38 +02:00
"</form>" +
"</div>"
;
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const user = State.state.osmConnection.userDetails.data;
htmlElement.onclick = function () {
if (!user.loggedIn) {
State.state.osmConnection.AttemptLogin();
}
}
2020-07-27 13:04:38 +02:00
this._licensePicker.Update()
const form = document.getElementById('fileselector-form-' + this.id) as HTMLFormElement
const selector = document.getElementById('fileselector-' + this.id)
const self = this
function submitHandler() {
const files = $(selector).prop('files');
self._isUploading.setData(files.length);
self._allDone.setData(false);
2020-07-27 13:04:38 +02:00
const opts = self._uploadOptions(self._selectedLicence.data);
Imgur.uploadMultiple(opts.title, opts.description, files,
function (url) {
console.log("File saved at", url);
self._isUploading.setData(self._isUploading.data - 1);
opts.handleURL(url);
},
function () {
console.log("All uploads completed");
self._allDone.setData(true);
2020-07-27 13:04:38 +02:00
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();
2020-07-27 13:04:38 +02:00
},0
)
}
2020-07-27 13:04:38 +02:00
if (selector != null && form != null) {
selector.onchange = function () {
2020-07-27 13:04:38 +02:00
submitHandler()
}
2020-07-27 13:04:38 +02:00
form.addEventListener('submit', e => {
console.log(e)
alert('wait')
e.preventDefault()
submitHandler()
})
}
}
}