mapcomplete/UI/Reviews/ReviewElement.ts

62 lines
2.2 KiB
TypeScript
Raw Normal View History

2020-12-07 03:02:50 +01:00
/**
2021-03-09 13:10:48 +01:00
* Shows the reviews and scoring base on mangrove.reviews
* The middle element is some other component shown in the middle, e.g. the review input element
2020-12-07 03:02:50 +01:00
*/
2020-12-08 23:44:34 +01:00
import {UIEventSource} from "../../Logic/UIEventSource";
import {Review} from "../../Logic/Web/Review";
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
2020-12-11 16:29:51 +01:00
import SingleReview from "./SingleReview";
2020-12-08 23:44:34 +01:00
2020-12-07 03:02:50 +01:00
export default class ReviewElement extends UIElement {
2020-12-08 23:44:34 +01:00
private readonly _reviews: UIEventSource<Review[]>;
private readonly _subject: string;
2021-03-13 19:07:38 +01:00
private readonly _middleElement: UIElement;
2020-12-07 03:02:50 +01:00
2020-12-08 23:44:34 +01:00
constructor(subject: string, reviews: UIEventSource<Review[]>, middleElement: UIElement) {
2020-12-07 03:02:50 +01:00
super(reviews);
2020-12-08 23:44:34 +01:00
this._middleElement = middleElement;
2020-12-11 16:29:51 +01:00
if (reviews === undefined) {
2020-12-08 23:44:34 +01:00
throw "No reviews UIEVentsource Given!"
}
2020-12-07 03:02:50 +01:00
this._reviews = reviews;
2020-12-08 23:44:34 +01:00
this._subject = subject;
2020-12-07 03:02:50 +01:00
}
2020-12-11 16:29:51 +01:00
2020-12-07 03:02:50 +01:00
2020-12-11 16:29:51 +01:00
InnerRender(): string {
2020-12-07 03:31:13 +01:00
2020-12-07 03:02:50 +01:00
const elements = [];
2020-12-07 03:31:13 +01:00
const revs = this._reviews.data;
2020-12-11 16:29:51 +01:00
revs.sort((a, b) => (b.date.getTime() - a.date.getTime())); // Sort with most recent first
2020-12-07 03:31:13 +01:00
const avg = (revs.map(review => review.rating).reduce((a, b) => a + b, 0) / revs.length);
elements.push(
new Combine([
2021-03-13 19:07:38 +01:00
SingleReview.GenStars(avg),
2020-12-11 16:29:51 +01:00
`<a target="_blank" href='https://mangrove.reviews/search?sub=${encodeURIComponent(this._subject)}'>`,
revs.length === 1 ? Translations.t.reviews.title_singular :
Translations.t.reviews.title
.Subs({count: "" + revs.length})
,
2020-12-08 23:44:34 +01:00
"</a>"
2020-12-07 03:31:13 +01:00
])
2020-12-07 03:02:50 +01:00
2021-03-13 19:07:38 +01:00
.SetClass("font-2xl flex justify-between items-center pl-2 pr-2"));
2020-12-08 23:44:34 +01:00
elements.push(this._middleElement);
2020-12-07 03:02:50 +01:00
2020-12-11 16:29:51 +01:00
elements.push(...revs.map(review => new SingleReview(review)));
2020-12-07 03:02:50 +01:00
elements.push(
new Combine([
Translations.t.reviews.attribution,
"<img src='./assets/mangrove_logo.png'>"
])
.SetClass("review-attribution"))
2021-03-13 19:07:38 +01:00
return new Combine(elements).SetClass("block").Render();
2020-12-07 03:02:50 +01:00
}
}