From de9da2c2209305d54916f2a333204c3195ed9ecc Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 29 Jun 2020 16:21:36 +0200 Subject: [PATCH] Move to popups again --- LayerDefinition.ts | 6 ++++-- Layers/Bookcases.ts | 4 ++-- Layers/Toilets.ts | 4 +--- Logic/FilteredLayer.ts | 20 +++++++++++++++----- Logic/StrayClickHandler.ts | 7 ++++++- UI/FeatureInfoBox.ts | 1 + UI/ImageUploadFlow.ts | 2 +- UI/MessageBoxHandler.ts | 4 ++-- UI/SimpleAddUI.ts | 14 ++++++++++++-- index.css | 10 ++++++++-- index.ts | 4 +++- 11 files changed, 55 insertions(+), 21 deletions(-) diff --git a/LayerDefinition.ts b/LayerDefinition.ts index 201beca..fb1dae6 100644 --- a/LayerDefinition.ts +++ b/LayerDefinition.ts @@ -30,7 +30,8 @@ export class LayerDefinition { maxAllowedOverlapPercentage: number = undefined; - asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource, selectedElement: UIEventSource): + asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource, selectedElement: UIEventSource, + 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); } diff --git a/Layers/Bookcases.ts b/Layers/Bookcases.ts index 726ad93..6723064 100644 --- a/Layers/Bookcases.ts +++ b/Layers/Bookcases.ts @@ -40,8 +40,8 @@ export class Bookcases extends LayerDefinition { new TagMappingOptions({ key: "name", - template: "

{name}

", - missing: "

Boekenruilkastje

" + template: "{name}", + missing: "Boekenruilkastje" } ), new TagMappingOptions({key: "capacity", template: "Plaats voor {capacity} boeken"}), diff --git a/Layers/Toilets.ts b/Layers/Toilets.ts index 45a71a5..6e77686 100644 --- a/Layers/Toilets.ts +++ b/Layers/Toilets.ts @@ -36,9 +36,7 @@ export class Toilets extends LayerDefinition{ } this.elementsToShow = [ - - - new FixedUiElement("

Toiletten

"), + new FixedUiElement("Toiletten"), new TagMappingOptions({ key: "access", diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index 8d0070a..a05d3ed 100644 --- a/Logic/FilteredLayer.ts +++ b/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; + private _showOnPopup: UIEventSource<(() => UIElement)>; constructor( name: string, @@ -46,8 +48,11 @@ export class FilteredLayer { filters: TagsFilter, maxAllowedOverlap: number, style: ((properties) => any), - selectedElement: UIEventSource) { + selectedElement: UIEventSource, + 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(); + }); } }); diff --git a/Logic/StrayClickHandler.ts b/Logic/StrayClickHandler.ts index 13a17d1..a85c872 100644 --- a/Logic/StrayClickHandler.ts +++ b/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); diff --git a/UI/FeatureInfoBox.ts b/UI/FeatureInfoBox.ts index 3ca09b9..ced337d 100644 --- a/UI/FeatureInfoBox.ts +++ b/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); diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts index 24f6aa3..e2b3842 100644 --- a/UI/ImageUploadFlow.ts +++ b/UI/ImageUploadFlow.ts @@ -63,7 +63,7 @@ export class ImageUploadFlow extends UIElement { protected InnerRender(): string { if (!this._userdetails.data.loggedIn) { - return "
Gelieve je aan te melden om een foto toe te voegen
"; + return "
Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden
"; } if (this._isUploading.data == 1) { return "Bezig met een foto te uploaden..." diff --git a/UI/MessageBoxHandler.ts b/UI/MessageBoxHandler.ts index cf551cd..5ce7bdb 100644 --- a/UI/MessageBoxHandler.ts +++ 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) diff --git a/UI/SimpleAddUI.ts b/UI/SimpleAddUI.ts index e778ef6..ede1074 100644 --- a/UI/SimpleAddUI.ts +++ b/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; private _dataIsLoading: UIEventSource; + private _userDetails: UIEventSource; constructor(zoomlevel: UIEventSource<{ zoom: number }>, lastClickLocation: UIEventSource<{ lat: number, lon: number }>, changes: Changes, selectedElement: UIEventSource, dataIsLoading: UIEventSource, + userDetails: UIEventSource, 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 + "Gelieve je aan te melden om een nieuw punt toe te voegen" + } + 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(); } } \ No newline at end of file diff --git a/index.css b/index.css index 49b0309..da5f733 100644 --- a/index.css +++ b/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%; diff --git a/index.ts b/index.ts index a62a797..1b8da1c 100644 --- a/index.ts +++ b/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)});