Tweak new note marker, formatting

Logic/Tags/TagUtils.ts

@@ -192,7 +192,6 @@ export class TagUtils {
                     }
 
                     const f = (value: string | undefined) => {
-                        console.log("Comparing ",value,operator,val)
                         if(value === undefined){
                             return false;
                         }

UI/DefaultGUI.ts

@@ -26,6 +26,7 @@ import * as home_location_json from "../assets/layers/home_location/home_locatio
 import NewNoteUi from "./Popup/NewNoteUi";
 import Combine from "./Base/Combine";
 import AddNewMarker from "./BigComponents/AddNewMarker";
+import FilteredLayer from "../Models/FilteredLayer";
 
 
 /**
@@ -48,9 +49,9 @@ export default class DefaultGUI {
 
         this.SetupUIElements();
         this.SetupMap()
-        
-        
-        if(state.layoutToUse.customCss !== undefined && window.location.pathname.indexOf("index") >= 0){
+
+
+        if (state.layoutToUse.customCss !== undefined && window.location.pathname.indexOf("index") >= 0) {
             Utils.LoadCustomCss(state.layoutToUse.customCss)
         }
     }
@@ -58,55 +59,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)
+        const noteLayer: FilteredLayer = state.filteredLayers.data.filter(l => l.layerDef.id === "note")[0]
+        let addNewNoteDialog: (isShown: UIEventSource<boolean>) => BaseUIElement = undefined;
+        const t = Translations.t.notes
+        if (noteLayer !== undefined) {
+            addNewNoteDialog = (isShown) => new NewNoteUi(noteLayer, isShown, state)
         }
-        
-        function setup() {
 
-            console.warn("Settuping ")
-            if(!hasPresets && addNewNoteDialog === undefined){
+        function setup() {
+            if (!hasPresets && addNewNoteDialog === undefined) {
                 return; // nothing to do
             }
-            
-            
             const newPointDialogIsShown = new UIEventSource<boolean>(false);
             const addNewPoint = new ScrollableFullScreen(
                 () => hasPresets ? Translations.t.general.add.title : Translations.t.notes.createNoteTitle,
                 () => {
-                    let addNew = undefined; 
-                    if(hasPresets){
+                    let addNew = undefined;
+                    if (hasPresets) {
                         addNew = new SimpleAddUI(newPointDialogIsShown, filterViewIsOpened, state);
                     }
                     let addNote = undefined;
-                    if(noteLayer !== undefined){
-                        addNote = addNewNoteDialog()
+                    if (noteLayer !== undefined) {
+                        addNote = addNewNoteDialog(newPointDialogIsShown)
                     }
                     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);
                 }
             });
+            
+            let noteMarker = undefined;
+            if(!hasPresets && addNewNoteDialog !== undefined){
+                noteMarker = new Combine(
+                    [Svg.note_svg().SetClass("absolute bottom-0").SetStyle("height: 40px"), 
+                        Svg.addSmall_svg().SetClass("absolute w-6 animate-pulse")
+                            .SetStyle("right: 10px; bottom: -8px;")
+                    ])
+                    .SetClass("block relative h-full")
+                    .SetStyle("left: calc( 50% - 15px )") // This is a bit hacky, yes I know!
+            }
 
             new StrayClickHandler(
                 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")
+                hasPresets ? new AddNewMarker(state.filteredLayers) : noteMarker
             );
         }
 
-        if(noteLayer !== undefined){
+        if (noteLayer !== undefined) {
             setup()
-        }else{
+        } else {
             state.featureSwitchAddNew.addCallbackAndRunD(addNewAllowed => {
                 if (addNewAllowed) {
                     setup()

UI/Popup/NewNoteUi.ts

@@ -10,14 +10,20 @@ import {LocalStorageSource} from "../../Logic/Web/LocalStorageSource";
 import Toggle from "../Input/Toggle";
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
 import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline";
+import FilteredLayer from "../../Models/FilteredLayer";
 
 export default class NewNoteUi extends Toggle {
 
-    constructor(lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
-                state: { osmConnection: OsmConnection, layoutToUse: LayoutConfig, featurePipeline: FeaturePipeline }) {
+    constructor(noteLayer: FilteredLayer,
+                isShown: UIEventSource<boolean>,
+                state: {
+                    LastClickLocation: UIEventSource<{ lat: number, lon: number }>,
+                    osmConnection: OsmConnection, layoutToUse: LayoutConfig, featurePipeline: FeaturePipeline
+                }) {
 
         const t = Translations.t.notes;
         const isCreated = new UIEventSource(false);
+        state.LastClickLocation.addCallbackAndRun(_ => isCreated.setData(false)) // Reset 'isCreated' on every click
         const text = ValidatedTextField.InputForType("text", {
             value: LocalStorageSource.Get("note-text")
         })
@@ -30,7 +36,7 @@ export default class NewNoteUi extends Toggle {
                 return;
             }
             txt += "\n\n #MapComplete #" + state?.layoutToUse?.id
-            const loc = lastClickLocation.data;
+            const loc = state.LastClickLocation.data;
             state?.osmConnection?.openNote(loc.lat, loc.lon, txt)
             text.GetValue().setData("")
             isCreated.setData(true)
@@ -43,7 +49,7 @@ export default class NewNoteUi extends Toggle {
         ]).SetClass("flex flex-col border-2 border-black rounded-xl p-4");
 
 
-        super(
+        const newNoteUi = new Toggle(
             new Toggle(t.isCreated.SetClass("thanks"),
                 createNoteDialog,
                 isCreated
@@ -51,6 +57,35 @@ export default class NewNoteUi extends Toggle {
             undefined,
             new UIEventSource<boolean>(true)
         )
+
+        super(
+            new Toggle(
+               
+                new Combine(
+                    [
+                        t.noteLayerHasFilters.SetClass("alert"),
+                        new SubtleButton(Svg.filter_svg(), t.disableAllNoteFilters).onClick(() => {
+                            const filters = noteLayer.appliedFilters.data;
+                            for (const key of Array.from(filters.keys())) {
+                                filters.set(key, undefined)
+                            }
+                            noteLayer.appliedFilters.ping()
+                            isShown.setData(false);
+                        })
+                    ]
+                ).SetClass("flex flex-col"),
+                newNoteUi,
+                noteLayer.appliedFilters.map(filters => Array.from(filters.values()).some(v => v !== undefined))
+            ),
+            new Combine([
+                t.noteLayerNotEnabled.SetClass("alert"),
+                new SubtleButton(Svg.layers_svg(), t.noteLayerDoEnable).onClick(() => {
+                    noteLayer.isDisplayed.setData(true);
+                    isShown.setData(false);
+                })
+            ]).SetClass("flex flex-col"),
+            noteLayer.isDisplayed
+        );
     }
 
 

langs/en.json

@@ -448,6 +448,10 @@
     "createNoteIntro": "Is something wrong or missing on the map? Create a note here. These will be checked by volunteers",
     "warnAnonymous": "You are not logged in. We won't be able to contact you to resolve your issue.",
     "notesLayerMustBeEnabled": "The 'notes'-layer is disabled. Enable it to add a note",
-    "isCreated": "Your note has been created!"
+    "isCreated": "Your note has been created!",
+    "noteLayerNotEnabled": "The layer showing notes is not enabled. This layer must be enabled to add a new note",
+    "noteLayerHasFilters": "Some notes might be hidden by a filter",
+    "disableAllNoteFilters": "Disable all filters",
+    "noteLayerDoEnable": "Enable the layer showing notes"
   }
 }