mapcomplete/UI/UserSurveyPanel.ts

50 lines
2.3 KiB
TypeScript

import Combine from "./Base/Combine"
import { FixedUiElement } from "./Base/FixedUiElement"
import { SubtleButton } from "./Base/SubtleButton"
import Svg from "../Svg"
import { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
import Toggle from "./Input/Toggle"
export default class UserSurveyPanel extends Toggle {
private static readonly userSurveyHasBeenTaken = LocalStorageSource.GetParsed(
"usersurvey-has-been-taken",
false
)
constructor() {
super(
new Combine([
new FixedUiElement("Thanks for taking the survey!").SetClass("thanks px-2"),
new SubtleButton(Svg.star_svg(), "Take the user survey again", {
imgSize: "h-6 w-6",
})
.onClick(() => {
window.open(
"https://framaforms.org/mapcomplete-usage-survey-1672687708",
"_blank"
)
UserSurveyPanel.userSurveyHasBeenTaken.setData(false)
})
.SetClass("h-12"),
]),
new Combine([
new FixedUiElement("Please, fill in the user survey").SetClass("alert"),
"Hey! We'd like to get to know you better - would you mind to help out by filling out this form? Your opinion is important",
new FixedUiElement(
"We are specifically searching responses from underrepresented groups, such as non-technical people, minorities, women, people without an account, people of colour, ..."
).SetClass("font-bold"),
"Results are fully anonymous and are used to improve MapComplete. We don't ask private information. So, don't hesitate and fill it out!",
new SubtleButton(Svg.star_outline_svg(), "Take the survey").onClick(() => {
window.open(
"https://framaforms.org/mapcomplete-usage-survey-1672687708",
"_blank"
)
UserSurveyPanel.userSurveyHasBeenTaken.setData(true)
}),
]).SetClass("block border-2 border-black rounded-xl flex flex-col p-2"),
UserSurveyPanel.userSurveyHasBeenTaken
)
this.SetStyle("max-width: 40rem")
}
}