From 785f57262e77a14a4a26578fd2b9ff95b63f35e1 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Mon, 28 Jun 2021 00:45:49 +0200 Subject: [PATCH] Further cleanup: further removal of the UIElement --- Logic/Actors/GeoLocationHandler.ts | 55 ++++----- UI/Base/Button.ts | 3 +- UI/Base/Ornament.ts | 11 +- UI/Base/Title.ts | 1 - UI/BigComponents/UploadFlowStateUI.ts | 10 +- UI/Image/DeleteImage.ts | 2 - UI/Input/ValidatedTextField.ts | 10 +- UI/MapControlButton.ts | 11 +- UI/OpeningHours/OpeningHoursVisualization.ts | 17 +-- UI/Popup/FeatureInfoBox.ts | 3 +- UI/Popup/QuestionBox.ts | 102 ++++++++-------- UI/Popup/TagRenderingQuestion.ts | 122 ++++++++----------- UI/Reviews/SingleReview.ts | 53 ++++---- UI/UIElement.ts | 60 +-------- UI/i18n/Translation.ts | 3 +- 15 files changed, 169 insertions(+), 294 deletions(-) diff --git a/Logic/Actors/GeoLocationHandler.ts b/Logic/Actors/GeoLocationHandler.ts index 740fc77ce..e86c1baa7 100644 --- a/Logic/Actors/GeoLocationHandler.ts +++ b/Logic/Actors/GeoLocationHandler.ts @@ -1,27 +1,25 @@ import * as L from "leaflet"; import {UIEventSource} from "../UIEventSource"; -import {UIElement} from "../../UI/UIElement"; import {Utils} from "../../Utils"; import Svg from "../../Svg"; import Img from "../../UI/Base/Img"; import {LocalStorageSource} from "../Web/LocalStorageSource"; import LayoutConfig from "../../Customizations/JSON/LayoutConfig"; -import BaseUIElement from "../../UI/BaseUIElement"; import {VariableUiElement} from "../../UI/Base/VariableUIElement"; -export default class GeoLocationHandler extends UIElement { +export default class GeoLocationHandler extends VariableUiElement { /** * Wether or not the geolocation is active, aka the user requested the current location * @private */ - private readonly _isActive: UIEventSource = new UIEventSource(false); + private readonly _isActive: UIEventSource; /** * The callback over the permission API * @private */ - private readonly _permission: UIEventSource = new UIEventSource(""); + private readonly _permission: UIEventSource; /*** * The marker on the map, in order to update it * @private @@ -51,21 +49,37 @@ export default class GeoLocationHandler extends UIElement { * If the user denies the geolocation this time, we unset this flag * @private */ - private readonly _previousLocationGrant: UIEventSource = LocalStorageSource.Get("geolocation-permissions"); + private readonly _previousLocationGrant: UIEventSource; private readonly _layoutToUse: UIEventSource; - private readonly _element: BaseUIElement; - constructor(currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>, leafletMap: UIEventSource, layoutToUse: UIEventSource) { - super(); + + const hasLocation = currentGPSLocation.map((location) => location !== undefined); + const previousLocationGrant = LocalStorageSource.Get("geolocation-permissions") + const isActive = new UIEventSource(false); + + super( + hasLocation.map(hasLocation => { + + if (hasLocation) { + return Svg.crosshair_blue_ui() + } + if (isActive.data) { + return Svg.crosshair_blue_center_ui(); + } + return Svg.crosshair_ui(); + }, [isActive]) + ); + this._isActive = isActive; + this._permission = new UIEventSource("") + this._previousLocationGrant = previousLocationGrant; this._currentGPSLocation = currentGPSLocation; this._leafletMap = leafletMap; this._layoutToUse = layoutToUse; - this._hasLocation = currentGPSLocation.map((location) => location !== undefined); - + this._hasLocation = hasLocation; const self = this; const currentPointer = this._isActive.map(isActive => { @@ -77,28 +91,11 @@ export default class GeoLocationHandler extends UIElement { currentPointer.addCallbackAndRun(pointerClass => { self.SetClass(pointerClass); }) - this._element = new VariableUiElement( - this._hasLocation.map(hasLocation => { - if (hasLocation) { - return Svg.crosshair_blue_ui() - } - if (self._isActive.data) { - return Svg.crosshair_blue_center_ui(); - } - return Svg.crosshair_ui(); - }, [this._isActive]) - ); this.onClick(() => self.init(true)) + this.init(false) - self.init(false) - - } - - - protected InnerRender(): string | BaseUIElement { - return this._element } private init(askPermission: boolean) { diff --git a/UI/Base/Button.ts b/UI/Base/Button.ts index e671e0979..3308503c1 100644 --- a/UI/Base/Button.ts +++ b/UI/Base/Button.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import Translations from "../i18n/Translations"; import BaseUIElement from "../BaseUIElement"; @@ -6,7 +5,7 @@ export class Button extends BaseUIElement { private _text: BaseUIElement; private _onclick: () => void; - constructor(text: string | UIElement, onclick: (() => void)) { + constructor(text: string | BaseUIElement, onclick: (() => void)) { super(); this._text = Translations.W(text); this._onclick = onclick; diff --git a/UI/Base/Ornament.ts b/UI/Base/Ornament.ts index dd715b4df..7c2798892 100644 --- a/UI/Base/Ornament.ts +++ b/UI/Base/Ornament.ts @@ -1,14 +1,11 @@ -import {UIElement} from "../UIElement"; +import {FixedUiElement} from "./FixedUiElement"; -export default class Ornament extends UIElement { +export default class Ornament extends FixedUiElement { - constructor(index = undefined) { - super(); + constructor() { + super(""); this.SetClass("pt-3 pb-3 flex justify-center box-border") } - InnerRender(): string { - return "" - } } \ No newline at end of file diff --git a/UI/Base/Title.ts b/UI/Base/Title.ts index 2fd3b069d..6d1a62385 100644 --- a/UI/Base/Title.ts +++ b/UI/Base/Title.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import BaseUIElement from "../BaseUIElement"; import Translations from "../i18n/Translations"; diff --git a/UI/BigComponents/UploadFlowStateUI.ts b/UI/BigComponents/UploadFlowStateUI.ts index 9c00649af..326570576 100644 --- a/UI/BigComponents/UploadFlowStateUI.ts +++ b/UI/BigComponents/UploadFlowStateUI.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import BaseUIElement from "../BaseUIElement"; import {VariableUiElement} from "../Base/VariableUIElement"; @@ -7,15 +6,13 @@ import Translations from "../i18n/Translations"; /** * Shows that 'images are uploading', 'all images are uploaded' as relevant... */ -export default class UploadFlowStateUI extends UIElement{ +export default class UploadFlowStateUI extends VariableUiElement{ - private readonly _element: BaseUIElement constructor(queue: UIEventSource, failed: UIEventSource, success: UIEventSource) { - super(); const t = Translations.t.image; - this._element = new VariableUiElement( + super( queue.map(queue => { const failedReasons = failed.data @@ -48,7 +45,4 @@ export default class UploadFlowStateUI extends UIElement{ } - protected InnerRender(): string | BaseUIElement { - return this._element - } } \ No newline at end of file diff --git a/UI/Image/DeleteImage.ts b/UI/Image/DeleteImage.ts index f49deeb1b..6f8fbb856 100644 --- a/UI/Image/DeleteImage.ts +++ b/UI/Image/DeleteImage.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import Translations from "../i18n/Translations"; import Toggle from "../Input/Toggle"; @@ -6,7 +5,6 @@ import Combine from "../Base/Combine"; import State from "../../State"; import Svg from "../../Svg"; import {Tag} from "../../Logic/Tags/Tag"; -import BaseUIElement from "../BaseUIElement"; export default class DeleteImage extends Toggle { diff --git a/UI/Input/ValidatedTextField.ts b/UI/Input/ValidatedTextField.ts index 7035f415e..37ee2ae1d 100644 --- a/UI/Input/ValidatedTextField.ts +++ b/UI/Input/ValidatedTextField.ts @@ -3,7 +3,6 @@ import * as EmailValidator from "email-validator"; import {parsePhoneNumberFromString} from "libphonenumber-js"; import {InputElement} from "./InputElement"; import {TextField} from "./TextField"; -import {UIElement} from "../UIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import CombinedInputElement from "./CombinedInputElement"; import SimpleDatePicker from "./SimpleDatePicker"; @@ -13,6 +12,7 @@ import ColorPicker from "./ColorPicker"; import {Utils} from "../../Utils"; import Loc from "../../Models/Loc"; import {Unit} from "../../Customizations/JSON/Denomination"; +import BaseUIElement from "../BaseUIElement"; interface TextFieldDef { name: string, @@ -223,7 +223,7 @@ export default class ValidatedTextField { */ public static AllTypes = ValidatedTextField.allTypesDict(); public static InputForType(type: string, options?: { - placeholder?: string | UIElement, + placeholder?: string | BaseUIElement, value?: UIEventSource, htmlType?: string, textArea?: boolean, @@ -287,12 +287,8 @@ export default class ValidatedTextField { input = new CombinedInputElement( input, unitDropDown, - (text, denom) => { - console.log("text:", text, "denom:", denom, "canon: ", denom?.canonicalValue(text, true)) - return denom?.canonicalValue(text, true) ?? undefined; - }, + (text, denom) => denom?.canonicalValue(text, true) ?? undefined, (valueWithDenom: string) => { - console.log("ToSplit: ", valueWithDenom, "becomes", unit.findDenomination(valueWithDenom)) const [text, denom] = unit.findDenomination(valueWithDenom) ?? [valueWithDenom, undefined]; if(text === undefined){ return [valueWithDenom, undefined] diff --git a/UI/MapControlButton.ts b/UI/MapControlButton.ts index 6276885b1..af1cef9a8 100644 --- a/UI/MapControlButton.ts +++ b/UI/MapControlButton.ts @@ -1,22 +1,15 @@ -import {UIElement} from "./UIElement"; import BaseUIElement from "./BaseUIElement"; import Combine from "./Base/Combine"; /** * A button floating above the map, in a uniform style */ -export default class MapControlButton extends UIElement { - private _contents: BaseUIElement; +export default class MapControlButton extends Combine { constructor(contents: BaseUIElement) { - super(); - this._contents = new Combine([contents]); + super([contents]); this.SetClass("relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background") this.SetStyle("box-shadow: 0 0 10px var(--shadow-color);"); } - InnerRender() { - return this._contents; - } - } \ No newline at end of file diff --git a/UI/OpeningHours/OpeningHoursVisualization.ts b/UI/OpeningHours/OpeningHoursVisualization.ts index 6f0dddc45..c1ebfab5b 100644 --- a/UI/OpeningHours/OpeningHoursVisualization.ts +++ b/UI/OpeningHours/OpeningHoursVisualization.ts @@ -11,9 +11,8 @@ import Toggle from "../Input/Toggle"; import {VariableUiElement} from "../Base/VariableUIElement"; import Table from "../Base/Table"; import {Translation} from "../i18n/Translation"; -import {UIElement} from "../UIElement"; -export default class OpeningHoursVisualization extends UIElement { +export default class OpeningHoursVisualization extends Toggle { private static readonly weekdays: Translation[] = [ Translations.t.general.weekdays.abbreviations.monday, Translations.t.general.weekdays.abbreviations.tuesday, @@ -23,18 +22,8 @@ export default class OpeningHoursVisualization extends UIElement { Translations.t.general.weekdays.abbreviations.saturday, Translations.t.general.weekdays.abbreviations.sunday, ] - private readonly _tags: UIEventSource; - private readonly _key: string; constructor(tags: UIEventSource, key: string) { - super() - this._tags = tags; - this._key = key; - } - - InnerRender(): BaseUIElement { - const tags = this._tags; - const key = this._key; const tagsDirect = tags.data; const ohTable = new VariableUiElement(tags .map(tags => tags[key]) // This mapping will absorb all other changes to tags in order to prevent regeneration @@ -47,7 +36,7 @@ export default class OpeningHoursVisualization extends UIElement { address: { country_code: tagsDirect._country } - }, {tag_key: this._key}); + }, {tag_key: key}); return OpeningHoursVisualization.CreateFullVisualisation(oh) } catch (e) { @@ -64,7 +53,7 @@ export default class OpeningHoursVisualization extends UIElement { } )) - return new Toggle( + super( ohTable, Translations.t.general.opening_hours.loadingCountry.Clone(), tags.map(tgs => tgs._country !== undefined) diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index a8f93e8c6..a5fe60199 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import LayerConfig from "../../Customizations/JSON/LayerConfig"; import EditableTagRendering from "./EditableTagRendering"; @@ -47,7 +46,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen { private static GenerateContent(tags: UIEventSource, layerConfig: LayerConfig): BaseUIElement { - let questionBox: UIElement = undefined; + let questionBox: BaseUIElement = undefined; if (State.state.featureSwitchUserbadge.data) { questionBox = new QuestionBox(tags, layerConfig.tagRenderings, layerConfig.units); diff --git a/UI/Popup/QuestionBox.ts b/UI/Popup/QuestionBox.ts index 0dc845a1c..7c17aa0b3 100644 --- a/UI/Popup/QuestionBox.ts +++ b/UI/Popup/QuestionBox.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig"; import TagRenderingQuestion from "./TagRenderingQuestion"; @@ -7,74 +6,73 @@ import State from "../../State"; import Combine from "../Base/Combine"; import BaseUIElement from "../BaseUIElement"; import {Unit} from "../../Customizations/JSON/Denomination"; +import {VariableUiElement} from "../Base/VariableUIElement"; /** * Generates all the questions, one by one */ -export default class QuestionBox extends UIElement { - private readonly _tags: UIEventSource; +export default class QuestionBox extends VariableUiElement { - private readonly _tagRenderings: TagRenderingConfig[]; - private _tagRenderingQuestions: BaseUIElement[]; + constructor(tagsSource: UIEventSource, tagRenderings: TagRenderingConfig[], units: Unit[]) { + const skippedQuestions: UIEventSource = new UIEventSource([]) - private _skippedQuestions: UIEventSource = new UIEventSource([]) - private _skippedQuestionsButton: BaseUIElement; - - constructor(tags: UIEventSource, tagRenderings: TagRenderingConfig[], units: Unit[]) { - super(tags); - this.ListenTo(this._skippedQuestions); - this._tags = tags; - const self = this; - this._tagRenderings = tagRenderings + tagRenderings = tagRenderings .filter(tr => tr.question !== undefined) .filter(tr => tr.question !== null); - this._tagRenderingQuestions = this._tagRenderings - .map((tagRendering, i) => new TagRenderingQuestion(this._tags, tagRendering,units, - () => { - // We save - self._skippedQuestions.ping(); - }, - Translations.t.general.skip.Clone() - .SetClass("btn btn-secondary mr-3") + + super(tagsSource.map(tags => { + if (tags === undefined) { + return undefined; + } + + const tagRenderingQuestions = tagRenderings + .map((tagRendering, i) => new TagRenderingQuestion(tagsSource, tagRendering, units, + () => { + // We save + skippedQuestions.ping(); + }, + Translations.t.general.skip.Clone() + .SetClass("btn btn-secondary mr-3") + .onClick(() => { + skippedQuestions.data.push(i); + skippedQuestions.ping(); + }) + )); + + const skippedQuestionsButton = Translations.t.general.skippedQuestions.Clone() .onClick(() => { - self._skippedQuestions.data.push(i); - self._skippedQuestions.ping(); + skippedQuestions.setData([]); }) - )); - this._skippedQuestionsButton = Translations.t.general.skippedQuestions.Clone() - .onClick(() => { - self._skippedQuestions.setData([]); - }) - this.SetClass("block mb-8") - } - InnerRender() { - const allQuestions : BaseUIElement[] = [] - for (let i = 0; i < this._tagRenderingQuestions.length; i++) { - let tagRendering = this._tagRenderings[i]; + const allQuestions: BaseUIElement[] = [] + for (let i = 0; i < tagRenderingQuestions.length; i++) { + let tagRendering = tagRenderings[i]; - if(tagRendering.IsKnown(this._tags.data)){ - continue; - } + if (tagRendering.IsKnown(tags)) { + continue; + } - if (this._skippedQuestions.data.indexOf(i) >= 0) { - continue; - } - // this value is NOT known - we show the questions for it - if(State.state.featureSwitchShowAllQuestions.data || allQuestions.length == 0){ - allQuestions.push(this._tagRenderingQuestions[i]) - } - - } + if (skippedQuestions.data.indexOf(i) >= 0) { + continue; + } + // this value is NOT known - we show the questions for it + if (State.state.featureSwitchShowAllQuestions.data || allQuestions.length == 0) { + allQuestions.push(tagRenderingQuestions[i]) + } - if(this._skippedQuestions.data.length > 0){ - allQuestions.push(this._skippedQuestionsButton) - } - + } + + if (skippedQuestions.data.length > 0) { + allQuestions.push(skippedQuestionsButton) + } + + + return new Combine(allQuestions).SetClass("block mb-8") + }, [skippedQuestions]) + ) - return new Combine(allQuestions); } } \ No newline at end of file diff --git a/UI/Popup/TagRenderingQuestion.ts b/UI/Popup/TagRenderingQuestion.ts index 649921853..92568e9fb 100644 --- a/UI/Popup/TagRenderingQuestion.ts +++ b/UI/Popup/TagRenderingQuestion.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import Combine from "../Base/Combine"; import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig"; @@ -25,46 +24,31 @@ import {TagUtils} from "../../Logic/Tags/TagUtils"; import BaseUIElement from "../BaseUIElement"; import {DropDown} from "../Input/DropDown"; import {Unit} from "../../Customizations/JSON/Denomination"; -import CombinedInputElement from "../Input/CombinedInputElement"; /** * 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 readonly _tags: UIEventSource; - private _configuration: TagRenderingConfig; - - private _saveButton: BaseUIElement; - - private _inputElement: InputElement; - private _cancelButton: BaseUIElement; - private _appliedTags: BaseUIElement; - private readonly _applicableUnit: Unit; - private _question: BaseUIElement; - +export default class TagRenderingQuestion extends Combine { + constructor(tags: UIEventSource, configuration: TagRenderingConfig, units: Unit[], afterSave?: () => void, cancelButton?: BaseUIElement ) { - super(tags); - this._applicableUnit = (units ?? []).filter(unit => unit.isApplicableToKey(configuration.freeform?.key))[0]; - 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" } + const applicableUnit = (units ?? []).filter(unit => unit.isApplicableToKey(configuration.freeform?.key))[0]; + const question = new SubstitutedTranslation(configuration.question, tags) + .SetClass("question-text"); + - this._inputElement = this.GenerateInputElement() - const self = this; + const inputElement = TagRenderingQuestion.GenerateInputElement(configuration, applicableUnit, tags) const save = () => { - const selection = self._inputElement.GetValue().data; + const selection = inputElement.GetValue().data; console.log("Save button clicked, the tags are is", selection) if (selection) { (State.state?.changes ?? new Changes()) @@ -77,66 +61,60 @@ export default class TagRenderingQuestion extends UIElement { } - this._saveButton = new SaveButton(this._inputElement.GetValue(), + const saveButton = new SaveButton(inputElement.GetValue(), State.state?.osmConnection) .onClick(save) - this._appliedTags = new VariableUiElement( - self._inputElement.GetValue().map( - (tags: TagsFilter) => { + const appliedTags = new VariableUiElement( + inputElement.GetValue().map( + (tagsFilter: TagsFilter) => { const csCount = State.state?.osmConnection?.userDetails?.data?.csCount ?? 1000; if (csCount < Constants.userJourney.tagsVisibleAt) { return ""; } - if (tags === undefined) { - return Translations.t.general.noTagsSelected.SetClass("subtle"); + if (tagsFilter === undefined) { + return Translations.t.general.noTagsSelected.Clone().SetClass("subtle"); } if (csCount < Constants.userJourney.tagsVisibleAndWikiLinked) { - const tagsStr = tags.asHumanString(false, true, self._tags.data); + const tagsStr = tagsFilter.asHumanString(false, true, tags.data); return new FixedUiElement(tagsStr).SetClass("subtle"); } - return tags.asHumanString(true, true, self._tags.data); + return tagsFilter.asHumanString(true, true, tags.data); } ) ).SetClass("block break-all") - - } - - InnerRender() { - return new Combine([ - this._question, - this._inputElement, - this._cancelButton, - this._saveButton, - this._appliedTags] + super ([ + question, + inputElement, + cancelButton, + saveButton, + appliedTags] ) - .SetClass("question") + this .SetClass("question") + } - private GenerateInputElement(): InputElement { - const self = this; + private static GenerateInputElement(configuration: TagRenderingConfig, applicableUnit: Unit, tagsSource: UIEventSource< any>): InputElement { let inputEls: InputElement[]; - const mappings = (this._configuration.mappings ?? []) + const mappings = (configuration.mappings ?? []) .filter(mapping => { if (mapping.hideInAnswer === true) { return false; } - if (typeof (mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(this._tags.data)) { - return false; - } - return true; + return !(typeof (mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(tagsSource.data)); + }) - let allIfNots: TagsFilter[] = Utils.NoNull(this._configuration.mappings?.map(m => m.ifnot) ?? []); - const ff = this.GenerateFreeform(); + let allIfNots: TagsFilter[] = Utils.NoNull(configuration.mappings?.map(m => m.ifnot) ?? []); + const ff = TagRenderingQuestion.GenerateFreeform(configuration, applicableUnit, tagsSource.data); const hasImages = mappings.filter(mapping => mapping.then.ExtractImages().length > 0).length > 0 - if (mappings.length < 8 || this._configuration.multiAnswer || hasImages) { - inputEls = (mappings ?? []).map(mapping => self.GenerateMappingElement(mapping, allIfNots)); + if (mappings.length < 8 || configuration.multiAnswer || hasImages) { + inputEls = (mappings ?? []).map(mapping => TagRenderingQuestion.GenerateMappingElement(tagsSource, mapping, allIfNots)); inputEls = Utils.NoNull(inputEls); } else { const dropdown: InputElement = new DropDown("", @@ -164,15 +142,17 @@ export default class TagRenderingQuestion extends UIElement { inputEls.push(ff); } - if (this._configuration.multiAnswer) { - return this.GenerateMultiAnswer(inputEls, ff, this._configuration.mappings.map(mp => mp.ifnot)) + if (configuration.multiAnswer) { + return TagRenderingQuestion.GenerateMultiAnswer(configuration, inputEls, ff, configuration.mappings.map(mp => mp.ifnot)) } else { return new RadioButton(inputEls, false) } } - private GenerateMultiAnswer(elements: InputElement[], freeformField: InputElement, ifNotSelected: TagsFilter[]): InputElement { + private static GenerateMultiAnswer( + configuration: TagRenderingConfig, + elements: InputElement[], freeformField: InputElement, ifNotSelected: TagsFilter[]): InputElement { const checkBoxes = new CheckBoxes(elements); const inputEl = new InputElementMap( checkBoxes, @@ -206,8 +186,8 @@ export default class TagRenderingQuestion extends UIElement { const indices: number[] = [] // We also collect the values that have to be added to the freeform field let freeformExtras: string[] = [] - if (this._configuration.freeform?.key) { - freeformExtras = [...(presentTags[this._configuration.freeform.key] ?? [])] + if (configuration.freeform?.key) { + freeformExtras = [...(presentTags[configuration.freeform.key] ?? [])] } for (let j = 0; j < elements.length; j++) { @@ -222,7 +202,7 @@ export default class TagRenderingQuestion extends UIElement { if (TagUtils.AllKeysAreContained(presentTags, neededTags)) { indices.push(j); if (freeformExtras.length > 0) { - const freeformsToRemove: string[] = (neededTags[this._configuration.freeform.key] ?? []); + const freeformsToRemove: string[] = (neededTags[configuration.freeform.key] ?? []); for (const toRm of freeformsToRemove) { const i = freeformExtras.indexOf(toRm); if (i >= 0) { @@ -235,7 +215,7 @@ export default class TagRenderingQuestion extends UIElement { } if (freeformField) { if (freeformExtras.length > 0) { - freeformField.GetValue().setData(new Tag(this._configuration.freeform.key, freeformExtras.join(";"))); + freeformField.GetValue().setData(new Tag(configuration.freeform.key, freeformExtras.join(";"))); indices.push(elements.indexOf(freeformField)) } else { freeformField.GetValue().setData(undefined); @@ -272,7 +252,9 @@ export default class TagRenderingQuestion extends UIElement { return inputEl; } - private GenerateMappingElement(mapping: { + private static GenerateMappingElement( + tagsSource: UIEventSource, + mapping: { if: TagsFilter, then: Translation, hideInAnswer: boolean | TagsFilter @@ -284,13 +266,13 @@ export default class TagRenderingQuestion extends UIElement { } return new FixedInputElement( - new SubstitutedTranslation(mapping.then, this._tags), + new SubstitutedTranslation(mapping.then, tagsSource), tagging, (t0, t1) => t1.isEquivalent(t0)); } - private GenerateFreeform(): InputElement { - const freeform = this._configuration.freeform; + private static GenerateFreeform(configuration: TagRenderingConfig, applicableUnit: Unit, tagsData: any): InputElement { + const freeform = configuration.freeform; if (freeform === undefined) { return undefined; } @@ -328,15 +310,15 @@ export default class TagRenderingQuestion extends UIElement { return undefined; } - let input: InputElement = ValidatedTextField.InputForType(this._configuration.freeform.type, { + let input: InputElement = ValidatedTextField.InputForType(configuration.freeform.type, { isValid: (str) => (str.length <= 255), - country: () => this._tags.data._country, - location: [this._tags.data._lat, this._tags.data._lon], + country: () => tagsData._country, + location: [tagsData._lat, tagsData._lon], mapBackgroundLayer: State.state.backgroundLayer, - unit: this._applicableUnit + unit: applicableUnit }); - input.GetValue().setData(this._tags.data[this._configuration.freeform.key]); + input.GetValue().setData(tagsData[configuration.freeform.key]); return new InputElementMap( input, (a, b) => a === b || (a?.isEquivalent(b) ?? false), diff --git a/UI/Reviews/SingleReview.ts b/UI/Reviews/SingleReview.ts index c0dc348e4..7479462e0 100644 --- a/UI/Reviews/SingleReview.ts +++ b/UI/Reviews/SingleReview.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import {Review} from "../../Logic/Web/Review"; import Combine from "../Base/Combine"; import {FixedUiElement} from "../Base/FixedUiElement"; @@ -7,33 +6,14 @@ import {Utils} from "../../Utils"; import BaseUIElement from "../BaseUIElement"; import Img from "../Base/Img"; -export default class SingleReview extends UIElement{ - private _review: Review; +export default class SingleReview extends Combine { + constructor(review: Review) { - super(review.made_by_user); - this._review = review; - - } - public static GenStars(rating: number): BaseUIElement { - if (rating === undefined) { - return Translations.t.reviews.no_rating; - } - if (rating < 10) { - rating = 10; - } - const scoreTen = Math.round(rating / 10); - return new Combine([ - ...Utils.TimesT(scoreTen / 2, _ => new Img('./assets/svg/star.svg').SetClass("'h-8 w-8 md:h-12")), - scoreTen % 2 == 1 ? new Img('./assets/svg/star_half.svg').SetClass('h-8 w-8 md:h-12') : undefined - ]).SetClass("flex w-max") - } - InnerRender(): BaseUIElement { - const d = this._review.date; - let review = this._review; - const el= new Combine( + const d = review.date; + super( [ new Combine([ - SingleReview.GenStars(review.rating) + SingleReview.GenStars(review.rating) ]), new FixedUiElement(review.comment), new Combine([ @@ -48,11 +28,24 @@ export default class SingleReview extends UIElement{ ] ); - el.SetClass("block p-2 m-4 rounded-xl subtle-background review-element"); - if(review.made_by_user.data){ - el.SetClass("border-attention-catch") + this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element"); + if (review.made_by_user.data) { + this.SetClass("border-attention-catch") } - return el; } - + + public static GenStars(rating: number): BaseUIElement { + if (rating === undefined) { + return Translations.t.reviews.no_rating; + } + if (rating < 10) { + rating = 10; + } + const scoreTen = Math.round(rating / 10); + return new Combine([ + ...Utils.TimesT(scoreTen / 2, _ => new Img('./assets/svg/star.svg').SetClass("'h-8 w-8 md:h-12")), + scoreTen % 2 == 1 ? new Img('./assets/svg/star_half.svg').SetClass('h-8 w-8 md:h-12') : undefined + ]).SetClass("flex w-max") + } + } \ No newline at end of file diff --git a/UI/UIElement.ts b/UI/UIElement.ts index d1802bcda..ee9aaddec 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -1,37 +1,7 @@ -import {UIEventSource} from "../Logic/UIEventSource"; import BaseUIElement from "./BaseUIElement"; export abstract class UIElement extends BaseUIElement{ - private static nextId: number = 0; - public readonly id: string; - public readonly _source: UIEventSource; - - private lastInnerRender: string; - - protected constructor(source: UIEventSource = undefined) { - super() - this.id = `ui-${this.constructor.name}-${UIElement.nextId}`; - this._source = source; - UIElement.nextId++; - this.ListenTo(source); - } - - public ListenTo(source: UIEventSource) { - if (source === undefined) { - return this; - } - //console.trace("Got a listenTo in ", this.constructor.name) - const self = this; - source.addCallback(() => { - self.lastInnerRender = undefined; - if(self._constructedHtmlElement !== undefined){ - self.UpdateElement(self._constructedHtmlElement); - } - - }) - return this; - } /** * Should be overridden for specific HTML functionality @@ -54,35 +24,7 @@ export abstract class UIElement extends BaseUIElement{ } return el; } - - protected UpdateElement(el: HTMLElement) : void{ - const innerRender = this.InnerRender(); - - if (typeof innerRender === "string") { - if(el.innerHTML !== innerRender){ - el.innerHTML = innerRender - } - } else { - const subElement = innerRender.ConstructElement(); - if(el.children.length === 1 && el.children[0] === subElement){ - return; // Nothing changed - } - - while (el.firstChild) { - el.removeChild(el.firstChild); - } - - if (subElement === undefined) { - return; - } - el.appendChild(subElement) - } - - } - - /** - * @deprecated The method should not be used - */ + protected abstract InnerRender(): string | BaseUIElement; } diff --git a/UI/i18n/Translation.ts b/UI/i18n/Translation.ts index bb1de40a7..e6e2dfba2 100644 --- a/UI/i18n/Translation.ts +++ b/UI/i18n/Translation.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import Locale from "./Locale"; import {Utils} from "../../Utils"; import BaseUIElement from "../BaseUIElement"; @@ -95,7 +94,7 @@ export class Translation extends BaseUIElement { } const combined: (string)[] = []; const parts = template.split("{" + k + "}"); - const el: string | UIElement = text[k]; + const el: string | BaseUIElement = text[k]; if (el === undefined) { continue; }