Finish the additions of reviews

UI/Reviews/ReviewForm.ts

@@ -0,0 +1,116 @@
+import {UIElement} from "../UIElement";
+import {InputElement} from "../Input/InputElement";
+import {Review} from "../../Logic/Web/Review";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {TextField} from "../Input/TextField";
+import Translations from "../i18n/Translations";
+import Combine from "../Base/Combine";
+import Svg from "../../Svg";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import {SaveButton} from "../Popup/SaveButton";
+import CheckBoxes from "../Input/Checkboxes";
+import {UserDetails} from "../../Logic/Osm/OsmConnection";
+
+export default class ReviewForm extends InputElement<Review> {
+
+    private readonly _value: UIEventSource<Review>;
+    private readonly _comment: UIElement;
+    private readonly _stars: UIElement;
+    private _saveButton: UIElement;
+    private readonly _isAffiliated: UIElement;
+    private userDetails: UIEventSource<UserDetails>;
+    private readonly _postingAs: UIElement;
+
+
+    constructor(onSave: ((r: Review, doneSaving: (() => void)) => void), userDetails: UIEventSource<UserDetails>) {
+        super();
+        this.userDetails = userDetails;
+        const t = Translations.t.reviews;
+        this._value  = new UIEventSource({
+            rating: undefined,
+            comment: undefined,
+            author: userDetails.data.name,
+            affiliated: false,
+            date: new Date()
+        });
+        const comment = new TextField({
+            placeholder: Translations.t.reviews.write_a_comment,
+            textArea: true,
+            value: this._value.map(r => r?.comment),
+            textAreaRows: 5
+        })
+        comment.GetValue().addCallback(comment => {
+            self._value.data.comment = comment;
+            self._value.ping();
+        })
+        const self = this;
+
+        this._postingAs =
+            new Combine([t.posting_as, new VariableUiElement(userDetails.map((ud: UserDetails) => ud.name)).SetClass("review-author")])
+                .SetStyle("display:flex;flex-direction: column;align-items: flex-end;margin-right: 0.5;")
+        this._saveButton =
+            new SaveButton(this._value.map(r => self.IsValid(r)), undefined)
+                .onClick(() => {
+                    self._saveButton = Translations.t.reviews.saving_review;
+                    onSave(this._value.data, () => {
+                        self._saveButton = Translations.t.reviews.saved;
+                    });
+                })
+
+        this._isAffiliated = new CheckBoxes([t.i_am_affiliated]).SetStyle(" display:inline-block;")
+
+        this._comment = comment;
+        const stars = []
+        for (let i = 1; i <= 5; i++) {
+            stars.push(
+                new VariableUiElement(this._value.map(review => {
+                        if (review.rating === undefined) {
+                            return Svg.star_outline.replace(/#000000/g, "#ccc");
+                        }
+                        return review.rating < i * 20 ?
+                            Svg.star_outline :
+                            Svg.star
+                    }
+                ))
+                    .onClick(() => {
+                        self._value.data.rating = i * 20;
+                        self._value.ping();
+                    })
+            )
+        }
+        this._stars = new Combine(stars).SetClass("review-form-rating")
+    }
+
+    GetValue(): UIEventSource<Review> {
+        return this._value;
+    }
+
+    InnerRender(): string {
+        
+        if(!this.userDetails.data.loggedIn){
+            return Translations.t.reviews.plz_login.Render();
+        }
+        
+        return new Combine([
+            new Combine([this._stars, this._postingAs]).SetClass("review-form-top"),
+            this._comment,
+            new Combine([
+                this._isAffiliated,
+                this._saveButton
+            ]).SetClass("review-form-bottom")
+        ])
+            .SetClass("review-form")
+            .Render();
+    }
+
+    IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+
+    IsValid(r: Review): boolean {
+        if (r === undefined) {
+            return false;
+        }
+        return (r.comment?.length ?? 0) <= 1000 && (r.author?.length ?? 0) <= 20 && r.rating >= 0 && r.rating <= 100;
+    }
+
+
+}