midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring fixes to the review elements

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-21 12:59:52 +02:00
parent aa1c9d0398
commit 6689e0a658
2 changed files with 41 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

81
UI/Reviews/ReviewElement.ts
View file

@ -1,63 +1,54 @@
/**
* 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
*/
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";
import SingleReview from "./SingleReview";
import BaseUIElement from "../BaseUIElement";
import Img from "../Base/Img";
import {VariableUiElement} from "../Base/VariableUIElement";
import Link from "../Base/Link";
export default class ReviewElement extends UIElement {
private readonly _reviews: UIEventSource<Review[]>;
private readonly _subject: string;
private readonly _middleElement: BaseUIElement;
/**
* 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
*/
export default class ReviewElement extends VariableUiElement {
constructor(subject: string, reviews: UIEventSource<Review[]>, middleElement: BaseUIElement) {
super(reviews);
this._middleElement = middleElement;
if (reviews === undefined) {
throw "No reviews UIEVentsource Given!"
}
this._reviews = reviews;
this._subject = subject;
}
super(
reviews.map(revs => {
const elements = [];
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([
SingleReview.GenStars(avg),
new Link(
revs.length === 1 ? Translations.t.reviews.title_singular.Clone() :
Translations.t.reviews.title.Clone()
.Subs({count: "" + revs.length}),
`https://mangrove.reviews/search?sub=${encodeURIComponent(subject)}`,
true
),
])
.SetClass("font-2xl flex justify-between items-center pl-2 pr-2"));
InnerRender(): BaseUIElement {
elements.push(middleElement);
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([
SingleReview.GenStars(avg),
`<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})
,
"</a>"
])
elements.push(...revs.map(review => new SingleReview(review)));
elements.push(
new Combine([
Translations.t.reviews.attribution.Clone(),
new Img('./assets/mangrove_logo.png')
])
.SetClass("font-2xl flex justify-between items-center pl-2 pr-2"));
elements.push(this._middleElement);
.SetClass("review-attribution"))
elements.push(...revs.map(review => new SingleReview(review)));
elements.push(
new Combine([
Translations.t.reviews.attribution,
"<img src='./assets/mangrove_logo.png'>"
])
return new Combine(elements).SetClass("block");
})
);
.SetClass("review-attribution"))
return new Combine(elements).SetClass("block");
}
}

10
UI/Reviews/SingleReview.ts
View file

@ -4,8 +4,8 @@ import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import Translations from "../i18n/Translations";
import {Utils} from "../../Utils";
import ReviewElement from "./ReviewElement";
import BaseUIElement from "../BaseUIElement";
import Img from "../Base/Img";
export default class SingleReview extends UIElement{
private _review: Review;
@ -23,8 +23,8 @@ export default class SingleReview extends UIElement{
}
const scoreTen = Math.round(rating / 10);
return new Combine([
"<img src='./assets/svg/star.svg' class='h-8 md:h-12'/>".repeat(Math.floor(scoreTen / 2)),
scoreTen % 2 == 1 ? "<img src='./assets/svg/star_half.svg' class='h-8 md:h-12'/>" : ""
...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 {
@ -39,7 +39,7 @@ export default class SingleReview extends UIElement{
new Combine([
new Combine([
new Combine(["<b>",review.author,"</b>"]),
new FixedUiElement(review.author).SetClass("font-bold"),
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())}`)
@ -48,7 +48,7 @@ export default class SingleReview extends UIElement{
]
);
el.SetClass("block p-2 m-1 rounded-xl subtle-background review-element");
el.SetClass("block p-2 m-4 rounded-xl subtle-background review-element");
if(review.made_by_user.data){
el.SetClass("border-attention-catch")
}