diff --git a/Customizations/AllKnownLayouts.ts b/Customizations/AllKnownLayouts.ts index 8fea419..fe6b632 100644 --- a/Customizations/AllKnownLayouts.ts +++ b/Customizations/AllKnownLayouts.ts @@ -14,9 +14,10 @@ export class AllKnownLayouts { new Groen(), new GRB(), new BikePumpsLayout(), + new Bookcases() /*new Toilets(), new Statues(), - new Bookcases()*/ + */ ]; const allSets = {}; for (const layout of layouts) { diff --git a/Customizations/Layers/Bookcases.ts b/Customizations/Layers/Bookcases.ts index 81015f1..fcd621c 100644 --- a/Customizations/Layers/Bookcases.ts +++ b/Customizations/Layers/Bookcases.ts @@ -3,6 +3,7 @@ import L from "leaflet"; import {Tag} from "../../Logic/TagsFilter"; import {QuestionDefinition} from "../../Logic/Question"; import {TagRenderingOptions} from "../TagRendering"; +import {NameInline} from "../Questions/NameInline"; export class Bookcases extends LayerDefinition { @@ -10,21 +11,38 @@ export class Bookcases extends LayerDefinition { super(); this.name = "boekenkast"; - this.newElementTags = [new Tag( "amenity", "public_bookcase")]; + this.newElementTags = [new Tag("amenity", "public_bookcase")]; this.icon = "./assets/bookcase.svg"; - this.overpassFilter = new Tag("amenity","public_bookcase"); + this.overpassFilter = new Tag("amenity", "public_bookcase"); this.minzoom = 13; + this.title = new NameInline("ruilboekenkastje"); + this.elementsToShow = [ - this.questions = [ + new TagRenderingOptions( + { + question: "Hoeveel boeken passen in dit boekenruilkastje?", + freeform: { + renderTemplate: "Er passen {capacity} boeken in dit boekenruilkastje", + template: "Er passen $$$ boeken in dit boekenruilkastje", + key: "capacity", + placeholder: "aantal" + }, + priority: 15 + } + ) + + ]; + + /* this.questions = [ QuestionDefinition.noNameOrNameQuestion("Wat is de naam van dit boekenruilkastje?", "Dit boekenruilkastje heeft niet echt een naam", 20), - QuestionDefinition.textQuestion("Hoeveel boeken kunnen er in?", "capacity", 15), QuestionDefinition.textQuestion("Heeft dit boekenkastje een peter, meter of voogd?", "operator", 10), - // QuestionDefinition.textQuestion("Wie kunnen we (per email) contacteren voor dit boekenruilkastje?", "email", 5), + // QuestionDefinition.textQuestion("Wie kunnen we (per email) contacteren voor dit boekenruilkastje?", "email", 5), - ] + ] ; + */ this.style = function (tags) { return { @@ -36,6 +54,7 @@ export class Bookcases extends LayerDefinition { }; } + /* this.elementsToShow = [ @@ -58,7 +77,7 @@ export class Bookcases extends LayerDefinition { new TagMappingOptions({key: "description", template: "Extra beschrijving:

{description}

"}), ] - ; + ;*/ } diff --git a/Customizations/Layers/Park.ts b/Customizations/Layers/Park.ts index 3736435..0ad8801 100644 --- a/Customizations/Layers/Park.ts +++ b/Customizations/Layers/Park.ts @@ -22,7 +22,29 @@ export class Park extends LayerDefinition { this.minzoom = 13; this.style = this.generateStyleFunction(); this.title = new NameInline("park"); - this.elementsToShow = [new NameQuestion()]; + this.elementsToShow = [new NameQuestion(), + new TagRenderingOptions({ + question: "Is dit park publiek toegankelijk?", + mappings: [ + {k: new Tag("access", "yes"), txt: "Publiek toegankelijk"}, + {k: new Tag("access", ""), txt: "Publiek toegankelijk"}, + {k: new Tag("access", "no"), txt: "Niet publiek toegankelijk"}, + {k: new Tag("access", "guided"), txt: "Enkel met een gids of tijdens activiteiten"}, + ] + }), + new TagRenderingOptions({ + question: "Wie beheert dit park?", + freeform: { + key: "operator", + renderTemplate: "Dit park wordt beheerd door {operator}", + template: "$$$", + }, + mappings: [{ + k: null, txt: "De gemeente beheert dit park" + }] + }) + + ]; } diff --git a/Customizations/Layouts/Groen.ts b/Customizations/Layouts/Groen.ts index 2432869..f27da74 100644 --- a/Customizations/Layouts/Groen.ts +++ b/Customizations/Layouts/Groen.ts @@ -6,7 +6,7 @@ import {Layout} from "../Layout"; export class Groen extends Layout { constructor() { - super("groen", + super("buurtnatuur", "Buurtnatuur", [new NatureReserves(), new Park(), new Bos()], 10, diff --git a/Customizations/TagRendering.ts b/Customizations/TagRendering.ts index 8c11961..397e0a1 100644 --- a/Customizations/TagRendering.ts +++ b/Customizations/TagRendering.ts @@ -73,7 +73,7 @@ export class TagRenderingOptions { const tagsKV = TagUtils.proprtiesToKV(tags); for (const oneOnOneElement of this.options.mappings) { - if (oneOnOneElement.k.matches(tagsKV)) { + if (oneOnOneElement.k === null || oneOnOneElement.k.matches(tagsKV)) { return false; } } @@ -148,9 +148,10 @@ export class TagRendering extends UIElement { this.elementPriority = options.priority ?? 0; // Prepare the choices for the Radio buttons - let i = 0; const choices: UIElement[] = []; - + + const usedChoices: string [] = []; + for (const choice of options.mappings ?? []) { if (choice.k === null) { this._mapping.push(choice); @@ -159,18 +160,24 @@ export class TagRendering extends UIElement { let choiceSubbed = choice; if (choice.substitute) { choiceSubbed = { - k : choice.k.substituteValues( + k: choice.k.substituteValues( options.tagsPreprocessor(this._source.data)), - txt : this.ApplyTemplate(choice.txt), + txt: this.ApplyTemplate(choice.txt), substitute: false, priority: choice.priority } } - - choices.push(new FixedUiElement(choiceSubbed.txt)); - this._mapping.push(choiceSubbed); - i++; + + const txt = choiceSubbed.txt + // Choices is what is shown in the radio buttons + if (usedChoices.indexOf(txt) < 0) { + + choices.push(new FixedUiElement(txt)); + usedChoices.push(txt); + // This is used to convert the radio button index into tags needed to add + this._mapping.push(choiceSubbed); + } } // Map radiobutton choice and textfield answer onto tagfilter. That tagfilter will be pushed into the changes later on @@ -200,6 +207,7 @@ export class TagRendering extends UIElement { // Prepare the actual input element -> pick an appropriate implementation let inputElement: UIInputElement; + if (this._freeform !== undefined && this._mapping !== undefined) { // Radio buttons with 'other' inputElement = new UIRadioButtonWithOther( @@ -210,14 +218,15 @@ export class TagRendering extends UIElement { pickString ); this._questionElement = inputElement; - } else if (this._mapping !== undefined) { + } else if (this._mapping !== [] && this._mapping.length > 0) { // This is a classic radio selection element - inputElement = new UIRadioButton(new UIEventSource(choices), pickChoice) + inputElement = new UIRadioButton(new UIEventSource(choices), pickChoice, false) this._questionElement = inputElement; } else if (this._freeform !== undefined) { this._textField = new TextField(new UIEventSource(this._freeform.placeholder), pickString); inputElement = this._textField; - this._questionElement = new FixedUiElement(this._freeform.template.replace("$$$", inputElement.Render())) + this._questionElement = new FixedUiElement( + "
" + this._freeform.template.replace("$$$", inputElement.Render()) + "
") } else { throw "Invalid questionRendering, expected at least choices or a freeform" } @@ -234,6 +243,7 @@ export class TagRendering extends UIElement { const cancel = () => { self._questionSkipped.setData(true); self._editMode.setData(false); + self._source.ping(); // Send a ping upstream to render the next question } // Setup the save button and it's action @@ -352,7 +362,7 @@ export class TagRendering extends UIElement { return "
" + - this._question + + "" + this._question + "" + (this._question !== "" ? "
" : "") + this._questionElement.Render() + this._skipButton.Render() + diff --git a/UI/Base/UIRadioButton.ts b/UI/Base/UIRadioButton.ts index d368dc6..2413073 100644 --- a/UI/Base/UIRadioButton.ts +++ b/UI/Base/UIRadioButton.ts @@ -74,9 +74,11 @@ export class UIRadioButton extends UIInputElement { if (this.SelectedElementIndex.data == null) { if (this._selectFirstAsDefault) { const el = document.getElementById(this.IdFor(0)); - // @ts-ignore - el.checked = true; - checkButtons(); + if (el) { + // @ts-ignore + el.checked = true; + checkButtons(); + } } } else { diff --git a/index.css b/index.css index f95ddb0..6d4f2f2 100644 --- a/index.css +++ b/index.css @@ -8,6 +8,10 @@ body { font-family: 'Helvetica Neue', Arial, sans-serif; } +form { + display: inline; +} + #leafletDiv { height: 100%; } @@ -670,6 +674,11 @@ body { } +.question-text{ + font-size: larger; + font-weight: bold; +} + .answer { display: inline-block; margin: 0.1em; diff --git a/index.ts b/index.ts index d9bb317..d05afba 100644 --- a/index.ts +++ b/index.ts @@ -38,7 +38,7 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") { // ----------------- SELECT THE RIGHT QUESTSET ----------------- -let defaultQuest = "groen" +let defaultQuest = "buurtnatuur" if (window.location.search) { const params = window.location.search.substr(1).split("&"); const paramDict: any = {}; @@ -88,7 +88,7 @@ const saveTimeout = 30000; // After this many milliseconds without changes, save const allElements = new ElementStorage(); const osmConnection = new OsmConnection(dryRun); const changes = new Changes( - "Beantwoorden van vragen met MapComplete voor vragenset #" + questSetToRender.name, + "Beantwoorden van vragen met #MapComplete voor vragenset #" + questSetToRender.name, osmConnection, allElements); const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement( locationControl.map((location) => { diff --git a/test.ts b/test.ts index 9079435..c44fb88 100644 --- a/test.ts +++ b/test.ts @@ -5,17 +5,3 @@ import {ElementStorage} from "./Logic/ElementStorage"; import {WikipediaLink} from "./Customizations/Questions/WikipediaLink"; import {OsmLink} from "./Customizations/Questions/OsmLink"; -const tags = {name: "Test", - wikipedia: "nl:Pieter", - id: "node/-1"}; -const tagsES = new UIEventSource(tags); - -const login = new OsmConnection(true); - -const allElements = new ElementStorage(); -allElements.addElementById(tags.id, tagsES); - -const changes = new Changes("Test", login, allElements) - - -new OsmLink(tagsES, changes).AttachTo("maindiv"); \ No newline at end of file