резулт ищет себя в зависимости от линейности опросника + правки визуала
This commit is contained in:
parent
b4f1bb8909
commit
35f0ccc93b
@ -1,4 +1,4 @@
|
||||
import { Box, Typography, Button, Paper, TextField, Link, InputAdornment, useTheme } from "@mui/material";
|
||||
import { Box, Typography, Button, useMediaQuery, TextField, Link, InputAdornment, useTheme } from "@mui/material";
|
||||
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
||||
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
|
||||
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
|
||||
@ -19,6 +19,10 @@ import { modes } from "../../utils/themes/Publication/themePublication";
|
||||
import { QuizQuestionResult } from "@model/questionTypes/result";
|
||||
import { ApologyPage } from "./ApologyPage";
|
||||
|
||||
|
||||
|
||||
const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
|
||||
|
||||
type ContactFormProps = {
|
||||
currentQuestion: any;
|
||||
showResultForm: boolean;
|
||||
@ -40,6 +44,7 @@ export const ContactForm = ({
|
||||
setShowContactForm,
|
||||
setShowResultForm,
|
||||
}: ContactFormProps) => {
|
||||
const theme = useTheme();
|
||||
const { settings, items } = useQuestionsStore()
|
||||
|
||||
const [ready, setReady] = useState(false)
|
||||
@ -51,12 +56,12 @@ export const ContactForm = ({
|
||||
|
||||
const fireOnce = useRef(true)
|
||||
const [fire, setFire] = useState(false)
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
|
||||
const followNextForm = () => {
|
||||
setShowContactForm(false);
|
||||
setShowResultForm(true);
|
||||
};
|
||||
const theme = useTheme();
|
||||
const mode = modes;
|
||||
//@ts-ignore
|
||||
const resultQuestion: QuizQuestionResult = items.find((question) => {
|
||||
@ -120,9 +125,10 @@ export const ContactForm = ({
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "530px",
|
||||
width: isMobile ? "330px" : "530px",
|
||||
borderRadius: "4px",
|
||||
boxShadow: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px"
|
||||
overflow: "auto",
|
||||
height: "90vh",
|
||||
}}
|
||||
>
|
||||
|
||||
@ -142,6 +148,7 @@ export const ContactForm = ({
|
||||
settings?.cfg.formContact.desc &&
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.text.primary,
|
||||
textAlign: "center",
|
||||
m: "20px 0",
|
||||
fontSize: "18px"
|
||||
@ -187,37 +194,43 @@ export const ContactForm = ({
|
||||
(
|
||||
<Button
|
||||
disabled={!(ready && !fire)}
|
||||
variant="contained" onClick={async () => {
|
||||
setFire(true)
|
||||
variant="contained"
|
||||
onClick={async () => {
|
||||
if (EMAIL_REGEXP.test(email)) {//почта валидна
|
||||
setFire(true)
|
||||
|
||||
|
||||
if (fireOnce.current) {
|
||||
if (
|
||||
name.length > 0 ||
|
||||
email.length > 0 ||
|
||||
phone.length > 0 ||
|
||||
text.length > 0 ||
|
||||
adress.length > 0
|
||||
) {
|
||||
|
||||
try {
|
||||
await inputHC()
|
||||
fireOnce.current = false
|
||||
enqueueSnackbar("Данные успешно отправлены")
|
||||
} catch (e) {
|
||||
enqueueSnackbar("повторите попытку позже")
|
||||
if (fireOnce.current) {
|
||||
if (
|
||||
name.length > 0 ||
|
||||
email.length > 0 ||
|
||||
phone.length > 0 ||
|
||||
text.length > 0 ||
|
||||
adress.length > 0
|
||||
) {
|
||||
|
||||
try {
|
||||
await inputHC()
|
||||
fireOnce.current = false
|
||||
enqueueSnackbar("Данные успешно отправлены")
|
||||
} catch (e) {
|
||||
enqueueSnackbar("повторите попытку позже")
|
||||
}
|
||||
|
||||
if (settings?.cfg.resultInfo.when === "after" || settings?.cfg.resultInfo.when === "email" && !checkEmptyData({ resultData: resultQuestion })) {
|
||||
setShowContactForm(false)
|
||||
setShowResultForm(true)
|
||||
}
|
||||
} else {
|
||||
enqueueSnackbar("Пожалуйста, заполните поля")
|
||||
}
|
||||
|
||||
if (settings?.cfg.resultInfo.when === "after" || settings?.cfg.resultInfo.when === "email" && !checkEmptyData({ resultData: resultQuestion })) {
|
||||
setShowContactForm(false)
|
||||
setShowResultForm(true)
|
||||
}
|
||||
} else {
|
||||
enqueueSnackbar("Пожалуйста, заполните поля")
|
||||
}
|
||||
}
|
||||
|
||||
setFire(false)
|
||||
|
||||
setFire(false)
|
||||
} else {
|
||||
enqueueSnackbar("введена некорректная почта")
|
||||
}
|
||||
|
||||
}}
|
||||
>
|
||||
{settings?.cfg.formContact?.button || "Получить результаты"}
|
||||
@ -228,11 +241,11 @@ export const ContactForm = ({
|
||||
sx={{
|
||||
display: "flex",
|
||||
mt: "20px",
|
||||
width: "450px",
|
||||
width: isMobile ? "300px" : "450px",
|
||||
}}
|
||||
>
|
||||
<CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main} />
|
||||
<Typography>
|
||||
<Typography sx={{ color: theme.palette.text.primary }}>
|
||||
С 
|
||||
<Link> Положением об обработке персональных данных </Link>
|
||||
 и 
|
||||
@ -259,7 +272,7 @@ export const ContactForm = ({
|
||||
//@ts-ignore
|
||||
color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
|
||||
}}>
|
||||
Сделано на Penasettings
|
||||
Сделано на PenaQuiz
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -277,6 +290,8 @@ const Inputs = ({
|
||||
}: any) => {
|
||||
const { settings, items } = useQuestionsStore()
|
||||
|
||||
console.log("______________________EMAIL_REGEXP.test(email)")
|
||||
console.log(EMAIL_REGEXP.test(email))
|
||||
|
||||
//@ts-ignore
|
||||
const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact
|
||||
@ -284,7 +299,12 @@ const Inputs = ({
|
||||
//@ts-ignore
|
||||
const Name = <CustomInput onChange={({ target }) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} />
|
||||
//@ts-ignore
|
||||
const Email = <CustomInput onChange={({ target }) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} />
|
||||
const Email = <CustomInput
|
||||
|
||||
error = {!EMAIL_REGEXP.test(email)}
|
||||
label={!EMAIL_REGEXP.test(email) ? "" : "Некорректная почта"}
|
||||
//@ts-ignore
|
||||
onChange={({ target }) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} />
|
||||
//@ts-ignore
|
||||
const Phone = <CustomInput onChange={({ target }) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} />
|
||||
//@ts-ignore
|
||||
@ -311,9 +331,11 @@ const Inputs = ({
|
||||
}
|
||||
|
||||
const CustomInput = ({ title, desc, Icon, onChange }: any) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
//@ts-ignore
|
||||
return <Box m="15px 0">
|
||||
<Typography mb="7px">{title}</Typography>
|
||||
<Typography mb="7px" color={theme.palette.text.primary}>{title}</Typography>
|
||||
|
||||
<TextField
|
||||
onChange={onChange}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Box, Typography, Button } from "@mui/material";
|
||||
import { Box, Typography, Button, useMediaQuery, useTheme } from "@mui/material";
|
||||
|
||||
import { useQuestionsStore } from "@root/quizData/store"
|
||||
|
||||
@ -20,25 +20,38 @@ export const ResultForm = ({
|
||||
setShowResultForm,
|
||||
|
||||
}: ResultFormProps) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
const { settings, items } = useQuestionsStore()
|
||||
|
||||
const resultQuestion = (items.find(
|
||||
(question) =>
|
||||
question.type === "result" &&
|
||||
(question.content.rule.parentId === "line" || currentQuestion.id)
|
||||
)) ||
|
||||
items.find(
|
||||
(question) =>
|
||||
question.type === "result" && question.content.rule.parentId === "line"
|
||||
)
|
||||
const mode = modes;
|
||||
|
||||
const searchResult = () => {
|
||||
if (Boolean(settings?.cfg.haveRoot)) {
|
||||
//ищём для ветвления
|
||||
return (items.find(
|
||||
(question) =>
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === currentQuestion.content.id,
|
||||
) ||
|
||||
items.find(
|
||||
(question) =>
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === "line",
|
||||
))
|
||||
} else {
|
||||
return items.find(
|
||||
(question) =>
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === "line",
|
||||
)
|
||||
}
|
||||
};
|
||||
const resultQuestion = searchResult();
|
||||
|
||||
const followNextForm = () => {
|
||||
setShowResultForm(false);
|
||||
setShowContactForm(true);
|
||||
};
|
||||
|
||||
if (resultQuestion === null || resultQuestion === undefined) {
|
||||
|
||||
followNextForm()
|
||||
@ -63,7 +76,8 @@ export const ResultForm = ({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
width: "490px",
|
||||
width: isMobile ? "100%" : "490px",
|
||||
padding: isMobile ? "0 16px" : undefined,
|
||||
}}
|
||||
>
|
||||
{
|
||||
@ -73,8 +87,8 @@ export const ResultForm = ({
|
||||
//@ts-ignore
|
||||
videoUrl={resultQuestion.content.video}
|
||||
containerSX={{
|
||||
width: "490px",
|
||||
height: "280px",
|
||||
width: isMobile ? "100%" : "490px",
|
||||
height: isMobile ? "100%" : "280px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@ -85,8 +99,8 @@ export const ResultForm = ({
|
||||
component="img"
|
||||
src={resultQuestion.content.back}
|
||||
sx={{
|
||||
width: "490px",
|
||||
height: "280px",
|
||||
width: isMobile ? "100%" : "490px",
|
||||
height: isMobile ? "100%" : "280px",
|
||||
}}
|
||||
></Box>
|
||||
)}
|
||||
@ -97,6 +111,7 @@ export const ResultForm = ({
|
||||
fontSize: "23px",
|
||||
fontWeight: 700,
|
||||
m: "20px 0",
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
{resultQuestion.description}
|
||||
@ -106,9 +121,10 @@ export const ResultForm = ({
|
||||
<Typography
|
||||
sx={{
|
||||
m: "20px 0",
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
{resultQuestion.title || "Форма результатов"}
|
||||
{resultQuestion.title}
|
||||
</Typography>
|
||||
|
||||
{
|
||||
@ -120,6 +136,7 @@ export const ResultForm = ({
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
m: "20px 0",
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
{
|
||||
@ -143,9 +160,15 @@ export const ResultForm = ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "15px",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo style={{ fontSize: "34px" }} />
|
||||
<NameplateLogo
|
||||
style={{
|
||||
fontSize: "34px",
|
||||
color: mode[settings.cfg.theme] ? "#000000" : "#F5F7FF",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "20px",
|
||||
|
||||
@ -5,7 +5,7 @@ import { notReachable } from "../../utils/notReachable";
|
||||
import { useUADevice } from "../../utils/hooks/useUADevice";
|
||||
import { useQuestionsStore } from "@root/quizData/store";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import {modes} from "../../utils/themes/Publication/themePublication";
|
||||
import { modes } from "../../utils/themes/Publication/themePublication";
|
||||
|
||||
|
||||
interface Props {
|
||||
@ -18,6 +18,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
const mode = modes;
|
||||
const { isMobileDevice } = useUADevice();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
|
||||
if (!settings) return null;
|
||||
|
||||
@ -50,14 +51,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
settings.cfg.startpageType === "centered"
|
||||
? "550px"
|
||||
: settings.cfg.startpageType === "expanded"
|
||||
? "100vw"
|
||||
: "100%",
|
||||
? "100vw"
|
||||
: "100%",
|
||||
height:
|
||||
settings.cfg.startpageType === "centered"
|
||||
? "275px"
|
||||
: settings.cfg.startpageType === "expanded"
|
||||
? "100vh"
|
||||
: "100%",
|
||||
? "100vh"
|
||||
: "100%",
|
||||
borderRadius: settings.cfg.startpageType === "centered" ? "10px" : "0",
|
||||
overflow: "hidden",
|
||||
"& iframe": {
|
||||
@ -67,8 +68,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
settings.cfg.startpageType === "centered"
|
||||
? ""
|
||||
: settings.cfg.startpageType === "expanded"
|
||||
? "scale(1.5)"
|
||||
: "scale(2.4)",
|
||||
? "scale(1.5)"
|
||||
: "scale(2.4)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@ -81,14 +82,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
sx={{
|
||||
height: "100vh",
|
||||
width: "100vw",
|
||||
background:
|
||||
settings.cfg.startpageType === "expanded" && !isMobile
|
||||
? settings.cfg.startpage.position === "left"
|
||||
? "linear-gradient(90deg,#272626,transparent)"
|
||||
: settings.cfg.startpage.position === "center"
|
||||
? "linear-gradient(180deg,transparent,#272626)"
|
||||
: "linear-gradient(270deg,#272626,transparent)"
|
||||
: theme.palette.background.default,
|
||||
background:
|
||||
settings.cfg.startpageType === "expanded" && !isMobile
|
||||
? settings.cfg.startpage.position === "left"
|
||||
? "linear-gradient(90deg,#272626,transparent)"
|
||||
: settings.cfg.startpage.position === "center"
|
||||
? "linear-gradient(180deg,transparent,#272626)"
|
||||
: "linear-gradient(270deg,#272626,transparent)"
|
||||
: theme.palette.background.default,
|
||||
|
||||
color: settings.cfg.startpageType === "expanded" ? "white" : "black",
|
||||
}}
|
||||
@ -115,7 +116,13 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
<Typography sx={{ fontSize: "14px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary}}>{settings.cfg.info.orgname}</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
color: settings.cfg.startpageType === "expanded"
|
||||
&& !isMobile ? "white" : theme.palette.text.primary
|
||||
}}
|
||||
>{settings.cfg.info.orgname}</Typography>
|
||||
</Box>
|
||||
<Link mb="16px" href={settings.cfg.info.site}>
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
|
||||
@ -135,10 +142,10 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
settings.cfg.startpageType === "centered"
|
||||
? "center"
|
||||
: settings.cfg.startpageType === "expanded"
|
||||
? settings.cfg.startpage.position === "center"
|
||||
? "center"
|
||||
: "start"
|
||||
: "start",
|
||||
? settings.cfg.startpage.position === "center"
|
||||
? "center"
|
||||
: "start"
|
||||
: "start",
|
||||
mt: "28px",
|
||||
width: "100%",
|
||||
}}
|
||||
@ -186,12 +193,12 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
mt: "46px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
flexDirection: isMobile ? "column" : "row"
|
||||
mt: "46px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
flexDirection: isMobile ? "column" : "row"
|
||||
}}
|
||||
>
|
||||
<Box sx={{ maxWidth: "300px" }}>
|
||||
@ -214,7 +221,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
{settings.cfg.info.phonenumber}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography sx={{ width: "100%", overflowWrap: "break-word", fontSize: "12px", textAlign: "end" }}>
|
||||
<Typography sx={{ width: "100%",
|
||||
overflowWrap: "break-word",
|
||||
fontSize: "12px", textAlign: "end",
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded" && !isMobile
|
||||
? "white"
|
||||
: theme.palette.text.primary,
|
||||
}}>
|
||||
{settings.cfg.info.law}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -259,51 +273,51 @@ function QuizPreviewLayoutByType({
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
function StartPageMobile() {
|
||||
return(
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
height: "100vh",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: "25px",
|
||||
height: "80%"
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
height: "100vh",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
sx={{
|
||||
height: "80%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: "25px",
|
||||
height: "80%"
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
<Box
|
||||
sx={{
|
||||
height: "80%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
)
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -312,137 +326,137 @@ function QuizPreviewLayoutByType({
|
||||
case null:
|
||||
case "standard": {
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
<StartPageMobile/>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: isMobile ? "flex-end" : undefined,
|
||||
height: "100vh",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? "100%" : "40%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: "25px",
|
||||
height: isMobile ? "80%" : undefined
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
<>
|
||||
{isMobile ? (
|
||||
<StartPageMobile />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: isMobile ? "flex-end" : undefined,
|
||||
height: "100vh",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? "100%" : "40%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: "25px",
|
||||
height: isMobile ? "80%" : undefined
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? "100%" : "60%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? "100%" : "60%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
</>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
case "expanded": {
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
<StartPageMobile/>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
justifyContent: startpageAlignTypeToJustifyContent[alignType],
|
||||
flexGrow: 1,
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "40%",
|
||||
position: "relative",
|
||||
padding: "16px",
|
||||
zIndex: 3,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: alignType === "center" ? "center" : "start",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
zIndex: -1,
|
||||
left: 0,
|
||||
top: 0,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</>
|
||||
<>
|
||||
{isMobile ? (
|
||||
<StartPageMobile />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
justifyContent: startpageAlignTypeToJustifyContent[alignType],
|
||||
flexGrow: 1,
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "40%",
|
||||
position: "relative",
|
||||
padding: "16px",
|
||||
zIndex: 3,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: alignType === "center" ? "center" : "start",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
zIndex: -1,
|
||||
left: 0,
|
||||
top: 0,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
case "centered": {
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
<StartPageMobile/>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
padding: "16px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{backgroundBlock && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "60%",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
)}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</>
|
||||
<>
|
||||
{isMobile ? (
|
||||
<StartPageMobile />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
padding: "16px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{backgroundBlock && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "60%",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
)}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@ -115,7 +115,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
onChange={async (_, value) => {
|
||||
|
||||
|
||||
const range = String(value).replace(",", "—");
|
||||
|
||||
const range = String(value).replace(",", "—").replace (/\D/, '');
|
||||
|
||||
|
||||
updateAnswer(currentQuestion.id, range);
|
||||
@ -144,7 +145,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
placeholder="0"
|
||||
value={answer}
|
||||
onChange={async ({ target }) => {
|
||||
updateMinRangeDebounced(window.Number(target.value) > max
|
||||
updateMinRangeDebounced(window.Number(target.value.replace (/\D/, '')) > max
|
||||
? String(max)
|
||||
: window.Number(target.value) < min
|
||||
? String(min)
|
||||
@ -174,7 +175,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
placeholder="0"
|
||||
value={minRange}
|
||||
onChange={({ target }) => {
|
||||
setMinRange(target.value);
|
||||
setMinRange(target.value.replace (/\D/, ''));
|
||||
|
||||
if (window.Number(target.value) >= window.Number(maxRange)) {
|
||||
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
|
||||
@ -198,7 +199,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
placeholder="0"
|
||||
value={maxRange}
|
||||
onChange={({ target }) => {
|
||||
setMaxRange(target.value);
|
||||
setMaxRange(target.value.replace (/\D/, ''));
|
||||
|
||||
if (window.Number(target.value) <= window.Number(minRange)) {
|
||||
updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
|
||||
|
||||
@ -43,8 +43,13 @@ export const Page = ({ currentQuestion }: PageProps) => {
|
||||
</Box>
|
||||
) : (
|
||||
<YoutubeEmbedIframe
|
||||
containerSX={{ width: "100%", height: "100%", maxHeight: "80vh", objectFit: "contain" }}
|
||||
videoUrl={currentQuestion.content.video}
|
||||
containerSX={{
|
||||
width: "100%",
|
||||
height: "calc( 100vh - 270px)",
|
||||
maxHeight: "80vh",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
videoUrl={currentQuestion.content.video}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@ -78,15 +78,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
marginTop: "20px",
|
||||
width: isMobile ? "100%" : undefined
|
||||
flexDirection: "column",
|
||||
width: isMobile ? "100%" : undefined,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{
|
||||
color: "#9A9AAF"
|
||||
// color: theme.palette.grey2.main
|
||||
}}>
|
||||
{currentQuestion.content.ratingNegativeDescription}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
@ -99,21 +94,22 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
|
||||
|
||||
|
||||
try {
|
||||
|
||||
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: String(value),
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
|
||||
updateAnswer(currentQuestion.id, String(value))
|
||||
|
||||
|
||||
} catch (e) {
|
||||
enqueueSnackbar("ответ не был засчитан")
|
||||
}
|
||||
}}
|
||||
sx={{ height: "50px",
|
||||
sx={{
|
||||
height: "50px",
|
||||
gap: isMobile ? undefined : "15px",
|
||||
justifyContent: isMobile ? "space-between" : undefined,
|
||||
width: isMobile ? "100%" : undefined
|
||||
@ -123,9 +119,24 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
|
||||
emptyIcon={form?.icon("#9A9AAF")}
|
||||
/>
|
||||
</Box>
|
||||
<Typography sx={{ color: "#9A9AAF" }}>
|
||||
{currentQuestion.content.ratingPositiveDescription}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
gap: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{
|
||||
color: "#9A9AAF"
|
||||
// color: theme.palette.grey2.main
|
||||
}}>
|
||||
{currentQuestion.content.ratingNegativeDescription}
|
||||
</Typography>
|
||||
<Typography sx={{ color: "#9A9AAF" }}>
|
||||
{currentQuestion.content.ratingPositiveDescription}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -145,16 +145,19 @@ const VariantItem = ({
|
||||
color: theme.palette.text.primary,
|
||||
padding: "15px",
|
||||
border: `1px solid`,
|
||||
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
|
||||
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
|
||||
borderColor:
|
||||
answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
|
||||
backgroundColor: mode[settings.cfg.theme]
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
display: "flex",
|
||||
maxWidth: "685px",
|
||||
maxHeight: "85px",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
"&.MuiFormControl-root": {
|
||||
width: "100%",
|
||||
|
||||
}
|
||||
},
|
||||
}}
|
||||
value={index}
|
||||
labelPlacement="start"
|
||||
|
||||
@ -143,18 +143,17 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
color: "#9A9AAF"
|
||||
}}
|
||||
>
|
||||
{
|
||||
answer ?
|
||||
<img
|
||||
src={
|
||||
variant?.extendedText || gag
|
||||
}
|
||||
{answer ? (
|
||||
<img
|
||||
src={variant?.extendedText || gag}
|
||||
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
||||
alt=""
|
||||
/>
|
||||
:
|
||||
(variant?.extendedText || isMobile ? ("Выберите вариант ответа ниже") : ("Выберите вариант ответа слева"))
|
||||
}
|
||||
) : variant?.extendedText || isMobile ? (
|
||||
"Выберите вариант ответа ниже"
|
||||
) : (
|
||||
"Выберите вариант ответа слева"
|
||||
)}
|
||||
|
||||
</Box>
|
||||
{/* )} */}
|
||||
|
||||
@ -1,37 +1,49 @@
|
||||
import { Box, SxProps } from "@mui/material";
|
||||
|
||||
|
||||
|
||||
interface Props {
|
||||
videoUrl: string;
|
||||
containerSX?: SxProps;
|
||||
videoUrl: string;
|
||||
containerSX?: SxProps;
|
||||
}
|
||||
|
||||
export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
|
||||
const extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
|
||||
const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
|
||||
if (!videoId) return null;
|
||||
const extractYoutubeVideoId =
|
||||
/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
|
||||
const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
|
||||
// if (!videoId) return null;
|
||||
|
||||
const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
pointerEvents: "none",
|
||||
"& iframe": {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
},
|
||||
...containerSX
|
||||
}}>
|
||||
<iframe
|
||||
src={embedUrl}
|
||||
title="YouTube video player"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowFullScreen
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
|
||||
// https://www.youtube.com/shorts/9VgqBPd6RPA
|
||||
// https://www.youtube.com/watch?v=I2N8hTHhvGY
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
pointerEvents: "none",
|
||||
"& iframe": {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
},
|
||||
...containerSX,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="video"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
autoPlay
|
||||
muted
|
||||
src={videoUrl}
|
||||
/>
|
||||
{/* <iframe
|
||||
src={embedUrl}
|
||||
title="YouTube video player"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowFullScreen
|
||||
/> */}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user