mapcomplete/Customizations/TagRendering.ts

418 lines
15 KiB
TypeScript
Raw Normal View History

2020-07-05 18:59:47 +02:00
import {UIElement} from "../UI/UIElement";
import {UIEventSource} from "../UI/UIEventSource";
import {And, Tag, TagsFilter, TagUtils} from "../Logic/TagsFilter";
import {UIRadioButton} from "../UI/Base/UIRadioButton";
import {FixedUiElement} from "../UI/Base/FixedUiElement";
import {SaveButton} from "../UI/SaveButton";
import {Changes} from "../Logic/Changes";
import {TextField} from "../UI/Base/TextField";
import {UIInputElement} from "../UI/Base/UIInputElement";
import {UIRadioButtonWithOther} from "../UI/Base/UIRadioButtonWithOther";
import {VariableUiElement} from "../UI/Base/VariableUIElement";
2020-07-12 23:19:05 +02:00
import {TagDependantUIElement, TagDependantUIElementConstructor} from "./UIElementConstructor";
import {OnlyShowIfConstructor} from "./OnlyShowIf";
2020-07-05 18:59:47 +02:00
2020-07-12 23:19:05 +02:00
export class TagRenderingOptions implements TagDependantUIElementConstructor {
2020-07-05 18:59:47 +02:00
/**
* Notes: by not giving a 'question', one disables the question form alltogether
*/
public options: {
priority?: number; question?: string; primer?: string;
freeform?: { key: string; tagsPreprocessor?: (tags: any) => any; template: string; renderTemplate: string; placeholder?: string; extraTags?: TagsFilter }; mappings?: { k: TagsFilter; txt: string; priority?: number, substitute?: boolean }[]
};
constructor(options: {
2020-07-07 16:42:25 +02:00
/**
* What is the priority of the question.
* By default, in the popup of a feature, only one question is shown at the same time. If multiple questions are unanswered, the question with the highest priority is asked first
*/
2020-07-05 18:59:47 +02:00
priority?: number
2020-07-07 16:42:25 +02:00
/**
* This is the string that is shown in the popup if this tag is missing.
*
* If 'question' is undefined, then the question is never asked at all
* If the question is "" (empty string) then the question is
*/
2020-07-05 18:59:47 +02:00
question?: string,
2020-07-07 16:42:25 +02:00
/**
* Optional:
* if defined, this a common piece of tag that is shown in front of every mapping (except freeform)
*/
2020-07-05 18:59:47 +02:00
primer?: string,
tagsPreprocessor?: ((tags: any) => any),
freeform?: {
key: string, template: string,
renderTemplate: string
placeholder?: string,
extraTags?: TagsFilter,
},
2020-07-07 16:42:25 +02:00
/**
* Mappings convert a well-known tag combination into a user friendly text.
* It converts e.g. 'access=yes' into 'this area can be accessed'
*
* If there are multiple tags that should be matched, And can be used. All tags in AND will be added when the question is picked (and the corresponding text will only be shown if all tags are present).
* If AND is used, it is best practice to make sure every used tag is in every option (with empty string) to erase extra tags.
*
* If a 'k' is null, then this one is shown by default. It can be used to force a default value, e.g. to show that the name of a POI is not (yet) known .
* A mapping where 'k' is null will not be shown as option in the radio buttons.
*
*
*/
2020-07-05 18:59:47 +02:00
mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[]
}) {
this.options = options;
}
2020-07-12 23:19:05 +02:00
OnlyShowIf(tagsFilter: TagsFilter) : TagDependantUIElementConstructor{
return new OnlyShowIfConstructor(tagsFilter, this);
}
2020-07-05 18:59:47 +02:00
IsQuestioning(tags: any): boolean {
const tagsKV = TagUtils.proprtiesToKV(tags);
for (const oneOnOneElement of this.options.mappings ?? []) {
2020-07-08 16:07:16 +02:00
if (oneOnOneElement.k === null || oneOnOneElement.k.matches(tagsKV)) {
2020-07-05 18:59:47 +02:00
return false;
}
}
if (this.options.freeform !== undefined && tags[this.options.freeform.key] !== undefined) {
return false;
}
if (this.options.question === undefined) {
return false;
}
return true;
}
2020-07-12 23:19:05 +02:00
construct(tags: UIEventSource<any>, changes: Changes): TagDependantUIElement {
return new TagRendering(tags, changes, this.options);
}
IsKnown(properties: any): boolean {
return !this.IsQuestioning(properties);
}
Priority(): number {
return this.options.priority ?? 0;
}
2020-07-05 18:59:47 +02:00
}
2020-07-12 23:19:05 +02:00
class TagRendering extends UIElement implements TagDependantUIElement {
2020-07-05 18:59:47 +02:00
2020-07-12 23:19:05 +02:00
private _priority: number;
2020-07-05 18:59:47 +02:00
2020-07-12 23:19:05 +02:00
Priority(): number {
return this._priority;
}
2020-07-05 18:59:47 +02:00
private _question: string;
private _primer: string;
private _mapping: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[];
2020-07-08 16:24:12 +02:00
private _renderMapping: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[];
2020-07-05 18:59:47 +02:00
private _tagsPreprocessor?: ((tags: any) => any);
private _freeform: {
key: string, template: string,
renderTemplate: string,
placeholder?: string,
extraTags?: TagsFilter
};
private readonly _questionElement: UIElement;
private readonly _textField: TextField<TagsFilter>; // Only here to update
private readonly _saveButton: UIElement;
private readonly _skipButton: UIElement;
private readonly _editButton: UIElement;
private readonly _questionSkipped: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _editMode: UIEventSource<boolean> = new UIEventSource<boolean>(false);
constructor(tags: UIEventSource<any>, changes: Changes, options: {
priority?: number
question?: string,
primer?: string,
freeform?: {
key: string, template: string,
renderTemplate: string
placeholder?: string,
extraTags?: TagsFilter,
},
tagsPreprocessor?: ((tags: any) => any),
mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[]
}) {
super(tags);
const self = this;
this.ListenTo(this._questionSkipped);
this.ListenTo(this._editMode);
this._question = options.question;
2020-07-12 23:19:05 +02:00
this._priority = options.priority ?? 0;
2020-07-05 18:59:47 +02:00
this._primer = options.primer ?? "";
this._tagsPreprocessor = options.tagsPreprocessor;
this._mapping = [];
2020-07-08 16:24:12 +02:00
this._renderMapping = [];
2020-07-05 18:59:47 +02:00
this._freeform = options.freeform;
// Prepare the choices for the Radio buttons
const choices: UIElement[] = [];
2020-07-08 16:07:16 +02:00
const usedChoices: string [] = [];
2020-07-05 18:59:47 +02:00
for (const choice of options.mappings ?? []) {
if (choice.k === null) {
this._mapping.push(choice);
continue;
}
let choiceSubbed = choice;
if (choice.substitute) {
choiceSubbed = {
2020-07-08 11:23:36 +02:00
k: choice.k.substituteValues(
2020-07-05 18:59:47 +02:00
options.tagsPreprocessor(this._source.data)),
2020-07-08 11:23:36 +02:00
txt: this.ApplyTemplate(choice.txt),
2020-07-05 18:59:47 +02:00
substitute: false,
priority: choice.priority
}
}
2020-07-08 11:23:36 +02:00
2020-07-08 16:07:16 +02:00
const txt = choiceSubbed.txt
// Choices is what is shown in the radio buttons
if (usedChoices.indexOf(txt) < 0) {
2020-07-08 11:23:36 +02:00
2020-07-08 16:07:16 +02:00
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);
2020-07-08 16:24:12 +02:00
} else {
this._renderMapping.push(choiceSubbed); // only used while rendering
2020-07-08 16:07:16 +02:00
}
2020-07-05 18:59:47 +02:00
}
// Map radiobutton choice and textfield answer onto tagfilter. That tagfilter will be pushed into the changes later on
const pickChoice = (i => {
if (i === undefined || i === null) {
return undefined
}
return self._mapping[i].k
});
const pickString =
(string) => {
if (string === "" || string === undefined) {
return undefined;
}
const tag = new Tag(self._freeform.key, string);
if (self._freeform.extraTags === undefined) {
return tag;
}
return new And([
self._freeform.extraTags,
tag
]
);
};
// Prepare the actual input element -> pick an appropriate implementation
let inputElement: UIInputElement<TagsFilter>;
2020-07-08 16:07:16 +02:00
2020-07-05 18:59:47 +02:00
if (this._freeform !== undefined && this._mapping !== undefined) {
// Radio buttons with 'other'
inputElement = new UIRadioButtonWithOther(
choices,
this._freeform.template,
this._freeform.placeholder,
pickChoice,
pickString
);
this._questionElement = inputElement;
2020-07-08 16:07:16 +02:00
} else if (this._mapping !== [] && this._mapping.length > 0) {
2020-07-05 18:59:47 +02:00
// This is a classic radio selection element
2020-07-08 16:07:16 +02:00
inputElement = new UIRadioButton(new UIEventSource(choices), pickChoice, false)
2020-07-05 18:59:47 +02:00
this._questionElement = inputElement;
} else if (this._freeform !== undefined) {
this._textField = new TextField(new UIEventSource<string>(this._freeform.placeholder), pickString);
inputElement = this._textField;
2020-07-08 16:07:16 +02:00
this._questionElement = new FixedUiElement(
"<div>" + this._freeform.template.replace("$$$", inputElement.Render()) + "</div>")
2020-07-05 18:59:47 +02:00
} else {
throw "Invalid questionRendering, expected at least choices or a freeform"
}
const save = () => {
const selection = inputElement.GetValue().data;
if (selection) {
changes.addTag(tags.data.id, selection);
}
self._editMode.setData(false);
}
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
this._saveButton = new SaveButton(inputElement.GetValue())
.onClick(save);
if (this._question !== undefined) {
this._editButton = new FixedUiElement("<img class='editbutton' src='./assets/pencil.svg' alt='edit'>")
.onClick(() => {
console.log("Click", self._editButton);
if (self._textField) {
self._textField.value.setData(self._source.data["name"] ?? "");
}
self._editMode.setData(true);
});
} else {
this._editButton = new FixedUiElement("");
}
const cancelContents = this._editMode.map((isEditing) => {
if (isEditing) {
return "<span class='skip-button'>Annuleren</span>";
} else {
return "<span class='skip-button'>Overslaan (Ik weet het niet zeker...)</span>";
2020-07-05 18:59:47 +02:00
}
});
// And at last, set up the skip button
this._skipButton = new VariableUiElement(cancelContents).onClick(cancel);
}
private ApplyTemplate(template: string): string {
let tags = this._source.data;
if (this._tagsPreprocessor !== undefined) {
tags = this._tagsPreprocessor(tags);
}
return TagUtils.ApplyTemplate(template, tags);
}
IsKnown(): boolean {
const tags = TagUtils.proprtiesToKV(this._source.data);
2020-07-08 16:24:12 +02:00
for (const oneOnOneElement of this._mapping.concat(this._renderMapping)) {
2020-07-05 18:59:47 +02:00
if (oneOnOneElement.k === null || oneOnOneElement.k.matches(tags)) {
return true;
}
}
2020-07-08 16:24:12 +02:00
2020-07-05 18:59:47 +02:00
return this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined;
}
IsQuestioning(): boolean {
if (this.IsKnown()) {
return false;
}
if (this._question === undefined) {
// 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 RenderAnwser(): string {
const tags = TagUtils.proprtiesToKV(this._source.data);
let freeform = "";
let freeformScore = -10;
if (this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined) {
freeform = this.ApplyTemplate(this._freeform.renderTemplate);
freeformScore = 0;
}
let highestScore = -100;
let highestTemplate = undefined;
2020-07-08 16:24:12 +02:00
for (const oneOnOneElement of this._mapping.concat(this._renderMapping)) {
2020-07-05 18:59:47 +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
}
}
}
if (freeformScore > highestScore) {
return freeform;
}
if (highestTemplate !== undefined) {
// we render the found template
return this._primer + this.ApplyTemplate(highestTemplate);
}
2020-07-08 16:24:12 +02:00
2020-07-05 18:59:47 +02:00
}
protected InnerRender(): string {
if (this.IsQuestioning() || this._editMode.data) {
// Not yet known or questioning, we have to ask a question
return "<div class='question'>" +
2020-07-08 16:07:16 +02:00
"<span class='question-text'>" + this._question + "</span>" +
2020-07-05 18:59:47 +02:00
(this._question !== "" ? "<br/>" : "") +
this._questionElement.Render() +
this._skipButton.Render() +
this._saveButton.Render() +
"</div>"
}
if (this.IsKnown()) {
const html = this.RenderAnwser();
if (html == "") {
return "";
}
return "<span class='answer'>" +
"<span class='answer-text'>" + html + "</span>" + this._editButton.Render() +
"</span>";
}
return "";
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
this._questionElement.Update();
this._saveButton.Update();
this._skipButton.Update();
this._textField?.Update();
this._editButton.Update();
}
}