From a0d450407f8c67afbbfe1b92619d9048bcef3f4b Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sun, 15 Oct 2023 10:55:56 +0200
Subject: [PATCH] UX: add location picker to new not input element, fix #1665

---
 public/css/index-tailwind-output.css          | 24 +++--
 .../NewPointLocationInput.svelte              | 39 +++++---
 .../InputElement/Helpers/LocationInput.svelte |  4 +-
 src/UI/Popup/CreateNewNote.svelte             | 90 +++++++++++--------
 src/UI/SpecialVisualizations.ts               |  5 +-
 5 files changed, 103 insertions(+), 59 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 7c9f0be3e..0e6476c01 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -1100,14 +1100,22 @@ video {
   height: 12rem;
 }
 
-.h-40 {
-  height: 10rem;
+.h-56 {
+  height: 14rem;
+}
+
+.h-20 {
+  height: 5rem;
 }
 
 .h-10 {
   height: 2.5rem;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
 .h-80 {
   height: 20rem;
 }
@@ -1124,14 +1132,14 @@ video {
   max-height: 3rem;
 }
 
-.max-h-7 {
-  max-height: 1.75rem;
-}
-
 .max-h-24 {
   max-height: 6rem;
 }
 
+.max-h-7 {
+  max-height: 1.75rem;
+}
+
 .max-h-screen {
   max-height: 100vh;
 }
@@ -1753,6 +1761,10 @@ video {
   padding-right: 0.25rem;
 }
 
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
diff --git a/src/UI/BigComponents/NewPointLocationInput.svelte b/src/UI/BigComponents/NewPointLocationInput.svelte
index 5f6e228a8..7a0c3f555 100644
--- a/src/UI/BigComponents/NewPointLocationInput.svelte
+++ b/src/UI/BigComponents/NewPointLocationInput.svelte
@@ -29,16 +29,25 @@
    * The start coordinate
    */
   export let coordinate: { lon: number; lat: number }
-  export let snapToLayers: string[] | undefined
-  export let targetLayer: LayerConfig
-  export let maxSnapDistance: number = undefined
-
-  export let snappedTo: UIEventSource<string | undefined>
 
+  /**
+   * The center of the map at all times
+   * If undefined at the beginning, 'coordinate' will be used
+   */
   export let value: UIEventSource<{ lon: number; lat: number }>
   if (value.data === undefined) {
     value.setData(coordinate)
   }
+  if(coordinate === undefined){
+    coordinate = value.data
+  }
+  export let snapToLayers: string[] | undefined
+  export let targetLayer: LayerConfig | undefined
+  export let maxSnapDistance: number = undefined
+
+  export let snappedTo: UIEventSource<string | undefined>
+
+
 
   let preciseLocation: UIEventSource<{ lon: number; lat: number }> = new UIEventSource<{
     lon: number
@@ -66,12 +75,14 @@
     rasterLayer: UIEventSource.feedFrom(state.mapProperties.rasterLayer),
   }
 
-  const featuresForLayer = state.perLayer.get(targetLayer.id)
-  if (featuresForLayer) {
-    new ShowDataLayer(map, {
-      layer: targetLayer,
-      features: featuresForLayer,
-    })
+  if(targetLayer){
+    const featuresForLayer = state.perLayer.get(targetLayer.id)
+    if (featuresForLayer) {
+      new ShowDataLayer(map, {
+        layer: targetLayer,
+        features: featuresForLayer,
+      })
+    }
   }
 
   if (snapToLayers?.length > 0) {
@@ -114,4 +125,8 @@
   value={preciseLocation}
   initialCoordinate={coordinate}
   maxDistanceInMeters="50"
-/>
+>
+  <slot name="image" slot="image">
+    <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
+  </slot>
+</LocationInput>
diff --git a/src/UI/InputElement/Helpers/LocationInput.svelte b/src/UI/InputElement/Helpers/LocationInput.svelte
index 5ea911e5a..1f7d4a8be 100644
--- a/src/UI/InputElement/Helpers/LocationInput.svelte
+++ b/src/UI/InputElement/Helpers/LocationInput.svelte
@@ -89,7 +89,9 @@
   <div
     class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
   >
-    <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
+    <slot name="image">
+      <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
+    </slot>
   </div>
 
   <DragInvitation hideSignal={mla.location} />
diff --git a/src/UI/Popup/CreateNewNote.svelte b/src/UI/Popup/CreateNewNote.svelte
index 681e1ea78..8c6ccbe37 100644
--- a/src/UI/Popup/CreateNewNote.svelte
+++ b/src/UI/Popup/CreateNewNote.svelte
@@ -2,47 +2,50 @@
   /**
    * UIcomponent to create a new note at the given location
    */
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import { UIEventSource } from "../../Logic/UIEventSource"
-  import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"
-  import ValidatedInput from "../InputElement/ValidatedInput.svelte"
-  import SubtleButton from "../Base/SubtleButton.svelte"
-  import Tr from "../Base/Tr.svelte"
-  import Translations from "../i18n/Translations.js"
-  import type { Feature, Point } from "geojson"
-  import LoginToggle from "../Base/LoginToggle.svelte"
-  import FilteredLayer from "../../Models/FilteredLayer"
+  import type { SpecialVisualizationState } from "../SpecialVisualization";
+  import { UIEventSource } from "../../Logic/UIEventSource";
+  import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource";
+  import ValidatedInput from "../InputElement/ValidatedInput.svelte";
+  import SubtleButton from "../Base/SubtleButton.svelte";
+  import Tr from "../Base/Tr.svelte";
+  import Translations from "../i18n/Translations.js";
+  import type { Feature, Point } from "geojson";
+  import LoginToggle from "../Base/LoginToggle.svelte";
+  import FilteredLayer from "../../Models/FilteredLayer";
+  import NewPointLocationInput from "../BigComponents/NewPointLocationInput.svelte";
+  import ToSvelte from "../Base/ToSvelte.svelte";
+  import Svg from "../../Svg";
 
-  export let coordinate: { lon: number; lat: number }
-  export let state: SpecialVisualizationState
+  export let coordinate: UIEventSource<{ lon: number; lat: number }>;
+  export let state: SpecialVisualizationState;
 
-  let comment: UIEventSource<string> = LocalStorageSource.Get("note-text")
-  let created = false
+  let comment: UIEventSource<string> = LocalStorageSource.Get("note-text");
+  let created = false;
 
-  let notelayer: FilteredLayer = state.layerState.filteredLayers.get("note")
+  let notelayer: FilteredLayer = state.layerState.filteredLayers.get("note");
 
-  let hasFilter = notelayer?.hasFilter
-  let isDisplayed = notelayer?.isDisplayed
+  let hasFilter = notelayer?.hasFilter;
+  let isDisplayed = notelayer?.isDisplayed;
 
   function enableNoteLayer() {
-    state.guistate.closeAll()
-    isDisplayed.setData(true)
+    state.guistate.closeAll();
+    isDisplayed.setData(true);
   }
 
   async function uploadNote() {
-    let txt = comment.data
+    let txt = comment.data;
     if (txt === undefined || txt === "") {
-      return
+      return;
     }
-    const loc = coordinate
-    txt += "\n\n #MapComplete #" + state?.layout?.id
-    const id = await state?.osmConnection?.openNote(loc.lat, loc.lon, txt)
-    console.log("Created a note, got id", id)
+    const loc = coordinate.data;
+    txt += "\n\n #MapComplete #" + state?.layout?.id;
+    const id = await state?.osmConnection?.openNote(loc.lat, loc.lon, txt);
+    console.log("Created a note, got id", id);
     const feature = <Feature<Point>>{
       type: "Feature",
       geometry: {
         type: "Point",
-        coordinates: [loc.lon, loc.lat],
+        coordinates: [loc.lon, loc.lat]
       },
       properties: {
         id: "" + id.id,
@@ -53,22 +56,22 @@
             text: txt,
             html: txt,
             user: state.osmConnection?.userDetails?.data?.name,
-            uid: state.osmConnection?.userDetails?.data?.uid,
-          },
-        ]),
-      },
-    }
+            uid: state.osmConnection?.userDetails?.data?.uid
+          }
+        ])
+      }
+    };
     // Normally, the 'Changes' will generate the new element. The 'notes' are an exception to this
-    state.newFeatures.features.data.push(feature)
-    state.newFeatures.features.ping()
-    state.selectedElement?.setData(feature)
+    state.newFeatures.features.data.push(feature);
+    state.newFeatures.features.ping();
+    state.selectedElement?.setData(feature);
     if (state.featureProperties.trackFeature) {
-      state.featureProperties.trackFeature(feature)
+      state.featureProperties.trackFeature(feature);
     }
-    comment.setData("")
-    created = true
-    state.selectedElement.setData(feature)
-    state.selectedLayer.setData(state.layerState.filteredLayers.get("note"))
+    comment.setData("");
+    created = true;
+    state.selectedElement.setData(feature);
+    state.selectedLayer.setData(state.layerState.filteredLayers.get("note"));
   }
 </script>
 
@@ -106,6 +109,15 @@
             <ValidatedInput type="text" value={comment} />
           </div>
 
+          <div class="w-full h-56">
+            <NewPointLocationInput value={coordinate} {state} >
+              <div class="h-20 w-full pb-10" slot="image">
+                <ToSvelte construct={Svg.note_svg().SetClass("h-10 w-full")}/>
+              </div>
+            </NewPointLocationInput>
+          </div>
+
+
           <LoginToggle {state}>
             <span slot="loading"><!--empty: don't show a loading message--></span>
             <div slot="not-logged-in" class="alert">
diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts
index e35ee75e1..8300cb887 100644
--- a/src/UI/SpecialVisualizations.ts
+++ b/src/UI/SpecialVisualizations.ts
@@ -563,7 +563,10 @@ export default class SpecialVisualizations {
                     feature: Feature
                 ): BaseUIElement {
                     const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
-                    return new SvelteUIElement(CreateNewNote, { state, coordinate: { lon, lat } })
+                    return new SvelteUIElement(CreateNewNote, {
+                        state,
+                        coordinate: new UIEventSource({ lon, lat }),
+                    })
                 },
             },
             new CloseNoteButton(),