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

Use OSM-settings to keep track of the chosen license; change tree marker to circle (fix #24)

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-01 17:38:48 +02:00
parent b2704d0ab8
commit b1775d8184
15 changed files with 83 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
LayerDefinition.ts
View file

@ -22,7 +22,7 @@ export class LayerDefinition {
elementsToShow: (TagMappingOptions | QuestionDefinition | UIElement)[];
questions: QuestionDefinition[]; // Questions are shown below elementsToShow in a questionPicker
style: (tags: any) => any;
style: (tags: any) => { color: string, icon: any };
/**
* If an object of the next layer is contained for this many percent in this feature, it is eaten and not shown

7
Layers/Bos.ts
View file

@ -43,11 +43,6 @@ export class Bos extends LayerDefinition {
}
private readonly treeIcon = new L.icon({
iconUrl: "assets/tree_white_background.svg",
iconSize: [40, 40]
})
private generateStyleFunction() {
const self = this;
return function (properties: any) {
@ -73,7 +68,7 @@ export class Bos extends LayerDefinition {
return {
color: colour,
icon: self.treeIcon
icon: undefined
};
};
}

8
Layers/NatureReserves.ts
View file

@ -1,7 +1,6 @@
import {LayerDefinition} from "../LayerDefinition";
import {Quests} from "../Quests";
import {TagMappingOptions} from "../UI/TagMapping";
import L from "leaflet"
import {CommonTagMappings} from "./CommonTagMappings";
import {Or, Tag} from "../Logic/TagsFilter";
@ -32,11 +31,6 @@ export class NatureReserves extends LayerDefinition {
}
private readonly treeIcon = new L.icon({
iconUrl: "assets/tree_white_background.svg",
iconSize: [40, 40]
})
private generateStyleFunction() {
const self = this;
return function (properties: any) {
@ -62,7 +56,7 @@ export class NatureReserves extends LayerDefinition {
return {
color: colour,
icon: self.treeIcon
icon: undefined
};
};
}

8
Layers/Park.ts
View file

@ -1,7 +1,6 @@
import {LayerDefinition} from "../LayerDefinition";
import {Quests} from "../Quests";
import {TagMappingOptions} from "../UI/TagMapping";
import L from "leaflet"
import {CommonTagMappings} from "./CommonTagMappings";
import {Or, Tag} from "../Logic/TagsFilter";
@ -34,10 +33,7 @@ export class Park extends LayerDefinition {
}
private readonly treeIcon = new L.icon({
iconUrl: "assets/tree_white_background.svg",
iconSize: [40, 40]
})
private generateStyleFunction() {
const self = this;
@ -64,7 +60,7 @@ export class Park extends LayerDefinition {
return {
color: colour,
icon: self.treeIcon
icon: undefined
};
};
}

9
Logic/FilteredLayer.ts
View file

@ -24,7 +24,7 @@ export class FilteredLayer {
private readonly _map: Basemap;
private readonly _maxAllowedOverlap: number;
private readonly _style: (properties) => any;
private readonly _style: (properties) => { color: string, icon: any };
private readonly _storage: ElementStorage;
@ -170,9 +170,12 @@ export class FilteredLayer {
const style = self._style(feature.properties);
let marker;
if (style.icon === undefined) {
marker = L.marker(latLng);
} else {
marker = L.circle(latLng, {
radius: 50,
color: style.color
});
} else {
marker = L.marker(latLng, {
icon: style.icon
});

4
Logic/OsmImageUploadHandler.ts
View file

@ -12,9 +12,11 @@ export class OsmImageUploadHandler {
private _changeHandler: Changes;
private _userdetails: UIEventSource<UserDetails>;
private _slideShow: SlideShow;
private _preferedLicense: UIEventSource<string>;
constructor(tags: UIEventSource<any>,
userdetails: UIEventSource<UserDetails>,
preferedLicense: UIEventSource<string>,
changeHandler: Changes,
slideShow : SlideShow
) {
@ -25,6 +27,7 @@ export class OsmImageUploadHandler {
this._tags = tags;
this._changeHandler = changeHandler;
this._userdetails = userdetails;
this._preferedLicense = preferedLicense;
}
private generateOptions(license: string) {
@ -65,6 +68,7 @@ export class OsmImageUploadHandler {
const self = this;
return new ImageUploadFlow(
this._userdetails,
this._preferedLicense,
function (license) {
return self.generateOptions(license)
}

1
Logic/Overpass.ts
View file

@ -40,7 +40,6 @@ export class Overpass {
$.getJSON(query,
function (json, status) {
console.log("status:", status)
if (status !== "success") {
console.log("Query failed")
onFail(status);

25
UI/Base/DropDownUI.ts
View file

@ -7,12 +7,19 @@ export class DropDownUI extends UIElement {
private _label: string;
private _values: { value: string; shown: string }[];
constructor(label: string, values: { value: string, shown: string }[]) {
constructor(label: string, values: { value: string, shown: string }[],
selectedElement: UIEventSource<string> = undefined) {
super(undefined);
this._label = label;
this._values = values;
this.selectedElement = new UIEventSource<string>(values[0].value);
this.selectedElement = selectedElement ?? new UIEventSource<string>(values[0].value);
if(selectedElement.data === undefined){
this.selectedElement.setData(values[0].value)
}
const self = this;
this.selectedElement.addCallback(() => {
self.InnerUpdate();
});
}
@ -31,17 +38,21 @@ export class DropDownUI extends UIElement {
"</form>";
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
InnerUpdate() {
const self = this;
const e = document.getElementById("dropdown-" + this.id);
// @ts-ignore
if (this.selectedElement.data !== e.value) {
// @ts-ignore
e.value = this.selectedElement.data;
}
e.onchange = function () {
// @ts-ignore
const selectedValue = e.options[e.selectedIndex].value;
console.log("Putting data", selectedValue)
self.selectedElement.setData(selectedValue);
}
}
}

7
UI/FeatureInfoBox.ts
View file

@ -7,10 +7,7 @@ import {OsmImageUploadHandler} from "../Logic/OsmImageUploadHandler";
import {ImageCarousel} from "./Image/ImageCarousel";
import {Changes} from "../Logic/Changes";
import {UserDetails} from "../Logic/OsmConnection";
import {Img} from "./Img";
import {CommonTagMappings} from "../Layers/CommonTagMappings";
import {Tag} from "../Logic/TagsFilter";
import {ImageUploadFlow} from "./ImageUploadFlow";
import {VerticalCombine} from "./Base/VerticalCombine";
export class FeatureInfoBox extends UIElement {
@ -38,6 +35,7 @@ export class FeatureInfoBox extends UIElement {
questions: QuestionDefinition[],
changes: Changes,
userDetails: UIEventSource<UserDetails>,
preferedPictureLicense : UIEventSource<string>
) {
super(tagsES);
this._tagsES = tagsES;
@ -71,7 +69,8 @@ export class FeatureInfoBox extends UIElement {
this._osmLink = new TagMapping(CommonTagMappings.osmLink, this._tagsES);
this._wikipedialink = new TagMapping(CommonTagMappings.wikipediaLink, this._tagsES);
this._pictureUploader = new OsmImageUploadHandler(tagsES, userDetails, changes, this._imageElement.slideshow).getUI();
this._pictureUploader = new OsmImageUploadHandler(tagsES, userDetails, preferedPictureLicense,
changes, this._imageElement.slideshow).getUI();
}

4
UI/ImageUploadFlow.ts
View file

@ -16,6 +16,7 @@ export class ImageUploadFlow extends UIElement {
constructor(
userInfo: UIEventSource<UserDetails>,
preferedLicense : UIEventSource<string>,
uploadOptions: ((license: string) =>
{
title: string,
@ -36,7 +37,8 @@ export class ImageUploadFlow extends UIElement {
{value: "CC0", shown: "in het publiek domein"},
{value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"},
{value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"}
]
],
preferedLicense
);
this._licensePicker = licensePicker;
this._selectedLicence = licensePicker.selectedElement;

3
UI/UIElement.ts
View file

@ -33,6 +33,7 @@ export abstract class UIElement {
public onClick(f: (() => void)) {
this._onClick = f;
this.Update();
return this;
}
Update(): void {
@ -52,10 +53,8 @@ export abstract class UIElement {
}
if (this._onClick !== undefined) {
console.log("Registering")
const self = this;
element.onclick = () => {
console.log("Clicked!")
self._onClick();
}
element.style.cursor = "pointer";

4
UI/UIEventSource.ts
View file

@ -22,8 +22,8 @@ export class UIEventSource<T>{
}
public ping(): void {
for (let i in this._callbacks) {
this._callbacks[i](this.data);
for (const callback of this._callbacks) {
callback(this.data);
}
}

5
UI/UserBadge.ts
View file

@ -3,6 +3,7 @@ import {UserDetails} from "../Logic/OsmConnection";
import {UIEventSource} from "./UIEventSource";
import {Basemap} from "../Logic/Basemap";
import L from "leaflet";
import {FixedUiElement} from "./Base/FixedUiElement";
/**
* Handles and updates the user badge
@ -10,6 +11,7 @@ import L from "leaflet";
export class UserBadge extends UIElement {
private _userDetails: UIEventSource<UserDetails>;
private _pendingChanges: UIElement;
private _logout: UIElement;
private _basemap: Basemap;
@ -21,6 +23,9 @@ export class UserBadge extends UIElement {
this._pendingChanges = pendingChanges;
this._basemap = basemap;
this._logout = new FixedUiElement("<img src='assets/logout.svg' alt='logout'>")
.onClick(() => {userDetails.data.osmConnection.LogOut();});
userDetails.addCallback(function () {
const profilePic = document.getElementById("profile-pic");
profilePic.onload = function () {

30
index.ts
View file

@ -67,6 +67,7 @@ const leftMessage = new UIEventSource<() => UIElement>(undefined);
const selectedElement = new UIEventSource<any>(undefined);
const preferedPictureLicense = new UIEventSource<string>(undefined);
const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
zoom: questSetToRender.startzoom,
@ -101,6 +102,21 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
));
// ------------- Tie together user settings and UI -----------
const picturesPrefName = "mapcomplete-pictures-license";
preferedPictureLicense.addCallback((license) => {
osmConnection.SetPreference(picturesPrefName, license);
});
osmConnection.preferences.addCallback((prefs) => {
if (prefs[picturesPrefName] !== undefined) {
preferedPictureLicense.setData(prefs[picturesPrefName]);
}
})
// ------------- Setup the layers -------------------------------
const addButtons: {
@ -122,7 +138,8 @@ for (const layer of questSetToRender.layers) {
layer.elementsToShow,
layer.questions,
changes,
osmConnection.userDetails
osmConnection.userDetails,
preferedPictureLicense
)
};
@ -145,12 +162,6 @@ const layerUpdater = new LayerUpdater(bm, questSetToRender.startzoom, flayers);
// ------------------ Setup various UI elements ------------
/*
const addButton = new AddButton(bm, changes, addButtons);
addButton.AttachTo("bottomRight");
addButton.Update();*/
new StrayClickHandler(bm, selectedElement, leftMessage, () => {
return new SimpleAddUI(bm.Location,
bm.LastClickLocation,
@ -178,13 +189,12 @@ selectedElement.addCallback((data) => {
layer.elementsToShow,
layer.questions,
changes,
osmConnection.userDetails
osmConnection.userDetails,
preferedPictureLicense
));
break;
}
}
}
);

23
test.ts
View file

@ -2,16 +2,25 @@ import {Geocoding} from "./Logic/Geocoding";
import {SearchAndGo} from "./UI/SearchAndGo";
import {TextField} from "./UI/Base/TextField";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import {DropDownUI} from "./UI/Base/DropDownUI";
import {UIEventSource} from "./UI/UIEventSource";
console.log("HI");
new SearchAndGo().AttachTo("maindiv");
/*const tf = new TextField();
tf.AttachTo("maindiv");
tf.enterPressed.addCallback(() => {alert("Searching")});
new VariableUiElement(tf.value).AttachTo("extradiv");
/*/
var control = new UIEventSource<string>("b");
control.addCallback((data) => {
console.log("> GOT", control.data)
})
new DropDownUI("Test",
[{value: "a", shown: "a"},
{value: "b", shown: "b"},
{value: "c", shown: "c"},
], control
).AttachTo("maindiv");
new VariableUiElement(control).AttachTo("extradiv");
//*/
window.setTimeout(() => {control.setData("a")}, 1000);