Use a dropdown if there are a lot of options to choose from in tagrenderingquestion
This commit is contained in:
parent
1609c63f3b
commit
55f03c3de7
2 changed files with 59 additions and 20 deletions
|
@ -23,6 +23,7 @@ import {Tag} from "../../Logic/Tags/Tag";
|
|||
import {And} from "../../Logic/Tags/And";
|
||||
import {TagUtils} from "../../Logic/Tags/TagUtils";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
import {DropDown} from "../Input/DropDown";
|
||||
|
||||
/**
|
||||
* Shows the question element.
|
||||
|
@ -71,7 +72,7 @@ export default class TagRenderingQuestion extends UIElement {
|
|||
}
|
||||
|
||||
|
||||
this._saveButton = new SaveButton(this._inputElement.GetValue(),
|
||||
this._saveButton = new SaveButton(this._inputElement.GetValue(),
|
||||
State.state?.osmConnection)
|
||||
.onClick(save)
|
||||
|
||||
|
@ -94,9 +95,8 @@ export default class TagRenderingQuestion extends UIElement {
|
|||
}
|
||||
)
|
||||
).SetClass("block break-all")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
InnerRender() {
|
||||
|
@ -111,24 +111,58 @@ export default class TagRenderingQuestion extends UIElement {
|
|||
}
|
||||
|
||||
private GenerateInputElement(): InputElement<TagsFilter> {
|
||||
const ff = this.GenerateFreeform();
|
||||
const self = this;
|
||||
let mappings =
|
||||
(this._configuration.mappings ?? []).map(mapping => self.GenerateMappingElement(mapping));
|
||||
mappings = Utils.NoNull(mappings);
|
||||
let inputEls: InputElement<TagsFilter>[];
|
||||
|
||||
if (mappings.length == 0) {
|
||||
const mappings = (this._configuration.mappings??[])
|
||||
.filter( mapping => {
|
||||
if(mapping.hideInAnswer === true){
|
||||
return false;
|
||||
}
|
||||
if (typeof (mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(this._tags.data)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
|
||||
|
||||
let allIfNots: TagsFilter[] = Utils.NoNull(this._configuration.mappings?.map(m => m.ifnot) ?? [] );
|
||||
const ff = this.GenerateFreeform();
|
||||
const hasImages = mappings.filter(mapping => mapping.then.ExtractImages().length > 0).length > 0
|
||||
|
||||
if (mappings.length < 8 || this._configuration.multiAnswer || hasImages) {
|
||||
inputEls = (mappings ?? []).map(mapping => self.GenerateMappingElement(mapping, allIfNots));
|
||||
inputEls = Utils.NoNull(inputEls);
|
||||
} else {
|
||||
const dropdown: InputElement<TagsFilter> = new DropDown("",
|
||||
mappings.map(mapping => {
|
||||
return {
|
||||
value: new And([mapping.if, ...allIfNots]),
|
||||
shown: Translations.WT(mapping.then).Clone()
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
if (ff == undefined) {
|
||||
return dropdown;
|
||||
} else {
|
||||
inputEls = [dropdown]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (inputEls.length == 0) {
|
||||
return ff;
|
||||
}
|
||||
|
||||
if (ff) {
|
||||
mappings.push(ff);
|
||||
inputEls.push(ff);
|
||||
}
|
||||
|
||||
if (this._configuration.multiAnswer) {
|
||||
return this.GenerateMultiAnswer(mappings, ff, this._configuration.mappings.map(mp => mp.ifnot))
|
||||
return this.GenerateMultiAnswer(inputEls, ff, this._configuration.mappings.map(mp => mp.ifnot))
|
||||
} else {
|
||||
return new RadioButton(mappings, false)
|
||||
return new RadioButton(inputEls, false)
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -237,16 +271,16 @@ export default class TagRenderingQuestion extends UIElement {
|
|||
if: TagsFilter,
|
||||
then: Translation,
|
||||
hideInAnswer: boolean | TagsFilter
|
||||
}): InputElement<TagsFilter> {
|
||||
if (mapping.hideInAnswer === true) {
|
||||
return undefined;
|
||||
}
|
||||
if (typeof (mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(this._tags.data)) {
|
||||
return undefined;
|
||||
}, ifNot?: TagsFilter[]): InputElement<TagsFilter> {
|
||||
|
||||
let tagging = mapping.if;
|
||||
if (ifNot.length > 0) {
|
||||
tagging = new And([tagging, ...ifNot])
|
||||
}
|
||||
|
||||
return new FixedInputElement(
|
||||
new SubstitutedTranslation(mapping.then, this._tags),
|
||||
mapping.if,
|
||||
tagging,
|
||||
(t0, t1) => t1.isEquivalent(t0));
|
||||
}
|
||||
|
||||
|
|
|
@ -159,7 +159,12 @@ export default class ShowDataLayer {
|
|||
return;
|
||||
}
|
||||
if (selected.properties.id === feature.properties.id) {
|
||||
leafletLayer.openPopup()
|
||||
// A small sanity check to prevent infinite loops:
|
||||
// If a feature is rendered both as way and as point, opening one popup might trigger the other to open, which might trigger the one to open again
|
||||
if(selected.geometry.type === feature.geometry.type){
|
||||
leafletLayer.openPopup()
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in a new issue