Finish the additions of reviews

UI/Reviews/ReviewElement.ts

@@ -0,0 +1,94 @@
+/**
+ * Shows the reviews and scoring base on mangrove.reviesw
+ */
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {Review} from "../../Logic/Web/Review";
+import {UIElement} from "../UIElement";
+import {Utils} from "../../Utils";
+import Combine from "../Base/Combine";
+import {FixedUiElement} from "../Base/FixedUiElement";
+import Translations from "../i18n/Translations";
+
+export default class ReviewElement extends UIElement {
+    private readonly _reviews: UIEventSource<Review[]>;
+    private readonly _subject: string;
+    private _middleElement: UIElement;
+
+    constructor(subject: string, reviews: UIEventSource<Review[]>, middleElement: UIElement) {
+        super(reviews);
+        this._middleElement = middleElement;
+        if(reviews === undefined){
+            throw "No reviews UIEVentsource Given!"
+        }
+        this._reviews = reviews;
+        this._subject = subject;
+    }
+
+    InnerRender(): string {
+
+        function genStars(rating: number) {
+            if(rating === undefined){
+                return Translations.t.reviews.no_rating;
+            }
+            if(rating < 10){
+                rating = 10;
+            }
+            const scoreTen = Math.round(rating / 10);
+            return new Combine([
+                "<img src='./assets/svg/star.svg' />".repeat(Math.floor(scoreTen / 2)),
+                scoreTen % 2 == 1 ? "<img src='./assets/svg/star_half.svg' />" : ""
+            ])
+        }
+
+        const elements = [];
+        const revs = this._reviews.data;
+        revs.sort((a,b) => (b.date.getTime() - a.date.getTime())); // Sort with most recent first
+        const avg = (revs.map(review => review.rating).reduce((a, b) => a + b, 0) / revs.length);
+        elements.push(
+            new Combine([
+                genStars(avg).SetClass("stars"),
+                `<a href='https://mangrove.reviews/search?sub=${this._subject}'>`,
+                Translations.t.reviews.title
+                    .Subs({count: "" + revs.length}),
+                "</a>"
+            ])
+
+                .SetClass("review-title"));
+        
+        elements.push(this._middleElement);
+
+        elements.push(...revs.map(review => {
+            const d = review.date;
+            return new Combine(
+                [
+                    new Combine([
+                        genStars(review.rating)
+                            .SetClass("review-rating"),
+                        new FixedUiElement(review.comment).SetClass("review-comment")
+                    ]).SetClass("review-stars-comment"),
+
+                    new Combine([
+                        new Combine([
+
+                            new FixedUiElement(review.author).SetClass("review-author"),
+                            review.affiliated ? Translations.t.reviews.affiliated_reviewer_warning : "",
+                        ]).SetStyle("margin-right: 0.5em"),
+                        new FixedUiElement(`${d.getFullYear()}-${Utils.TwoDigits(d.getMonth() + 1)}-${Utils.TwoDigits(d.getDate())} ${Utils.TwoDigits(d.getHours())}:${Utils.TwoDigits(d.getMinutes())}`)
+                            .SetClass("review-date")
+                    ]).SetClass("review-author-date")
+
+                ]
+            ).SetClass("review-element")
+        }));
+        elements.push(
+            new Combine([
+                Translations.t.reviews.attribution,
+                "<img src='./assets/mangrove_logo.png'>"
+            ])
+
+                .SetClass("review-attribution"))
+
+        return new Combine(elements).SetClass("review").Render();
+    }
+
+}

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

UI/Reviews/ReviewPanel.ts

@@ -0,0 +1,11 @@
+import {UIElement} from "../UIElement";
+
+export default class ReviewPanel extends UIElement {
+    
+    
+    
+    InnerRender(): string {
+        return "";
+    }
+
+}