forked from MapComplete/MapComplete
Reformat all files with prettier
This commit is contained in:
parent
e22d189376
commit
b541d3eab4
382 changed files with 50893 additions and 35566 deletions
|
|
@ -1,54 +1,50 @@
|
|||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import {Review} from "../../Logic/Web/Review";
|
||||
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";
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import { Review } from "../../Logic/Web/Review"
|
||||
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"
|
||||
|
||||
/**
|
||||
* 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.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);
|
||||
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
|
||||
.Subs({count: "" + revs.length}),
|
||||
revs.length === 1
|
||||
? Translations.t.reviews.title_singular.Clone()
|
||||
: Translations.t.reviews.title.Subs({ count: "" + revs.length }),
|
||||
`https://mangrove.reviews/search?sub=${encodeURIComponent(subject)}`,
|
||||
true
|
||||
),
|
||||
])
|
||||
]).SetClass("font-2xl flex justify-between items-center pl-2 pr-2")
|
||||
)
|
||||
|
||||
.SetClass("font-2xl flex justify-between items-center pl-2 pr-2"));
|
||||
elements.push(middleElement)
|
||||
|
||||
elements.push(middleElement);
|
||||
|
||||
elements.push(...revs.map(review => new SingleReview(review)));
|
||||
elements.push(...revs.map((review) => new SingleReview(review)))
|
||||
elements.push(
|
||||
new Combine([
|
||||
Translations.t.reviews.attribution.Clone(),
|
||||
new Img('./assets/mangrove_logo.png')
|
||||
])
|
||||
new Img("./assets/mangrove_logo.png"),
|
||||
]).SetClass("review-attribution")
|
||||
)
|
||||
|
||||
.SetClass("review-attribution"))
|
||||
|
||||
return new Combine(elements).SetClass("block");
|
||||
return new Combine(elements).SetClass("block")
|
||||
})
|
||||
);
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,136 +1,134 @@
|
|||
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, {OsmConnection} from "../../Logic/Osm/OsmConnection";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
import Toggle from "../Input/Toggle";
|
||||
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, { OsmConnection } from "../../Logic/Osm/OsmConnection"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
import Toggle from "../Input/Toggle"
|
||||
|
||||
export default class ReviewForm extends InputElement<Review> {
|
||||
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false)
|
||||
private readonly _value: UIEventSource<Review>
|
||||
private readonly _comment: BaseUIElement
|
||||
private readonly _stars: BaseUIElement
|
||||
private _saveButton: BaseUIElement
|
||||
private readonly _isAffiliated: BaseUIElement
|
||||
private readonly _postingAs: BaseUIElement
|
||||
private readonly _osmConnection: OsmConnection
|
||||
|
||||
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
|
||||
private readonly _value: UIEventSource<Review>;
|
||||
private readonly _comment: BaseUIElement;
|
||||
private readonly _stars: BaseUIElement;
|
||||
private _saveButton: BaseUIElement;
|
||||
private readonly _isAffiliated: BaseUIElement;
|
||||
private readonly _postingAs: BaseUIElement;
|
||||
private readonly _osmConnection: OsmConnection;
|
||||
|
||||
constructor(onSave: ((r: Review, doneSaving: (() => void)) => void), osmConnection: OsmConnection) {
|
||||
super();
|
||||
this._osmConnection = osmConnection;
|
||||
constructor(onSave: (r: Review, doneSaving: () => void) => void, osmConnection: OsmConnection) {
|
||||
super()
|
||||
this._osmConnection = osmConnection
|
||||
this._value = new UIEventSource({
|
||||
made_by_user: new UIEventSource<boolean>(true),
|
||||
rating: undefined,
|
||||
comment: undefined,
|
||||
author: osmConnection.userDetails.data.name,
|
||||
affiliated: false,
|
||||
date: new Date()
|
||||
});
|
||||
date: new Date(),
|
||||
})
|
||||
const comment = new TextField({
|
||||
placeholder: Translations.t.reviews.write_a_comment.Clone(),
|
||||
htmlType: "area",
|
||||
textAreaRows: 5
|
||||
textAreaRows: 5,
|
||||
})
|
||||
comment.GetValue().addCallback(comment => {
|
||||
self._value.data.comment = comment;
|
||||
self._value.ping();
|
||||
comment.GetValue().addCallback((comment) => {
|
||||
self._value.data.comment = comment
|
||||
self._value.ping()
|
||||
})
|
||||
const self = this;
|
||||
|
||||
this._postingAs =
|
||||
new Combine([Translations.t.reviews.posting_as.Clone(),
|
||||
new VariableUiElement(osmConnection.userDetails.map((ud: UserDetails) => ud.name))
|
||||
.SetClass("review-author")])
|
||||
.SetStyle("display:flex;flex-direction: column;align-items: flex-end;margin-left: auto;")
|
||||
const self = this
|
||||
|
||||
this._postingAs = new Combine([
|
||||
Translations.t.reviews.posting_as.Clone(),
|
||||
new VariableUiElement(
|
||||
osmConnection.userDetails.map((ud: UserDetails) => ud.name)
|
||||
).SetClass("review-author"),
|
||||
]).SetStyle("display:flex;flex-direction: column;align-items: flex-end;margin-left: auto;")
|
||||
|
||||
const reviewIsSaved = new UIEventSource<boolean>(false)
|
||||
const reviewIsSaving = new UIEventSource<boolean>(false)
|
||||
this._saveButton =
|
||||
new Toggle(Translations.t.reviews.saved.Clone().SetClass("thanks"),
|
||||
new Toggle(
|
||||
Translations.t.reviews.saving_review.Clone(),
|
||||
new SaveButton(
|
||||
this._value.map(r => self.IsValid(r)), osmConnection
|
||||
).onClick(() => {
|
||||
reviewIsSaving.setData(true);
|
||||
onSave(this._value.data, () => {
|
||||
reviewIsSaved.setData(true)
|
||||
});
|
||||
}),
|
||||
reviewIsSaving
|
||||
),
|
||||
reviewIsSaved
|
||||
).SetClass("break-normal")
|
||||
|
||||
this._saveButton = new Toggle(
|
||||
Translations.t.reviews.saved.Clone().SetClass("thanks"),
|
||||
new Toggle(
|
||||
Translations.t.reviews.saving_review.Clone(),
|
||||
new SaveButton(
|
||||
this._value.map((r) => self.IsValid(r)),
|
||||
osmConnection
|
||||
).onClick(() => {
|
||||
reviewIsSaving.setData(true)
|
||||
onSave(this._value.data, () => {
|
||||
reviewIsSaved.setData(true)
|
||||
})
|
||||
}),
|
||||
reviewIsSaving
|
||||
),
|
||||
reviewIsSaved
|
||||
).SetClass("break-normal")
|
||||
|
||||
this._isAffiliated = new CheckBoxes([Translations.t.reviews.i_am_affiliated.Clone()])
|
||||
|
||||
this._comment = comment;
|
||||
this._comment = comment
|
||||
const stars = []
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
stars.push(
|
||||
new VariableUiElement(this._value.map(review => {
|
||||
new VariableUiElement(
|
||||
this._value.map((review) => {
|
||||
if (review.rating === undefined) {
|
||||
return Svg.star_outline.replace(/#000000/g, "#ccc");
|
||||
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();
|
||||
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;
|
||||
return this._value
|
||||
}
|
||||
|
||||
InnerConstructElement(): HTMLElement {
|
||||
|
||||
const form = new Combine([
|
||||
new Combine([this._stars, this._postingAs]).SetClass("flex"),
|
||||
this._comment,
|
||||
new Combine([
|
||||
this._isAffiliated,
|
||||
this._saveButton
|
||||
]).SetClass("review-form-bottom"),
|
||||
Translations.t.reviews.tos.Clone().SetClass("subtle")
|
||||
new Combine([this._isAffiliated, this._saveButton]).SetClass("review-form-bottom"),
|
||||
Translations.t.reviews.tos.Clone().SetClass("subtle"),
|
||||
])
|
||||
.SetClass("flex flex-col p-4")
|
||||
.SetStyle("border-radius: 1em;" +
|
||||
" background-color: var(--subtle-detail-color);" +
|
||||
" color: var(--subtle-detail-color-contrast);" +
|
||||
" border: 2px solid var(--subtle-detail-color-contrast)")
|
||||
.SetStyle(
|
||||
"border-radius: 1em;" +
|
||||
" background-color: var(--subtle-detail-color);" +
|
||||
" color: var(--subtle-detail-color-contrast);" +
|
||||
" border: 2px solid var(--subtle-detail-color-contrast)"
|
||||
)
|
||||
|
||||
const connection = this._osmConnection;
|
||||
const login = Translations.t.reviews.plz_login.Clone().onClick(() => connection.AttemptLogin())
|
||||
const connection = this._osmConnection
|
||||
const login = Translations.t.reviews.plz_login
|
||||
.Clone()
|
||||
.onClick(() => connection.AttemptLogin())
|
||||
|
||||
return new Toggle(form, login,
|
||||
connection.isLoggedIn)
|
||||
.ConstructElement()
|
||||
return new Toggle(form, login, connection.isLoggedIn).ConstructElement()
|
||||
}
|
||||
|
||||
IsValid(r: Review): boolean {
|
||||
if (r === undefined) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
return (r.comment?.length ?? 0) <= 1000 && (r.author?.length ?? 0) <= 20 && r.rating >= 0 && r.rating <= 100;
|
||||
return (
|
||||
(r.comment?.length ?? 0) <= 1000 &&
|
||||
(r.author?.length ?? 0) <= 20 &&
|
||||
r.rating >= 0 &&
|
||||
r.rating <= 100
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,30 @@
|
|||
import {Review} from "../../Logic/Web/Review";
|
||||
import Combine from "../Base/Combine";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import Translations from "../i18n/Translations";
|
||||
import {Utils} from "../../Utils";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
import Img from "../Base/Img";
|
||||
import { Review } from "../../Logic/Web/Review"
|
||||
import Combine from "../Base/Combine"
|
||||
import { FixedUiElement } from "../Base/FixedUiElement"
|
||||
import Translations from "../i18n/Translations"
|
||||
import { Utils } from "../../Utils"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
import Img from "../Base/Img"
|
||||
|
||||
export default class SingleReview extends Combine {
|
||||
|
||||
constructor(review: Review) {
|
||||
const d = review.date;
|
||||
super(
|
||||
[
|
||||
const d = review.date
|
||||
super([
|
||||
new Combine([SingleReview.GenStars(review.rating)]),
|
||||
new FixedUiElement(review.comment),
|
||||
new Combine([
|
||||
new Combine([
|
||||
SingleReview.GenStars(review.rating)
|
||||
]),
|
||||
new FixedUiElement(review.comment),
|
||||
new Combine([
|
||||
new Combine([
|
||||
|
||||
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())}`)
|
||||
.SetClass("subtle-lighter")
|
||||
]).SetClass("flex mb-4 justify-end")
|
||||
|
||||
]
|
||||
);
|
||||
this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element");
|
||||
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())}`
|
||||
).SetClass("subtle-lighter"),
|
||||
]).SetClass("flex mb-4 justify-end"),
|
||||
])
|
||||
this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element")
|
||||
if (review.made_by_user.data) {
|
||||
this.SetClass("border-attention-catch")
|
||||
}
|
||||
|
|
@ -36,16 +32,19 @@ export default class SingleReview extends Combine {
|
|||
|
||||
public static GenStars(rating: number): BaseUIElement {
|
||||
if (rating === undefined) {
|
||||
return Translations.t.reviews.no_rating;
|
||||
return Translations.t.reviews.no_rating
|
||||
}
|
||||
if (rating < 10) {
|
||||
rating = 10;
|
||||
rating = 10
|
||||
}
|
||||
const scoreTen = Math.round(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
|
||||
...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")
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue