Fixed the personal layer

Customizations/JSON/LayerConfig.ts

@@ -12,7 +12,6 @@ import Combine from "../../UI/Base/Combine";
 import {VariableUiElement} from "../../UI/Base/VariableUIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import {FixedUiElement} from "../../UI/Base/FixedUiElement";
-import {SubstitutedTranslation} from "../../UI/SubstitutedTranslation";
 import SourceConfig from "./SourceConfig";
 import {TagsFilter} from "../../Logic/Tags/TagsFilter";
 import {Tag} from "../../Logic/Tags/Tag";
@@ -290,7 +289,7 @@ export default class LayerConfig {
 
     }
 
-    public GenerateLeafletStyle(tags: UIEventSource<any>, clickable: boolean):
+    public GenerateLeafletStyle(tags: UIEventSource<any>, clickable: boolean, widthHeight= "100%"):
         {
             icon:
                 {

Logic/UIEventSource.ts

@@ -92,9 +92,16 @@ export class UIEventSource<T> {
         }
     }
 
-    public map<J>(f: ((T) => J),
+    /**
+     * Monoidal map:
+     * Given a function 'f', will construct a new UIEventSource where the contents will always be "f(this.data)'
+     * @param f: The transforming function
+     * @param extraSources: also trigger the update if one of these sources change
+     * @param g: a 'backfunction to let the sync run in two directions. (data of the new UIEVEntSource, currentData) => newData
+     */
+    public map<J>(f: ((t: T) => J),
                   extraSources: UIEventSource<any>[] = [],
-                  g: ((J) => T) = undefined): UIEventSource<J> {
+                  g: ((j:J, t:T) => T) = undefined): UIEventSource<J> {
         const self = this;
 
         const newSource = new UIEventSource<J>(
@@ -113,7 +120,7 @@ export class UIEventSource<T> {
 
         if (g !== undefined) {
             newSource.addCallback((latest) => {
-                self.setData(g(latest));
+                self.setData(g(latest, self.data));
             })
         }
 

UI/BigComponents/PersonalLayersPanel.ts

@@ -1,6 +1,3 @@
-import {UIEventSource} from "../../Logic/UIEventSource";
-import {UIElement} from "../UIElement";
-import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
 import {AllKnownLayouts} from "../../Customizations/AllKnownLayouts";
 import Svg from "../../Svg";
 import State from "../../State";
@@ -8,130 +5,119 @@ import Combine from "../Base/Combine";
 import Toggle from "../Input/Toggle";
 import {SubtleButton} from "../Base/SubtleButton";
 import Translations from "../i18n/Translations";
-import * as personal from "../../assets/themes/personalLayout/personalLayout.json"
-import Locale from "../i18n/Locale";
 import BaseUIElement from "../BaseUIElement";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import LayerConfig from "../../Customizations/JSON/LayerConfig";
+import Img from "../Base/Img";
+import {UIEventSource} from "../../Logic/UIEventSource";
 
-export default class PersonalLayersPanel extends UIElement {
+export default class PersonalLayersPanel extends VariableUiElement {
-    private checkboxes: BaseUIElement[] = [];
 
     constructor() {
-        super(State.state.favouriteLayers);
+        super(
-        this.ListenTo(State.state.osmConnection.userDetails);
+            State.state.installedThemes.map(installedThemes => {
-        this.ListenTo(Locale.language);
+                const t = Translations.t.favourite;
-        this.UpdateView([]);
+
-        const self = this;
+                // Lets get all the layers
-        State.state.installedThemes.addCallback(extraThemes => {
+                const allThemes = AllKnownLayouts.layoutsList.concat(installedThemes.map(layout => layout.layout))
-            self.UpdateView(extraThemes.map(layout => layout.layout));
+                    .filter(theme => !theme.hideFromOverview)
-        })
+
+                const allLayers = []
+                {
+                    const seenLayers = new Set<string>()
+                    for (const layers of allThemes.map(theme => theme.layers)) {
+                        for (const layer of layers) {
+                            if (seenLayers.has(layer.id)) {
+                                continue
+                            }
+                            seenLayers.add(layer.id)
+                            allLayers.push(layer)
+                        }
+                    }
                 }
 
+                // Time to create a panel based on them!
+                const panel: BaseUIElement = new Combine(allLayers.map(PersonalLayersPanel.CreateLayerToggle));
 
-    private UpdateView(extraThemes: LayoutConfig[]) {
-        this.checkboxes = [];
-        const favs = State.state.favouriteLayers.data ?? [];
-        const controls = new Map<string, UIEventSource<boolean>>();
-        const allLayouts = AllKnownLayouts.layoutsList.concat(extraThemes);
-        for (const layout of allLayouts) {
-            if (layout.id === personal.id) {
-                continue;
-            }
 
-            if(layout.hideFromOverview){
+                return new Toggle(
-                continue;
-            }
-
-            const header =
                     new Combine([
-                    `<img style="max-width: 3em;max-height: 3em; float: left; padding: 0.1em; margin-right: 0.3em;" src='${layout.icon}'>`,
+                        t.panelIntro.Clone(),
-                    "<b>",
+                        panel
-                    layout.title,
+                    ]).SetClass("flex flex-col"),
-                    "</b><br/>",
+                    new SubtleButton(
-                    layout.shortDescription ?? ""
+                        Svg.osm_logo_ui(),
-                ]).SetClass("block p1 overflow-auto rounded")
+                        t.loginNeeded.Clone().SetClass("text-center")
-                    .SetStyle("background: #eee;")
+                    ).onClick(() => State.state.osmConnection.AttemptLogin()),
-            this.checkboxes.push(header);
+                    State.state.osmConnection.isLoggedIn
-
+                )
-            for (const layer of layout.layers) {
+            })
-                if(layer === undefined){
+        )
-                    console.warn("Undefined layer for ",layout.id)
-                    continue;
     }
-                if (typeof layer === "string") {
-                    continue;
-                }
-                let icon :BaseUIElement = layer.GenerateLeafletStyle(new UIEventSource<any>({id:"node/-1"}), false).icon.html
-                    ?? Svg.checkmark_svg();
-                let iconUnset =new Combine([icon]);
-                icon.SetClass("single-layer-selection-toggle")
-                iconUnset.SetClass("single-layer-selection-toggle")
 
+    /***
+     * Creates a toggle for the given layer, which'll update State.state.favouriteLayers right away
+     * @param layer
+     * @constructor
+     * @private
+     */
+    private static CreateLayerToggle(layer: LayerConfig): Toggle {
+        const iconUrl = layer.icon.GetRenderValue({id: "node/-1"}).txt
+        let icon :BaseUIElement =new Combine([ layer.GenerateLeafletStyle(
+            new UIEventSource<any>({id: "node/-1"}),
+            false,
+            "2em"
+        ).icon.html]).SetClass("relative")
+        let iconUnset =new Combine([ layer.GenerateLeafletStyle(
+            new UIEventSource<any>({id: "node/-1"}),
+            false,
+            "2em"
+        ).icon.html]).SetClass("relative")
 
-                let name = layer.name ?? layer.id;
+        iconUnset.SetStyle("opacity:0.1")
+
+        let name = layer.name ;
         if (name === undefined) {
-                    continue;
+            return undefined;
         }
         const content = new Combine([
-                    "<b>", 
+            Translations.WT(name).Clone().SetClass("font-bold"),
-                    name, 
+            Translations.WT(layer.description)?.Clone()
-                    "</b> ",
+        ]).SetClass("flex flex-col")
-                    layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
-                ])
 
+        const contentUnselected = new Combine([
+            Translations.WT(name).Clone().SetClass("font-bold"),
+            Translations.WT(layer.description)?.Clone()
+        ]).SetClass("flex flex-col line-through")
 
-                const cb = new Toggle(
+        return new Toggle(
             new SubtleButton(
                 icon,
                 content ),
             new SubtleButton(
-                        iconUnset.SetStyle("opacity:0.1"),
+                iconUnset,
-                        new Combine(["<del>",
+                contentUnselected
-                            content,
+            ),
-                            "</del>"
+            State.state.favouriteLayers.map(favLayers => {
-                        ])),
+                return favLayers.indexOf(layer.id) >= 0
-                    controls[layer.id] ?? (favs.indexOf(layer.id) >= 0)
+            }, [], (selected, current) => {
-                ).ToggleOnClick();
+                if (!selected && current.indexOf(layer.id) <= 0) {
-                cb.SetClass("custom-layer-checkbox");
+                    // Not selected and not contained: nothing to change: we return current as is
-                controls[layer.id] = cb.isEnabled;
+                    return current;
-
-                cb.isEnabled.addCallback((isEnabled) => {
-                    const favs = State.state.favouriteLayers;
-                    if (isEnabled) {
-                        if(favs.data.indexOf(layer.id)>= 0){
-                            return; // Already added
                 }
-                        favs.data.push(layer.id);
+                if (selected && current.indexOf(layer.id) >= 0) {
+                    // Selected and contained: this is fine!
+                    return current;
+                }
+                const clone = [...current]
+                if (selected) {
+                    clone.push(layer.id)
                 } else {
-                        favs.data.splice(favs.data.indexOf(layer.id), 1);
+                    clone.splice(clone.indexOf(layer.id), 1)
                 }
-                    favs.ping();
+                return clone
             })
-
+        ).ToggleOnClick();
-                this.checkboxes.push(cb);
-
-            }
-
-        }
-
-        State.state.favouriteLayers.addCallback((layers) => {
-            for (const layerId of layers) {
-                controls[layerId]?.setData(true);
-            }
-        });
-
-    }
-
-    InnerRender(): BaseUIElement {
-        const t = Translations.t.favourite;
-        return new Toggle(
-            new Combine([
-                t.panelIntro,
-                ...this.checkboxes
-            ]),
-            t.loginNeeded,
-            State.state.osmConnection.isLoggedIn
-            
-        )
     }