From b1775d81846a5897a79ccb1a33f50dac54f4059f Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 1 Jul 2020 17:38:48 +0200 Subject: [PATCH] Use OSM-settings to keep track of the chosen license; change tree marker to circle (fix #24) --- LayerDefinition.ts | 2 +- Layers/Bos.ts | 7 +------ Layers/NatureReserves.ts | 8 +------- Layers/Park.ts | 8 ++------ Logic/FilteredLayer.ts | 9 ++++++--- Logic/OsmImageUploadHandler.ts | 4 ++++ Logic/Overpass.ts | 1 - UI/Base/DropDownUI.ts | 25 ++++++++++++++++++------- UI/FeatureInfoBox.ts | 7 +++---- UI/ImageUploadFlow.ts | 4 +++- UI/UIElement.ts | 3 +-- UI/UIEventSource.ts | 4 ++-- UI/UserBadge.ts | 5 +++++ index.ts | 30 ++++++++++++++++++++---------- test.ts | 23 ++++++++++++++++------- 15 files changed, 83 insertions(+), 57 deletions(-) diff --git a/LayerDefinition.ts b/LayerDefinition.ts index 4f63b4f..acb76c9 100644 --- a/LayerDefinition.ts +++ b/LayerDefinition.ts @@ -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 diff --git a/Layers/Bos.ts b/Layers/Bos.ts index 8edca1b..7e95e26 100644 --- a/Layers/Bos.ts +++ b/Layers/Bos.ts @@ -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 }; }; } diff --git a/Layers/NatureReserves.ts b/Layers/NatureReserves.ts index d42df9e..ae6a5f9 100644 --- a/Layers/NatureReserves.ts +++ b/Layers/NatureReserves.ts @@ -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 }; }; } diff --git a/Layers/Park.ts b/Layers/Park.ts index cde7d82..cc74a61 100644 --- a/Layers/Park.ts +++ b/Layers/Park.ts @@ -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 }; }; } diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index 4b40eb0..466bb57 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -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); + marker = L.circle(latLng, { + radius: 50, + color: style.color + }); + } else { - marker = L.marker(latLng, { icon: style.icon }); diff --git a/Logic/OsmImageUploadHandler.ts b/Logic/OsmImageUploadHandler.ts index 51a0776..3cabdbc 100644 --- a/Logic/OsmImageUploadHandler.ts +++ b/Logic/OsmImageUploadHandler.ts @@ -12,9 +12,11 @@ export class OsmImageUploadHandler { private _changeHandler: Changes; private _userdetails: UIEventSource; private _slideShow: SlideShow; + private _preferedLicense: UIEventSource; constructor(tags: UIEventSource, userdetails: UIEventSource, + preferedLicense: UIEventSource, 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) } diff --git a/Logic/Overpass.ts b/Logic/Overpass.ts index f0a84fa..30f3735 100644 --- a/Logic/Overpass.ts +++ b/Logic/Overpass.ts @@ -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); diff --git a/UI/Base/DropDownUI.ts b/UI/Base/DropDownUI.ts index a8b80e6..521068a 100644 --- a/UI/Base/DropDownUI.ts +++ b/UI/Base/DropDownUI.ts @@ -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 = undefined) { super(undefined); this._label = label; this._values = values; - this.selectedElement = new UIEventSource(values[0].value); - + this.selectedElement = selectedElement ?? new UIEventSource(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 { ""; } - 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); } + } } \ No newline at end of file diff --git a/UI/FeatureInfoBox.ts b/UI/FeatureInfoBox.ts index ced337d..4558734 100644 --- a/UI/FeatureInfoBox.ts +++ b/UI/FeatureInfoBox.ts @@ -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, + preferedPictureLicense : UIEventSource ) { 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(); } diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts index e2b3842..6542824 100644 --- a/UI/ImageUploadFlow.ts +++ b/UI/ImageUploadFlow.ts @@ -16,6 +16,7 @@ export class ImageUploadFlow extends UIElement { constructor( userInfo: UIEventSource, + preferedLicense : UIEventSource, 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; diff --git a/UI/UIElement.ts b/UI/UIElement.ts index 408c2ef..2222dee 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -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"; diff --git a/UI/UIEventSource.ts b/UI/UIEventSource.ts index e7ff2ce..f1a9909 100644 --- a/UI/UIEventSource.ts +++ b/UI/UIEventSource.ts @@ -22,8 +22,8 @@ export class UIEventSource{ } public ping(): void { - for (let i in this._callbacks) { - this._callbacks[i](this.data); + for (const callback of this._callbacks) { + callback(this.data); } } diff --git a/UI/UserBadge.ts b/UI/UserBadge.ts index 810aa28..21bd7d0 100644 --- a/UI/UserBadge.ts +++ b/UI/UserBadge.ts @@ -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; private _pendingChanges: UIElement; + private _logout: UIElement; private _basemap: Basemap; @@ -20,6 +22,9 @@ export class UserBadge extends UIElement { this._userDetails = userDetails; this._pendingChanges = pendingChanges; this._basemap = basemap; + + this._logout = new FixedUiElement("logout") + .onClick(() => {userDetails.data.osmConnection.LogOut();}); userDetails.addCallback(function () { const profilePic = document.getElementById("profile-pic"); diff --git a/index.ts b/index.ts index e0d443e..f10f468 100644 --- a/index.ts +++ b/index.ts @@ -67,6 +67,7 @@ const leftMessage = new UIEventSource<() => UIElement>(undefined); const selectedElement = new UIEventSource(undefined); +const preferedPictureLicense = new UIEventSource(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; } } - - } ); diff --git a/test.ts b/test.ts index 1a28cb8..68791ae 100644 --- a/test.ts +++ b/test.ts @@ -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("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); \ No newline at end of file