import {UIElement} from "./UIElement"; import {UIEventSource} from "./UIEventSource"; import $ from "jquery" import {Imgur} from "../Logic/Imgur"; 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; private _isUploading: UIEventSource = new UIEventSource(0) private _didFail: UIEventSource = new UIEventSource(false); private _allDone: UIEventSource = new UIEventSource(false); private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) }; private _userdetails: UIEventSource; constructor( userInfo: UIEventSource, preferedLicense: UIEventSource, uploadOptions: ((license: string) => { title: string, description: string, handleURL: ((url: string) => void), allDone: (() => void) }) ) { super(undefined); this._userdetails = userInfo; this.ListenTo(userInfo); 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; this._selectedLicence = licensePicker.GetValue(); } 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 `
${t.pleaseLogin.Render()}
`; } 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) } return "" + "
" + "" + "
" + "" + "
" + "
" ; } InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); const user = this._userdetails.data; htmlElement.onclick = function () { if (!user.loggedIn) { user.osmConnection.AttemptLogin(); } } 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); 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); 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 ) } if (selector != null && form != null) { selector.onchange = function () { submitHandler() } form.addEventListener('submit', e => { console.log(e) alert('wait') e.preventDefault() submitHandler() }) } } }