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,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
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue