midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Further cleanup: further removal of the UIElement

Browse source
This commit is contained in:
pietervdvn 2021-06-28 00:45:49 +02:00
parent 09ba1b37c6
commit 785f57262e
15 changed files with 169 additions and 294 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
Logic/Actors/GeoLocationHandler.ts
View file

@ -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<boolean> = new UIEventSource<boolean>(false);
private readonly _isActive: UIEventSource<boolean>;
/**
* The callback over the permission API
* @private
*/
private readonly _permission: UIEventSource<string> = new UIEventSource<string>("");
private readonly _permission: UIEventSource<string>;
/***
* 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<string> = LocalStorageSource.Get("geolocation-permissions");
private readonly _previousLocationGrant: UIEventSource<string>;
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
private readonly _element: BaseUIElement;
constructor(currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>,
leafletMap: UIEventSource<L.Map>,
layoutToUse: UIEventSource<LayoutConfig>) {
super();
const hasLocation = currentGPSLocation.map((location) => location !== undefined);
const previousLocationGrant = LocalStorageSource.Get("geolocation-permissions")
const isActive = new UIEventSource<boolean>(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<string>("")
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) {

3
UI/Base/Button.ts
View file

@ -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;

11
UI/Base/Ornament.ts
View file

@ -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 ""
}
}

1
UI/Base/Title.ts
View file

@ -1,4 +1,3 @@
import {UIElement} from "../UIElement";
import BaseUIElement from "../BaseUIElement";
import Translations from "../i18n/Translations";

10
UI/BigComponents/UploadFlowStateUI.ts
View file

@ -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<string[]>, failed: UIEventSource<string[]>, success: UIEventSource<string[]>) {
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
}
}

2
UI/Image/DeleteImage.ts
View file

@ -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 {

10
UI/Input/ValidatedTextField.ts
View file

@ -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<string>,
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]

11
UI/MapControlButton.ts
View file

@ -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;
}
}

17
UI/OpeningHours/OpeningHoursVisualization.ts
View file

@ -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<any>;
private readonly _key: string;
constructor(tags: UIEventSource<any>, 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)

3
UI/Popup/FeatureInfoBox.ts
View file

@ -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<any>,
layerConfig: LayerConfig): BaseUIElement {
let questionBox: UIElement = undefined;
let questionBox: BaseUIElement = undefined;
if (State.state.featureSwitchUserbadge.data) {
questionBox = new QuestionBox(tags, layerConfig.tagRenderings, layerConfig.units);

102
UI/Popup/QuestionBox.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,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<any>;
export default class QuestionBox extends VariableUiElement {
private readonly _tagRenderings: TagRenderingConfig[];
private _tagRenderingQuestions: BaseUIElement[];
constructor(tagsSource: UIEventSource<any>, tagRenderings: TagRenderingConfig[], units: Unit[]) {
const skippedQuestions: UIEventSource<number[]> = new UIEventSource<number[]>([])
private _skippedQuestions: UIEventSource<number[]> = new UIEventSource<number[]>([])
private _skippedQuestionsButton: BaseUIElement;
constructor(tags: UIEventSource<any>, 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);
}
}

122
UI/Popup/TagRenderingQuestion.ts
View file

@ -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<any>;
private _configuration: TagRenderingConfig;
private _saveButton: BaseUIElement;
private _inputElement: InputElement<TagsFilter>;
private _cancelButton: BaseUIElement;
private _appliedTags: BaseUIElement;
private readonly _applicableUnit: Unit;
private _question: BaseUIElement;
export default class TagRenderingQuestion extends Combine {
constructor(tags: UIEventSource<any>,
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<TagsFilter> {
const self = this;
private static GenerateInputElement(configuration: TagRenderingConfig, applicableUnit: Unit, tagsSource: UIEventSource< any>): InputElement<TagsFilter> {
let inputEls: InputElement<TagsFilter>[];
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<TagsFilter> = 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<TagsFilter>[], freeformField: InputElement<TagsFilter>, ifNotSelected: TagsFilter[]): InputElement<TagsFilter> {
private static GenerateMultiAnswer(
configuration: TagRenderingConfig,
elements: InputElement<TagsFilter>[], freeformField: InputElement<TagsFilter>, ifNotSelected: TagsFilter[]): InputElement<TagsFilter> {
const checkBoxes = new CheckBoxes(elements);
const inputEl = new InputElementMap<number[], TagsFilter>(
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<any>,
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<TagsFilter> {
const freeform = this._configuration.freeform;
private static GenerateFreeform(configuration: TagRenderingConfig, applicableUnit: Unit, tagsData: any): InputElement<TagsFilter> {
const freeform = configuration.freeform;
if (freeform === undefined) {
return undefined;
}
@ -328,15 +310,15 @@ export default class TagRenderingQuestion extends UIElement {
return undefined;
}
let input: InputElement<string> = ValidatedTextField.InputForType(this._configuration.freeform.type, {
let input: InputElement<string> = 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),

53
UI/Reviews/SingleReview.ts
View file

@ -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")
}
}

60
UI/UIElement.ts
View file

@ -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<any>;
private lastInnerRender: string;
protected constructor(source: UIEventSource<any> = undefined) {
super()
this.id = `ui-${this.constructor.name}-${UIElement.nextId}`;
this._source = source;
UIElement.nextId++;
this.ListenTo(source);
}
public ListenTo(source: UIEventSource<any>) {
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;
}

3
UI/i18n/Translation.ts
View file

@ -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;
}