mapcomplete/UI/Popup/TagRenderingQuestion.ts

300 lines
11 KiB
TypeScript
Raw Normal View History

2020-10-27 01:01:34 +01:00
import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import {InputElement} from "../Input/InputElement";
import {And, Tag, TagsFilter, TagUtils} from "../../Logic/Tags";
import ValidatedTextField from "../Input/ValidatedTextField";
import {FixedInputElement} from "../Input/FixedInputElement";
import {RadioButton} from "../Input/RadioButton";
import {Utils} from "../../Utils";
import CheckBoxes from "../Input/Checkboxes";
import InputElementMap from "../Input/InputElementMap";
import {SaveButton} from "./SaveButton";
import State from "../../State";
import {Changes} from "../../Logic/Osm/Changes";
import {VariableUiElement} from "../Base/VariableUIElement";
import Translations from "../i18n/Translations";
import {FixedUiElement} from "../Base/FixedUiElement";
2020-11-06 01:58:26 +01:00
import {Translation} from "../i18n/Translation";
2021-01-02 19:09:49 +01:00
import Constants from "../../Models/Constants";
2021-02-05 16:32:37 +01:00
import {SubstitutedTranslation} from "../SubstitutedTranslation";
2020-10-27 01:01:34 +01:00
/**
* Shows the question element.
* Note that the value _migh_ already be known, e.g. when selected or when changing the value
*/
export default class TagRenderingQuestion extends UIElement {
private readonly _tags: UIEventSource<any>;
2020-10-27 01:01:34 +01:00
private _configuration: TagRenderingConfig;
private _saveButton: UIElement;
private _inputElement: InputElement<TagsFilter>;
private _cancelButton: UIElement;
private _appliedTags: UIElement;
private _question: UIElement;
constructor(tags: UIEventSource<any>,
configuration: TagRenderingConfig,
afterSave?: () => void,
2021-03-12 13:48:49 +01:00
cancelButton?: UIElement
) {
2020-10-27 01:01:34 +01:00
super(tags);
this._tags = tags;
this._configuration = configuration;
this._cancelButton = cancelButton;
this._question = SubstitutedTranslation.construct(this._configuration.question, tags)
2020-10-27 01:01:34 +01:00
.SetClass("question-text");
if (configuration === undefined) {
throw "A question is needed for a question visualization"
}
this._inputElement = this.GenerateInputElement()
const self = this;
const save = () => {
console.log("Save clicked!")
2020-10-27 01:01:34 +01:00
const selection = self._inputElement.GetValue().data;
console.log("Selection is", selection)
2020-10-27 01:01:34 +01:00
if (selection) {
(State.state?.changes ?? new Changes())
.addTag(tags.data.id, selection, tags);
}
if (afterSave) {
afterSave();
}
}
this._saveButton = new SaveButton(this._inputElement.GetValue(), State.state?.osmConnection)
2020-10-27 01:01:34 +01:00
.onClick(save)
this._appliedTags = new VariableUiElement(
self._inputElement.GetValue().map(
(tags: TagsFilter) => {
const csCount = State.state?.osmConnection?.userDetails?.data?.csCount ?? 1000;
2021-01-02 19:09:49 +01:00
if (csCount < Constants.userJourney.tagsVisibleAt) {
2020-10-27 01:01:34 +01:00
return "";
}
if (tags === undefined) {
return Translations.t.general.noTagsSelected.SetClass("subtle").Render();
}
2021-01-02 19:09:49 +01:00
if (csCount < Constants.userJourney.tagsVisibleAndWikiLinked) {
2020-10-27 01:01:34 +01:00
const tagsStr = tags.asHumanString(false, true);
return new FixedUiElement(tagsStr).SetClass("subtle").Render();
}
return tags.asHumanString(true, true);
}
)
2021-01-25 03:12:09 +01:00
).SetClass("block")
2020-10-27 01:01:34 +01:00
}
private GenerateInputElement(): InputElement<TagsFilter> {
2020-10-27 01:01:34 +01:00
const ff = this.GenerateFreeform();
const self = this;
let mappings =
(this._configuration.mappings ?? []).map(mapping => self.GenerateMappingElement(mapping));
mappings = Utils.NoNull(mappings);
if (mappings.length == 0) {
return ff;
}
if(ff){
mappings.push(ff);
}
2020-10-27 01:01:34 +01:00
if (this._configuration.multiAnswer) {
return this.GenerateMultiAnswer(mappings, ff, this._configuration.mappings.map(mp => mp.ifnot))
2020-10-27 01:01:34 +01:00
} else {
return new RadioButton(mappings, false)
}
}
private GenerateMultiAnswer(elements: InputElement<TagsFilter>[], freeformField: InputElement<TagsFilter>, ifNotSelected: TagsFilter[]): InputElement<TagsFilter> {
2020-10-27 01:01:34 +01:00
const checkBoxes = new CheckBoxes(elements);
const inputEl = new InputElementMap<number[], TagsFilter>(
checkBoxes,
(t0, t1) => {
return t0?.isEquivalent(t1) ?? false
},
(indices) => {
if (indices.length === 0) {
return undefined;
}
const tags: TagsFilter[] = indices.map(i => elements[i].GetValue().data);
const oppositeTags: TagsFilter[] = [];
for (let i = 0; i < ifNotSelected.length; i++) {
if(indices.indexOf(i) >= 0){
continue;
}
const notSelected = ifNotSelected[i];
if(notSelected === undefined){
continue;
}
oppositeTags.push(notSelected);
}
tags.push(TagUtils.FlattenMultiAnswer(oppositeTags));
return TagUtils.FlattenMultiAnswer(tags);
2020-10-27 01:01:34 +01:00
},
(tags: TagsFilter) => {
2020-10-27 14:13:37 +01:00
// {key --> values[]}
const presentTags = TagUtils.SplitKeys([tags]);
2020-10-27 01:01:34 +01:00
const indices: number[] = []
2020-10-27 14:13:37 +01:00
// We also collect the values that have to be added to the freeform field
let freeformExtras: string[] = []
if (this._configuration.freeform?.key) {
freeformExtras = [...(presentTags[this._configuration.freeform.key] ?? [])]
}
2020-10-27 01:01:34 +01:00
2020-10-27 14:13:37 +01:00
for (let j = 0; j < elements.length; j++) {
const inputElement = elements[j];
if (inputElement === freeformField) {
continue;
}
const val = inputElement.GetValue();
const neededTags = TagUtils.SplitKeys([val.data]);
// if every 'neededKeys'-value is present in presentKeys, we have a match and enable the index
if (TagUtils.AllKeysAreContained(presentTags, neededTags)) {
indices.push(j);
if (freeformExtras.length > 0) {
const freeformsToRemove: string[] = (neededTags[this._configuration.freeform.key] ?? []);
for (const toRm of freeformsToRemove) {
const i = freeformExtras.indexOf(toRm);
if (i >= 0) {
freeformExtras.splice(i, 1);
}
}
2020-10-27 01:01:34 +01:00
}
}
2020-10-27 14:13:37 +01:00
}
if (freeformField) {
if (freeformExtras.length > 0) {
freeformField.GetValue().setData(new Tag(this._configuration.freeform.key, freeformExtras.join(";")));
indices.push(elements.indexOf(freeformField))
2020-10-27 14:13:37 +01:00
} else {
freeformField.GetValue().setData(undefined);
}
2020-10-27 01:01:34 +01:00
}
2020-10-27 14:13:37 +01:00
2020-10-27 01:01:34 +01:00
return indices;
},
elements.map(el => el.GetValue())
);
freeformField?.GetValue()?.addCallbackAndRun(value => {
// The list of indices of the selected elements
2020-10-27 01:01:34 +01:00
const es = checkBoxes.GetValue();
const i = elements.length - 1;
// The actual index of the freeform-element
2020-10-27 01:01:34 +01:00
const index = es.data.indexOf(i);
if (value === undefined) {
// No data is set in the freeform text field; so we delete the checkmark if it is selected
2020-10-27 01:01:34 +01:00
if (index >= 0) {
es.data.splice(index, 1);
es.ping();
}
} else if (index < 0) {
// There is data defined in the checkmark, but the checkmark isn't checked, so we check it
// This is of course because the data changed
2020-10-27 01:01:34 +01:00
es.data.push(i);
es.ping();
}
});
return inputEl;
}
private GenerateMappingElement(mapping: {
if: TagsFilter,
then: Translation,
2020-12-07 03:02:50 +01:00
hideInAnswer: boolean | TagsFilter
2020-10-27 01:01:34 +01:00
}): InputElement<TagsFilter> {
2020-12-07 03:02:50 +01:00
if (mapping.hideInAnswer === true) {
return undefined;
}
if(typeof(mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(this._tags.data)){
2020-10-27 01:01:34 +01:00
return undefined;
}
return new FixedInputElement(
2021-02-05 16:32:37 +01:00
SubstitutedTranslation.construct(mapping.then, this._tags),
2020-10-27 01:01:34 +01:00
mapping.if,
(t0, t1) => t1.isEquivalent(t0));
}
private GenerateFreeform(): InputElement<TagsFilter> {
const freeform = this._configuration.freeform;
if (freeform === undefined) {
return undefined;
}
const pickString =
(string: any) => {
if (string === "" || string === undefined) {
return undefined;
}
const tag = new Tag(freeform.key, string);
if (freeform.addExtraTags === undefined) {
return tag;
}
return new And([
tag,
...freeform.addExtraTags
]
);
};
const toString = (tag) => {
if (tag instanceof And) {
for (const subtag of tag.and) {
if (subtag instanceof Tag && subtag.key === freeform.key) {
return subtag.value;
}
}
return undefined;
} else if (tag instanceof Tag) {
return tag.value
}
return undefined;
}
const textField = ValidatedTextField.InputForType(this._configuration.freeform.type, {
isValid: (str) => (str.length <= 255),
2020-12-05 03:22:17 +01:00
country: () => this._tags.data._country,
2020-11-17 02:22:48 +01:00
location: [this._tags.data._lat, this._tags.data._lon]
2020-10-27 01:01:34 +01:00
});
textField.GetValue().setData(this._tags.data[this._configuration.freeform.key]);
return new InputElementMap(
textField, (a, b) => a === b || (a?.isEquivalent(b) ?? false),
pickString, toString
);
}
InnerRender(): string {
return new Combine([
this._question,
this._inputElement,
2020-10-27 01:01:34 +01:00
this._cancelButton,
this._saveButton,
this._appliedTags]
)
.SetClass("question")
.Render()
2020-10-27 01:01:34 +01:00
}
}