Fix rendering of multianswers, other small bug fixes

This commit is contained in:
pietervdvn 2021-03-13 17:25:44 +01:00
parent 46254434db
commit ad08a55517
13 changed files with 68 additions and 62 deletions

1
.gitignore vendored
View file

@ -11,3 +11,4 @@ assets/generated/*
.parcel-cache .parcel-cache
Docs/Tools/stats.*.json Docs/Tools/stats.*.json
Docs/Tools/stats.csv Docs/Tools/stats.csv

View file

@ -1,4 +1,4 @@
import {And, TagsFilter} from "../../Logic/Tags"; import {And, TagsFilter, TagUtils} from "../../Logic/Tags";
import {TagRenderingConfigJson} from "./TagRenderingConfigJson"; import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
import Translations from "../../UI/i18n/Translations"; import Translations from "../../UI/i18n/Translations";
import {FromJSON} from "./FromJSON"; import {FromJSON} from "./FromJSON";
@ -152,6 +152,40 @@ export default class TagRenderingConfig {
} }
} }
/**
* Returns true if it is known or not shown, false if the question should be asked
* @constructor
*/
public IsKnown(tags: any): boolean {
if (this.condition &&
!this.condition.matchesProperties(tags)) {
// Filtered away by the condition
return true;
}
if(this.multiAnswer){
for (const m of this.mappings) {
if(TagUtils.MatchesMultiAnswer(m.if, tags)){
return true;
}
}
const free = this.freeform?.key
if(free !== undefined){
return tags[free] !== undefined
}
return false
}
if (this.GetRenderValue(tags) !== undefined) {
// This value is known and can be rendered
return true;
}
return false;
}
/** /**
* Gets the correct rendering value (or undefined if not known) * Gets the correct rendering value (or undefined if not known)
* @constructor * @constructor

View file

@ -257,7 +257,7 @@ export class InitUiElements {
isOpened.setData(false); isOpened.setData(false);
} }
}) })
isOpened.setData(true) isOpened.setData(Hash.hash.data === undefined)
} }

View file

@ -1,5 +1,4 @@
import {UIEventSource} from "../UIEventSource"; import {UIEventSource} from "../UIEventSource";
import {UIElement} from "../../UI/UIElement";
import FeatureSource from "../FeatureSource/FeatureSource"; import FeatureSource from "../FeatureSource/FeatureSource";
/** /**
@ -18,9 +17,7 @@ export default class SelectedFeatureHandler {
this._featureSource = featureSource; this._featureSource = featureSource;
const self = this; const self = this;
hash.addCallback(h => { hash.addCallback(h => {
console.log("SelectedFeatureHandler: hash is now ", h)
if (h === undefined || h === "") { if (h === undefined || h === "") {
console.log("Deselecting...")
selectedFeature.setData(undefined); selectedFeature.setData(undefined);
}else{ }else{
self.selectFeature(); self.selectFeature();
@ -30,7 +27,10 @@ export default class SelectedFeatureHandler {
featureSource.features.addCallback(_ => self.selectFeature()); featureSource.features.addCallback(_ => self.selectFeature());
selectedFeature.addCallback(feature => { selectedFeature.addCallback(feature => {
hash.setData(feature?.properties?.id ?? ""); const h = feature?.properties?.id;
if(h !== undefined){
hash.setData(h)
}
}) })
this.selectFeature(); this.selectFeature();
@ -51,7 +51,6 @@ export default class SelectedFeatureHandler {
if(hash === undefined || hash === "" || hash === "#"){ if(hash === undefined || hash === "" || hash === "#"){
return; return;
} }
console.log("Selecting a feature from the hash...")
for (const feature of features) { for (const feature of features) {
const id = feature.feature?.properties?.id; const id = feature.feature?.properties?.id;
if(id === hash){ if(id === hash){

View file

@ -125,7 +125,7 @@ export default class MetaTagging {
tags["_isOpen:oldvalue"] = tags.opening_hours tags["_isOpen:oldvalue"] = tags.opening_hours
window.setTimeout( window.setTimeout(
() => { () => {
console.log("Updating the _isOpen tag for ", tags.id); console.log("Updating the _isOpen tag for ", tags.id, ", it's timer expired after", timeout);
updateTags(); updateTags();
}, },
timeout timeout

View file

@ -43,16 +43,14 @@ export default class Hash {
window.onhashchange = () => { window.onhashchange = () => {
let newValue = window.location.hash.substr(1); let newValue = window.location.hash.substr(1);
console.log("The hash is now:", newValue)
if (newValue === "") { if (newValue === "") {
newValue = undefined; newValue = undefined;
} }
hash.setData(newValue) hash.setData(newValue)
} }
window.addEventListener('popstate', e => { window.addEventListener('popstate', _ => {
let newValue = window.location.hash.substr(1); let newValue = window.location.hash.substr(1);
console.log("Popstate: the hash is now:", newValue)
if (newValue === "") { if (newValue === "") {
newValue = undefined; newValue = undefined;
} }

View file

@ -2,7 +2,7 @@ import { Utils } from "../Utils";
export default class Constants { export default class Constants {
public static vNumber = "0.5.8"; public static vNumber = "0.5.10";
// The user journey states thresholds when a new feature gets unlocked // The user journey states thresholds when a new feature gets unlocked
public static userJourney = { public static userJourney = {

View file

@ -83,7 +83,7 @@ export default class ScrollableFullScreen extends UIElement {
private static clear() { private static clear() {
ScrollableFullScreen.empty.AttachTo("fullscreen") ScrollableFullScreen.empty.AttachTo("fullscreen")
const fs = document.getElementById("fullscreen"); const fs = document.getElementById("fullscreen");
ScrollableFullScreen._currentlyOpen.isShown.setData(false); ScrollableFullScreen._currentlyOpen?.isShown?.setData(false);
fs.classList.add("hidden") fs.classList.add("hidden")
Hash.hash.setData(undefined); Hash.hash.setData(undefined);
} }

View file

@ -53,13 +53,8 @@ export default class EditableTagRendering extends UIElement {
if (this._editMode.data) { if (this._editMode.data) {
return this._question.Render(); return this._question.Render();
} }
if (this._configuration.multiAnswer) { if(!this._configuration.IsKnown(this._tags.data)){
const atLeastOneMatch = this._configuration.mappings.some(mp =>TagUtils.MatchesMultiAnswer(mp.if, this._tags.data)); return ""
if (!atLeastOneMatch) {
return "";
}
} else if (this._configuration.GetRenderValue(this._tags.data) === undefined) {
return "";
} }
return new Combine([this._answer, return new Combine([this._answer,

View file

@ -56,24 +56,19 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
} }
let questionBoxIsUsed = false; let questionBoxIsUsed = false;
const renderings = layerConfig.tagRenderings.map(tr => { const renderings = layerConfig.tagRenderings.map((tr,i) => {
if (tr.question === null) { if (tr.question === null) {
// This is the question box! // This is the question box!
questionBoxIsUsed = true; questionBoxIsUsed = true;
return questionBox; return questionBox;
} }
return new EditableTagRendering(tags, tr); return new EditableTagRendering(tags, tr);
}); });
if (!questionBoxIsUsed) { if (!questionBoxIsUsed) {
renderings.push(questionBox); renderings.push(questionBox);
} }
const tail = new Combine([]).SetClass("only-on-mobile");
return new Combine([ return new Combine(renderings).SetClass("block")
...renderings,
tail.SetClass("featureinfobox-tail")
]
).SetClass("block")
} }

View file

@ -46,37 +46,11 @@ export default class QuestionBox extends UIElement {
}) })
} }
/**
* Returns true if it is known or not shown, false if the question should be asked
* @constructor
*/
IsKnown(tagRendering: TagRenderingConfig): boolean {
if (tagRendering.condition &&
!tagRendering.condition.matchesProperties(this._tags.data)) {
// Filtered away by the condition
return true;
}
if(tagRendering.multiAnswer){
for (const m of tagRendering.mappings) {
if(TagUtils.MatchesMultiAnswer(m.if, this._tags.data)){
return true;
}
}
}
if (tagRendering.GetRenderValue(this._tags.data) !== undefined) {
// This value is known and can be rendered
return true;
}
return false;
}
InnerRender(): string { InnerRender(): string {
for (let i = 0; i < this._tagRenderingQuestions.length; i++) { for (let i = 0; i < this._tagRenderingQuestions.length; i++) {
let tagRendering = this._tagRenderings[i]; let tagRendering = this._tagRenderings[i];
if(this.IsKnown(tagRendering)){ if(tagRendering.IsKnown(this._tags.data)){
continue; continue;
} }

View file

@ -5,6 +5,7 @@ import {Utils} from "../../Utils";
import Combine from "../Base/Combine"; import Combine from "../Base/Combine";
import {TagUtils} from "../../Logic/Tags"; import {TagUtils} from "../../Logic/Tags";
import {SubstitutedTranslation} from "../SubstitutedTranslation"; import {SubstitutedTranslation} from "../SubstitutedTranslation";
import {Translation} from "../i18n/Translation";
/*** /***
* Displays the correct value for a known tagrendering * Displays the correct value for a known tagrendering
@ -43,7 +44,7 @@ export default class TagRenderingAnswer extends UIElement {
// The render value doesn't work well with multi-answers (checkboxes), so we have to check for them manually // The render value doesn't work well with multi-answers (checkboxes), so we have to check for them manually
if (this._configuration.multiAnswer) { if (this._configuration.multiAnswer) {
const applicableThens = Utils.NoNull(this._configuration.mappings.map(mapping => { const applicableThens: Translation[] = Utils.NoNull(this._configuration.mappings.map(mapping => {
if (mapping.if === undefined) { if (mapping.if === undefined) {
return mapping.then; return mapping.then;
} }
@ -52,12 +53,20 @@ export default class TagRenderingAnswer extends UIElement {
} }
return undefined; return undefined;
})) }))
if (applicableThens.length >= 0) {
if (applicableThens.length === 1) { if (this._configuration.freeform !== undefined && tags[this._configuration.freeform.key] !== undefined) {
this._content = applicableThens[0]; applicableThens.push(this._configuration.render)
}
const self = this
const valuesToRender: UIElement[] = applicableThens.map(tr => SubstitutedTranslation.construct(tr, self._tags))
if (valuesToRender.length >= 0) {
if (valuesToRender.length === 1) {
this._content = valuesToRender[0];
} else { } else {
this._content = new Combine(["<ul>", this._content = new Combine(["<ul>",
...applicableThens.map(tr => new Combine(["<li>", tr, "</li>"])) ...valuesToRender.map(tr => new Combine(["<li>", tr, "</li>"]))
, ,
"</ul>" "</ul>"
]) ])
@ -66,13 +75,13 @@ export default class TagRenderingAnswer extends UIElement {
return this._content.SetClass(this._contentClass).SetStyle(this._contentStyle).Render(); return this._content.SetClass(this._contentClass).SetStyle(this._contentStyle).Render();
} }
} }
const tr = this._configuration.GetRenderValue(tags); const tr = this._configuration.GetRenderValue(tags);
if (tr !== undefined) { if (tr !== undefined) {
this._content = SubstitutedTranslation.construct(tr, this._tags); this._content = SubstitutedTranslation.construct(tr, this._tags);
return this._content.SetClass(this._contentClass).SetStyle(this._contentStyle).Render(); return this._content.SetClass(this._contentClass).SetStyle(this._contentStyle).Render();
} }
return ""; return "";
} }

View file

@ -19,6 +19,7 @@
"build": "rm -rf dist/ && npm run generate && parcel build --public-url ./ *.html assets/** assets/**/** assets/**/**/** vendor/* vendor/*/*", "build": "rm -rf dist/ && npm run generate && parcel build --public-url ./ *.html assets/** assets/**/** assets/**/**/** vendor/* vendor/*/*",
"prepare-deploy": "npm run test && npm run generate:editor-layer-index && npm run generate:layouts && npm run generate && npm run build && rm -rf .cache", "prepare-deploy": "npm run test && npm run generate:editor-layer-index && npm run generate:layouts && npm run generate && npm run build && rm -rf .cache",
"deploy:staging": "npm run prepare-deploy && rm -rf /home/pietervdvn/git/pietervdvn.github.io/Staging/* && cp -r dist/* /home/pietervdvn/git/pietervdvn.github.io/Staging/ && cd /home/pietervdvn/git/pietervdvn.github.io/ && git add * && git commit -m 'New MapComplete Version' && git push && cd - && npm run clean", "deploy:staging": "npm run prepare-deploy && rm -rf /home/pietervdvn/git/pietervdvn.github.io/Staging/* && cp -r dist/* /home/pietervdvn/git/pietervdvn.github.io/Staging/ && cd /home/pietervdvn/git/pietervdvn.github.io/ && git add * && git commit -m 'New MapComplete Version' && git push && cd - && npm run clean",
"deploy:pietervdvn": "npm run prepare-deploy && rm -rf /home/pietervdvn/git/pietervdvn.github.io/MapComplete/* && cp -r dist/* /home/pietervdvn/git/pietervdvn.github.io/MapComplete/ && cd /home/pietervdvn/git/pietervdvn.github.io/ && git add * && git commit -m 'New MapComplete Version' && git push && cd - && npm run clean",
"deploy:production": "rm -rf ./assets/generated && npm run prepare-deploy && npm run optimize-images && rm -rf /home/pietervdvn/git/mapcomplete.github.io/* && cp -r dist/* /home/pietervdvn/git/mapcomplete.github.io/ && cd /home/pietervdvn/git/mapcomplete.github.io/ && echo \"mapcomplete.osm.be\" > CNAME && git add * && git commit -m 'New MapComplete Version' && git push && cd - && npm run clean", "deploy:production": "rm -rf ./assets/generated && npm run prepare-deploy && npm run optimize-images && rm -rf /home/pietervdvn/git/mapcomplete.github.io/* && cp -r dist/* /home/pietervdvn/git/mapcomplete.github.io/ && cd /home/pietervdvn/git/mapcomplete.github.io/ && echo \"mapcomplete.osm.be\" > CNAME && git add * && git commit -m 'New MapComplete Version' && git push && cd - && npm run clean",
"clean": "rm -rf .cache/ && (find *.html | grep -v \"\\(index\\|land\\|test\\|preferences\\|customGenerator\\).html\" | xargs rm) && rm *.webmanifest" "clean": "rm -rf .cache/ && (find *.html | grep -v \"\\(index\\|land\\|test\\|preferences\\|customGenerator\\).html\" | xargs rm) && rm *.webmanifest"
}, },