Add 'add new note' functionality, fix bug where 'test'-theme comes up when deleting images

UI/BigComponents/AddNewMarker.ts

@@ -27,6 +27,9 @@ export default class AddNewMarker extends Combine {
                     }
                 }
             }
+            if(icons.length === 0){
+                return undefined    
+            }
             if (icons.length === 1) {
                 return icons[0]
             }

UI/BigComponents/SimpleAddUI.ts

@@ -138,9 +138,6 @@ export default class SimpleAddUI extends Toggle {
             loginButton,
             state.osmConnection.isLoggedIn
         )
-
-
-        this.SetStyle("font-size:large");
     }
 
 

UI/DefaultGUI.ts

@@ -23,6 +23,9 @@ import Lazy from "./Base/Lazy";
 import {DefaultGuiState} from "./DefaultGuiState";
 import LayerConfig from "../Models/ThemeConfig/LayerConfig";
 import * as home_location_json from "../assets/layers/home_location/home_location.json";
+import NewNoteUi from "./Popup/NewNoteUi";
+import Combine from "./Base/Combine";
+import AddNewMarker from "./BigComponents/AddNewMarker";
 
 
 /**
@@ -54,45 +57,63 @@ export default class DefaultGUI {
 
     public setupClickDialogOnMap(filterViewIsOpened: UIEventSource<boolean>, state: FeaturePipelineState) {
 
+        const hasPresets = state.layoutToUse.layers.some(layer => layer.presets.length > 0);
+        const noteLayer=        state.filteredLayers.data.filter(l => l.layerDef.id === "note")[0]
+        let addNewNoteDialog : () => BaseUIElement = undefined;
+        if(noteLayer !== undefined){
+            addNewNoteDialog = () => new NewNoteUi(state.LastClickLocation, state)
+        }
+        
         function setup() {
-            let presetCount = 0;
-            for (const layer of state.layoutToUse.layers) {
-                for (const preset of layer.presets) {
-                    presetCount++;
-                }
-            }
-            if (presetCount == 0) {
-                return;
-            }
 
+            console.warn("Settuping ")
+            if(!hasPresets && addNewNoteDialog === undefined){
+                return; // nothing to do
+            }
+            
+            
             const newPointDialogIsShown = new UIEventSource<boolean>(false);
             const addNewPoint = new ScrollableFullScreen(
-                () => Translations.t.general.add.title.Clone(),
-                () => new SimpleAddUI(newPointDialogIsShown, filterViewIsOpened, state),
+                () => hasPresets ? Translations.t.general.add.title : Translations.t.notes.createNoteTitle,
+                () => {
+                    let addNew = undefined; 
+                    if(hasPresets){
+                        addNew = new SimpleAddUI(newPointDialogIsShown, filterViewIsOpened, state);
+                    }
+                    let addNote = undefined;
+                    if(noteLayer !== undefined){
+                        addNote = addNewNoteDialog()
+                    }
+                    return new Combine([addNew, addNote]).SetClass("flex flex-col font-lg text-lg")
+                },
                 "new",
                 newPointDialogIsShown
             );
+            
             addNewPoint.isShown.addCallback((isShown) => {
                 if (!isShown) {
+                    // Clear the 'last-click'-location when the dialog is closed - this causes the popup and the marker to be removed
                     state.LastClickLocation.setData(undefined);
                 }
             });
 
             new StrayClickHandler(
-                state.LastClickLocation,
-                state.selectedElement,
-                state.filteredLayers,
-                state.leafletMap,
-                addNewPoint
+                state,
+                addNewPoint,
+               hasPresets ? new AddNewMarker(state.filteredLayers) : new Combine([Svg.note_svg().SetStyle("height: 40px"), Svg.addSmall_svg().SetClass("absolute bottom-0 right-0 w-6 animate-pulse")]).SetClass("block relative")
             );
         }
 
-        state.featureSwitchAddNew.addCallbackAndRunD(addNewAllowed => {
-            if (addNewAllowed) {
-                setup()
-                return true;
-            }
-        })
+        if(noteLayer !== undefined){
+            setup()
+        }else{
+            state.featureSwitchAddNew.addCallbackAndRunD(addNewAllowed => {
+                if (addNewAllowed) {
+                    setup()
+                    return true;
+                }
+            })
+        }
 
     }
 

UI/Image/DeleteImage.ts

@@ -7,18 +7,19 @@ import {Tag} from "../../Logic/Tags/Tag";
 import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction";
 import {Changes} from "../../Logic/Osm/Changes";
 import {OsmConnection} from "../../Logic/Osm/OsmConnection";
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
 
 export default class DeleteImage extends Toggle {
 
-    constructor(key: string, tags: UIEventSource<any>, state: {changes?: Changes, osmConnection?: OsmConnection}) {
+    constructor(key: string, tags: UIEventSource<any>, state: {layoutToUse: LayoutConfig, changes?: Changes, osmConnection?: OsmConnection}) {
         const oldValue = tags.data[key]
         const isDeletedBadge = Translations.t.image.isDeleted.Clone()
             .SetClass("rounded-full p-1")
             .SetStyle("color:white;background:#ff8c8c")
             .onClick(async () => {
                 await state?.changes?.applyAction(new ChangeTagAction(tags.data.id, new Tag(key, oldValue), tags.data, {
-                    changeType: "answer",
-                    theme: "test"
+                    changeType: "delete-image",
+                    theme: state.layoutToUse.id
                 }))
             });
 

UI/Image/ImageCarousel.ts

@@ -8,12 +8,13 @@ import Toggle from "../Input/Toggle";
 import ImageProvider from "../../Logic/ImageProviders/ImageProvider";
 import {OsmConnection} from "../../Logic/Osm/OsmConnection";
 import {Changes} from "../../Logic/Osm/Changes";
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
 
 export class ImageCarousel extends Toggle {
 
-    constructor(images: UIEventSource<{ key: string, url: string, provider: ImageProvider }[]>,
+    constructor(images: UIEventSource<{ key: string, url: string, provider: ImageProvider}[]>,
                 tags: UIEventSource<any>,
-                state: {osmConnection?: OsmConnection, changes?: Changes}) {
+                state: {osmConnection?: OsmConnection, changes?: Changes, layoutToUse: LayoutConfig }) {
         const uiElements = images.map((imageURLS: { key: string, url: string, provider: ImageProvider }[]) => {
             const uiElements: BaseUIElement[] = [];
             for (const url of imageURLS) {

UI/Popup/NewNoteUi.ts

@@ -0,0 +1,57 @@
+import Combine from "../Base/Combine";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {OsmConnection} from "../../Logic/Osm/OsmConnection";
+import Translations from "../i18n/Translations";
+import Title from "../Base/Title";
+import ValidatedTextField from "../Input/ValidatedTextField";
+import {SubtleButton} from "../Base/SubtleButton";
+import Svg from "../../Svg";
+import {LocalStorageSource} from "../../Logic/Web/LocalStorageSource";
+import Toggle from "../Input/Toggle";
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
+import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline";
+
+export default class NewNoteUi extends Toggle {
+
+    constructor(lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
+                state: { osmConnection: OsmConnection, layoutToUse: LayoutConfig, featurePipeline: FeaturePipeline }) {
+
+        const t = Translations.t.notes;
+        const isCreated = new UIEventSource(false);
+        const text = ValidatedTextField.InputForType("text", {
+            value: LocalStorageSource.Get("note-text")
+        })
+        text.SetClass("border rounded-sm border-grey-500")
+
+        const postNote = new SubtleButton(Svg.addSmall_svg().SetClass("max-h-7"), t.createNote)
+        postNote.onClick(async () => {
+            let txt = text.GetValue().data
+            if (txt === undefined || txt === "") {
+                return;
+            }
+            txt += "\n\n #MapComplete #" + state?.layoutToUse?.id
+            const loc = lastClickLocation.data;
+            state?.osmConnection?.openNote(loc.lat, loc.lon, txt)
+            text.GetValue().setData("")
+            isCreated.setData(true)
+        })
+        const createNoteDialog = new Combine([
+            new Title(t.createNoteTitle),
+            t.createNoteIntro,
+            text,
+            new Combine([new Toggle(undefined, t.warnAnonymous, state?.osmConnection?.isLoggedIn).SetClass("alert"), postNote]).SetClass("flex justify-end items-center")
+        ]).SetClass("flex flex-col border-2 border-black rounded-xl p-4");
+
+
+        super(
+            new Toggle(t.isCreated.SetClass("thanks"),
+                createNoteDialog,
+                isCreated
+            ),
+            undefined,
+            new UIEventSource<boolean>(true)
+        )
+    }
+
+
+}