Simplified update process

Customizations/Layers/Bookcases.ts

@@ -5,6 +5,7 @@ import {QuestionDefinition} from "../../Logic/Question";
 import {TagRenderingOptions} from "../TagRendering";
 import {NameInline} from "../Questions/NameInline";
 import {NameQuestion} from "../Questions/NameQuestion";
+import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
 
 export class Bookcases extends LayerDefinition {
 
@@ -19,7 +20,7 @@ export class Bookcases extends LayerDefinition {
 
         this.title = new NameInline("ruilboekenkastje");
         this.elementsToShow = [
-
+            new ImageCarouselWithUploadConstructor(),
             new TagRenderingOptions({
                 question: "Heeft dit boekenruilkastje een naam?",
                 freeform: {

UI/Base/VerticalCombine.ts

@@ -25,16 +25,4 @@ export class VerticalCombine extends UIElement {
         }
         return "<div class='"+this._className+"'>" + html + "</div>";
     }
-    InnerUpdate(htmlElement: HTMLElement) {
-        for (const element of this._elements){
-            element.Update();
-        }
-    }
-    
-    Activate() {
-        for (const element of this._elements){
-            element.Activate();
-        }
-    }
-
 }

UI/FeatureInfoBox.ts

@@ -115,18 +115,4 @@ export class FeatureInfoBox extends UIElement {
             "</div>";
     }
     
-    Activate() {
-        super.Activate();
-        for (const infobox of this._infoboxes) {
-            infobox.Activate();
-        }
-    }
-
-    Update() {
-        super.Update();
-        this._title.Update();
-        for (const infobox of this._infoboxes) {
-            infobox.Update();
-        }
-    }
 }

UI/QuestionPicker.ts

@@ -43,10 +43,5 @@ export class QuestionPicker extends UIElement {
             highestQ.CreateHtml(this.source).Render() +
             "</div>";
     }
-    InnerUpdate(htmlElement: HTMLElement) {
-    }
-    
-    Activate() {
-    }
 
 }

UI/UIElement.ts

@@ -1,4 +1,5 @@
 import {UIEventSource} from "./UIEventSource";
+import instantiate = WebAssembly.instantiate;
 
 export abstract class UIElement {
 
@@ -58,20 +59,22 @@ export abstract class UIElement {
             }
             element.style.pointerEvents = "all";
             element.style.cursor = "pointer";
-           /*
-            const childs = element.children;
-            for (let i = 0; i < childs.length; i++) {
-                const ch = childs[i];
-                console.log(ch);
-                ch.style.cursor = "pointer";
-                ch.onclick = () => {
-                    self._onClick();
-                }
-                ch.style.pointerEvents = "all";
-            }*/
         }
 
         this.InnerUpdate(element);
+
+        for (const i in this) {
+            const child = this[i];
+            if (child instanceof UIElement) {
+                child.Update();
+            } else if (child instanceof Array) {
+                for (const ch of child) {
+                    if (ch instanceof UIElement) {
+                        ch.Update();
+                    }
+                }
+            }
+        }
     }
     
     HideOnEmpty(hide : boolean){
@@ -99,7 +102,21 @@ export abstract class UIElement {
     }
 
     protected abstract InnerRender(): string;
-    public Activate(): void {};
+
+    public Activate(): void {
+        for (const i in this) {
+            const child = this[i];
+            if (child instanceof UIElement) {
+                child.Activate();
+            } else if (child instanceof Array) {
+                for (const ch of child) {
+                    if (ch instanceof UIElement) {
+                        ch.Activate();
+                    }
+                }
+            }
+        }
+    };
 
     public IsEmpty(): boolean {
         return this.InnerRender() === "";

UI/UserBadge.ts

@@ -4,6 +4,7 @@ import {UIEventSource} from "./UIEventSource";
 import {Basemap} from "../Logic/Basemap";
 import L from "leaflet";
 import {FixedUiElement} from "./Base/FixedUiElement";
+import {VariableUiElement} from "./Base/VariableUIElement";
 
 /**
  * Handles and updates the user badge
@@ -13,6 +14,7 @@ export class UserBadge extends UIElement {
     private _pendingChanges: UIElement;
     private _logout: UIElement;
     private _basemap: Basemap;
+    private _homeButton: UIElement;
 
 
     constructor(userDetails: UIEventSource<UserDetails>,
@@ -38,6 +40,21 @@ export class UserBadge extends UIElement {
             }
         });
 
+        this._homeButton = new VariableUiElement(
+            userDetails.map((userinfo) => {
+                if (userinfo.home) {
+                    return "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'> ";
+                }
+                return "";
+            })
+        ).onClick(() => {
+            const home = userDetails.data?.home;
+            if (home === undefined) {
+                return;
+            }
+            basemap.map.flyTo([home.lat, home.lon], 18);
+        });
+
     }
 
     protected InnerRender(): string {
@@ -66,9 +83,7 @@ export class UserBadge extends UIElement {
             dryrun = " <span class='alert'>TESTING</span>";
         }
 
-        let home = "";
         if (user.home !== undefined) {
-            home = "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'> ";
             const icon = L.icon({
                 iconUrl: 'assets/home.svg',
                 iconSize: [20, 20],
@@ -91,7 +106,7 @@ export class UserBadge extends UIElement {
             dryrun +
             "</p> " +
             "<p id='userstats'>" +
-            home +
+            this._homeButton.Render() +
             settings +
             messageSpan +
             "<span id='csCount'> " +
@@ -104,25 +119,5 @@ export class UserBadge extends UIElement {
             "</div>";
     }
 
-    InnerUpdate(htmlElement: HTMLElement) {
-        this._pendingChanges.Update();
-        var btn = document.getElementById("home");
-        if (btn) {
-            const self = this;
-            btn.onclick = function () {
-                const home = self._userDetails?.data?.home;
-                if (home === undefined) {
-                    return;
-                }
-                self._basemap.map.flyTo([home.lat, home.lon], 18);
-
-            }
-        }
-        this._logout.Update();
-    }
-    
-    Activate() {
-        this._pendingChanges.Activate();
-    }
 
 }