Move to popups again

This commit is contained in:
Pieter Vander Vennet 2020-06-29 16:21:36 +02:00
parent 3e6def36b8
commit de9da2c220
11 changed files with 55 additions and 21 deletions

View file

@ -30,7 +30,8 @@ export class LayerDefinition {
maxAllowedOverlapPercentage: number = undefined; 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 { FilteredLayer {
return new FilteredLayer( return new FilteredLayer(
this.name, this.name,
@ -38,7 +39,8 @@ export class LayerDefinition {
this.overpassFilter, this.overpassFilter,
this.maxAllowedOverlapPercentage, this.maxAllowedOverlapPercentage,
this.style, this.style,
selectedElement); selectedElement,
showOnPopup);
} }

View file

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

View file

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

View file

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

View file

@ -28,9 +28,14 @@ export class StrayClickHandler {
if (self._lastMarker !== undefined) { if (self._lastMarker !== undefined) {
map.removeLayer(self._lastMarker); map.removeLayer(self._lastMarker);
} }
self._lastMarker = L.marker([lastClick.lat, lastClick.lon]); 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.addTo(map);
self._lastMarker.bindPopup(popup).openPopup();
leftMessage.setData(self._uiToShow); leftMessage.setData(self._uiToShow);

View file

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

View file

@ -63,7 +63,7 @@ export class ImageUploadFlow extends UIElement {
protected InnerRender(): string { protected InnerRender(): string {
if (!this._userdetails.data.loggedIn) { 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) { if (this._isUploading.data == 1) {
return "<b>Bezig met een foto te uploaden...</b>" return "<b>Bezig met een foto te uploaden...</b>"

View file

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

View file

@ -5,6 +5,7 @@ import {FilteredLayer} from "../Logic/FilteredLayer";
import {Changes} from "../Logic/Changes"; import {Changes} from "../Logic/Changes";
import {FixedUiElement} from "./Base/FixedUiElement"; import {FixedUiElement} from "./Base/FixedUiElement";
import {Button} from "./Base/Button"; 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 * 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 _changes: Changes;
private _selectedElement: UIEventSource<any>; private _selectedElement: UIEventSource<any>;
private _dataIsLoading: UIEventSource<boolean>; private _dataIsLoading: UIEventSource<boolean>;
private _userDetails: UIEventSource<UserDetails>;
constructor(zoomlevel: UIEventSource<{ zoom: number }>, constructor(zoomlevel: UIEventSource<{ zoom: number }>,
lastClickLocation: UIEventSource<{ lat: number, lon: number }>, lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
changes: Changes, changes: Changes,
selectedElement: UIEventSource<any>, selectedElement: UIEventSource<any>,
dataIsLoading: UIEventSource<boolean>, dataIsLoading: UIEventSource<boolean>,
userDetails: UIEventSource<UserDetails>,
addButtons: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[], addButtons: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
) { ) {
super(zoomlevel); super(zoomlevel);
@ -30,6 +33,8 @@ export class SimpleAddUI extends UIElement {
this._changes = changes; this._changes = changes;
this._selectedElement = selectedElement; this._selectedElement = selectedElement;
this._dataIsLoading = dataIsLoading; this._dataIsLoading = dataIsLoading;
this._userDetails = userDetails;
this.ListenTo(userDetails);
this._addButtons = []; this._addButtons = [];
for (const option of addButtons) { for (const option of addButtons) {
@ -61,10 +66,14 @@ export class SimpleAddUI extends UIElement {
return header + "Zoom verder in om een element toe te voegen."; 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"; 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 = ""; var html = "";
for (const button of this._addButtons) { for (const button of this._addButtons) {
html += button.Render(); html += button.Render();
@ -77,6 +86,7 @@ export class SimpleAddUI extends UIElement {
for (const button of this._addButtons) { for (const button of this._addButtons) {
button.Update(); button.Update();
} }
this._userDetails.data.osmConnection.registerActivateOsmAUthenticationClass();
} }
} }

View file

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

View file

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