midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move to popups again

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
LayerDefinition.ts
View file

@ -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);
}

4
Layers/Bookcases.ts
View file

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

4
Layers/Toilets.ts
View file

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

20
Logic/FilteredLayer.ts
View file

@ -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();
});
}
});

7
Logic/StrayClickHandler.ts
View file

@ -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);

1
UI/FeatureInfoBox.ts
View file

@ -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);

2
UI/ImageUploadFlow.ts
View file

@ -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>"

4
UI/MessageBoxHandler.ts
View file

@ -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)

14
UI/SimpleAddUI.ts
View file

@ -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();
}
}

10
index.css
View file

@ -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%;

4
index.ts
View file

@ -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)});