forked from MapComplete/MapComplete
Further work, add checkboxes as option
This commit is contained in:
Pieter Vander Vennet
parent
8bb9b1228b
commit
c944156d87
28 changed files with 364 additions and 149 deletions
|
|
@ -9,8 +9,6 @@ import {LayerConfigJson} from "./LayerConfigJson";
|
|||
import {LayerDefinition, Preset} from "../LayerDefinition";
|
||||
import {TagDependantUIElementConstructor} from "../UIElementConstructor";
|
||||
import Combine from "../../UI/Base/Combine";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import {ImageCarouselConstructor} from "../../UI/Image/ImageCarousel";
|
||||
import * as drinkingWater from "../../assets/layers/drinking_water/drinking_water.json";
|
||||
import * as ghostbikes from "../../assets/layers/ghost_bike/ghost_bike.json"
|
||||
import * as viewpoint from "../../assets/layers/viewpoint/viewpoint.json"
|
||||
|
|
@ -20,12 +18,19 @@ import * as birdhides from "../../assets/layers/bird_hide/birdhides.json"
|
|||
import * as nature_reserve from "../../assets/layers/nature_reserve/nature_reserve.json"
|
||||
|
||||
import {Utils} from "../../Utils";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import {ImageCarouselConstructor} from "../../UI/Image/ImageCarousel";
|
||||
import {State} from "../../State";
|
||||
|
||||
export class FromJSON {
|
||||
|
||||
public static sharedLayers: Map<string, LayerDefinition> = FromJSON.getSharedLayers();
|
||||
|
||||
private static getSharedLayers() {
|
||||
|
||||
// We inject a function into state while we are busy
|
||||
State.FromBase64 = FromJSON.FromBase64;
|
||||
|
||||
const sharedLayers = new Map<string, LayerDefinition>();
|
||||
|
||||
const sharedLayersList = [
|
||||
|
|
@ -50,6 +55,7 @@ export class FromJSON {
|
|||
}
|
||||
|
||||
public static LayoutFromJSON(json: LayoutConfigJson): Layout {
|
||||
console.log(json)
|
||||
const tr = FromJSON.Translation;
|
||||
|
||||
const layers = json.layers.map(FromJSON.Layer);
|
||||
|
|
@ -111,7 +117,6 @@ export class FromJSON {
|
|||
|
||||
|
||||
if (typeof json === "string") {
|
||||
|
||||
switch (json) {
|
||||
case "picture": {
|
||||
return new ImageCarouselWithUploadConstructor()
|
||||
|
|
@ -123,7 +128,7 @@ export class FromJSON {
|
|||
return new ImageCarouselWithUploadConstructor()
|
||||
}
|
||||
case "images": {
|
||||
return new ImageCarouselWithUploadConstructor()
|
||||
return new ImageCarouselWithUploadConstructor()
|
||||
}
|
||||
case "picturesNoUpload": {
|
||||
return new ImageCarouselConstructor()
|
||||
|
|
@ -193,11 +198,13 @@ export class FromJSON {
|
|||
let rendering = new TagRenderingOptions({
|
||||
question: question,
|
||||
freeform: freeform,
|
||||
mappings: mappings
|
||||
mappings: mappings,
|
||||
multiAnswer: json.multiAnswer
|
||||
});
|
||||
|
||||
|
||||
if (json.condition) {
|
||||
return rendering.OnlyShowIf(FromJSON.Tag(json.condition, `In tagrendering ${propertyName}.condition`));
|
||||
const condition = FromJSON.Tag(json.condition, `In tagrendering ${propertyName}.condition`);
|
||||
return rendering.OnlyShowIf(condition);
|
||||
}
|
||||
|
||||
return rendering;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,12 @@ export interface TagRenderingConfigJson {
|
|||
* Usefull to add a 'fixme=freeform textfield used - to be checked'
|
||||
**/
|
||||
addExtraTags?: string[];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, use checkboxes instead of radio buttons when asking the question
|
||||
*/
|
||||
multiAnswer?: boolean,
|
||||
|
||||
/**
|
||||
* Allows fixed-tag inputs, shown either as radiobuttons or as checkboxes
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {LayerDefinition} from "../LayerDefinition";
|
||||
import FixedText from "../Questions/FixedText";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import Translations from "../../UI/i18n/Translations";
|
||||
import CafeName from "../Questions/bike/CafeName";
|
||||
import {And, Or, RegexTag, Tag} from "../../Logic/Tags";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {LayerDefinition} from "../LayerDefinition";
|
||||
import Translations from "../../UI/i18n/Translations";
|
||||
import {And, RegexTag, Tag} from "../../Logic/Tags";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ShopRetail from "../Questions/bike/ShopRetail";
|
||||
import ShopPump from "../Questions/bike/ShopPump";
|
||||
import ShopRental from "../Questions/bike/ShopRental";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {LayerDefinition} from "../LayerDefinition";
|
||||
import Translations from "../../UI/i18n/Translations";
|
||||
import {And, Tag} from "../../Logic/Tags";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ShopRetail from "../Questions/bike/ShopRetail";
|
||||
import ShopPump from "../Questions/bike/ShopPump";
|
||||
import ShopRental from "../Questions/bike/ShopRental";
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {OperatorTag} from "../Questions/OperatorTag";
|
|||
import {NameQuestion} from "../Questions/NameQuestion";
|
||||
import {NameInline} from "../Questions/NameInline";
|
||||
import {DescriptionQuestion} from "../Questions/DescriptionQuestion";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
|
||||
export class Bos extends LayerDefinition {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import {LayerDefinition} from "../LayerDefinition";
|
||||
import FixedText from "../Questions/FixedText";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import {And, Tag} from "../../Logic/Tags";
|
||||
import {TagRenderingOptions} from "../TagRenderingOptions";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
|
||||
export class InformationBoard extends LayerDefinition {
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {LayerDefinition} from "../LayerDefinition";
|
||||
import FixedText from "../Questions/FixedText";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import {Tag} from "../../Logic/Tags";
|
||||
import {TagRenderingOptions} from "../TagRenderingOptions";
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {OperatorTag} from "../Questions/OperatorTag";
|
|||
import {NameQuestion} from "../Questions/NameQuestion";
|
||||
import {NameInline} from "../Questions/NameInline";
|
||||
import {DescriptionQuestion} from "../Questions/DescriptionQuestion";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import {TagRenderingOptions} from "../TagRenderingOptions";
|
||||
|
||||
export class NatureReserves extends LayerDefinition {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {Or, Tag} from "../../Logic/Tags";
|
|||
import {NameQuestion} from "../Questions/NameQuestion";
|
||||
import {NameInline} from "../Questions/NameInline";
|
||||
import {DescriptionQuestion} from "../Questions/DescriptionQuestion";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import ImageCarouselWithUploadConstructor from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import {TagRenderingOptions} from "../TagRenderingOptions";
|
||||
|
||||
export class Park extends LayerDefinition {
|
||||
|
|
|
|||
|
|
@ -1,505 +0,0 @@
|
|||
import {UIElement} from "../UI/UIElement";
|
||||
import {UIEventSource} from "../Logic/UIEventSource";
|
||||
import {And, Tag, TagsFilter, TagUtils} from "../Logic/Tags";
|
||||
import {FixedUiElement} from "../UI/Base/FixedUiElement";
|
||||
import {SaveButton} from "../UI/SaveButton";
|
||||
import {VariableUiElement} from "../UI/Base/VariableUIElement";
|
||||
import {TagDependantUIElement} from "./UIElementConstructor";
|
||||
import {TextField, ValidatedTextField} from "../UI/Input/TextField";
|
||||
import {InputElement} from "../UI/Input/InputElement";
|
||||
import {InputElementWrapper} from "../UI/Input/InputElementWrapper";
|
||||
import {FixedInputElement} from "../UI/Input/FixedInputElement";
|
||||
import {RadioButton} from "../UI/Input/RadioButton";
|
||||
import Translations from "../UI/i18n/Translations";
|
||||
import Locale from "../UI/i18n/Locale";
|
||||
import {State} from "../State";
|
||||
import {TagRenderingOptions} from "./TagRenderingOptions";
|
||||
import Translation from "../UI/i18n/Translation";
|
||||
import Combine from "../UI/Base/Combine";
|
||||
|
||||
|
||||
export class TagRendering extends UIElement implements TagDependantUIElement {
|
||||
|
||||
|
||||
private readonly _priority: number;
|
||||
private readonly _question: string | Translation;
|
||||
private readonly _mapping: { k: TagsFilter, txt: string | UIElement, priority?: number }[];
|
||||
|
||||
private currentTags: UIEventSource<any>;
|
||||
|
||||
|
||||
private readonly _freeform: {
|
||||
key: string,
|
||||
template: string | UIElement,
|
||||
renderTemplate: string | Translation,
|
||||
placeholder?: string | UIElement,
|
||||
extraTags?: TagsFilter
|
||||
};
|
||||
|
||||
|
||||
private readonly _questionElement: InputElement<TagsFilter>;
|
||||
|
||||
private readonly _saveButton: UIElement;
|
||||
private readonly _friendlyLogin: UIElement;
|
||||
|
||||
private readonly _skipButton: UIElement;
|
||||
private readonly _editButton: UIElement;
|
||||
|
||||
private readonly _appliedTags: UIElement;
|
||||
|
||||
private readonly _questionSkipped: UIEventSource<boolean> = new UIEventSource<boolean>(false);
|
||||
|
||||
private readonly _editMode: UIEventSource<boolean> = new UIEventSource<boolean>(false);
|
||||
|
||||
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: {
|
||||
priority?: number
|
||||
|
||||
question?: string | Translation,
|
||||
|
||||
freeform?: {
|
||||
key: string,
|
||||
template: string | Translation,
|
||||
renderTemplate: string | Translation,
|
||||
placeholder?: string | Translation,
|
||||
extraTags?: TagsFilter,
|
||||
},
|
||||
tagsPreprocessor?: ((tags: any) => any),
|
||||
mappings?: { k: TagsFilter, txt: string | Translation, priority?: number, substitute?: boolean, hideInAnswer?: boolean }[]
|
||||
}) {
|
||||
super(tags);
|
||||
this.ListenTo(Locale.language);
|
||||
this.ListenTo(this._questionSkipped);
|
||||
this.ListenTo(this._editMode);
|
||||
this.ListenTo(State.state?.osmConnection?.userDetails);
|
||||
|
||||
const self = this;
|
||||
|
||||
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;
|
||||
}
|
||||
);
|
||||
|
||||
if (options.question !== undefined) {
|
||||
this._question = options.question;
|
||||
}
|
||||
|
||||
this._mapping = [];
|
||||
this._freeform = options.freeform;
|
||||
|
||||
|
||||
for (const choice of options.mappings ?? []) {
|
||||
|
||||
let choiceSubbed = {
|
||||
k: choice.k?.substituteValues(this.currentTags.data),
|
||||
txt: choice.txt,
|
||||
priority: choice.priority
|
||||
}
|
||||
|
||||
|
||||
this._mapping.push({
|
||||
k: choiceSubbed.k,
|
||||
txt: choiceSubbed.txt
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Prepare the actual input element -> pick an appropriate implementation
|
||||
|
||||
this._questionElement = this.InputElementFor(options) ??
|
||||
new FixedInputElement<TagsFilter>("<span class='alert'>No input possible</span>", new Tag("a","b"));
|
||||
const save = () => {
|
||||
const selection = self._questionElement.GetValue().data;
|
||||
console.log("Tagrendering: saving tags ", selection);
|
||||
if (selection) {
|
||||
State.state?.changes?.addTag(tags.data.id, selection);
|
||||
}
|
||||
self._editMode.setData(false);
|
||||
}
|
||||
|
||||
this._appliedTags = new VariableUiElement(
|
||||
self._questionElement.GetValue().map(
|
||||
(tags: TagsFilter) => {
|
||||
if (tags === undefined) {
|
||||
return Translations.t.general.noTagsSelected.SetClass("subtle").Render();
|
||||
}
|
||||
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);
|
||||
return new FixedUiElement(tagsStr).SetClass("subtle").Render();
|
||||
}
|
||||
return tags.asHumanString(true, true);
|
||||
}
|
||||
)
|
||||
).ListenTo(self._questionElement);
|
||||
|
||||
const cancel = () => {
|
||||
self._questionSkipped.setData(true);
|
||||
self._editMode.setData(false);
|
||||
self._source.ping(); // Send a ping upstream to render the next question
|
||||
}
|
||||
|
||||
// Setup the save button and it's action
|
||||
this._saveButton = new SaveButton(this._questionElement.GetValue())
|
||||
.onClick(save);
|
||||
|
||||
this._friendlyLogin = Translations.t.general.loginToStart
|
||||
.onClick(() => State.state.osmConnection.AttemptLogin())
|
||||
|
||||
this._editButton = new FixedUiElement("");
|
||||
if (this._question !== undefined) {
|
||||
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'>")
|
||||
.onClick(() => {
|
||||
self._editMode.setData(true);
|
||||
self._questionElement.GetValue().setData(self.CurrentValue());
|
||||
});
|
||||
}
|
||||
|
||||
const cancelContents = this._editMode.map((isEditing) => {
|
||||
if (isEditing) {
|
||||
return "<span class='skip-button'>" + Translations.t.general.cancel.R() + "</span>";
|
||||
} else {
|
||||
return "<span class='skip-button'>" + Translations.t.general.skip.R() + "</span>";
|
||||
}
|
||||
}, [Locale.language]);
|
||||
// And at last, set up the skip button
|
||||
this._skipButton = new VariableUiElement(cancelContents).onClick(cancel);
|
||||
}
|
||||
|
||||
|
||||
private InputElementFor(options: {
|
||||
freeform?: {
|
||||
key: string,
|
||||
template: string | Translation,
|
||||
renderTemplate: string | Translation,
|
||||
placeholder?: string | Translation,
|
||||
extraTags?: TagsFilter,
|
||||
},
|
||||
mappings?: { k: TagsFilter, txt: string | Translation, priority?: number, substitute?: boolean, hideInAnswer?: boolean }[]
|
||||
}):
|
||||
InputElement<TagsFilter> {
|
||||
|
||||
const elements = [];
|
||||
|
||||
let freeformElement = undefined;
|
||||
|
||||
if (options.freeform !== undefined) {
|
||||
freeformElement = this.InputForFreeForm(options.freeform);
|
||||
}
|
||||
|
||||
if (options.mappings !== undefined) {
|
||||
|
||||
const previousTexts= [];
|
||||
for (const mapping of options.mappings) {
|
||||
if(mapping.k === null){
|
||||
continue;
|
||||
}
|
||||
if(mapping.hideInAnswer){
|
||||
continue;
|
||||
}
|
||||
previousTexts.push(this.ApplyTemplate(mapping.txt));
|
||||
|
||||
elements.push(this.InputElementForMapping(mapping, mapping.substitute));
|
||||
}
|
||||
}
|
||||
|
||||
if(freeformElement !== undefined) {
|
||||
elements.push(freeformElement);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (elements.length == 0) {
|
||||
return new FixedInputElement("This should not happen: no tag renderings defined", undefined);
|
||||
}
|
||||
if (elements.length == 1) {
|
||||
return elements[0];
|
||||
}
|
||||
|
||||
return new RadioButton(elements, false);
|
||||
|
||||
}
|
||||
|
||||
|
||||
private InputElementForMapping(mapping: { k: TagsFilter, txt: (string | Translation) }, substituteValues: boolean) {
|
||||
if (substituteValues) {
|
||||
|
||||
return new FixedInputElement(this.ApplyTemplate(mapping.txt),
|
||||
mapping.k.substituteValues(this.currentTags.data),
|
||||
(t0, t1) => t0.isEquivalent(t1)
|
||||
);
|
||||
}
|
||||
return new FixedInputElement(this.ApplyTemplate(mapping.txt),mapping.k,
|
||||
(t0, t1) => t0.isEquivalent(t1));
|
||||
}
|
||||
|
||||
|
||||
private InputForFreeForm(freeform : {
|
||||
key: string,
|
||||
template: string | Translation,
|
||||
renderTemplate: string | Translation,
|
||||
placeholder?: string | Translation,
|
||||
extraTags?: TagsFilter,
|
||||
}): InputElement<TagsFilter> {
|
||||
if (freeform?.template === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const prepost = Translations.W(freeform.template).InnerRender()
|
||||
.replace("$$$", "$string$")
|
||||
.split("$");
|
||||
const type = prepost[1];
|
||||
|
||||
let isValid = ValidatedTextField.inputValidation[type];
|
||||
if (isValid === undefined) {
|
||||
isValid = () => true;
|
||||
}
|
||||
let formatter = ValidatedTextField.formatting[type] ?? ((str) => str);
|
||||
|
||||
const pickString =
|
||||
(string: any) => {
|
||||
if (string === "" || string === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
if (!isValid(string, this._source.data._country)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
|
||||
const tag = new Tag(freeform.key, formatter(string, this._source.data._country));
|
||||
|
||||
if (tag.value.length > 255) {
|
||||
return undefined; // Too long
|
||||
}
|
||||
|
||||
if (freeform.extraTags === undefined) {
|
||||
return tag;
|
||||
}
|
||||
return new And([
|
||||
tag,
|
||||
freeform.extraTags
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
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 = 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);
|
||||
}
|
||||
|
||||
|
||||
IsKnown(): boolean {
|
||||
const tags = TagUtils.proprtiesToKV(this._source.data);
|
||||
|
||||
for (const oneOnOneElement of this._mapping) {
|
||||
if (oneOnOneElement.k === null || oneOnOneElement.k === undefined || oneOnOneElement.k.matches(tags)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined;
|
||||
}
|
||||
|
||||
IsSkipped(): boolean {
|
||||
return this._questionSkipped.data;
|
||||
}
|
||||
|
||||
private CurrentValue(): TagsFilter {
|
||||
const tags = TagUtils.proprtiesToKV(this._source.data);
|
||||
|
||||
for (const oneOnOneElement of this._mapping) {
|
||||
if (oneOnOneElement.k !== null && oneOnOneElement.k.matches(tags)) {
|
||||
return oneOnOneElement.k;
|
||||
}
|
||||
}
|
||||
if (this._freeform === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return new Tag(this._freeform.key, this._source.data[this._freeform.key]);
|
||||
}
|
||||
|
||||
|
||||
IsQuestioning(): boolean {
|
||||
if (this.IsKnown()) {
|
||||
return false;
|
||||
}
|
||||
if (this._question === undefined ||
|
||||
this._question === "" ||
|
||||
(this._freeform?.template === undefined && (this._mapping?.length ?? 0) == 0)) {
|
||||
// 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 {
|
||||
const tags = TagUtils.proprtiesToKV(this._source.data);
|
||||
|
||||
let freeform: UIElement = new FixedUiElement("");
|
||||
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;
|
||||
for (const oneOnOneElement of this._mapping) {
|
||||
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.ApplyTemplate(highestTemplate);
|
||||
}
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
|
||||
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([
|
||||
question.Render(),
|
||||
"<br/>",
|
||||
this._questionElement,
|
||||
"<span class='login-button-friendly'>",
|
||||
this._friendlyLogin,
|
||||
"</span>",
|
||||
]).Render() + "</div>";
|
||||
}
|
||||
|
||||
if (this.IsQuestioning() || this._editMode.data) {
|
||||
// Not yet known or questioning, we have to ask a question
|
||||
|
||||
return "<div class='question'>" +
|
||||
new Combine([
|
||||
"<span class='question-text'>",
|
||||
this.ApplyTemplate(this._question),
|
||||
"</span>",
|
||||
"<br/>",
|
||||
"<div>", this._questionElement , "</div>",
|
||||
this._skipButton,
|
||||
this._saveButton,
|
||||
"<br/>",
|
||||
this._appliedTags
|
||||
]).Render() +
|
||||
"</div>"
|
||||
}
|
||||
|
||||
if (this.IsKnown()) {
|
||||
|
||||
const answer = this.RenderAnswer();
|
||||
if(answer.IsEmpty()){
|
||||
return "";
|
||||
}
|
||||
let editButton;
|
||||
if (State.state === undefined || // state undefined -> we are custom testing
|
||||
State.state?.osmConnection?.userDetails?.data?.loggedIn && this._question !== undefined) {
|
||||
editButton = this._editButton;
|
||||
}
|
||||
|
||||
return new Combine([
|
||||
"<span class='answer'>",
|
||||
"<span class='answer-text'>",
|
||||
answer,
|
||||
"</span>",
|
||||
editButton ?? "",
|
||||
"</span>"]).Render();
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
|
||||
Priority(): number {
|
||||
return this._priority;
|
||||
}
|
||||
|
||||
private ApplyTemplate(template: string | Translation): UIElement {
|
||||
if (template === undefined || template === null) {
|
||||
return undefined;
|
||||
}
|
||||
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()
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -21,6 +21,7 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
|
|||
placeholder?: string | Translation;
|
||||
extraTags?: TagsFilter
|
||||
};
|
||||
multiAnswer?: boolean,
|
||||
mappings?: { k: TagsFilter; txt: string | Translation; priority?: number, substitute?: boolean, hideInAnwser?: boolean }[]
|
||||
};
|
||||
|
||||
|
|
@ -54,8 +55,12 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
|
|||
*
|
||||
*
|
||||
*/
|
||||
mappings?: { k: TagsFilter, txt: Translation | string, priority?: number, substitute?: boolean , hideInAnswer?:boolean}[],
|
||||
mappings?: { k: TagsFilter, txt: Translation | string, priority?: number, substitute?: boolean, hideInAnswer?: boolean }[],
|
||||
|
||||
/**
|
||||
* If true, use checkboxes to answer instead of radiobuttons
|
||||
*/
|
||||
multiAnswer?: boolean,
|
||||
|
||||
/**
|
||||
* If one wants to render a freeform tag (thus no predefined key/values) or if there are a few well-known tags with a freeform object,
|
||||
|
|
@ -113,12 +118,25 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
|
|||
return template.Subs(tags);
|
||||
}
|
||||
|
||||
console.warn("No content defined for",tags," with mapping",this);
|
||||
console.warn("No content defined for", tags, " with mapping", this);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
|
||||
public static tagRendering: (tags: UIEventSource<any>, options: { priority?: number; question?: string | Translation; freeform?: { key: string; tagsPreprocessor?: (tags: any) => any; template: string | Translation; renderTemplate: string | Translation; placeholder?: string | Translation; extraTags?: TagsFilter }; mappings?: { k: TagsFilter; txt: string | Translation; priority?: number; substitute?: boolean, hideInAnswer?: boolean }[] }) => TagDependantUIElement;
|
||||
public static tagRendering: (tags: UIEventSource<any>,
|
||||
options: {
|
||||
priority?: number;
|
||||
question?: string | Translation;
|
||||
freeform?: {
|
||||
key: string;
|
||||
tagsPreprocessor?: (tags: any) => any;
|
||||
template: string | Translation;
|
||||
renderTemplate: string | Translation;
|
||||
placeholder?: string | Translation; extraTags?: TagsFilter
|
||||
},
|
||||
multiAnswer?: boolean,
|
||||
mappings?: { k: TagsFilter; txt: string | Translation; priority?: number; substitute?: boolean, hideInAnswer?: boolean }[]
|
||||
}) => TagDependantUIElement;
|
||||
|
||||
construct(dependencies: Dependencies): TagDependantUIElement {
|
||||
return TagRenderingOptions.tagRendering(dependencies.tags, this.options);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue