midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

More refactoring and fixes

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-14 02:39:23 +02:00
parent d7004cd3dc
commit 9cc721abad
37 changed files with 519 additions and 632 deletions
Download patch file Download diff file Expand all files Collapse all files

94
UI/Popup/EditableTagRendering.ts
View file

@ -1,4 +1,3 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import TagRenderingQuestion from "./TagRenderingQuestion";
@ -7,80 +6,65 @@ import Combine from "../Base/Combine";
import TagRenderingAnswer from "./TagRenderingAnswer";
import State from "../../State";
import Svg from "../../Svg";
import Toggle from "../Input/Toggle";
import BaseUIElement from "../BaseUIElement";
export default class EditableTagRendering extends UIElement {
private readonly _tags: UIEventSource<any>;
private readonly _configuration: TagRenderingConfig;
private _editMode: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private _editButton: UIElement;
private _question: UIElement;
private _answer: UIElement;
export default class EditableTagRendering extends Toggle {
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 editMode = new UIEventSource<boolean>(false);
this._answer = new TagRenderingAnswer(tags, configuration);
this._answer.SetClass("w-full")
this._question = this.GenerateQuestion();
this.dumbMode = false;
const answer: BaseUIElement = new TagRenderingAnswer(tags, configuration)
let rendering = answer;
if (this._configuration.question !== undefined) {
if (State.state?.featureSwitchUserbadge?.data) {
// 2.3em total width
const self = this;
this._editButton =
Svg.pencil_svg().SetClass("edit-button")
.onClick(() => {
self._editMode.setData(true);
});
}
}
}
if (configuration.question !== undefined && State.state?.featureSwitchUserbadge?.data) {
// We have a question and editing is enabled
const editButton =
new Combine([Svg.pencil_ui()]).SetClass("block relative h-10 w-10 p-2 float-right").SetStyle("border: 1px solid black; border-radius: 0.7em")
.onClick(() => {
editMode.setData(true);
});
InnerRender(): string {
if (!this._configuration?.condition?.matchesProperties(this._tags.data)) {
return "";
}
if (this._editMode.data) {
return this._question.Render();
}
if(!this._configuration.IsKnown(this._tags.data)){
// Even though it is not known, we hide the question here
// It is the questionbox's task to show the question in edit mode
return "";
}
return new Combine([this._answer,
(State.state?.osmConnection?.userDetails?.data?.loggedIn ?? true) ? this._editButton : undefined
]).SetClass("flex w-full break-word justify-between text-default landscape:w-1/2 landscape:p-2 pb-2 border-b border-gray-300 mb-2")
.Render();
}
const answerWithEditButton = new Combine([answer,
new Toggle(editButton, undefined, State.state.osmConnection.isLoggedIn)]).SetClass("w-full")
private GenerateQuestion() {
const self = this;
if (this._configuration.question !== undefined) {
// And at last, set up the skip button
const cancelbutton =
Translations.t.general.cancel.Clone()
.SetClass("btn btn-secondary mr-3")
.onClick(() => {
self._editMode.setData(false)
editMode.setData(false)
});
return new TagRenderingQuestion(this._tags, this._configuration,
const question = new TagRenderingQuestion(tags, configuration,
() => {
self._editMode.setData(false)
editMode.setData(false)
},
cancelbutton)
rendering = new Toggle(
question,
answerWithEditButton,
editMode
)
}
answer.SetClass("flex w-full break-word justify-between text-default landscape:w-1/2 landscape:p-2 pb-2 border-b border-gray-300 mb-2")
rendering.SetClass("flex m-1 p-1 border-b border-gray-300 mb-2 pb-2")
// The tagrendering is hidden if:
// The answer is unknown. The questionbox will then show the question
// There is a condition hiding the answer
const renderingIsShown = tags.map(tags =>
!configuration.IsKnown(tags) &&
(configuration?.condition?.matchesProperties(tags) ?? true))
super(
rendering,
undefined,
renderingIsShown
)
}
}