Add image upload functionality with imgur

UI/ImageUploadFlow.ts

@@ -0,0 +1,92 @@
+import {UIElement} from "./UIElement";
+import {UIEventSource} from "./UIEventSource";
+import {UIRadioButton} from "./UIRadioButton";
+import {VariableUiElement} from "./VariableUIElement";
+import $ from "jquery"
+import {Imgur} from "../Logic/Imgur";
+
+export class ImageUploadFlow extends UIElement {
+    private _licensePicker: UIRadioButton;
+    private _licenseExplanation: UIElement;
+    private _isUploading: UIEventSource<number> = new UIEventSource<number>(0)
+    private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
+
+    constructor(uploadOptions: ((license: string) =>
+        {
+            title: string,
+            description: string,
+            handleURL: ((url: string) => void),
+            allDone: (() => void)
+        })
+    ) {
+        super(undefined);
+        this._uploadOptions = uploadOptions;
+        this.ListenTo(this._isUploading);
+        this._licensePicker = UIRadioButton.FromStrings(
+            [
+                "CC-BY-SA",
+                "CC-BY",
+                "CC0"
+            ]
+        );
+        const licenseExplanations = {
+            "CC-BY-SA":
+                "<b>Creative Commonse met naamsvermelding en gelijk delen</b><br/>" +
+                "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden én ze afgeleide werken met deze licentie en attributie delen.",
+            "CC-BY":
+                "<b>Creative Commonse met naamsvermelding</b> <br/>" +
+                "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden",
+            "CC0":
+                "<b>Geen copyright</b><br/> Je foto mag door iedereen voor alles gebruikt worden"
+        }
+        this._licenseExplanation = new VariableUiElement(
+            this._licensePicker.SelectedElementIndex.map((license) => {
+                return licenseExplanations[license?.value]
+            })
+        );
+    }
+
+
+    protected InnerRender(): string {
+
+        if (this._isUploading.data > 0) {
+            return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>"
+        }
+
+        return "<b>Foto's toevoegen</b><br/>" +
+            'Kies een licentie:<br/>' +
+            this._licensePicker.Render() +
+            this._licenseExplanation.Render() + "<br/>" +
+            '<input type="file" accept="image/*" name="picField" id="fileselector-' + this.id + '" size="24" multiple="multiple" alt=""/><br/>'
+            ;
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        this._licensePicker.Update();
+        const selector = document.getElementById('fileselector-' + this.id);
+        const self = this;
+        if (selector != null) {
+            selector.onchange = function (event) {
+                const files = $(this).get(0).files;
+                self._isUploading.setData(files.length);
+
+                const opts = self._uploadOptions(self._licensePicker.SelectedElementIndex.data.value);
+
+                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")
+                        opts.allDone();
+                    }
+                )
+            }
+        }
+    }
+
+
+}

UI/UIElement.ts

@@ -47,6 +47,7 @@ export abstract class UIElement {
         let element = document.getElementById(divId);
         element.innerHTML = this.Render();
         this.Update();
+        return this;
     }
 
     protected abstract InnerRender(): string;

UI/UIRadioButton.ts

@@ -0,0 +1,106 @@
+import {UIElement} from "./UIElement";
+import {UIEventSource} from "./UIEventSource";
+import {FixedUiElement} from "./FixedUiElement";
+import $ from "jquery"
+
+export class UIRadioButton extends UIElement {
+
+    public readonly SelectedElementIndex: UIEventSource<{ index: number, value: string }>
+        = new UIEventSource<{ index: number, value: string }>(null);
+
+    private readonly _elements: UIEventSource<{ element: UIElement, value: string }[]>
+
+    constructor(elements: UIEventSource<{ element: UIElement, value: string }[]>) {
+        super(elements);
+        this._elements = elements;
+    }
+
+    static FromStrings(choices: string[]): UIRadioButton {
+        const wrapped = [];
+        for (const choice of choices) {
+            wrapped.push({
+                element: new FixedUiElement(choice),
+                value: choice
+            });
+        }
+        return new UIRadioButton(new UIEventSource<{ element: UIElement, value: string }[]>(wrapped))
+    }
+
+    private IdFor(i) {
+        return 'radio-' + this.id + '-' + i;
+    }
+
+    protected InnerRender(): string {
+
+        let body = "";
+        let i = 0;
+        for (const el of this._elements.data) {
+            const uielement = el.element;
+            const value = el.value;
+
+            const htmlElement =
+                '<input type="radio" id="' + this.IdFor(i) + '" name="radiogroup-' + this.id + '" value="' + value + '">' +
+                '<label for="' + this.IdFor(i) + '">' + uielement.Render() + '</label>' +
+                '<br>';
+            body += htmlElement;
+
+            i++;
+        }
+
+        return "<form id='" + this.id + "-form'>" + body + "</form>";
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        const self = this;
+
+        function checkButtons() {
+            for (let i = 0; i < self._elements.data.length; i++) {
+                const el = document.getElementById(self.IdFor(i));
+                // @ts-ignore
+                if (el.checked) {
+                    var v = {index: i, value: self._elements.data[i].value}
+                    self.SelectedElementIndex.setData(v);
+                }
+            }
+        }
+
+
+        const el = document.getElementById(this.id);
+        el.addEventListener("change",
+            function () {
+                checkButtons();
+            }
+        );
+
+        if (this.SelectedElementIndex.data == null) {
+            const el = document.getElementById(this.IdFor(0));
+            el.checked = true;
+            checkButtons();
+        } else {
+
+            // We check that what is selected matches the previous rendering
+            var checked = -1;
+            var expected = -1
+            for (let i = 0; i < self._elements.data.length; i++) {
+                const el = document.getElementById(self.IdFor(i));
+                // @ts-ignore
+                if (el.checked) {
+                    checked = i;
+                }
+                if (el.value === this.SelectedElementIndex.data.value) {
+                    expected = i;
+                }
+            }
+            if (expected != checked) {
+                const el = document.getElementById(this.IdFor(expected));
+                // @ts-ignore
+                el.checked = true;
+            }
+        }
+
+
+    }
+
+
+}

UI/VariableUIElement.ts

@@ -0,0 +1,17 @@
+import {UIElement} from "./UIElement";
+import {UIEventSource} from "./UIEventSource";
+
+export class VariableUiElement extends UIElement {
+    private _html: UIEventSource<string>;
+
+    constructor(html: UIEventSource<string>) {
+        super(html);
+        this._html = html;
+    }
+
+    protected InnerRender(): string {
+        return this._html.data;
+    }
+
+
+}

UI/VerticalCombine.ts

@@ -18,6 +18,9 @@ export class VerticalCombine extends UIElement {
         return html;
     }
     InnerUpdate(htmlElement: HTMLElement) {
+        for (const element of this._elements){
+            element.Update();
+        }
     }
     
     Activate() {