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

Use mangrove-reviews-typescript, rework reviews modules

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-01-21 23:58:14 +01:00
parent 93961e553f
commit 888d4e95a3
15 changed files with 768 additions and 375 deletions
Download patch file Download diff file Expand all files Collapse all files

11
UI/Base/SubtleButton.ts
View file

@ -12,7 +12,12 @@ import Loading from "./Loading"
export class SubtleButton extends UIElement {
private readonly imageUrl: string | BaseUIElement
private readonly message: string | BaseUIElement
private readonly options: { url?: string | Store<string>; newTab?: boolean; imgSize?: string }
private readonly options: {
url?: string | Store<string>
newTab?: boolean
imgSize?: string
extraClasses?: string
}
constructor(
imageUrl: string | BaseUIElement,
@ -21,6 +26,7 @@ export class SubtleButton extends UIElement {
url?: string | Store<string>
newTab?: boolean
imgSize?: "h-11 w-11" | string
extraClasses?: string
} = undefined
) {
super()
@ -31,7 +37,8 @@ export class SubtleButton extends UIElement {
protected InnerRender(): string | BaseUIElement {
const classes =
"block flex p-3 my-2 bg-subtle rounded-lg hover:shadow-xl hover:bg-unsubtle transition-colors transition-shadow link-no-underline"
"block flex p-3 my-2 bg-subtle rounded-lg hover:shadow-xl hover:bg-unsubtle transition-colors transition-shadow link-no-underline " +
(this?.options?.extraClasses ?? "")
const message = Translations.W(this.message)?.SetClass(
"block text-ellipsis no-images flex-shrink"
)

66
UI/Reviews/ReviewElement.ts
View file

@ -1,5 +1,3 @@
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"
@ -7,44 +5,52 @@ import BaseUIElement from "../BaseUIElement"
import Img from "../Base/Img"
import { VariableUiElement } from "../Base/VariableUIElement"
import Link from "../Base/Link"
import FeatureReviews from "../../Logic/Web/MangroveReviews"
/**
* 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) {
constructor(reviews: FeatureReviews, 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
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 }),
`https://mangrove.reviews/search?sub=${encodeURIComponent(subject)}`,
true
),
]).SetClass("font-2xl flex justify-between items-center pl-2 pr-2")
)
reviews.reviews.map(
(revs) => {
const elements = []
revs.sort((a, b) => b.iat - a.iat) // 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,
}),
`https://mangrove.reviews/search?sub=${encodeURIComponent(
reviews.subjectUri.data
)}`,
true
),
]).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(
new Combine([
Translations.t.reviews.attribution.Clone(),
new Img("./assets/mangrove_logo.png"),
]).SetClass("review-attribution")
)
elements.push(...revs.map((review) => new SingleReview(review)))
elements.push(
new Combine([
Translations.t.reviews.attribution.Clone(),
new Img("./assets/mangrove_logo.png"),
]).SetClass("review-attribution")
)
return new Combine(elements).SetClass("block")
})
return new Combine(elements).SetClass("block")
},
[reviews.subjectUri]
)
)
}
}

133
UI/Reviews/ReviewForm.ts
View file

@ -1,118 +1,89 @@
import { InputElement } from "../Input/InputElement"
import { Review } from "../../Logic/Web/Review"
import { Review } from "mangrove-reviews-typescript"
import { Store, 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 { CheckBox } from "../Input/Checkboxes"
import UserDetails, { OsmConnection } from "../../Logic/Osm/OsmConnection"
import BaseUIElement from "../BaseUIElement"
import Toggle from "../Input/Toggle"
import { LoginToggle } from "../Popup/LoginButton"
import { SubtleButton } from "../Base/SubtleButton"
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 _state: {
readonly osmConnection: OsmConnection
readonly featureSwitchUserbadge: Store<boolean>
}
export default class ReviewForm extends LoginToggle {
constructor(
onSave: (r: Review, doneSaving: () => void) => void,
onSave: (r: Omit<Review, "sub">) => Promise<void>,
state: {
readonly osmConnection: OsmConnection
readonly featureSwitchUserbadge: Store<boolean>
}
) {
super()
this._state = state
const osmConnection = state.osmConnection
this._value = new UIEventSource({
made_by_user: new UIEventSource<boolean>(true),
/* made_by_user: new UIEventSource<boolean>(true),
rating: undefined,
comment: undefined,
author: osmConnection.userDetails.data.name,
affiliated: false,
date: new Date(),
})
const comment = new TextField({
date: new Date(),*/
const commentForm = new TextField({
placeholder: Translations.t.reviews.write_a_comment.Clone(),
htmlType: "area",
textAreaRows: 5,
})
comment.GetValue().addCallback((comment) => {
self._value.data.comment = comment
self._value.ping()
})
const self = this
this._postingAs = new Combine([
const rating = new UIEventSource<number>(undefined)
const isAffiliated = new CheckBox(Translations.t.reviews.i_am_affiliated)
const reviewMade = new UIEventSource(false)
const postingAs = new Combine([
Translations.t.reviews.posting_as.Clone(),
new VariableUiElement(
osmConnection.userDetails.map((ud: UserDetails) => ud.name)
state.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")
const saveButton = new Toggle(
Translations.t.reviews.no_rating.SetClass("block alert"),
new SubtleButton(Svg.confirm_svg(), Translations.t.reviews.save, {
extraClasses: "border-attention-catch",
})
.OnClickWithLoading(
Translations.t.reviews.saving_review.SetClass("alert"),
async () => {
const review: Omit<Review, "sub"> = {
rating: rating.data,
opinion: commentForm.GetValue().data,
metadata: { nickname: state.osmConnection.userDetails.data.name },
}
await onSave(review)
}
)
.SetClass("break-normal"),
rating.map((r) => r === undefined, [commentForm.GetValue()])
)
this._isAffiliated = new CheckBoxes([Translations.t.reviews.i_am_affiliated.Clone()])
this._comment = comment
const stars = []
for (let i = 1; i <= 5; i++) {
stars.push(
new VariableUiElement(
this._value.map((review) => {
if (review.rating === undefined) {
rating.map((score) => {
if (score === undefined) {
return Svg.star_outline.replace(/#000000/g, "#ccc")
}
return review.rating < i * 20 ? Svg.star_outline : Svg.star
return score < i * 20 ? Svg.star_outline : Svg.star
})
).onClick(() => {
self._value.data.rating = i * 20
self._value.ping()
rating.setData(i * 20)
})
)
}
this._stars = new Combine(stars).SetClass("review-form-rating")
}
GetValue(): UIEventSource<Review> {
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"),
new Combine([new Combine(stars).SetClass("review-form-rating"), postingAs]).SetClass(
"flex"
),
commentForm,
new Combine([isAffiliated, saveButton]),
Translations.t.reviews.tos.Clone().SetClass("subtle"),
])
.SetClass("flex flex-col p-4")
@ -123,22 +94,10 @@ export default class ReviewForm extends InputElement<Review> {
" border: 2px solid var(--subtle-detail-color-contrast)"
)
return new LoginToggle(
form,
Translations.t.reviews.plz_login.Clone(),
this._state
).ConstructElement()
}
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
super(
new Toggle(Translations.t.reviews.saved.Clone().SetClass("thanks"), form, reviewMade),
Translations.t.reviews.plz_login,
state
)
}
}

38
UI/Reviews/SingleReview.ts
View file

@ -1,33 +1,47 @@
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 "mangrove-reviews-typescript"
import { Store } from "../../Logic/UIEventSource"
import WikidataPreviewBox from "../Wikipedia/WikidataPreviewBox"
export default class SingleReview extends Combine {
constructor(review: Review) {
const d = review.date
constructor(review: Review & { madeByLoggedInUser: Store<boolean> }) {
const d = review
const date = new Date(review.iat * 1000)
const reviewAuthor =
review.metadata.nickname ??
(review.metadata.given_name ?? "") + (review.metadata.family_name ?? "")
super([
new Combine([SingleReview.GenStars(review.rating)]),
new FixedUiElement(review.comment),
new FixedUiElement(review.opinion),
new Combine([
new Combine([
new FixedUiElement(review.author).SetClass("font-bold"),
review.affiliated ? Translations.t.reviews.affiliated_reviewer_warning : "",
new FixedUiElement(reviewAuthor).SetClass("font-bold"),
review.metadata.is_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())}`
`${date.getFullYear()}-${Utils.TwoDigits(
date.getMonth() + 1
)}-${Utils.TwoDigits(date.getDate())} ${Utils.TwoDigits(
date.getHours()
)}:${Utils.TwoDigits(date.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")
}
review.madeByLoggedInUser.addCallbackAndRun((madeByUser) => {
if (madeByUser) {
this.SetClass("border-attention-catch")
} else {
this.RemoveClass("border-attention-catch")
}
})
}
public static GenStars(rating: number): BaseUIElement {

29
UI/SpecialVisualizations.ts
View file

@ -52,6 +52,7 @@ import { GeoOperations } from "../Logic/GeoOperations"
import StatisticsPanel from "./BigComponents/StatisticsPanel"
import AutoApplyButton from "./Popup/AutoApplyButton"
import { LanguageElement } from "./Popup/LanguageElement"
import FeatureReviews from "../Logic/Web/MangroveReviews"
export default class SpecialVisualizations {
public static specialVisualizations: SpecialVisualization[] = SpecialVisualizations.initList()
@ -204,24 +205,16 @@ export default class SpecialVisualizations {
},
],
constr: (state, tags, args) => {
const tgs = tags.data
const key = args[0] ?? "name"
let subject = tgs[key] ?? args[1]
if (subject === undefined || subject === "") {
return Translations.t.reviews.name_required
}
const mangrove = MangroveReviews.Get(
Number(tgs._lon),
Number(tgs._lat),
encodeURIComponent(subject),
state.mangroveIdentity,
state.featureSwitchIsTesting.data
)
const form = new ReviewForm(
(r, whenDone) => mangrove.AddReview(r, whenDone),
state
)
return new ReviewElement(mangrove.GetSubjectUri(), mangrove.GetReviews(), form)
const nameKey = args[0] ?? "name"
let fallbackName = args[1]
const feature = state.allElements.ContainingFeatures.get(tags.data.id)
const mangrove = FeatureReviews.construct(feature, state, {
nameKey: nameKey,
fallbackName,
})
const form = new ReviewForm((r) => mangrove.createReview(r), state)
return new ReviewElement(mangrove, form)
},
},
{