From 4abe74fbf1e995cb07b6df79c2060861de380753 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 13:30:58 +0200 Subject: [PATCH 01/11] Add minimal checkbox --- UI/Base/CheckBox.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 UI/Base/CheckBox.ts diff --git a/UI/Base/CheckBox.ts b/UI/Base/CheckBox.ts new file mode 100644 index 0000000..6fd9214 --- /dev/null +++ b/UI/Base/CheckBox.ts @@ -0,0 +1,17 @@ +import {UIElement} from "../UIElement"; +import {UIEventSource} from "../UIEventSource"; + + +export class CheckBox extends UIElement{ + + constructor(data: UIEventSource) { + super(data); + + } + + + protected InnerRender(): string { + return ""; + } + +} \ No newline at end of file From dc0da41fb1e901874f5f2263f176bc107820d9d5 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 13:37:33 +0200 Subject: [PATCH 02/11] Checkbox example --- UI/Base/CheckBox.ts | 4 +++- test.ts | 13 ++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/UI/Base/CheckBox.ts b/UI/Base/CheckBox.ts index 6fd9214..9cdb21e 100644 --- a/UI/Base/CheckBox.ts +++ b/UI/Base/CheckBox.ts @@ -3,15 +3,17 @@ import {UIEventSource} from "../UIEventSource"; export class CheckBox extends UIElement{ + private data: UIEventSource; constructor(data: UIEventSource) { super(data); + this.data = data; } protected InnerRender(): string { - return ""; + return "Current val: "+this.data.data; } } \ No newline at end of file diff --git a/test.ts b/test.ts index b7e9bd3..8957dc0 100644 --- a/test.ts +++ b/test.ts @@ -7,11 +7,14 @@ import {OsmLink} from "./Customizations/Questions/OsmLink"; import {ConfirmDialog} from "./UI/ConfirmDialog"; import {Imgur} from "./Logic/Imgur"; import {VariableUiElement} from "./UI/Base/VariableUIElement"; +import {CheckBox} from "./UI/Base/CheckBox"; -const html = new UIEventSource("Some text"); +const eventSource = new UIEventSource(false); +eventSource.addCallback(console.log) -const uielement = new VariableUiElement(html); -uielement.AttachTo("maindiv") - -window.setTimeout(() => {html.setData("Different text")}, 1000) \ No newline at end of file +new CheckBox(eventSource) + .onClick(() => { + eventSource.setData(!eventSource.data); + }) + .AttachTo("maindiv"); From 7d250889812f8a570a41c9487b7a32f5ba4f494c Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 16:16:22 +0200 Subject: [PATCH 03/11] Add new icons --- Customizations/Layers/BikeParkings.ts | 3 +- Customizations/Layers/BikeStations.ts | 4 +- Customizations/Layers/DrinkingWater.ts | 5 +- Customizations/Layouts/Cyclofix.ts | 4 +- assets/bike/parking.svg | 83 ++------------------------ assets/bike/pump_broken.svg | 29 --------- 6 files changed, 14 insertions(+), 114 deletions(-) delete mode 100644 assets/bike/pump_broken.svg diff --git a/Customizations/Layers/BikeParkings.ts b/Customizations/Layers/BikeParkings.ts index ccd737e..cd5b344 100644 --- a/Customizations/Layers/BikeParkings.ts +++ b/Customizations/Layers/BikeParkings.ts @@ -36,7 +36,8 @@ export default class BikeParkings extends LayerDefinition { color: "#00bb00", icon: L.icon({ iconUrl: self.icon, - iconSize: [50, 50] + iconSize: [50, 50], + iconAnchor: [25,50] }) }; }; diff --git a/Customizations/Layers/BikeStations.ts b/Customizations/Layers/BikeStations.ts index 89f79b3..995ce64 100644 --- a/Customizations/Layers/BikeStations.ts +++ b/Customizations/Layers/BikeStations.ts @@ -80,7 +80,9 @@ export default class BikeStations extends LayerDefinition { color: "#00bb00", icon: L.icon({ iconUrl: iconUrl, - iconSize: [50, 50] + iconSize: [50, 50], + iconAnchor: [25,50] + }) }; }; diff --git a/Customizations/Layers/DrinkingWater.ts b/Customizations/Layers/DrinkingWater.ts index 92e6338..7808b24 100644 --- a/Customizations/Layers/DrinkingWater.ts +++ b/Customizations/Layers/DrinkingWater.ts @@ -11,7 +11,7 @@ export class DrinkingWater extends LayerDefinition { constructor() { super(); this.name = "drinking_water"; - this.icon = "./assets/bug.svg"; + this.icon = "./assets/bike/drinking_water.svg"; this.overpassFilter = new Or([ new And([ @@ -52,7 +52,8 @@ export class DrinkingWater extends LayerDefinition { color: "#00bb00", icon: new L.icon({ iconUrl: self.icon, - iconSize: [40, 40] + iconSize: [50, 50], + iconAnchor: [25,50] }) }; }; diff --git a/Customizations/Layouts/Cyclofix.ts b/Customizations/Layouts/Cyclofix.ts index 548981b..b64cf18 100644 --- a/Customizations/Layouts/Cyclofix.ts +++ b/Customizations/Layouts/Cyclofix.ts @@ -2,7 +2,7 @@ import {Layout} from "../Layout"; import BikeParkings from "../Layers/BikeParkings"; import BikeServices from "../Layers/BikeStations"; import {GhostBike} from "../Layers/GhostBike"; -import {DrinkingWater, DrinkingWaterLayer} from "../Layers/DrinkingWater"; +import {DrinkingWater} from "../Layers/DrinkingWater"; export default class Cyclofix extends Layout { @@ -10,7 +10,7 @@ export default class Cyclofix extends Layout { super( "pomp", "Cyclofix bicycle infrastructure", - [new GhostBike(), new BikeServices(), new BikeParkings(), new DrinkingWater()], + [ new BikeServices(), new BikeParkings(), new DrinkingWater()], 16, 50.8465573, 4.3516970, diff --git a/assets/bike/parking.svg b/assets/bike/parking.svg index b095bc1..e5b95cd 100644 --- a/assets/bike/parking.svg +++ b/assets/bike/parking.svg @@ -1,86 +1,11 @@ - - + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/assets/bike/pump_broken.svg b/assets/bike/pump_broken.svg deleted file mode 100644 index 2dcc14c..0000000 --- a/assets/bike/pump_broken.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 360c653553c441b2885a2ac370580e74f8407d60 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 16:32:35 +0200 Subject: [PATCH 04/11] New icons --- Customizations/Layers/BikeParkings.ts | 2 +- Customizations/Layers/BikeShop.ts | 33 +++++++ Customizations/Layers/BikeStations.ts | 1 - Customizations/Layers/DrinkingWater.ts | 2 +- Customizations/Layouts/Cyclofix.ts | 3 +- .../Questions/bike/StationPumpTools.ts | 2 +- assets/bike/broken_pump.svg | 30 ++++++ assets/bike/drinking_water.svg | 18 ++++ assets/bike/parking_old.svg | 93 +++++++++++++++++++ 9 files changed, 179 insertions(+), 5 deletions(-) create mode 100644 Customizations/Layers/BikeShop.ts create mode 100644 assets/bike/broken_pump.svg create mode 100644 assets/bike/drinking_water.svg create mode 100644 assets/bike/parking_old.svg diff --git a/Customizations/Layers/BikeParkings.ts b/Customizations/Layers/BikeParkings.ts index cd5b344..2c8a731 100644 --- a/Customizations/Layers/BikeParkings.ts +++ b/Customizations/Layers/BikeParkings.ts @@ -10,7 +10,7 @@ import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWi export default class BikeParkings extends LayerDefinition { constructor() { super(); - this.name = "bike_parking"; + this.name = "bike parking"; this.icon = "./assets/bike/parking.svg"; this.overpassFilter = new Tag("amenity", "bicycle_parking"); this.newElementTags = [ diff --git a/Customizations/Layers/BikeShop.ts b/Customizations/Layers/BikeShop.ts new file mode 100644 index 0000000..8c68f24 --- /dev/null +++ b/Customizations/Layers/BikeShop.ts @@ -0,0 +1,33 @@ +import {TagRenderingOptions} from "../TagRendering"; +import {LayerDefinition} from "../LayerDefinition"; +import {Tag} from "../../Logic/TagsFilter"; + +export class BikeShop extends LayerDefinition{ + + constructor() { + super( + { + name: "bike shop or repair", + icon: "assets/bike/repair_shop.svg", + minzoom: 14, + overpassFilter: new Tag("shop","bicycle"), + newElementTags: [new Tag("shop","bicycle")] + } + ); + + this.title = new TagRenderingOptions({ + mappings:[ + {k:new Tag("service:bicycle:retail","yes"), txt: "Bicycle shop"}, + {k:new Tag("service:bicycle:retail","no"), txt: "Bicycle repair"}, + {k:new Tag("service:bicycle:retail",""), txt: "Bicycle repair/shop"}, + ] + }) + + + this.style() + + + } + + +} \ No newline at end of file diff --git a/Customizations/Layers/BikeStations.ts b/Customizations/Layers/BikeStations.ts index 995ce64..258aad9 100644 --- a/Customizations/Layers/BikeStations.ts +++ b/Customizations/Layers/BikeStations.ts @@ -82,7 +82,6 @@ export default class BikeStations extends LayerDefinition { iconUrl: iconUrl, iconSize: [50, 50], iconAnchor: [25,50] - }) }; }; diff --git a/Customizations/Layers/DrinkingWater.ts b/Customizations/Layers/DrinkingWater.ts index 7808b24..7bdd632 100644 --- a/Customizations/Layers/DrinkingWater.ts +++ b/Customizations/Layers/DrinkingWater.ts @@ -10,7 +10,7 @@ export class DrinkingWater extends LayerDefinition { constructor() { super(); - this.name = "drinking_water"; + this.name = "drinking water"; this.icon = "./assets/bike/drinking_water.svg"; this.overpassFilter = new Or([ diff --git a/Customizations/Layouts/Cyclofix.ts b/Customizations/Layouts/Cyclofix.ts index b64cf18..dfc35d0 100644 --- a/Customizations/Layouts/Cyclofix.ts +++ b/Customizations/Layouts/Cyclofix.ts @@ -3,6 +3,7 @@ import BikeParkings from "../Layers/BikeParkings"; import BikeServices from "../Layers/BikeStations"; import {GhostBike} from "../Layers/GhostBike"; import {DrinkingWater} from "../Layers/DrinkingWater"; +import {BikeShop} from "../Layers/BikeShop"; export default class Cyclofix extends Layout { @@ -10,7 +11,7 @@ export default class Cyclofix extends Layout { super( "pomp", "Cyclofix bicycle infrastructure", - [ new BikeServices(), new BikeParkings(), new DrinkingWater()], + [new BikeServices(), new BikeShop(), new DrinkingWater(), new BikeParkings()], 16, 50.8465573, 4.3516970, diff --git a/Customizations/Questions/bike/StationPumpTools.ts b/Customizations/Questions/bike/StationPumpTools.ts index be81c8b..532f24c 100644 --- a/Customizations/Questions/bike/StationPumpTools.ts +++ b/Customizations/Questions/bike/StationPumpTools.ts @@ -6,7 +6,7 @@ export default class BikeStationPumpTools extends TagRenderingOptions { constructor() { super({ priority: 15, - question: "Which services are available at this bike station?", + question: "Which services are available here?", mappings: [ {k: new And([new Tag("service:bicycle:tools", "no"), new Tag("service:bicycle:pump", "yes")]), txt: "There is only a pump available."}, {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "no")]), txt: "There are only tools (screwdrivers, pliers...) available."}, diff --git a/assets/bike/broken_pump.svg b/assets/bike/broken_pump.svg new file mode 100644 index 0000000..38868a5 --- /dev/null +++ b/assets/bike/broken_pump.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/bike/drinking_water.svg b/assets/bike/drinking_water.svg new file mode 100644 index 0000000..4962afe --- /dev/null +++ b/assets/bike/drinking_water.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/bike/parking_old.svg b/assets/bike/parking_old.svg new file mode 100644 index 0000000..b095bc1 --- /dev/null +++ b/assets/bike/parking_old.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From c688c42258664bdebf0656b516dc2cd541846fe6 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 16:37:19 +0200 Subject: [PATCH 05/11] Fix bug with add buttons not always working --- Logic/StrayClickHandler.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Logic/StrayClickHandler.ts b/Logic/StrayClickHandler.ts index 85ccc9d..89acbcc 100644 --- a/Logic/StrayClickHandler.ts +++ b/Logic/StrayClickHandler.ts @@ -32,15 +32,16 @@ export class StrayClickHandler { self._lastMarker = L.marker([lastClick.lat, lastClick.lon]); const uiElement = uiToShow(); const popup = L.popup().setContent(uiElement.Render()); - uiElement.Activate(); uiElement.Update(); + uiElement.Activate(); self._lastMarker.addTo(map); self._lastMarker.bindPopup(popup).openPopup(); self._lastMarker.on("click", () => { leftMessage.setData(self._uiToShow); }); - + uiElement.Update(); + uiElement.Activate(); }); selectElement.addCallback(() => { From 51166268164860a8758eca2e4716194d88a4f749 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 16:55:16 +0200 Subject: [PATCH 06/11] Remove dutch hardcoded texts for now; add a simple bikeshop quest --- Customizations/Layers/BikeShop.ts | 81 +++++++++++++++++++++++++------ UI/CenterMessageBox.ts | 6 +-- UI/SearchAndGo.ts | 10 ++-- UI/SimpleAddUI.ts | 10 ++-- 4 files changed, 80 insertions(+), 27 deletions(-) diff --git a/Customizations/Layers/BikeShop.ts b/Customizations/Layers/BikeShop.ts index 8c68f24..714930e 100644 --- a/Customizations/Layers/BikeShop.ts +++ b/Customizations/Layers/BikeShop.ts @@ -1,32 +1,85 @@ import {TagRenderingOptions} from "../TagRendering"; import {LayerDefinition} from "../LayerDefinition"; import {Tag} from "../../Logic/TagsFilter"; +import L from "leaflet"; +import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload"; +import {NameQuestion} from "../Questions/NameQuestion"; + +export class BikeShop extends LayerDefinition { + + + const + sellsBikes = new Tag("service:bicycle:retail", "yes"); -export class BikeShop extends LayerDefinition{ - constructor() { super( { name: "bike shop or repair", - icon: "assets/bike/repair_shop.svg", - minzoom: 14, - overpassFilter: new Tag("shop","bicycle"), - newElementTags: [new Tag("shop","bicycle")] + icon: "assets/bike/repair_shop.svg", + minzoom: 14, + overpassFilter: new Tag("shop", "bicycle"), + newElementTags: [new Tag("shop", "bicycle")] } ); - + this.title = new TagRenderingOptions({ - mappings:[ - {k:new Tag("service:bicycle:retail","yes"), txt: "Bicycle shop"}, - {k:new Tag("service:bicycle:retail","no"), txt: "Bicycle repair"}, - {k:new Tag("service:bicycle:retail",""), txt: "Bicycle repair/shop"}, + mappings: [ + {k: this.sellsBikes, txt: "Bicycle shop"}, + {k: new Tag("service:bicycle:retail", "no"), txt: "Bicycle repair"}, + {k: new Tag("service:bicycle:retail", ""), txt: "Bicycle repair/shop"}, ] }) - this.style() - - + this.elementsToShow = [ + new ImageCarouselWithUploadConstructor(), + new TagRenderingOptions({ + question: "What is the name of this bicycle shop?", + freeform:{ + key:"name", + renderTemplate: "The name of this bicycle shop is {name}", + template: "The name of this bicycle shop is $$$" + } + }), + + new TagRenderingOptions({ + question: "Can one buy a new bike here?", + mappings: [ + {k: this.sellsBikes, txt: "Bikes are sold here"}, + {k: new Tag("service:bicycle:retail", "no"), txt: "No bikes can be bought here"}, + ] + }), + + + + new TagRenderingOptions({ + question: "Does this shop repair bicycles?", + mappings: [ + {k: this.sellsBikes, txt: "Bikes can be repaired here"}, + {k: new Tag("service:bicycle:retail", "no"), txt: "No bikes can be bought here"}, + ] + }), + ] + + + this.style = (tags) => { + let icon = "assets/bike/repair_shop.svg"; + + if (this.sellsBikes.matchesProperties(tags)) { + icon = "assets/bike/shop.svg"; + } + + return { + color: "#ff0000", + icon: L.icon({ + iconUrl: icon, + iconSize: [50, 50], + iconAnchor: [25, 50] + }) + } + } + + } diff --git a/UI/CenterMessageBox.ts b/UI/CenterMessageBox.ts index 8bbb7a0..a5cd8b6 100644 --- a/UI/CenterMessageBox.ts +++ b/UI/CenterMessageBox.ts @@ -40,11 +40,11 @@ export class CenterMessageBox extends UIElement { return this._centermessage.data; } if (this._queryRunning.data) { - return "Data wordt geladen..."; + return "Data is loading..."; } else if (this._zoomInMore.data) { - return "Zoom in om de data te zien en te bewerken"; + return "Zoom in more to see the data"; } - return "Klaar!"; + return "Done!"; } diff --git a/UI/SearchAndGo.ts b/UI/SearchAndGo.ts index 3916168..5bff841 100644 --- a/UI/SearchAndGo.ts +++ b/UI/SearchAndGo.ts @@ -8,8 +8,8 @@ import {Basemap} from "../Logic/Basemap"; export class SearchAndGo extends UIElement { - private _placeholder = new UIEventSource("Zoek naar een locatie...") - private _searchField = new TextField(this._placeholder); + private _placeholder = new UIEventSource("Search a location...") + private _searchField = new TextField(this._placeholder, undefined); private _foundEntries = new UIEventSource([]); private _map: Basemap; @@ -35,7 +35,7 @@ export class SearchAndGo extends UIElement { private RunSearch() { const searchString = this._searchField.value.data; this._searchField.Clear(); - this._placeholder.setData("Bezig met zoeken..."); + this._placeholder.setData("Searching..."); const self = this; Geocoding.Search(searchString, this._map, (result) => { @@ -50,10 +50,10 @@ export class SearchAndGo extends UIElement { [bb[1], bb[3]] ] self._map.map.fitBounds(bounds); - this._placeholder.setData("Zoek naar een locatie..."); + this._placeholder.setData("Search a location..."); }, () => { - this._placeholder.setData("Niets gevonden: er ging iets mis"); + this._placeholder.setData("Something went wrong. Try again."); }); } diff --git a/UI/SimpleAddUI.ts b/UI/SimpleAddUI.ts index b235437..34300d8 100644 --- a/UI/SimpleAddUI.ts +++ b/UI/SimpleAddUI.ts @@ -61,18 +61,18 @@ export class SimpleAddUI extends UIElement { } protected InnerRender(): string { - const header = "

Geen selectie

" + - "Je klikte ergens waar er nog geen gezochte data is.
"; + const header = "

No data here

" + + "You clicked somewhere where no data is known yet.
"; if (!this._userDetails.data.loggedIn) { - return header + "Gelieve je aan te melden om een nieuw punt toe te voegen" + return header + "Please log in to add a new point" } if (this._zoomlevel.data.zoom < 19) { - return header + "Zoom verder in om een element toe te voegen."; + return header + "Zoom in further to add a point."; } if (this._dataIsLoading.data) { - return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen"; + return header + "The data is still loading. Please wait a bit before you add a new point"; } var html = ""; From a528159bb7fee99bb8f523b1d0fd53dd70e08a77 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 16:57:43 +0200 Subject: [PATCH 07/11] Removed bit of stray dutch --- UI/SimpleAddUI.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UI/SimpleAddUI.ts b/UI/SimpleAddUI.ts index 34300d8..1d9f3d6 100644 --- a/UI/SimpleAddUI.ts +++ b/UI/SimpleAddUI.ts @@ -42,7 +42,7 @@ export class SimpleAddUI extends UIElement { //