From b2c234b51d43a6b96d8c30a394b4da70d6397895 Mon Sep 17 00:00:00 2001
From: pietervdvn <pietervdvn@posteo.net>
Date: Sat, 2 Jan 2021 23:28:14 +0100
Subject: [PATCH] More refactoring, fix loading of personal theme

---
 Logic/InstalledThemes.ts  | 29 ++++++++++++++---------------
 State.ts                  |  1 -
 UI/PersonalLayersPanel.ts | 29 +++++++++++++----------------
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/Logic/InstalledThemes.ts b/Logic/InstalledThemes.ts
index 373636c..704a413 100644
--- a/Logic/InstalledThemes.ts
+++ b/Logic/InstalledThemes.ts
@@ -4,18 +4,9 @@ import {UIEventSource} from "./UIEventSource";
 import {OsmConnection} from "./Osm/OsmConnection";
 
 export default class InstalledThemes {
-    
-    private static DeleteInvalid(osmConnection: OsmConnection, invalidThemes: any[]){
-       // for (const invalid of invalidThemes) {
-       //     console.error("Attempting to remove ", invalid)
-       //     osmConnection.GetLongPreference(
-       //         "installed-theme-" + invalid
-       //     ).setData(null);
-       // }
-    }
-    
-    static InstalledThemes(osmConnection: OsmConnection) : UIEventSource<{ layout: LayoutConfig; definition: string }[]>{
-       return osmConnection.preferencesHandler.preferences.map<{ layout: LayoutConfig, definition: string }[]>(allPreferences => {
+
+    static InstalledThemes(osmConnection: OsmConnection): UIEventSource<{ layout: LayoutConfig; definition: string }[]> {
+        return osmConnection.preferencesHandler.preferences.map<{ layout: LayoutConfig, definition: string }[]>(allPreferences => {
             const installedThemes: { layout: LayoutConfig, definition: string }[] = [];
             if (allPreferences === undefined) {
                 console.log("All prefs is undefined");
@@ -31,8 +22,7 @@ export default class InstalledThemes {
                         continue;
                     }
                     try {
-                        var json = atob(customLayout.data);
-                        console.log("Found a theme:",json);
+                        const json = atob(customLayout.data);
                         const layout = new LayoutConfig(
                             JSON.parse(json));
                         installedThemes.push({
@@ -53,5 +43,14 @@ export default class InstalledThemes {
         });
 
     }
-    
+
+    private static DeleteInvalid(osmConnection: OsmConnection, invalidThemes: any[]) {
+        for (const invalid of invalidThemes) {
+            console.error("Attempting to remove ", invalid)
+            osmConnection.GetLongPreference(
+                "installed-theme-" + invalid
+            ).setData(null);
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/State.ts b/State.ts
index 65b3d76..61f3480 100644
--- a/State.ts
+++ b/State.ts
@@ -152,7 +152,6 @@ export default class State {
             this.layoutToUse.data.defaultBackgroundId ?? AvailableBaseLayers.osmCarto.id,
             "The id of the background layer to start with")
             .map((selectedId: string) => {
-                console.log("SELECTED ID", selectedId)
                 const available = self.availableBackgroundLayers.data;
                 for (const layer of available) {
                     if (layer.id === selectedId) {
diff --git a/UI/PersonalLayersPanel.ts b/UI/PersonalLayersPanel.ts
index bbb0fb1..9cdac9a 100644
--- a/UI/PersonalLayersPanel.ts
+++ b/UI/PersonalLayersPanel.ts
@@ -1,16 +1,15 @@
-import {UIElement} from "../UI/UIElement";
+import {UIElement} from "./UIElement";
 import State from "../State";
 import Translations from "../UI/i18n/Translations";
-import {UIEventSource} from "./UIEventSource";
 import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
 import Combine from "../UI/Base/Combine";
 import CheckBox from "../UI/Input/CheckBox";
 import * as personal from "../assets/themes/personalLayout/personalLayout.json";
-import {SubtleButton} from "../UI/Base/SubtleButton";
-import {FixedUiElement} from "../UI/Base/FixedUiElement";
-import {Img} from "../UI/Img";
+import {SubtleButton} from "./Base/SubtleButton";
+import {FixedUiElement} from "./Base/FixedUiElement";
 import Svg from "../Svg";
 import LayoutConfig from "../Customizations/JSON/LayoutConfig";
+import {UIEventSource} from "../Logic/UIEventSource";
 
 export class PersonalLayersPanel extends UIElement {
     private checkboxes: UIElement[] = [];
@@ -22,7 +21,7 @@ export class PersonalLayersPanel extends UIElement {
         this.UpdateView([]);
         const self = this;
         State.state.installedThemes.addCallback(extraThemes => {
-            self.UpdateView(extraThemes.map(layout => layout.layout.layoutConfig));
+            self.UpdateView(extraThemes.map(layout => layout.layout));
             self.Update();
         })
     }
@@ -56,12 +55,12 @@ export class PersonalLayersPanel extends UIElement {
                 if (typeof layer === "string") {
                     continue;
                 }
-                let icon = layer.icon ?? Img.AsData(Svg.checkmark);
-                let iconUnset = layer.icon ?? "";
-                if (layer.icon !== undefined && typeof (layer.icon) !== "string") {
-                    icon = layer.icon.GetRenderValue({"id": "node/-123456"}).txt ?? Img.AsData(Svg.checkmark)
-                    iconUnset = icon;
-                }
+                let icon :UIElement = layer.GenerateLeafletStyle(new UIEventSource<any>({id:"node/-1"}), false).icon.html
+                    ?? Svg.checkmark_svg();
+                let iconUnset =new FixedUiElement(icon.Render());
+                icon.SetClass("single-layer-selection-toggle")
+                iconUnset.SetClass("single-layer-selection-toggle")
+
 
                 let name = layer.name ?? layer.id;
                 if (name === undefined) {
@@ -74,15 +73,13 @@ export class PersonalLayersPanel extends UIElement {
                     layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
                 ])
                 
-                const iconImage = `<img src="${icon}">`;
-                const iconUnsetImage = `<img src="${iconUnset}">`
                 
                 const cb = new CheckBox(
                     new SubtleButton(
-                        new FixedUiElement(iconImage).SetStyle(""), 
+                        icon, 
                         content),
                     new SubtleButton(
-                        new FixedUiElement(iconUnsetImage).SetStyle("opacity:0.1;"),
+                        iconUnset.SetStyle("opacity:0.1"),
                         new Combine(["<del>",
                             content,
                             "</del>"