Optimize rendering

UI/SpecialVisualizations.ts

@@ -3,6 +3,79 @@ import OpeningHoursVisualization from "./OhVisualization";
 import {UIEventSource} from "../Logic/UIEventSource";
 import {VariableUiElement} from "./Base/VariableUIElement";
 import LiveQueryHandler from "../Logic/Web/LiveQueryHandler";
+import {ImageCarousel} from "./Image/ImageCarousel";
+import Translation from "./i18n/Translation";
+import Combine from "./Base/Combine";
+import {FixedUiElement} from "./Base/FixedUiElement";
+import Locale from "../UI/i18n/Locale";
+import {ImageUploadFlow} from "./Image/ImageUploadFlow";
+
+export class SubstitutedTranslation extends UIElement {
+    private readonly tags: UIEventSource<any>;
+    private readonly translation: Translation;
+    private content: UIElement;
+
+    constructor(
+        translation: Translation,
+        tags: UIEventSource<any>) {
+        super(tags);
+        this.translation = translation;
+        this.tags = tags;
+        const self = this;
+        Locale.language.addCallbackAndRun(() => {
+            self.content = self.CreateContent();
+            self.Update();
+        })
+    }
+
+    InnerRender(): string {
+        return this.content.Render();
+    }
+
+
+    CreateContent(): UIElement {
+        let txt = this.translation?.txt;
+        if (txt === undefined) {
+            return new FixedUiElement("")
+        }
+        const tags = this.tags.data;
+        for (const key in tags) {
+            // Poor mans replace all
+            txt = txt.split("{" + key + "}").join(tags[key]);
+        }
+
+
+        return new Combine(this.EvaluateSpecialComponents(txt));
+    }
+
+    public EvaluateSpecialComponents(template: string): UIElement[] {
+
+        for (const knownSpecial of SpecialVisualizations.specialVisualizations) {
+
+            // NOte: the '.*?' in the regex reads as 'any character, but in a non-greedy way'
+            const matched = template.match(`(.*){${knownSpecial.funcName}\\((.*?)\\)}(.*)`);
+            if (matched != null) {
+
+                // We found a special component that should be brought to live
+                const partBefore = this.EvaluateSpecialComponents(matched[1]);
+                const argument = matched[2];
+                const partAfter = this.EvaluateSpecialComponents(matched[3]);
+                try {
+                    const args = argument.trim().split(",").map(str => str.trim());
+                    const element = knownSpecial.constr(this.tags, args);
+                    return [...partBefore, element, ...partAfter]
+                } catch (e) {
+                    console.error(e);
+                    return [...partBefore, ...partAfter]
+                }
+            }
+        }
+
+        // IF we end up here, no changes have to be made
+        return [new FixedUiElement(template)];
+    }
+
+}
 
 export default class SpecialVisualizations {
 
@@ -13,18 +86,55 @@ export default class SpecialVisualizations {
         args: { name: string, defaultValue?: string, doc: string }[]
     }[] =
 
-        [{
-            funcName: "opening_hours_table",
-            docs: "Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'.",
-            args: [{name: "key", defaultValue: "opening_hours", doc: "The tag from which the table is constructed"}],
-            constr: (tagSource: UIEventSource<any>, args) => {
-                let keyname = args[0];
-                if (keyname === undefined || keyname === "") {
-                    keyname = keyname ?? "opening_hours"
+        [
+            {
+                funcName: "image_carousel",
+                docs: "Creates an image carousel for the given sources. An attempt will be made to guess what source is used. Supported: Wikidata identifiers, Wikipedia pages, Wikimedia categories, IMGUR (with attribution, direct links)",
+                args: [{
+                    name: "image tag(s)",
+                    defaultValue: "image,image:*,wikidata,wikipedia,wikimedia_commons",
+                    doc: "Image tag(s) where images are searched"
+                }],
+                constr: (tags, args) => {
+                    if (args.length > 0) {
+                        console.error("TODO HANDLE THESE ARGS") // TODO FIXME
+
+                    }
+                    return new ImageCarousel(tags);
                 }
-                return new OpeningHoursVisualization(tagSource, keyname)
-            }
-        },
+            },
+
+            {
+                funcName: "image_upload",
+                docs: "Creates a button where a user can upload an image to IMGUR",
+                args: [{
+                    doc: "Image tag to add the URL to (or image-tag:0, image-tag:1 when multiple images are added)",
+                    defaultValue: "image", name: "image-key"
+                }],
+                constr: (tags, args) => {
+                    if (args.length > 0) {
+                        console.error("TODO HANDLE THESE ARGS") // TODO FIXME
+
+                    }
+                    return new ImageUploadFlow(tags)
+                }
+            },
+            {
+                funcName: "opening_hours_table",
+                docs: "Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'.",
+                args: [{
+                    name: "key",
+                    defaultValue: "opening_hours",
+                    doc: "The tag from which the table is constructed"
+                }],
+                constr: (tagSource: UIEventSource<any>, args) => {
+                    let keyname = args[0];
+                    if (keyname === undefined || keyname === "") {
+                        keyname = keyname ?? "opening_hours"
+                    }
+                    return new OpeningHoursVisualization(tagSource, keyname)
+                }
+            },
 
             {
                 funcName: "live",