Move to popups again

LayerDefinition.ts

@@ -30,7 +30,8 @@ export class LayerDefinition {
     maxAllowedOverlapPercentage: number = undefined;
 
 
-    asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>, selectedElement: UIEventSource<any>):
+    asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>, selectedElement: UIEventSource<any>, 
+            showOnPopup:UIEventSource<(() => UIElement)>):
         FilteredLayer {
         return new FilteredLayer(
             this.name,
@@ -38,7 +39,8 @@ export class LayerDefinition {
             this.overpassFilter,
             this.maxAllowedOverlapPercentage,
             this.style,
-            selectedElement);
+            selectedElement,
+            showOnPopup);
 
     }
 

Layers/Bookcases.ts

@@ -40,8 +40,8 @@ export class Bookcases extends LayerDefinition {
 
             new TagMappingOptions({
                     key: "name",
-                    template: "<h2>{name}</h2>",
+                    template: "{name}",
-                    missing: "<h2>Boekenruilkastje</h2>"
+                    missing: "Boekenruilkastje"
                 }
             ),
             new TagMappingOptions({key: "capacity", template: "Plaats voor {capacity} boeken"}),

Layers/Toilets.ts

@@ -36,9 +36,7 @@ export class Toilets extends LayerDefinition{
         }
         
         this.elementsToShow = [
-
+            new FixedUiElement("Toiletten"),
-
-            new FixedUiElement("<h2>Toiletten</h2>"),
 
             new TagMappingOptions({
                 key: "access",

Logic/FilteredLayer.ts

@@ -5,6 +5,7 @@ import {ElementStorage} from "./ElementStorage";
 import {Changes} from "./Changes";
 import L from "leaflet"
 import {GeoOperations} from "./GeoOperations";
+import {UIElement} from "../UI/UIElement";
 
 /***
  * A filtered layer is a layer which offers a 'set-data' function
@@ -38,6 +39,7 @@ export class FilteredLayer {
      */
     private _geolayer;
     private _selectedElement: UIEventSource<any>;
+    private _showOnPopup: UIEventSource<(() => UIElement)>;
 
     constructor(
         name: string,
@@ -46,8 +48,11 @@ export class FilteredLayer {
         filters: TagsFilter,
         maxAllowedOverlap: number,
         style: ((properties) => any),
-        selectedElement: UIEventSource<any>) {
+        selectedElement: UIEventSource<any>,
+        showOnPopup: UIEventSource<(() => UIElement)>
+    ) {
         this._selectedElement = selectedElement;
+        this._showOnPopup = showOnPopup;
 
         if (style === undefined) {
             style = function () {
@@ -177,16 +182,21 @@ export class FilteredLayer {
             },
 
             onEachFeature: function (feature, layer) {
-
-
                 let eventSource = self._storage.addOrGetElement(feature);
                 eventSource.addCallback(function () {
                     self.updateStyle();
                 });
-                layer.on("click", function(e){
+
-                    console.log("Selected ",feature)
+
+                layer.on("click", function(e) {
+                    console.log("Selected ", feature)
                     self._selectedElement.setData(feature.properties);
                     L.DomEvent.stop(e); // Marks the event as consumed
+                    const uiElement = self._showOnPopup.data();
+                    layer.bindPopup(uiElement.Render()).openPopup();
+                    uiElement.Update();
+                    uiElement.Activate();
+
                 });
             }
         });

Logic/StrayClickHandler.ts

@@ -28,9 +28,14 @@ export class StrayClickHandler {
             if (self._lastMarker !== undefined) {
                 map.removeLayer(self._lastMarker);
             }
-
             self._lastMarker = L.marker([lastClick.lat, lastClick.lon]);
+            const uiElement = uiToShow();
+            const popup = L.popup().setContent(uiElement.Render());
+            uiElement.Activate();
+            uiElement.Update();
             self._lastMarker.addTo(map);
+            self._lastMarker.bindPopup(popup).openPopup();
+
 
             leftMessage.setData(self._uiToShow);
 

UI/FeatureInfoBox.ts

@@ -43,6 +43,7 @@ export class FeatureInfoBox extends UIElement {
         this._tagsES = tagsES;
         this._changes = changes;
         this._userDetails = userDetails;
+        this.ListenTo(userDetails);
 
         this._imageElement = new ImageCarousel(this._tagsES);
 

UI/ImageUploadFlow.ts

@@ -63,7 +63,7 @@ export class ImageUploadFlow extends UIElement {
     protected InnerRender(): string {
 
         if (!this._userdetails.data.loggedIn) {
-            return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen</div>";
+            return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden</div>";
         }
         if (this._isUploading.data == 1) {
             return "<b>Bezig met een foto te uploaden...</b>"

UI/MessageBoxHandler.ts

@@ -55,10 +55,10 @@ export class MessageBoxHandler {
         }
         location.hash = "#element"
         wrapper.classList.remove("hidden");
-        gen()
+      /*  gen()
             ?.HideOnEmpty(true)
             ?.AttachTo("messagesbox")
-            ?.Activate();
+            ?.Activate();*/
 
         gen()
             ?.HideOnEmpty(true)

UI/SimpleAddUI.ts

@@ -5,6 +5,7 @@ import {FilteredLayer} from "../Logic/FilteredLayer";
 import {Changes} from "../Logic/Changes";
 import {FixedUiElement} from "./Base/FixedUiElement";
 import {Button} from "./Base/Button";
+import {UserDetails} from "../Logic/OsmConnection";
 
 /**
  * Asks to add a feature at the last clicked location, at least if zoom is sufficient
@@ -16,12 +17,14 @@ export class SimpleAddUI extends UIElement {
     private _changes: Changes;
     private _selectedElement: UIEventSource<any>;
     private _dataIsLoading: UIEventSource<boolean>;
+    private _userDetails: UIEventSource<UserDetails>;
 
     constructor(zoomlevel: UIEventSource<{ zoom: number }>,
                 lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
                 changes: Changes,
                 selectedElement: UIEventSource<any>,
                 dataIsLoading: UIEventSource<boolean>,
+                userDetails: UIEventSource<UserDetails>,
                 addButtons: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
     ) {
         super(zoomlevel);
@@ -30,6 +33,8 @@ export class SimpleAddUI extends UIElement {
         this._changes = changes;
         this._selectedElement = selectedElement;
         this._dataIsLoading = dataIsLoading;
+        this._userDetails = userDetails;
+        this.ListenTo(userDetails);
         this._addButtons = [];
 
         for (const option of addButtons) {
@@ -60,11 +65,15 @@ export class SimpleAddUI extends UIElement {
         if (this._zoomlevel.data.zoom < 19) {
             return header + "Zoom verder in om een element toe te voegen.";
         }
-        
+
-        if(this._dataIsLoading.data){
+        if (this._dataIsLoading.data) {
             return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen";
         }
 
+        if (!this._userDetails.data.loggedIn) {
+            return header + "<a class='activate-osm-authentication'>Gelieve je aan te melden om een nieuw punt toe te voegen</a>"
+        }
+
         var html = "";
         for (const button of this._addButtons) {
             html += button.Render();
@@ -77,6 +86,7 @@ export class SimpleAddUI extends UIElement {
         for (const button of this._addButtons) {
             button.Update();
         }
+        this._userDetails.data.osmConnection.registerActivateOsmAUthenticationClass();
     }
 
 }

index.css

@@ -188,6 +188,10 @@ body {
         display: block;
     }
 
+    .leaflet-popup {
+        /* Popups are hidden on mobile */
+        display:none;
+    }
 
     #messagesboxmobilewrapper {
         position: absolute;
@@ -212,8 +216,10 @@ body {
         height: calc(100% - 5em); /*Height of to-the-map is 2em, padding is 2 * 0.5em*/
     }
     #messagesboxmobile {
-        margin: 1em;
+        padding: 1em;
         padding-bottom: 2em;
+        border-radius:1em;
+        background-color: white;
     }
 }
 
@@ -324,7 +330,7 @@ body {
 
 .prev-button {
     background-color: black;
-    opacity: 30%;
+    opacity: 0.3;
     width: 3.0em;
 
     height: 100%;

index.ts

@@ -114,7 +114,7 @@ const flayers: FilteredLayer[] = []
 
 for (const layer of questSetToRender.layers) {
 
-    const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement);
+    const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement, leftMessage);
 
     const addButton = {
         name: layer.name,
@@ -144,6 +144,7 @@ new StrayClickHandler(bm, selectedElement, leftMessage, () => {
             changes,
             selectedElement,
             layerUpdater.runningQuery,
+            osmConnection.userDetails,
             addButtons);
     }
 );
@@ -197,6 +198,7 @@ var welcomeMessage = () => {
         });
 }
 leftMessage.setData(welcomeMessage);
+welcomeMessage().AttachTo("messagesbox");
 
 
 var messageBox = new MessageBoxHandler(leftMessage, () => {selectedElement.setData(undefined)});