forked from MapComplete/MapComplete
Huge refactoring (WIP)
This commit is contained in:
Pieter Vander Vennet
parent
62c4f0a928
commit
895aa132ec
55 changed files with 1177 additions and 2190 deletions
83
UI/Popup/EditableTagRendering.ts
Normal file
83
UI/Popup/EditableTagRendering.ts
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import TagRenderingQuestion from "./TagRenderingQuestion";
|
||||
import Translations from "../i18n/Translations";
|
||||
import Combine from "../Base/Combine";
|
||||
import TagRenderingAnswer from "./TagRenderingAnswer";
|
||||
import State from "../../State";
|
||||
|
||||
export default class EditableTagRendering extends UIElement {
|
||||
private _tags: UIEventSource<any>;
|
||||
private _configuration: TagRenderingConfig;
|
||||
|
||||
private _editMode: UIEventSource<boolean> = new UIEventSource<boolean>(false);
|
||||
private _editButton: UIElement;
|
||||
|
||||
private _question: UIElement;
|
||||
private _answer: UIElement;
|
||||
|
||||
constructor(tags: UIEventSource<any>,
|
||||
configuration: TagRenderingConfig) {
|
||||
super(tags);
|
||||
this._tags = tags;
|
||||
this._configuration = configuration;
|
||||
|
||||
this.ListenTo(this._editMode);
|
||||
this.ListenTo(State.state?.osmConnection?.userDetails)
|
||||
|
||||
const self = this;
|
||||
|
||||
this._answer = new TagRenderingAnswer(tags, configuration);
|
||||
|
||||
this._answer.SetStyle("width:100%;")
|
||||
|
||||
if (this._configuration.question !== undefined) {
|
||||
// 2.3em total width
|
||||
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);
|
||||
});
|
||||
|
||||
|
||||
// And at last, set up the skip button
|
||||
const cancelbutton =
|
||||
Translations.t.general.cancel.Clone()
|
||||
.SetClass("cancel")
|
||||
.onClick(() => {
|
||||
self._editMode.setData(false)
|
||||
});
|
||||
|
||||
this._question = new TagRenderingQuestion(tags, configuration,
|
||||
() => {
|
||||
self._editMode.setData(false)
|
||||
},
|
||||
cancelbutton)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
InnerRender(): string {
|
||||
|
||||
if (this._editMode.data) {
|
||||
return this._question.Render();
|
||||
}
|
||||
|
||||
if(this._configuration.GetRenderValue(this._tags.data)=== undefined){
|
||||
return "";
|
||||
}
|
||||
|
||||
if(!this._configuration?.condition?.matchesProperties(this._tags.data)){
|
||||
return "";
|
||||
}
|
||||
|
||||
return new Combine([this._answer,
|
||||
(State.state?.osmConnection?.userDetails?.data?.loggedIn ?? true) ? this._editButton : undefined
|
||||
]).SetClass("answer")
|
||||
.Render();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,150 +1,47 @@
|
|||
import {VerticalCombine} from "../Base/VerticalCombine";
|
||||
import {UIElement} from "../UIElement";
|
||||
import Combine from "../Base/Combine";
|
||||
import {WikipediaLink} from "../../Customizations/Questions/WikipediaLink";
|
||||
import {OsmLink} from "../../Customizations/Questions/OsmLink";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import {TagRenderingOptions} from "../../Customizations/TagRenderingOptions";
|
||||
import State from "../../State";
|
||||
import {And} from "../../Logic/Tags";
|
||||
import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import Translations from "../i18n/Translations";
|
||||
import LayerConfig from "../../Customizations/JSON/LayerConfig";
|
||||
import EditableTagRendering from "./EditableTagRendering";
|
||||
import QuestionBox from "./QuestionBox";
|
||||
import Combine from "../Base/Combine";
|
||||
import TagRenderingAnswer from "./TagRenderingAnswer";
|
||||
|
||||
export class FeatureInfoBox extends UIElement {
|
||||
private _tags: UIEventSource<any>;
|
||||
private _layerConfig: LayerConfig;
|
||||
|
||||
/**
|
||||
* The actual GEOJSON-object, with geometry and stuff
|
||||
*/
|
||||
private _feature: any;
|
||||
/**
|
||||
* The tags, wrapped in a global event source
|
||||
*/
|
||||
private readonly _tagsES: UIEventSource<any>;
|
||||
private readonly _title: UIElement;
|
||||
private readonly _infoboxes: TagDependantUIElement[];
|
||||
|
||||
private readonly _oneSkipped = Translations.t.general.oneSkippedQuestion.Clone();
|
||||
private readonly _someSkipped = Translations.t.general.skippedQuestions.Clone();
|
||||
private _title : UIElement;
|
||||
private _titleIcons: UIElement;
|
||||
private _renderings: UIElement[];
|
||||
private _questionBox : UIElement;
|
||||
|
||||
constructor(
|
||||
feature: any,
|
||||
tagsES: UIEventSource<any>,
|
||||
title: TagDependantUIElementConstructor | UIElement | string,
|
||||
elementsToShow: TagDependantUIElementConstructor[],
|
||||
tags: UIEventSource<any>,
|
||||
layerConfig: LayerConfig
|
||||
) {
|
||||
super(tagsES);
|
||||
this._feature = feature;
|
||||
this._tagsES = tagsES
|
||||
if(tagsES === undefined){
|
||||
throw "No Tags event source given"
|
||||
}
|
||||
this.ListenTo(State.state.osmConnection.userDetails);
|
||||
this.SetClass("featureinfobox");
|
||||
const tags = this._tagsES;
|
||||
|
||||
this._infoboxes = [];
|
||||
elementsToShow = elementsToShow ?? []
|
||||
|
||||
const self = this;
|
||||
for (const tagRenderingOption of elementsToShow) {
|
||||
self._infoboxes.push(
|
||||
tagRenderingOption.construct(tags));
|
||||
}
|
||||
function initTags() {
|
||||
self._infoboxes.splice(0, self._infoboxes.length);
|
||||
for (const tagRenderingOption of elementsToShow) {
|
||||
self._infoboxes.push(
|
||||
tagRenderingOption.construct(tags));
|
||||
}
|
||||
self.Update();
|
||||
}
|
||||
|
||||
this._someSkipped.onClick(initTags)
|
||||
this._oneSkipped.onClick(initTags)
|
||||
super();
|
||||
this._tags = tags;
|
||||
this._layerConfig = layerConfig;
|
||||
|
||||
|
||||
let renderedTitle: UIElement;
|
||||
title = title ?? new TagRenderingOptions(
|
||||
{
|
||||
mappings: [{k: new And([]), txt: ""}]
|
||||
}
|
||||
)
|
||||
if (typeof (title) == "string") {
|
||||
renderedTitle = new FixedUiElement(title);
|
||||
} else if (title instanceof UIElement) {
|
||||
renderedTitle = title;
|
||||
} else {
|
||||
renderedTitle = title.construct(tags);
|
||||
}
|
||||
this._title = new TagRenderingAnswer(tags, layerConfig.title)
|
||||
.SetClass("featureinfobox-title");
|
||||
this._titleIcons = new Combine(
|
||||
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
|
||||
.SetClass("featureinfobox-icons");
|
||||
this._renderings = layerConfig.tagRenderings.map(tr => new EditableTagRendering(tags, tr));
|
||||
this._questionBox = new QuestionBox(tags, layerConfig.tagRenderings);
|
||||
|
||||
|
||||
renderedTitle
|
||||
.SetStyle("width: calc(100% - 50px - 0.2em);")
|
||||
.SetClass("title-font")
|
||||
|
||||
const osmLink = new OsmLink()
|
||||
.construct(tags)
|
||||
.SetStyle("width: 24px; display:block;")
|
||||
const wikipedialink = new WikipediaLink()
|
||||
.construct(tags)
|
||||
.SetStyle("width: 24px; display:block;")
|
||||
|
||||
this._title = new Combine([
|
||||
renderedTitle,
|
||||
wikipedialink,
|
||||
osmLink]).SetStyle("display:flex;");
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
|
||||
|
||||
const info = [];
|
||||
const questions: TagDependantUIElement[] = [];
|
||||
let skippedQuestions = 0;
|
||||
for (const infobox of this._infoboxes) {
|
||||
if (infobox.IsKnown()) {
|
||||
info.push(infobox);
|
||||
} else if (infobox.IsQuestioning()) {
|
||||
questions.push(infobox);
|
||||
} else if (infobox.IsSkipped()) {
|
||||
// This question is neither known nor questioning -> it was skipped
|
||||
skippedQuestions++;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let questionElement: UIElement;
|
||||
|
||||
if (questions.length > 0) {
|
||||
// We select the most important question and render that one
|
||||
let mostImportantQuestion;
|
||||
for (const question of questions) {
|
||||
|
||||
if (mostImportantQuestion === undefined) {
|
||||
mostImportantQuestion = question;
|
||||
break;
|
||||
}
|
||||
}
|
||||
questionElement = mostImportantQuestion;
|
||||
} else if (skippedQuestions == 1) {
|
||||
questionElement = this._oneSkipped;
|
||||
} else if (skippedQuestions > 0) {
|
||||
questionElement = this._someSkipped;
|
||||
}
|
||||
|
||||
const infoboxcontents = new Combine(
|
||||
[new VerticalCombine(info).SetClass("infobox-information")
|
||||
, questionElement ?? ""]);
|
||||
|
||||
return new Combine([
|
||||
this._title,
|
||||
"<div class='infoboxcontents'>",
|
||||
infoboxcontents,
|
||||
"</div>"])
|
||||
.Render();
|
||||
new Combine([this._title, this._titleIcons])
|
||||
.SetClass("featureinfobox-titlebar"),
|
||||
...this._renderings,
|
||||
this._questionBox
|
||||
]).Render();
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
78
UI/Popup/QuestionBox.ts
Normal file
78
UI/Popup/QuestionBox.ts
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
|
||||
import TagRenderingQuestion from "./TagRenderingQuestion";
|
||||
import Translations from "../i18n/Translations";
|
||||
|
||||
|
||||
/**
|
||||
* Generates all the questions, one by one
|
||||
*/
|
||||
export default class QuestionBox extends UIElement {
|
||||
private _tags: UIEventSource<any>;
|
||||
|
||||
private _tagRenderings: TagRenderingConfig[];
|
||||
private _tagRenderingQuestions: UIElement[];
|
||||
|
||||
private _skippedQuestions: UIEventSource<number[]> = new UIEventSource<number[]>([])
|
||||
private _skippedQuestionsButton: UIElement;
|
||||
|
||||
constructor(tags: UIEventSource<any>, tagRenderings: TagRenderingConfig[]) {
|
||||
super(tags);
|
||||
this.ListenTo(this._skippedQuestions);
|
||||
this._tags = tags;
|
||||
const self = this;
|
||||
this._tagRenderings = tagRenderings.filter(tr => tr.question !== undefined);
|
||||
this._tagRenderingQuestions = this._tagRenderings
|
||||
.map((tagRendering, i) => new TagRenderingQuestion(this._tags, tagRendering,
|
||||
() => {
|
||||
// We save
|
||||
self._skippedQuestions.data.push(i)
|
||||
self._skippedQuestions.ping();
|
||||
},
|
||||
Translations.t.general.skip.Clone()
|
||||
.SetClass("cancel")
|
||||
.onClick(() => {
|
||||
self._skippedQuestions.data.push(i);
|
||||
self._skippedQuestions.ping();
|
||||
})
|
||||
));
|
||||
|
||||
|
||||
this._skippedQuestionsButton = Translations.t.general.skippedQuestions.Clone()
|
||||
.onClick(() => {
|
||||
self._skippedQuestions.setData([]);
|
||||
})
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
for (let i = 0; i < this._tagRenderingQuestions.length; i++) {
|
||||
let tagRendering = this._tagRenderings[i];
|
||||
if(tagRendering.condition &&
|
||||
!tagRendering.condition.matchesProperties(this._tags.data)){
|
||||
// Filtered away by the condition
|
||||
continue;
|
||||
}
|
||||
|
||||
if (tagRendering.GetRenderValue(this._tags.data) !== undefined) {
|
||||
// This value is known
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
if (this._skippedQuestions.data.indexOf(i) >= 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// this value is NOT known
|
||||
return this._tagRenderingQuestions[i].Render();
|
||||
}
|
||||
|
||||
if (this._skippedQuestions.data.length > 0) {
|
||||
return this._skippedQuestionsButton.Render();
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import {UIElement} from "../UIElement";
|
||||
import Translations from "../i18n/Translations";
|
||||
import State from "../../State";
|
||||
|
||||
export class SaveButton extends UIElement {
|
||||
|
||||
private _value: UIEventSource<any>;
|
||||
private _friendlyLogin: UIElement;
|
||||
|
||||
constructor(value: UIEventSource<any>) {
|
||||
super(value);
|
||||
|
|
@ -11,16 +14,22 @@ export class SaveButton extends UIElement {
|
|||
throw "No event source for savebutton, something is wrong"
|
||||
}
|
||||
this._value = value;
|
||||
|
||||
this._friendlyLogin = Translations.t.general.loginToStart.Clone()
|
||||
.SetClass("login-button-friendly")
|
||||
.onClick(() => State.state.osmConnection.AttemptLogin())
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
if (this._value.data === undefined ||
|
||||
this._value.data === null
|
||||
|| this._value.data === ""
|
||||
) {
|
||||
return "<span class='save-non-active'>"+Translations.t.general.save.Render()+"</span>"
|
||||
let clss = "save";
|
||||
|
||||
if(State.state !== undefined && !State.state.osmConnection.userDetails.data.loggedIn){
|
||||
return this._friendlyLogin.Render();
|
||||
}
|
||||
return "<span class='save'>"+Translations.t.general.save.Render()+"</span>";
|
||||
if ((this._value.data ?? "") === "") {
|
||||
clss = "save-non-active";
|
||||
}
|
||||
return Translations.t.general.save.Clone().SetClass(clss).Render();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,544 +0,0 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import Translation from "../i18n/Translation";
|
||||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
import InputElementMap from "../Input/InputElementMap";
|
||||
import CheckBoxes from "../Input/Checkboxes";
|
||||
import Combine from "../Base/Combine";
|
||||
import {And, Tag, TagsFilter, TagUtils} from "../../Logic/Tags";
|
||||
import {InputElement} from "../Input/InputElement";
|
||||
import {SaveButton} from "./SaveButton";
|
||||
import {RadioButton} from "../Input/RadioButton";
|
||||
import {FixedInputElement} from "../Input/FixedInputElement";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import ValidatedTextField from "../Input/ValidatedTextField";
|
||||
import {TagRenderingOptions} from "../../Customizations/TagRenderingOptions";
|
||||
import State from "../../State";
|
||||
import {SubstitutedTranslation} from "../SpecialVisualizations";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import Translations from "../i18n/Translations";
|
||||
import {TagDependantUIElement} from "../../Customizations/UIElementConstructor";
|
||||
import Locale from "../i18n/Locale";
|
||||
|
||||
export class TagRendering extends UIElement implements TagDependantUIElement {
|
||||
|
||||
|
||||
private readonly _question: string | Translation;
|
||||
private readonly _mapping: { k: TagsFilter, txt: string | Translation }[];
|
||||
|
||||
private readonly 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: {
|
||||
question?: string | Translation,
|
||||
freeform?: {
|
||||
key: string,
|
||||
template: string | Translation,
|
||||
renderTemplate: string | Translation,
|
||||
placeholder?: string | Translation,
|
||||
extraTags?: TagsFilter,
|
||||
},
|
||||
tagsPreprocessor?: ((tags: any) => any),
|
||||
multiAnswer?: boolean,
|
||||
mappings?: { k: TagsFilter, txt: string | Translation, substitute?: boolean, hideInAnswer?: boolean }[]
|
||||
}) {
|
||||
super(tags);
|
||||
if (tags === undefined) {
|
||||
throw "No tags given for a tagrendering..."
|
||||
}
|
||||
if (options.question !== undefined) {
|
||||
if ((options.mappings?.length ?? 0) === 0 && options.freeform.key === undefined) {
|
||||
throw "Error: question without mappings or key"
|
||||
}
|
||||
}
|
||||
this.ListenTo(Locale.language);
|
||||
this.ListenTo(this._editMode);
|
||||
this.ListenTo(this._questionSkipped);
|
||||
this.ListenTo(State.state?.osmConnection?.userDetails);
|
||||
|
||||
const self = this;
|
||||
|
||||
this.currentTags = tags.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;
|
||||
}
|
||||
);
|
||||
tags.addCallback(() => self.currentTags.ping());
|
||||
|
||||
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,
|
||||
}
|
||||
|
||||
|
||||
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) => {
|
||||
const csCount = State.state?.osmConnection?.userDetails?.data?.csCount ?? 1000;
|
||||
if (csCount < State.userJourney.tagsVisibleAt) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (tags === undefined) {
|
||||
return Translations.t.general.noTagsSelected.SetClass("subtle").Render();
|
||||
}
|
||||
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.Clone()
|
||||
.SetClass("login-button-friendly")
|
||||
.onClick(() => State.state.osmConnection.AttemptLogin())
|
||||
|
||||
this._editButton = new FixedUiElement("");
|
||||
if (this._question !== undefined) {
|
||||
// 2.3em total width
|
||||
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) => {
|
||||
const tr = Translations.t.general;
|
||||
const text = isEditing ? tr.cancel : tr.skip;
|
||||
return text
|
||||
.SetStyle("display: inline-block;border: solid black 0.5px;padding: 0.2em 0.3em;border-radius: 1.5em;")
|
||||
.Render();
|
||||
}, [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,
|
||||
},
|
||||
multiAnswer?: boolean,
|
||||
mappings?: { k: TagsFilter, txt: string | Translation, substitute?: boolean, hideInAnswer?: boolean }[]
|
||||
}):
|
||||
InputElement<TagsFilter> {
|
||||
|
||||
|
||||
let freeformElement: InputElement<TagsFilter> = undefined;
|
||||
if (options.freeform !== undefined) {
|
||||
freeformElement = this.InputForFreeForm(options.freeform);
|
||||
}
|
||||
|
||||
if (options.mappings === undefined || options.mappings.length === 0) {
|
||||
return freeformElement;
|
||||
}
|
||||
|
||||
|
||||
const elements: InputElement<TagsFilter>[] = [];
|
||||
|
||||
for (const mapping of options.mappings) {
|
||||
if (mapping.k === null) {
|
||||
continue;
|
||||
}
|
||||
if (mapping.hideInAnswer) {
|
||||
continue;
|
||||
}
|
||||
elements.push(this.InputElementForMapping(mapping, mapping.substitute));
|
||||
}
|
||||
|
||||
if (freeformElement !== undefined) {
|
||||
elements.push(freeformElement);
|
||||
}
|
||||
|
||||
if (!options.multiAnswer) {
|
||||
return new RadioButton(elements, false);
|
||||
} else {
|
||||
const possibleTags = elements.map(el => el.GetValue().data);
|
||||
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;
|
||||
}
|
||||
let tags: TagsFilter[] = indices.map(i => elements[i].GetValue().data);
|
||||
return TagUtils.FlattenMultiAnswer(tags);
|
||||
},
|
||||
(tags: TagsFilter) => {
|
||||
const splitUpValues = TagUtils.SplitMultiAnswer(tags, possibleTags, this._freeform?.key, this._freeform?.extraTags);
|
||||
const indices: number[] = []
|
||||
|
||||
for (let i = 0; i < splitUpValues.length; i++) {
|
||||
let splitUpValue = splitUpValues[i];
|
||||
|
||||
for (let j = 0; j < elements.length; j++) {
|
||||
let inputElement = elements[j];
|
||||
if (inputElement.IsValid(splitUpValue)) {
|
||||
indices.push(j);
|
||||
inputElement.GetValue().setData(splitUpValue);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return indices;
|
||||
},
|
||||
[freeformElement?.GetValue()]
|
||||
);
|
||||
|
||||
freeformElement?.GetValue()?.addCallbackAndRun(value => {
|
||||
const es = checkBoxes.GetValue();
|
||||
const i = elements.length - 1;
|
||||
const index = es.data.indexOf(i);
|
||||
if (value === undefined) {
|
||||
if (index >= 0) {
|
||||
es.data.splice(index, 1);
|
||||
es.ping();
|
||||
}
|
||||
} else if (index < 0) {
|
||||
es.data.push(i);
|
||||
es.ping();
|
||||
}
|
||||
});
|
||||
|
||||
return inputEl;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private InputElementForMapping(mapping: { k: TagsFilter, txt: (string | Translation) }, substituteValues: boolean): FixedInputElement<TagsFilter> {
|
||||
if (substituteValues) {
|
||||
return new FixedInputElement(this.ApplyTemplate(mapping.txt),
|
||||
mapping.k.substituteValues(this.currentTags.data),
|
||||
(t0, t1) => t0.isEquivalent(t1)
|
||||
);
|
||||
}
|
||||
|
||||
let txt = this.ApplyTemplate(mapping.txt);
|
||||
if (txt.Render().indexOf("<img") >= 0) {
|
||||
txt.SetClass("question-option-with-border");
|
||||
}
|
||||
const inputEl = new FixedInputElement(txt, mapping.k,
|
||||
(t0, t1) => t1.isEquivalent(t0));
|
||||
|
||||
return inputEl;
|
||||
}
|
||||
|
||||
|
||||
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("$");
|
||||
let type = prepost[1];
|
||||
|
||||
let isTextArea = false;
|
||||
if (type === "text") {
|
||||
isTextArea = true;
|
||||
type = "string";
|
||||
}
|
||||
|
||||
if (ValidatedTextField.AllTypes[type] === undefined) {
|
||||
console.error("Type:", type, ValidatedTextField.AllTypes)
|
||||
throw "Unkown type: " + type;
|
||||
}
|
||||
|
||||
|
||||
const pickString =
|
||||
(string: any) => {
|
||||
if (string === "" || string === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const tag = new Tag(freeform.key, string);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
return ValidatedTextField.Mapped(pickString, toString, {
|
||||
placeholder: freeform.placeholder,
|
||||
type: type,
|
||||
isValid: (str) => (str.length <= 255),
|
||||
textArea: isTextArea,
|
||||
country: this._source.data._country
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
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);
|
||||
|
||||
|
||||
for (const oneOnOneElement of this._mapping) {
|
||||
if (oneOnOneElement.k === undefined || oneOnOneElement.k.matches(tags)) {
|
||||
// We have found a matching key -> we use this template
|
||||
return this.ApplyTemplate(oneOnOneElement.txt);
|
||||
}
|
||||
}
|
||||
|
||||
if (this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined) {
|
||||
return this.ApplyTemplate(this._freeform.renderTemplate);
|
||||
}
|
||||
|
||||
return new FixedUiElement("");
|
||||
}
|
||||
|
||||
|
||||
private CreateComponent(): UIElement {
|
||||
|
||||
|
||||
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 new Combine(["<div class='question'>",
|
||||
question,
|
||||
"<br/>",
|
||||
this._questionElement,
|
||||
this._friendlyLogin, "</div>"
|
||||
]);
|
||||
}
|
||||
|
||||
if (this.IsQuestioning() || this._editMode.data) {
|
||||
// Not yet known or questioning, we have to ask a question
|
||||
return new Combine([
|
||||
this.ApplyTemplate(this._question).SetStyle('question-text'),
|
||||
"<br/>",
|
||||
"<div>", this._questionElement, "</div>",
|
||||
this._skipButton,
|
||||
this._saveButton,
|
||||
"<br/>",
|
||||
this._appliedTags
|
||||
]).SetClass('question');
|
||||
}
|
||||
|
||||
if (this.IsKnown()) {
|
||||
|
||||
const answer = this.RenderAnswer();
|
||||
|
||||
if (answer.IsEmpty()) {
|
||||
return new FixedUiElement("");
|
||||
}
|
||||
|
||||
|
||||
const answerStyle = " display: inline-block;" +
|
||||
" margin: 0.1em;" +
|
||||
" width: 100%;" +
|
||||
" font-size: large;"
|
||||
|
||||
if (State.state === undefined || // state undefined -> we are custom testing
|
||||
State.state?.osmConnection?.userDetails?.data?.loggedIn && this._question !== undefined) {
|
||||
answer.SetStyle("display:inline-block;width:calc(100% - 2.3em);")
|
||||
return new Combine([
|
||||
answer,
|
||||
this._editButton])
|
||||
.SetStyle(answerStyle);
|
||||
}
|
||||
|
||||
return answer.SetStyle(answerStyle);
|
||||
}
|
||||
console.error("Invalid tagrendering: fallthrough",this)
|
||||
return new FixedUiElement("");
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
return this.CreateComponent().Render();
|
||||
}
|
||||
|
||||
|
||||
protected InnerUpdate(htmlElement: HTMLElement) {
|
||||
this._editButton.Update();
|
||||
}
|
||||
|
||||
private readonly answerCache = {}
|
||||
// Makes sure that the elements receive updates
|
||||
// noinspection JSMismatchedCollectionQueryUpdate
|
||||
private readonly substitutedElements : UIElement[]= [];
|
||||
|
||||
private ApplyTemplate(template: string | Translation): UIElement {
|
||||
const tr = Translations.WT(template);
|
||||
if(tr === undefined){
|
||||
return undefined;
|
||||
}
|
||||
if (this.answerCache[tr.id]) {
|
||||
return this.answerCache[tr.id];
|
||||
}
|
||||
// We have to cache these elemnts, otherwise it is to slow
|
||||
const el = new SubstitutedTranslation(tr, this.currentTags);
|
||||
this.answerCache[tr.id] = el;
|
||||
this.substitutedElements.push(el);
|
||||
return el;
|
||||
}
|
||||
|
||||
}
|
||||
28
UI/Popup/TagRenderingAnswer.ts
Normal file
28
UI/Popup/TagRenderingAnswer.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
|
||||
import {UIElement} from "../UIElement";
|
||||
import {SubstitutedTranslation} from "../SpecialVisualizations";
|
||||
|
||||
/***
|
||||
* Displays the correct value for a known tagrendering
|
||||
*/
|
||||
export default class TagRenderingAnswer extends UIElement {
|
||||
private _tags: UIEventSource<any>;
|
||||
private _configuration: TagRenderingConfig;
|
||||
|
||||
constructor(tags: UIEventSource<any>,
|
||||
configuration: TagRenderingConfig) {
|
||||
super(tags);
|
||||
this._tags = tags;
|
||||
this._configuration = configuration;
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
const tr = this._configuration.GetRenderValue(this._tags.data);
|
||||
if(tr === undefined){
|
||||
return "";
|
||||
}
|
||||
return new SubstitutedTranslation(tr, this._tags).Render();
|
||||
}
|
||||
|
||||
}
|
||||
251
UI/Popup/TagRenderingQuestion.ts
Normal file
251
UI/Popup/TagRenderingQuestion.ts
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
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 Translation from "../i18n/Translation";
|
||||
import {FixedInputElement} from "../Input/FixedInputElement";
|
||||
import {SubstitutedTranslation} from "../SpecialVisualizations";
|
||||
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";
|
||||
|
||||
/**
|
||||
* 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 _tags: UIEventSource<any>;
|
||||
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,
|
||||
cancelButton?: UIElement) {
|
||||
super(tags);
|
||||
this._tags = tags;
|
||||
this._configuration = configuration;
|
||||
this._cancelButton = cancelButton;
|
||||
this._question = new SubstitutedTranslation(this._configuration.question, tags)
|
||||
.SetClass("question-text");
|
||||
if (configuration === undefined) {
|
||||
throw "A question is needed for a question visualization"
|
||||
}
|
||||
|
||||
|
||||
this._inputElement = this.GenerateInputElement()
|
||||
const self = this;
|
||||
const save = () => {
|
||||
const selection = self._inputElement.GetValue().data;
|
||||
if (selection) {
|
||||
(State.state?.changes ?? new Changes())
|
||||
.addTag(tags.data.id, selection, tags);
|
||||
}
|
||||
|
||||
if (afterSave) {
|
||||
afterSave();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this._saveButton = new SaveButton(this._inputElement.GetValue())
|
||||
.onClick(save)
|
||||
|
||||
|
||||
this._appliedTags = new VariableUiElement(
|
||||
self._inputElement.GetValue().map(
|
||||
(tags: TagsFilter) => {
|
||||
const csCount = State.state?.osmConnection?.userDetails?.data?.csCount ?? 1000;
|
||||
if (csCount < State.userJourney.tagsVisibleAt) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (tags === undefined) {
|
||||
return Translations.t.general.noTagsSelected.SetClass("subtle").Render();
|
||||
}
|
||||
if (csCount < State.userJourney.tagsVisibleAndWikiLinked) {
|
||||
const tagsStr = tags.asHumanString(false, true);
|
||||
return new FixedUiElement(tagsStr).SetClass("subtle").Render();
|
||||
}
|
||||
return tags.asHumanString(true, true);
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
if (mappings.length == 0) {
|
||||
return ff;
|
||||
}
|
||||
|
||||
mappings = Utils.NoNull([...mappings, ff]);
|
||||
mappings.forEach(el => el.SetClass("question-option-with-border"))
|
||||
|
||||
if (this._configuration.multiAnswer) {
|
||||
return this.GenerateMultiAnswer(mappings, ff)
|
||||
} else {
|
||||
return new RadioButton(mappings, false)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private GenerateMultiAnswer(elements: InputElement<TagsFilter>[], freeformField: InputElement<TagsFilter>): InputElement<TagsFilter> {
|
||||
const possibleTags = elements.map(el => el.GetValue().data);
|
||||
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);
|
||||
return TagUtils.FlattenMultiAnswer(tags);
|
||||
},
|
||||
(tags: TagsFilter) => {
|
||||
const splitUpValues = TagUtils.SplitMultiAnswer(tags, possibleTags, this._configuration.freeform?.key, new And(this._configuration.freeform?.addExtraTags));
|
||||
const indices: number[] = []
|
||||
|
||||
for (let i = 0; i < splitUpValues.length; i++) {
|
||||
let splitUpValue = splitUpValues[i];
|
||||
|
||||
for (let j = 0; j < elements.length; j++) {
|
||||
let inputElement = elements[j];
|
||||
if (inputElement.IsValid(splitUpValue)) {
|
||||
indices.push(j);
|
||||
inputElement.GetValue().setData(splitUpValue);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(indices)
|
||||
return indices;
|
||||
},
|
||||
elements.map(el => el.GetValue())
|
||||
);
|
||||
|
||||
|
||||
freeformField?.GetValue()?.addCallbackAndRun(value => {
|
||||
const es = checkBoxes.GetValue();
|
||||
const i = elements.length - 1;
|
||||
const index = es.data.indexOf(i);
|
||||
if (value === undefined) {
|
||||
if (index >= 0) {
|
||||
es.data.splice(index, 1);
|
||||
es.ping();
|
||||
}
|
||||
} else if (index < 0) {
|
||||
es.data.push(i);
|
||||
es.ping();
|
||||
}
|
||||
});
|
||||
|
||||
return inputEl;
|
||||
}
|
||||
|
||||
private GenerateMappingElement(mapping: {
|
||||
if: TagsFilter,
|
||||
then: Translation,
|
||||
hideInAnswer: boolean
|
||||
}): InputElement<TagsFilter> {
|
||||
if (mapping.hideInAnswer) {
|
||||
return undefined;
|
||||
}
|
||||
return new FixedInputElement(
|
||||
new SubstitutedTranslation(mapping.then, this._tags),
|
||||
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),
|
||||
country: this._tags.data._country
|
||||
});
|
||||
|
||||
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, "<br/>",
|
||||
this._cancelButton,
|
||||
this._saveButton, "<br/>",
|
||||
this._appliedTags])
|
||||
.SetClass("question")
|
||||
.Render()
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue