mapcomplete/Customizations/TagRendering.ts

489 lines
16 KiB
TypeScript
Raw Normal View History

2020-07-05 18:59:47 +02:00
import {UIElement} from "../UI/UIElement";
import {UIEventSource} from "../Logic/UIEventSource";
import {And, Tag, TagsFilter, TagUtils} from "../Logic/Tags";
2020-07-05 18:59:47 +02:00
import {FixedUiElement} from "../UI/Base/FixedUiElement";
import {SaveButton} from "../UI/SaveButton";
import {VariableUiElement} from "../UI/Base/VariableUIElement";
2020-07-31 17:38:03 +02:00
import {TagDependantUIElement} from "./UIElementConstructor";
import {TextField, ValidatedTextField} from "../UI/Input/TextField";
2020-07-20 15:54:50 +02:00
import {InputElement} from "../UI/Input/InputElement";
import {InputElementWrapper} from "../UI/Input/InputElementWrapper";
import {FixedInputElement} from "../UI/Input/FixedInputElement";
import {RadioButton} from "../UI/Input/RadioButton";
2020-07-21 00:07:04 +02:00
import Translations from "../UI/i18n/Translations";
import Locale from "../UI/i18n/Locale";
import {State} from "../State";
2020-07-31 17:38:03 +02:00
import {TagRenderingOptions} from "./TagRenderingOptions";
import Translation from "../UI/i18n/Translation";
import Combine from "../UI/Base/Combine";
export class
TagRendering extends UIElement implements TagDependantUIElement {
2020-07-05 18:59:47 +02:00
private readonly _priority: number;
private readonly _question: string | Translation;
private readonly _mapping: { k: TagsFilter, txt: string | UIElement, priority?: number }[];
2020-07-08 16:24:12 +02:00
private currentTags : UIEventSource<any> ;
private readonly _freeform: {
key: string,
template: string | UIElement,
renderTemplate: string | Translation,
placeholder?: string | UIElement,
2020-07-05 18:59:47 +02:00
extraTags?: TagsFilter
};
2020-07-20 15:54:50 +02:00
private readonly _questionElement: InputElement<TagsFilter>;
2020-07-05 18:59:47 +02:00
private readonly _saveButton: UIElement;
private readonly _friendlyLogin: UIElement;
2020-07-05 18:59:47 +02:00
private readonly _skipButton: UIElement;
private readonly _editButton: UIElement;
private readonly _appliedTags: UIElement;
2020-07-05 18:59:47 +02:00
private readonly _questionSkipped: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _editMode: UIEventSource<boolean> = new UIEventSource<boolean>(false);
2020-07-31 17:38:03 +02:00
static injectFunction() {
// This is a workaround as not to import tagrendering into TagREnderingOptions
TagRenderingOptions.tagRendering = (tags, options) => new TagRendering(tags, options);
return true;
}
constructor(tags: UIEventSource<any>, options: {
2020-07-05 18:59:47 +02:00
priority?: number
question?: string | Translation,
2020-07-05 18:59:47 +02:00
freeform?: {
2020-07-31 17:38:03 +02:00
key: string,
template: string | Translation,
renderTemplate: string | Translation,
placeholder?: string | Translation,
2020-07-05 18:59:47 +02:00
extraTags?: TagsFilter,
},
tagsPreprocessor?: ((tags: any) => any),
mappings?: { k: TagsFilter, txt: string | Translation, priority?: number, substitute?: boolean, hideInAnswer?: boolean }[]
2020-07-05 18:59:47 +02:00
}) {
super(tags);
this.ListenTo(Locale.language);
2020-07-05 18:59:47 +02:00
this.ListenTo(this._questionSkipped);
this.ListenTo(this._editMode);
this.ListenTo(State.state?.osmConnection?.userDetails);
2020-07-05 18:59:47 +02:00
const self = this;
2020-07-27 01:19:38 +02:00
2020-07-12 23:19:05 +02:00
this._priority = options.priority ?? 0;
this.currentTags = this._source.map(tags =>
{
if (options.tagsPreprocessor === undefined) {
return tags;
}
// we clone the tags...
let newTags = {};
for (const k in tags) {
newTags[k] = tags[k];
}
// ... in order to safely edit them here
options.tagsPreprocessor(newTags);
return newTags;
}
);
2020-07-27 01:19:38 +02:00
if (options.question !== undefined) {
this._question = options.question;
2020-07-27 01:19:38 +02:00
}
2020-07-05 18:59:47 +02:00
this._mapping = [];
this._freeform = options.freeform;
2020-07-08 16:07:16 +02:00
2020-07-05 18:59:47 +02:00
for (const choice of options.mappings ?? []) {
2020-07-21 00:07:04 +02:00
let choiceSubbed = {
k: choice.k?.substituteValues(this.currentTags.data),
2020-07-21 23:31:41 +02:00
txt: choice.txt,
2020-07-21 00:07:04 +02:00
priority: choice.priority
2020-07-05 18:59:47 +02:00
}
2020-07-08 11:23:36 +02:00
2020-07-21 00:07:04 +02:00
this._mapping.push({
k: choiceSubbed.k,
txt: choiceSubbed.txt
});
2020-07-05 18:59:47 +02:00
}
// Prepare the actual input element -> pick an appropriate implementation
2020-09-02 11:37:34 +02:00
this._questionElement = this.InputElementFor(options) ??
new FixedInputElement<TagsFilter>("<span class='alert'>No input possible</span>", new Tag("a","b"));
2020-07-05 18:59:47 +02:00
const save = () => {
2020-07-20 15:54:50 +02:00
const selection = self._questionElement.GetValue().data;
console.log("Tagrendering: saving tags ", selection);
2020-07-05 18:59:47 +02:00
if (selection) {
2020-09-02 11:37:34 +02:00
State.state?.changes?.addTag(tags.data.id, selection);
2020-07-05 18:59:47 +02:00
}
self._editMode.setData(false);
}
this._appliedTags = new VariableUiElement(
self._questionElement.GetValue().map(
(tags: TagsFilter) => {
if (tags === undefined) {
2020-08-26 00:21:34 +02:00
return Translations.t.general.noTagsSelected.SetClass("subtle").Render();
}
2020-09-02 11:37:34 +02:00
const csCount = State.state?.osmConnection?.userDetails?.data?.csCount ?? 1000;
if (csCount < State.userJourney.tagsVisibleAt) {
return "";
}
if (csCount < State.userJourney.tagsVisibleAndWikiLinked) {
const tagsStr = tags.asHumanString(false, true);
2020-08-26 00:21:34 +02:00
return new FixedUiElement(tagsStr).SetClass("subtle").Render();
}
return tags.asHumanString(true, true);
}
)
2020-09-02 11:37:34 +02:00
).ListenTo(self._questionElement);
2020-07-05 18:59:47 +02:00
const cancel = () => {
self._questionSkipped.setData(true);
self._editMode.setData(false);
2020-07-08 16:07:16 +02:00
self._source.ping(); // Send a ping upstream to render the next question
2020-07-05 18:59:47 +02:00
}
// Setup the save button and it's action
2020-07-20 15:54:50 +02:00
this._saveButton = new SaveButton(this._questionElement.GetValue())
2020-07-05 18:59:47 +02:00
.onClick(save);
this._friendlyLogin = Translations.t.general.loginToStart
.onClick(() => State.state.osmConnection.AttemptLogin())
2020-07-20 15:54:50 +02:00
this._editButton = new FixedUiElement("");
2020-07-05 18:59:47 +02:00
if (this._question !== undefined) {
2020-09-05 01:40:43 +02:00
this._editButton = new FixedUiElement(
"<img style='width: 1.3em;height: 1.3em;padding: 0.5em;border-radius: 0.65em;border: solid black 1px;font-size: medium;float: right;' " +
"src='./assets/pencil.svg' alt='edit'>")
2020-07-05 18:59:47 +02:00
.onClick(() => {
self._editMode.setData(true);
2020-07-20 21:39:07 +02:00
self._questionElement.GetValue().setData(self.CurrentValue());
2020-07-05 18:59:47 +02:00
});
}
const cancelContents = this._editMode.map((isEditing) => {
if (isEditing) {
2020-09-05 01:40:43 +02:00
return "<span class='skip-button'>" + Translations.t.general.cancel.R() + "</span>";
2020-07-05 18:59:47 +02:00
} else {
2020-09-05 01:40:43 +02:00
return "<span class='skip-button'>" + Translations.t.general.skip.R() + "</span>";
2020-07-05 18:59:47 +02:00
}
}, [Locale.language]);
2020-07-05 18:59:47 +02:00
// And at last, set up the skip button
2020-09-05 01:40:43 +02:00
this._skipButton = new VariableUiElement(cancelContents).onClick(cancel);
2020-07-20 15:54:50 +02:00
}
2020-07-05 18:59:47 +02:00
2020-07-20 15:54:50 +02:00
private InputElementFor(options: {
freeform?: {
2020-07-21 23:31:41 +02:00
key: string,
template: string | Translation,
renderTemplate: string | Translation,
placeholder?: string | Translation,
2020-07-20 15:54:50 +02:00
extraTags?: TagsFilter,
},
mappings?: { k: TagsFilter, txt: string | Translation, priority?: number, substitute?: boolean, hideInAnswer?: boolean }[]
2020-07-20 15:54:50 +02:00
}):
InputElement<TagsFilter> {
const elements = [];
let freeformElement = undefined;
2020-07-20 15:54:50 +02:00
if (options.freeform !== undefined) {
freeformElement = this.InputForFreeForm(options.freeform);
}
2020-07-20 15:54:50 +02:00
if (options.mappings !== undefined) {
2020-07-20 18:24:00 +02:00
const previousTexts= [];
2020-07-20 15:54:50 +02:00
for (const mapping of options.mappings) {
2020-07-20 18:24:00 +02:00
if(mapping.k === null){
continue;
}
if(mapping.hideInAnswer){
2020-07-20 18:24:00 +02:00
continue;
}
previousTexts.push(this.ApplyTemplate(mapping.txt));
2020-07-20 18:24:00 +02:00
2020-07-20 15:54:50 +02:00
elements.push(this.InputElementForMapping(mapping));
}
}
if(freeformElement !== undefined) {
elements.push(freeformElement);
2020-07-20 15:54:50 +02:00
}
2020-07-20 15:54:50 +02:00
if (elements.length == 0) {
2020-07-21 00:07:04 +02:00
return new FixedInputElement("This should not happen: no tag renderings defined", undefined);
2020-07-20 15:54:50 +02:00
}
if (elements.length == 1) {
return elements[0];
}
return new RadioButton(elements, false);
2020-07-05 18:59:47 +02:00
}
2020-07-20 15:54:50 +02:00
private InputElementForMapping(mapping: { k: TagsFilter, txt: (string | Translation) }) {
return new FixedInputElement(this.ApplyTemplate(mapping.txt),
mapping.k.substituteValues(this.currentTags.data)
);
2020-07-20 15:54:50 +02:00
}
private InputForFreeForm(freeform): InputElement<TagsFilter> {
2020-09-02 11:37:34 +02:00
if (freeform?.template === undefined) {
2020-07-20 15:54:50 +02:00
return undefined;
}
2020-07-29 20:19:29 +02:00
const prepost = Translations.W(freeform.template).InnerRender()
.replace("$$$", "$string$")
2020-07-29 20:19:29 +02:00
.split("$");
2020-07-23 17:32:18 +02:00
const type = prepost[1];
let isValid = ValidatedTextField.inputValidation[type];
if (isValid === undefined) {
isValid = () => true;
}
let formatter = ValidatedTextField.formatting[type] ?? ((str) => str);
2020-07-20 15:54:50 +02:00
const pickString =
2020-07-23 17:32:18 +02:00
(string: any) => {
2020-07-20 15:54:50 +02:00
if (string === "" || string === undefined) {
return undefined;
}
if (!isValid(string, this._source.data._country)) {
2020-07-23 17:32:18 +02:00
return undefined;
}
2020-09-02 11:37:34 +02:00
const tag = new Tag(freeform.key, formatter(string, this._source.data._country));
2020-09-02 11:37:34 +02:00
if (tag.value.length > 255) {
return undefined; // Toolong
}
2020-07-20 15:54:50 +02:00
if (freeform.extraTags === undefined) {
return tag;
}
return new And([
tag,
freeform.extraTags
2020-07-20 15:54:50 +02:00
]
);
};
const toString =
(tag) => {
if (tag instanceof And) {
return toString(tag.and[0])
} else if (tag instanceof Tag) {
return tag.value
}
return undefined;
}
const textField = new TextField({
placeholder: this._freeform.placeholder,
fromString: pickString,
toString: toString
});
const pre = prepost[0] !== undefined ? this.ApplyTemplate(prepost[0]) : "";
const post = prepost[2] !== undefined ? this.ApplyTemplate(prepost[2]) : "";
return new InputElementWrapper(pre, textField, post);
2020-07-05 18:59:47 +02:00
}
2020-07-20 15:54:50 +02:00
2020-07-05 18:59:47 +02:00
IsKnown(): boolean {
const tags = TagUtils.proprtiesToKV(this._source.data);
2020-07-21 23:31:41 +02:00
for (const oneOnOneElement of this._mapping) {
if (oneOnOneElement.k === null || oneOnOneElement.k === undefined || oneOnOneElement.k.matches(tags)) {
2020-07-05 18:59:47 +02:00
return true;
}
}
return this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined;
}
2020-07-25 01:07:02 +02:00
IsSkipped(): boolean {
return this._questionSkipped.data;
}
2020-07-20 15:54:50 +02:00
private CurrentValue(): TagsFilter {
const tags = TagUtils.proprtiesToKV(this._source.data);
2020-07-21 23:31:41 +02:00
for (const oneOnOneElement of this._mapping) {
if (oneOnOneElement.k !== null && oneOnOneElement.k.matches(tags)) {
2020-07-20 15:54:50 +02:00
return oneOnOneElement.k;
}
}
if (this._freeform === undefined) {
return undefined;
}
return new Tag(this._freeform.key, this._source.data[this._freeform.key]);
}
2020-07-05 18:59:47 +02:00
IsQuestioning(): boolean {
if (this.IsKnown()) {
return false;
}
2020-09-02 11:37:34 +02:00
if (this._question === undefined ||
this._question === "" ||
2020-09-02 11:37:34 +02:00
(this._freeform?.template === undefined && (this._mapping?.length ?? 0) == 0)) {
2020-07-05 18:59:47 +02:00
// We don't ask this question in the first place
return false;
}
if (this._questionSkipped.data) {
// We don't ask for this question anymore, skipped by user
return false;
}
return true;
}
private RenderAnswer(): UIElement {
2020-07-05 18:59:47 +02:00
const tags = TagUtils.proprtiesToKV(this._source.data);
2020-07-21 00:07:04 +02:00
let freeform: UIElement = new FixedUiElement("");
2020-07-05 18:59:47 +02:00
let freeformScore = -10;
if (this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined) {
freeform = this.ApplyTemplate(this._freeform.renderTemplate);
freeformScore = 0;
}
2020-07-21 00:07:04 +02:00
let highestScore = -100;
let highestTemplate = undefined;
2020-07-21 23:31:41 +02:00
for (const oneOnOneElement of this._mapping) {
2020-07-21 00:07:04 +02:00
if (oneOnOneElement.k == null ||
oneOnOneElement.k.matches(tags)) {
// We have found a matching key -> we use the template, but only if it scores better
let score = oneOnOneElement.priority ??
(oneOnOneElement.k === null ? -1 : 0);
if (score > highestScore) {
highestScore = score;
highestTemplate = oneOnOneElement.txt
2020-07-05 18:59:47 +02:00
}
}
2020-07-21 00:07:04 +02:00
}
2020-07-05 18:59:47 +02:00
2020-07-21 00:07:04 +02:00
if (freeformScore > highestScore) {
return freeform;
}
if (highestTemplate !== undefined) {
// we render the found template
return this.ApplyTemplate(highestTemplate);
}
2020-07-05 18:59:47 +02:00
}
2020-07-20 18:24:00 +02:00
InnerRender(): string {
2020-09-02 11:37:34 +02:00
if (this.IsQuestioning()
&& (State.state !== undefined) // If State.state is undefined, we are testing/custom theme building -> show regular save
&& !State.state.osmConnection.userDetails.data.loggedIn) {
const question =
this.ApplyTemplate(this._question).SetClass('question-text');
return "<div class='question'>" +
new Combine([
2020-09-02 11:37:34 +02:00
question.Render(),
"<br/>",
this._questionElement,
2020-09-02 11:37:34 +02:00
"<span class='login-button-friendly'>",
this._friendlyLogin,
"</span>",
]).Render() + "</div>";
}
2020-07-05 18:59:47 +02:00
if (this.IsQuestioning() || this._editMode.data) {
// Not yet known or questioning, we have to ask a question
return "<div class='question'>" +
2020-08-26 00:21:34 +02:00
new Combine([
"<span class='question-text'>",
this.ApplyTemplate(this._question),
"</span>",
"<br/>",
"<div>", this._questionElement , "</div>",
this._skipButton,
this._saveButton,
"<br/>",
this._appliedTags
]).Render() +
2020-07-05 18:59:47 +02:00
"</div>"
}
if (this.IsKnown()) {
const answer = this.RenderAnswer();
if(answer.IsEmpty()){
2020-07-05 18:59:47 +02:00
return "";
}
let editButton;
2020-09-02 11:37:34 +02:00
if (State.state === undefined || // state undefined -> we are custom testing
State.state?.osmConnection?.userDetails?.data?.loggedIn && this._question !== undefined) {
editButton = this._editButton;
}
2020-07-20 15:54:50 +02:00
return new Combine([
"<span class='answer'>",
"<span class='answer-text'>",
answer,
"</span>",
editButton ?? "",
"</span>"]).Render();
2020-07-05 18:59:47 +02:00
}
return "";
}
2020-07-20 15:54:50 +02:00
Priority(): number {
return this._priority;
}
private ApplyTemplate(template: string | Translation): UIElement {
2020-07-27 01:19:38 +02:00
if (template === undefined || template === null) {
return undefined;
2020-07-21 00:07:04 +02:00
}
return new VariableUiElement(this.currentTags.map(tags => {
const tr = Translations.WT(template);
if (tr.Subs === undefined) {
// This is a weird edge case
return tr.InnerRender();
}
return tr.Subs(tags).InnerRender()
}));
2020-07-05 18:59:47 +02:00
}
2020-07-21 00:07:04 +02:00
2020-07-27 01:19:38 +02:00
2020-07-05 18:59:47 +02:00
}