SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

резулт ищет себя в зависимости от линейности опросника + правки визуала

Browse Source
This commit is contained in:
Nastya 2024-01-05 20:00:30 +03:00
parent b4f1bb8909
commit 35f0ccc93b
9 changed files with 395 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/ViewPublicationPage/ContactForm.tsx
View File

@ -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 NameIcon from "@icons/ContactFormIcon/NameIcon";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon"; import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon"; import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
@ -19,6 +19,10 @@ import { modes } from "../../utils/themes/Publication/themePublication";
import { QuizQuestionResult } from "@model/questionTypes/result"; import { QuizQuestionResult } from "@model/questionTypes/result";
import { ApologyPage } from "./ApologyPage"; import { ApologyPage } from "./ApologyPage";
const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
type ContactFormProps = { type ContactFormProps = {
currentQuestion: any; currentQuestion: any;
showResultForm: boolean; showResultForm: boolean;
@ -40,6 +44,7 @@ export const ContactForm = ({
setShowContactForm, setShowContactForm,
setShowResultForm, setShowResultForm,
}: ContactFormProps) => { }: ContactFormProps) => {
const theme = useTheme();
const { settings, items } = useQuestionsStore() const { settings, items } = useQuestionsStore()
const [ready, setReady] = useState(false) const [ready, setReady] = useState(false)
@ -51,12 +56,12 @@ export const ContactForm = ({
const fireOnce = useRef(true) const fireOnce = useRef(true)
const [fire, setFire] = useState(false) const [fire, setFire] = useState(false)
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const followNextForm = () => { const followNextForm = () => {
setShowContactForm(false); setShowContactForm(false);
setShowResultForm(true); setShowResultForm(true);
}; };
const theme = useTheme();
const mode = modes; const mode = modes;
//@ts-ignore //@ts-ignore
const resultQuestion: QuizQuestionResult = items.find((question) => { const resultQuestion: QuizQuestionResult = items.find((question) => {
@ -120,9 +125,10 @@ export const ContactForm = ({
> >
<Box <Box
sx={{ sx={{
width: "530px", width: isMobile ? "330px" : "530px",
borderRadius: "4px", 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 && settings?.cfg.formContact.desc &&
<Typography <Typography
sx={{ sx={{
color: theme.palette.text.primary,
textAlign: "center", textAlign: "center",
m: "20px 0", m: "20px 0",
fontSize: "18px" fontSize: "18px"
@ -187,37 +194,43 @@ export const ContactForm = ({
( (
<Button <Button
disabled={!(ready && !fire)} disabled={!(ready && !fire)}
variant="contained" onClick={async () => { variant="contained"
setFire(true) onClick={async () => {
if (EMAIL_REGEXP.test(email)) {//почта валидна
setFire(true)
if (fireOnce.current) { if (fireOnce.current) {
if ( if (
name.length > 0 || name.length > 0 ||
email.length > 0 || email.length > 0 ||
phone.length > 0 || phone.length > 0 ||
text.length > 0 || text.length > 0 ||
adress.length > 0 adress.length > 0
) { ) {
try { try {
await inputHC() await inputHC()
fireOnce.current = false fireOnce.current = false
enqueueSnackbar("Данные успешно отправлены") enqueueSnackbar("Данные успешно отправлены")
} catch (e) { } catch (e) {
enqueueSnackbar("повторите попытку позже") 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 || "Получить результаты"} {settings?.cfg.formContact?.button || "Получить результаты"}
@ -228,11 +241,11 @@ export const ContactForm = ({
sx={{ sx={{
display: "flex", display: "flex",
mt: "20px", mt: "20px",
width: "450px", width: isMobile ? "300px" : "450px",
}} }}
> >
<CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main} /> <CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main} />
<Typography> <Typography sx={{ color: theme.palette.text.primary }}>
С&ensp; С&ensp;
<Link> Положением об обработке персональных данных </Link> <Link> Положением об обработке персональных данных </Link>
&ensp;и&ensp; &ensp;и&ensp;
@ -259,7 +272,7 @@ export const ContactForm = ({
//@ts-ignore //@ts-ignore
color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap" color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
}}> }}>
Сделано на Penasettings Сделано на PenaQuiz
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
@ -277,6 +290,8 @@ const Inputs = ({
}: any) => { }: any) => {
const { settings, items } = useQuestionsStore() const { settings, items } = useQuestionsStore()
console.log("______________________EMAIL_REGEXP.test(email)")
console.log(EMAIL_REGEXP.test(email))
//@ts-ignore //@ts-ignore
const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact
@ -284,7 +299,12 @@ const Inputs = ({
//@ts-ignore //@ts-ignore
const Name = <CustomInput onChange={({ target }) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} /> const Name = <CustomInput onChange={({ target }) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} />
//@ts-ignore //@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 //@ts-ignore
const Phone = <CustomInput onChange={({ target }) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} /> const Phone = <CustomInput onChange={({ target }) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} />
//@ts-ignore //@ts-ignore
@ -311,9 +331,11 @@ const Inputs = ({
} }
const CustomInput = ({ title, desc, Icon, onChange }: any) => { const CustomInput = ({ title, desc, Icon, onChange }: any) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
//@ts-ignore //@ts-ignore
return <Box m="15px 0"> return <Box m="15px 0">
<Typography mb="7px">{title}</Typography> <Typography mb="7px" color={theme.palette.text.primary}>{title}</Typography>
<TextField <TextField
onChange={onChange} onChange={onChange}

61
src/pages/ViewPublicationPage/ResultForm.tsx
View File

@ -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" import { useQuestionsStore } from "@root/quizData/store"
@ -20,25 +20,38 @@ export const ResultForm = ({
setShowResultForm, setShowResultForm,
}: ResultFormProps) => { }: ResultFormProps) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const { settings, items } = useQuestionsStore() 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 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 = () => { const followNextForm = () => {
setShowResultForm(false); setShowResultForm(false);
setShowContactForm(true); setShowContactForm(true);
}; };
if (resultQuestion === null || resultQuestion === undefined) { if (resultQuestion === null || resultQuestion === undefined) {
followNextForm() followNextForm()
@ -63,7 +76,8 @@ export const ResultForm = ({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "start", alignItems: "start",
width: "490px", width: isMobile ? "100%" : "490px",
padding: isMobile ? "0 16px" : undefined,
}} }}
> >
{ {
@ -73,8 +87,8 @@ export const ResultForm = ({
//@ts-ignore //@ts-ignore
videoUrl={resultQuestion.content.video} videoUrl={resultQuestion.content.video}
containerSX={{ containerSX={{
width: "490px", width: isMobile ? "100%" : "490px",
height: "280px", height: isMobile ? "100%" : "280px",
}} }}
/> />
)} )}
@ -85,8 +99,8 @@ export const ResultForm = ({
component="img" component="img"
src={resultQuestion.content.back} src={resultQuestion.content.back}
sx={{ sx={{
width: "490px", width: isMobile ? "100%" : "490px",
height: "280px", height: isMobile ? "100%" : "280px",
}} }}
></Box> ></Box>
)} )}
@ -97,6 +111,7 @@ export const ResultForm = ({
fontSize: "23px", fontSize: "23px",
fontWeight: 700, fontWeight: 700,
m: "20px 0", m: "20px 0",
color: theme.palette.text.primary,
}} }}
> >
{resultQuestion.description} {resultQuestion.description}
@ -106,9 +121,10 @@ export const ResultForm = ({
<Typography <Typography
sx={{ sx={{
m: "20px 0", m: "20px 0",
color: theme.palette.text.primary,
}} }}
> >
{resultQuestion.title || "Форма результатов"} {resultQuestion.title}
</Typography> </Typography>
{ {
@ -120,6 +136,7 @@ export const ResultForm = ({
sx={{ sx={{
fontSize: "18px", fontSize: "18px",
m: "20px 0", m: "20px 0",
color: theme.palette.text.primary,
}} }}
> >
{ {
@ -143,9 +160,15 @@ export const ResultForm = ({
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
mt: "15px", mt: "15px",
gap: "10px",
}} }}
> >
<NameplateLogo style={{ fontSize: "34px" }} /> <NameplateLogo
style={{
fontSize: "34px",
color: mode[settings.cfg.theme] ? "#000000" : "#F5F7FF",
}}
/>
<Typography <Typography
sx={{ sx={{
fontSize: "20px", fontSize: "20px",

390
src/pages/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -5,7 +5,7 @@ import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice"; import { useUADevice } from "../../utils/hooks/useUADevice";
import { useQuestionsStore } from "@root/quizData/store"; import { useQuestionsStore } from "@root/quizData/store";
import { NameplateLogo } from "@icons/NameplateLogo"; import { NameplateLogo } from "@icons/NameplateLogo";
import {modes} from "../../utils/themes/Publication/themePublication"; import { modes } from "../../utils/themes/Publication/themePublication";
interface Props { interface Props {
@ -18,6 +18,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
const mode = modes; const mode = modes;
const { isMobileDevice } = useUADevice(); const { isMobileDevice } = useUADevice();
const isMobile = useMediaQuery(theme.breakpoints.down(650)); const isMobile = useMediaQuery(theme.breakpoints.down(650));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
if (!settings) return null; if (!settings) return null;
@ -50,14 +51,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
settings.cfg.startpageType === "centered" settings.cfg.startpageType === "centered"
? "550px" ? "550px"
: settings.cfg.startpageType === "expanded" : settings.cfg.startpageType === "expanded"
? "100vw" ? "100vw"
: "100%", : "100%",
height: height:
settings.cfg.startpageType === "centered" settings.cfg.startpageType === "centered"
? "275px" ? "275px"
: settings.cfg.startpageType === "expanded" : settings.cfg.startpageType === "expanded"
? "100vh" ? "100vh"
: "100%", : "100%",
borderRadius: settings.cfg.startpageType === "centered" ? "10px" : "0", borderRadius: settings.cfg.startpageType === "centered" ? "10px" : "0",
overflow: "hidden", overflow: "hidden",
"& iframe": { "& iframe": {
@ -67,8 +68,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
settings.cfg.startpageType === "centered" settings.cfg.startpageType === "centered"
? "" ? ""
: settings.cfg.startpageType === "expanded" : settings.cfg.startpageType === "expanded"
? "scale(1.5)" ? "scale(1.5)"
: "scale(2.4)", : "scale(2.4)",
}, },
}} }}
/> />
@ -81,14 +82,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
sx={{ sx={{
height: "100vh", height: "100vh",
width: "100vw", width: "100vw",
background: background:
settings.cfg.startpageType === "expanded" && !isMobile settings.cfg.startpageType === "expanded" && !isMobile
? settings.cfg.startpage.position === "left" ? settings.cfg.startpage.position === "left"
? "linear-gradient(90deg,#272626,transparent)" ? "linear-gradient(90deg,#272626,transparent)"
: settings.cfg.startpage.position === "center" : settings.cfg.startpage.position === "center"
? "linear-gradient(180deg,transparent,#272626)" ? "linear-gradient(180deg,transparent,#272626)"
: "linear-gradient(270deg,#272626,transparent)" : "linear-gradient(270deg,#272626,transparent)"
: theme.palette.background.default, : theme.palette.background.default,
color: settings.cfg.startpageType === "expanded" ? "white" : "black", color: settings.cfg.startpageType === "expanded" ? "white" : "black",
}} }}
@ -115,7 +116,13 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
alt="" 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> </Box>
<Link mb="16px" href={settings.cfg.info.site}> <Link mb="16px" href={settings.cfg.info.site}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}> <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
@ -135,10 +142,10 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
settings.cfg.startpageType === "centered" settings.cfg.startpageType === "centered"
? "center" ? "center"
: settings.cfg.startpageType === "expanded" : settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "center" ? settings.cfg.startpage.position === "center"
? "center" ? "center"
: "start" : "start"
: "start", : "start",
mt: "28px", mt: "28px",
width: "100%", width: "100%",
}} }}
@ -186,12 +193,12 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
<Box <Box
sx={{ sx={{
mt: "46px", mt: "46px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
width: "100%", width: "100%",
flexDirection: isMobile ? "column" : "row" flexDirection: isMobile ? "column" : "row"
}} }}
> >
<Box sx={{ maxWidth: "300px" }}> <Box sx={{ maxWidth: "300px" }}>
@ -214,7 +221,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
{settings.cfg.info.phonenumber} {settings.cfg.info.phonenumber}
</Typography> </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} {settings.cfg.info.law}
</Typography> </Typography>
</Box> </Box>
@ -259,51 +273,51 @@ function QuizPreviewLayoutByType({
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650)); const isMobile = useMediaQuery(theme.breakpoints.down(650));
function StartPageMobile() { 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 <Box
sx={{ sx={{
display: "flex", height: "80%",
flexDirection: "column-reverse", display: "flex",
flexGrow: 1, flexDirection: "column",
justifyContent: "flex-end", justifyContent: "space-between",
height: "100vh", width: "100%"
"&::-webkit-scrollbar": { width: 0 }, }}
}}
> >
<Box {quizMainBlock}
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>
</Box> </Box>
) </Box>
<Box
sx={{
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
)
} }
@ -312,137 +326,137 @@ function QuizPreviewLayoutByType({
case null: case null:
case "standard": { case "standard": {
return ( return (
<> <>
{isMobile ? ( {isMobile ? (
<StartPageMobile/> <StartPageMobile />
) : ( ) : (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse", flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
flexGrow: 1, flexGrow: 1,
justifyContent: isMobile ? "flex-end" : undefined, justifyContent: isMobile ? "flex-end" : undefined,
height: "100vh", height: "100vh",
"&::-webkit-scrollbar": { width: 0 }, "&::-webkit-scrollbar": { width: 0 },
}} }}
> >
<Box <Box
sx={{ sx={{
width: isMobile ? "100%" : "40%", width: isMobile ? "100%" : "40%",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "flex-start", alignItems: "flex-start",
p: "25px", p: "25px",
height: isMobile ? "80%" : undefined height: isMobile ? "80%" : undefined
}} }}
> >
{quizHeaderBlock} {quizHeaderBlock}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
<Box <Box
sx={{ sx={{
width: isMobile ? "100%" : "60%", width: isMobile ? "100%" : "60%",
overflow: "hidden", overflow: "hidden",
}} }}
> >
{backgroundBlock} {backgroundBlock}
</Box> </Box>
</Box> </Box>
)} )}
</> </>
); );
} }
case "expanded": { case "expanded": {
return ( return (
<> <>
{isMobile ? ( {isMobile ? (
<StartPageMobile/> <StartPageMobile />
) : ( ) : (
<Box <Box
sx={{ sx={{
position: "relative", position: "relative",
display: "flex", display: "flex",
justifyContent: startpageAlignTypeToJustifyContent[alignType], justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1, flexGrow: 1,
height: "100%", height: "100%",
"&::-webkit-scrollbar": { width: 0 }, "&::-webkit-scrollbar": { width: 0 },
}} }}
> >
<Box <Box
sx={{ sx={{
width: "40%", width: "40%",
position: "relative", position: "relative",
padding: "16px", padding: "16px",
zIndex: 3, zIndex: 3,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start", alignItems: alignType === "center" ? "center" : "start",
}} }}
> >
{quizHeaderBlock} {quizHeaderBlock}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
<Box <Box
sx={{ sx={{
position: "absolute", position: "absolute",
zIndex: -1, zIndex: -1,
left: 0, left: 0,
top: 0, top: 0,
height: "100%", height: "100%",
width: "100%", width: "100%",
overflow: "hidden", overflow: "hidden",
}} }}
> >
{backgroundBlock} {backgroundBlock}
</Box> </Box>
</Box> </Box>
) )
} }
</> </>
); );
} }
case "centered": { case "centered": {
return ( return (
<> <>
{isMobile ? ( {isMobile ? (
<StartPageMobile/> <StartPageMobile />
) : ( ) : (
<Box <Box
sx={{ sx={{
padding: "16px", padding: "16px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
height: "100%", height: "100%",
"&::-webkit-scrollbar": { width: 0 }, "&::-webkit-scrollbar": { width: 0 },
overflow: "hidden", overflow: "hidden",
}} }}
> >
{quizHeaderBlock} {quizHeaderBlock}
{backgroundBlock && ( {backgroundBlock && (
<Box <Box
sx={{ sx={{
width: "60%", width: "60%",
overflow: "hidden", overflow: "hidden",
display: "flex", display: "flex",
justifyContent: "center" justifyContent: "center"
}} }}
> >
{backgroundBlock} {backgroundBlock}
</Box> </Box>
)} )}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
) )
} }
</> </>
); );
} }

9
src/pages/ViewPublicationPage/questions/Number.tsx
View File

@ -115,7 +115,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
onChange={async (_, value) => { onChange={async (_, value) => {
const range = String(value).replace(",", "—");
const range = String(value).replace(",", "—").replace (/\D/, '');
updateAnswer(currentQuestion.id, range); updateAnswer(currentQuestion.id, range);
@ -144,7 +145,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
placeholder="0" placeholder="0"
value={answer} value={answer}
onChange={async ({ target }) => { onChange={async ({ target }) => {
updateMinRangeDebounced(window.Number(target.value) > max updateMinRangeDebounced(window.Number(target.value.replace (/\D/, '')) > max
? String(max) ? String(max)
: window.Number(target.value) < min : window.Number(target.value) < min
? String(min) ? String(min)
@ -174,7 +175,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
placeholder="0" placeholder="0"
value={minRange} value={minRange}
onChange={({ target }) => { onChange={({ target }) => {
setMinRange(target.value); setMinRange(target.value.replace (/\D/, ''));
if (window.Number(target.value) >= window.Number(maxRange)) { if (window.Number(target.value) >= window.Number(maxRange)) {
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true); updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
@ -198,7 +199,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
placeholder="0" placeholder="0"
value={maxRange} value={maxRange}
onChange={({ target }) => { onChange={({ target }) => {
setMaxRange(target.value); setMaxRange(target.value.replace (/\D/, ''));
if (window.Number(target.value) <= window.Number(minRange)) { if (window.Number(target.value) <= window.Number(minRange)) {
updateMaxRangeDebounced(`${minRange}—${minRange}`, true); updateMaxRangeDebounced(`${minRange}—${minRange}`, true);

9
src/pages/ViewPublicationPage/questions/Page.tsx
View File

@ -43,8 +43,13 @@ export const Page = ({ currentQuestion }: PageProps) => {
</Box> </Box>
) : ( ) : (
<YoutubeEmbedIframe <YoutubeEmbedIframe
containerSX={{ width: "100%", height: "100%", maxHeight: "80vh", objectFit: "contain" }} containerSX={{
videoUrl={currentQuestion.content.video} width: "100%",
height: "calc( 100vh - 270px)",
maxHeight: "80vh",
objectFit: "contain",
}}
videoUrl={currentQuestion.content.video}
/> />
)} )}
</Box> </Box>

39
src/pages/ViewPublicationPage/questions/Rating.tsx
View File

@ -78,15 +78,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
alignItems: "center", alignItems: "center",
gap: "20px", gap: "20px",
marginTop: "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 <Box
sx={{ sx={{
display: "inline-block", display: "inline-block",
@ -99,21 +94,22 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: String(value), body: String(value),
//@ts-ignore //@ts-ignore
qid: settings.qid qid: settings.qid
}) })
updateAnswer(currentQuestion.id, String(value)) updateAnswer(currentQuestion.id, String(value))
} catch (e) { } catch (e) {
enqueueSnackbar("ответ не был засчитан") enqueueSnackbar("ответ не был засчитан")
} }
}} }}
sx={{ height: "50px", sx={{
height: "50px",
gap: isMobile ? undefined : "15px", gap: isMobile ? undefined : "15px",
justifyContent: isMobile ? "space-between" : undefined, justifyContent: isMobile ? "space-between" : undefined,
width: isMobile ? "100%" : undefined width: isMobile ? "100%" : undefined
@ -123,9 +119,24 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
emptyIcon={form?.icon("#9A9AAF")} emptyIcon={form?.icon("#9A9AAF")}
/> />
</Box> </Box>
<Typography sx={{ color: "#9A9AAF" }}> <Box
{currentQuestion.content.ratingPositiveDescription} sx={{
</Typography> 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>
</Box> </Box>
); );

11
src/pages/ViewPublicationPage/questions/Variant.tsx
View File

@ -145,16 +145,19 @@ const VariantItem = ({
color: theme.palette.text.primary, color: theme.palette.text.primary,
padding: "15px", padding: "15px",
border: `1px solid`, border: `1px solid`,
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF", borderColor:
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default, answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
backgroundColor: mode[settings.cfg.theme]
? "white"
: theme.palette.background.default,
display: "flex", display: "flex",
maxWidth: "685px", maxWidth: "685px",
maxHeight: "85px",
justifyContent: "space-between", justifyContent: "space-between",
width: "100%", width: "100%",
"&.MuiFormControl-root": { "&.MuiFormControl-root": {
width: "100%", width: "100%",
},
}
}} }}
value={index} value={index}
labelPlacement="start" labelPlacement="start"

17
src/pages/ViewPublicationPage/questions/Varimg.tsx
View File

@ -143,18 +143,17 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
color: "#9A9AAF" color: "#9A9AAF"
}} }}
> >
{ {answer ? (
answer ? <img
<img src={variant?.extendedText || gag}
src={
variant?.extendedText || gag
}
style={{ width: "100%", height: "100%", objectFit: "cover" }} style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt="" alt=""
/> />
: ) : variant?.extendedText || isMobile ? (
(variant?.extendedText || isMobile ? ("Выберите вариант ответа ниже") : ("Выберите вариант ответа слева")) "Выберите вариант ответа ниже"
} ) : (
"Выберите вариант ответа слева"
)}
</Box> </Box>
{/* )} */} {/* )} */}

70
src/pages/ViewPublicationPage/tools/YoutubeEmbedIframe.tsx
View File

@ -1,37 +1,49 @@
import { Box, SxProps } from "@mui/material"; import { Box, SxProps } from "@mui/material";
interface Props { interface Props {
videoUrl: string; videoUrl: string;
containerSX?: SxProps; containerSX?: SxProps;
} }
export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) { export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
const extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi; const extractYoutubeVideoId =
const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1]; /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
if (!videoId) return null; 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`; 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
return ( // https://www.youtube.com/watch?v=I2N8hTHhvGY
<Box sx={{ return (
width: "100%", <Box
height: "100%", sx={{
pointerEvents: "none", width: "100%",
"& iframe": { height: "100%",
width: "100%", pointerEvents: "none",
height: "100%", "& iframe": {
}, width: "100%",
...containerSX height: "100%",
}}> },
<iframe ...containerSX,
src={embedUrl} }}
title="YouTube video player" >
frameBorder="0" <Box
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" component="video"
allowFullScreen sx={{
/> width: "100%",
</Box> 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>
);
} }