Add presets to custom theme generator, fix simpleAddUI

Logic/UIEventSource.ts

@@ -8,11 +8,16 @@ export class UIEventSource<T>{
     }
 
 
-    public addCallback(callback: ((latestData : T) => void)) : UIEventSource<T>{
+    public addCallback(callback: ((latestData: T) => void)): UIEventSource<T> {
         this._callbacks.push(callback);
         return this;
     }
 
+    public addCallbackAndRun(callback: ((latestData: T) => void)): UIEventSource<T> {
+        callback(this.data);
+        return this.addCallback(callback);
+    }
+
     public setData(t: T): UIEventSource<T> {
         if (this.data === t) {
             return;
@@ -68,9 +73,7 @@ export class UIEventSource<T>{
             })
         }
         
-
         return newSource;
-
     }
 
     

State.ts

@@ -238,12 +238,9 @@ export class State {
         }).ping()
 
         this.layoutToUse.map((layoutToUse) => {
-                if (layoutToUse === undefined) {
-                    return "MapComplete";
-                }
-                return Translations.W(layoutToUse.title).InnerRender()
+                return Translations.WT(layoutToUse?.title)?.txt ?? "MapComplete"
             }, [Locale.language]
-        ).addCallback((title) => {
+        ).addCallbackAndRun((title) => {
             document.title = title
         });
 

UI/CustomGenerator/AllLayersPanel.ts

@@ -44,7 +44,7 @@ export default class AllLayersPanel extends UIElement {
                 "<h2>Layer editor</h2>",
                 "In this tab page, you can add and edit the layers of the theme. Click the layers above or add a new layer to get started.",
                 new SubtleButton(
-                    "./assets/add.svg",
+                    "./assets/layersAdd.svg",
                     "Add a new layer"
                 ).onClick(() => {
                     self._config.data.layers.push(GenerateEmpty.createEmptyLayer())

UI/CustomGenerator/LayerPanel.ts

@@ -15,6 +15,7 @@ import {DropDown} from "../Input/DropDown";
 import {TagRenderingConfigJson} from "../../Customizations/JSON/TagRenderingConfigJson";
 import {MultiInput} from "../Input/MultiInput";
 import {LayerConfigJson} from "../../Customizations/JSON/LayerConfigJson";
+import PresetInputPanel from "./PresetInputPanel";
 
 /**
  * Shows the configuration for a single layer
@@ -32,6 +33,7 @@ export default class LayerPanel extends UIElement {
     public readonly selectedTagRendering: UIEventSource<TagRenderingPanel>
         = new UIEventSource<TagRenderingPanel>(undefined);
     private tagRenderings: UIElement;
+    private presetsPanel: UIElement;
 
     constructor(config: UIEventSource<LayoutConfigJson>,
                 languages: UIEventSource<string[]>,
@@ -122,6 +124,12 @@ export default class LayerPanel extends UIElement {
             }
         )
 
+        const presetPanel = new MultiInput("Add a preset",
+            () => ({tags: [], title: {}}),
+            () => new PresetInputPanel(currentlySelected, languages));
+        this.presetsPanel = presetPanel;
+        new SingleSetting(config, presetPanel, ["layers", index, "presets"], "Presets", "")
+
         function loadTagRenderings() {
             const values = (config.data.layers[index] as LayerConfigJson).tagRenderings;
             const renderings: TagRenderingConfigJson[] = [];
@@ -205,6 +213,9 @@ export default class LayerPanel extends UIElement {
             "<h2>Popup contents</h2>",
             this.titleRendering,
             this.tagRenderings,
+            "<h2>Presets</h2>",
+            "Does this theme support adding a new point?<br/>If this should be the case, add a preset. Make sure that the preset tags do match the overpass-tags, otherwise it might seem like the newly added points dissapear ",
+            this.presetsPanel,
             "<h2>Map rendering options</h2>",
             this.mapRendering,
             "<h2>Layer delete</h2>",

UI/CustomGenerator/LayerPanelWithPreview.ts

@@ -5,10 +5,6 @@ import LayerPanel from "./LayerPanel";
 import HelpText from "../../Customizations/HelpText";
 import {MultiTagInput} from "../Input/MultiTagInput";
 import {FromJSON} from "../../Customizations/JSON/FromJSON";
-import {VariableUiElement} from "../Base/VariableUIElement";
-import TagRenderingPanel from "./TagRenderingPanel";
-import {TagRenderingConfigJson} from "../../Customizations/JSON/TagRenderingConfigJson";
-import {FixedUiElement} from "../Base/FixedUiElement";
 import Combine from "../Base/Combine";
 import PageSplit from "../Base/PageSplit";
 import TagRenderingPreview from "./TagRenderingPreview";

UI/CustomGenerator/PresetInputPanel.ts

@@ -0,0 +1,58 @@
+import {InputElement} from "../Input/InputElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import {MultiTagInput} from "../Input/MultiTagInput";
+import SettingsTable from "./SettingsTable";
+import SingleSetting from "./SingleSetting";
+import MultiLingualTextFields from "../Input/MultiLingualTextFields";
+import Combine from "../Base/Combine";
+
+export default class PresetInputPanel extends InputElement<{
+    title: string | any,
+    tags: string[],
+    description?: string | any
+}> {
+    private readonly _value: UIEventSource<{
+        title: string | any,
+        tags: string[],
+        description?: string | any
+    }>;
+    private readonly panel: UIElement;
+
+
+    constructor(currentlySelected: UIEventSource<SingleSetting<any>>, languages: UIEventSource<string[]>) {
+        super();
+        this._value = new UIEventSource({tags: [], title: {}});
+
+
+        const self = this;
+        function s(input: InputElement<any>, path: string, name: string, description: string){
+            return new SingleSetting(self._value, input, path, name, description)
+        }
+        this.panel = new SettingsTable([
+            s(new MultiTagInput(), "tags","Preset tags","These tags will be applied on the newly created point"),
+            s(new MultiLingualTextFields(languages), "title","Preset title","This little text is shown in bold on the 'create new point'-button" ),
+            s(new MultiLingualTextFields(languages), "description","Description", "This text is shown in the button as description when creating a new point")
+        ], currentlySelected);
+    }
+
+
+    InnerRender(): string {
+        return new Combine([this.panel]).Render();
+    }
+
+    GetValue(): UIEventSource<{
+        title: string | any,
+        tags: string[],
+        description?: string | any
+    }> {
+        return this._value;
+    }
+
+    IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+
+    IsValid(t: any): boolean {
+        return false;
+    }
+
+}

UI/SimpleAddUI.ts

@@ -93,6 +93,7 @@ export class SimpleAddUI extends UIElement {
                                 description: preset.description,
                                 icon: icon
                             });
+                            self.Update();
                         }
                     )
 
@@ -127,11 +128,6 @@ export class SimpleAddUI extends UIElement {
 
         if (this._confirmPreset.data !== undefined) {
 
-            if(userDetails.data.dryRun){
-              //  this.CreatePoint(this._confirmPreset.data.tags, this._confirmPreset.data.layerToAddTo)();
-              //  return "";
-            }
-
             let tagInfo = "";
             const csCount = State.state.osmConnection.userDetails.data.csCount;
             if (csCount > State.userJourney.tagsVisibleAt) {

Utils.ts

@@ -56,6 +56,9 @@ export class Utils {
     }
 
     public static EllipsesAfter(str : string, l : number = 100){
+        if(str === undefined){
+            return undefined;
+        }
         if(str.length <= l){
             return str;
         }

index.ts

@@ -170,6 +170,9 @@ function updateFavs() {
 
         for (const layouts of State.state.installedThemes.data) {
             for (const layer of layouts.layout.layers) {
+                if (typeof layer === "string") {
+                    continue;
+                }
                 if (layer.id === fav) {
                     layoutToUse.layers.push(layer);
                 }
@@ -200,7 +203,9 @@ State.state.selectedElement.addCallback((feature) => {
     const data = feature.feature.properties;
     // Which is the applicable set?
     for (const layer of layoutToUse.layers) {
-
+        if (typeof layer === "string") {
+            continue;
+        }
         const applicable = layer.overpassFilter.matches(TagUtils.proprtiesToKV(data));
         if (applicable) {
             // This layer is the layer that gives the questions

test.ts

@@ -1,19 +1,4 @@
-import TagRenderingPanel from "./UI/CustomGenerator/TagRenderingPanel";
-import {UIEventSource} from "./Logic/UIEventSource";
-import {TextField} from "./UI/Input/TextField";
-import {VariableUiElement} from "./UI/Base/VariableUIElement";
-import SettingsTable from "./UI/CustomGenerator/SettingsTable";
-import SingleSetting from "./UI/CustomGenerator/SingleSetting";
-import {MultiInput} from "./UI/Input/MultiInput";
+import BikeCafes from "./Customizations/Layers/BikeCafes";
 
 
-const config = new UIEventSource({})
-const languages = new UIEventSource(["en","nl"]);
-new MultiInput(
-    () => "Add a tag rendering",
-    () => new TagRenderingPanel(
-        
-    )
-    
-    
-)
+console.log(JSON.stringify(new BikeCafes()))