diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx index c4c94ed8..fc1ea03e 100644 --- a/src/pages/Landing/Landing.tsx +++ b/src/pages/Landing/Landing.tsx @@ -24,7 +24,7 @@ export default function Landing() {
- + {/* */} diff --git a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx index 9c84da9f..37beaf7f 100644 --- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx +++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx @@ -1,162 +1,295 @@ -import { useParams } from "react-router-dom"; import { Box, Button, + ButtonBase, + Link, + Paper, Typography, - useTheme, useMediaQuery, + useTheme, } from "@mui/material"; -import useSWR from "swr"; -import { isAxiosError } from "axios"; -import { enqueueSnackbar } from "notistack"; -import { devlog } from "@frontend/kitui"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe"; +import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; +import { notReachable } from "../../utils/notReachable"; +import { useUADevice } from "../../utils/hooks/useUADevice"; -import { quizApi } from "@api/quiz"; - -import { useQuizStore } from "@root/quizes/store"; -import { useQuestions } from "@root/questions/hooks"; -import { setQuizes } from "@root/quizes/actions"; - -type StartPageViewPublicationProps = { - setVisualStartPage: (bool: boolean) => void; - showNextButton:boolean -}; - -export const StartPageViewPublication = ({ - setVisualStartPage, - showNextButton -}: StartPageViewPublicationProps) => { - const quizId = Number(useParams().quizId); - const { quizes } = useQuizStore(); - const { questions } = useQuestions(); +export const StartPageViewPublication = () => { + console.log("startpage") const theme = useTheme(); - const isTablet = useMediaQuery(theme.breakpoints.down(630)); - const quiz = quizes.find(({ backendId }) => quizId === backendId); - const isMediaFileExist = - quiz?.config.startpage.background.desktop || - quiz?.config.startpage.background.video; + const quiz = useCurrentQuiz(); + const { isMobileDevice } = useUADevice(); + console.log(quiz) - useSWR("quizes", () => quizApi.getList(), { - onSuccess: setQuizes, - onError: (error: unknown) => { - const message = isAxiosError(error) - ? error.response?.data ?? "" - : ""; + if (!quiz) return null; - devlog("Error getting quiz list", error); - enqueueSnackbar(`Не удалось получить квизы. ${message}`); - }, - }); + const handleCopyNumber = () => { + navigator.clipboard.writeText(quiz.config.info.phonenumber); + }; + + const background = quiz.config.startpage.background.type === "image" + ? quiz.config.startpage.background.desktop + ? ( + + ) + : null + : quiz.config.startpage.background.type === "video" + ? quiz.config.startpage.background.video + ? ( + + ) + : null + : null; return ( - - - + + - {quiz?.config.startpage.background.mobile && ( - - )} - - {quiz?.config.info.orgname} - - - - - {quiz?.name} - - - {quiz?.config.startpage.description} - - - - - - - - {quiz?.config.info.phonenumber} - - - {quiz?.config.info.law} - - - - {!isTablet && isMediaFileExist && ( - - {quiz?.config.startpage.background.mobile && ( - - )} - {quiz.config.startpage.background.type === "video" && - quiz.config.startpage.background.video && ( - - )} - + + {quiz.config.info.orgname} + + + + + {quiz.config.info.site} + + + } + quizMainBlock={<> + + {quiz.name} + + {quiz.config.startpage.description} + + + + + + + {quiz.config.info.clickable ? ( + isMobileDevice ? ( + + + {quiz.config.info.phonenumber} + + + ) : ( + + + {quiz.config.info.phonenumber} + + + ) + ) : ( + + {quiz.config.info.phonenumber} + + )} + + {quiz.config.info.law} + + + } + backgroundBlock={background} + startpageType={quiz.config.startpageType} + alignType={quiz.config.startpage.position} + /> + ); +} + +function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: { + quizHeaderBlock: JSX.Element; + quizMainBlock: JSX.Element; + backgroundBlock: JSX.Element | null; + startpageType: QuizStartpageType; + alignType: QuizStartpageAlignType; +}) { + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(630)); + + switch (startpageType) { + case null: + case "standard": { + return ( + + + {quizHeaderBlock} + {quizMainBlock} + + + {backgroundBlock} + + + ); + } + case "expanded": { + return ( + + + {quizHeaderBlock} + {quizMainBlock} + + + {backgroundBlock} + + + ); + } + case "centered": { + return ( + + {quizHeaderBlock} + {backgroundBlock && + + {backgroundBlock} + + } + {quizMainBlock} + + ); + } + default: notReachable(startpageType); + } +} + +const startpageAlignTypeToJustifyContent: Record = { + left: "start", + center: "center", + right: "end", }; diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx index 38911b8f..66a521cc 100644 --- a/src/pages/ViewPublicationPage/index.tsx +++ b/src/pages/ViewPublicationPage/index.tsx @@ -5,11 +5,29 @@ import { StartPageViewPublication } from "./StartPageViewPublication"; import { Question } from "./Question"; import { useQuestions } from "@root/questions/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks"; +import useSWR from "swr"; +import { quizApi } from "@api/quiz"; +import { setQuizes } from "@root/quizes/actions"; +import { isAxiosError } from "axios"; +import { devlog } from "@frontend/kitui"; import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared"; +import { enqueueSnackbar } from "notistack"; export const ViewPage = () => { + useSWR("quizes", () => quizApi.getList(), { + onSuccess: setQuizes, + onError: error => { + const message = isAxiosError(error) ? (error.response?.data ?? "") : ""; + + devlog("Error getting quiz list", error); + enqueueSnackbar(`Не удалось получить квизы. ${message}`); + }, +}); + + const quiz = useCurrentQuiz(); + console.log(quiz) const { questions } = useQuestions(); const [visualStartPage, setVisualStartPage] = useState( !quiz?.config.noStartPage @@ -30,10 +48,7 @@ export const ViewPage = () => { return ( {visualStartPage ? ( - + ) : ( )} diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index cf279d3c..fa64b178 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -331,74 +331,7 @@ export default function StartPageSettings() { - - } - checkedIcon={} - /> - } - label="мобильная версия" - sx={{ - color: theme.palette.brightPurple.main, - textDecorationLine: "underline", - textDecorationColor: theme.palette.brightPurple.main, - ml: "-9px", - userSelect: "none", - "& .css-14o5ia4-MuiTypography-root": { - fontSize: "16px" - } - }} - onClick={() => { - MobileVersionHC(!mobileVersion); - }} - /> - {mobileVersion ? ( - - - Изображение для мобильной версии - - { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.mobile = url; - quiz.config.startpage.background.originalMobile = url; - }); - }} - onImageSaveClick={file => { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.mobile = url; - }); - }} - onDeleteClick={() => { - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.background.mobile = null; - }); - }} - /> - - ) : ( - <> - )} - + - - Настройки видео - - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.background.cycle = e.target.checked; - })} - /> - - Изображение для мобильной версии - - { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.mobile = url; - quiz.config.startpage.background.originalMobile = url; - }); - }} - onImageSaveClick={file => { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.mobile = url; - }); - }} - onDeleteClick={() => { - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.background.mobile = null; - }); - }} - /> + - - Расположение элементов - {designType !== "centered" && - - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.position = "left"; - })} - isActive={quiz.config.startpage.position === "left"} - Icon={AlignLeftIcon} - /> - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.position = "center"; - })} - isActive={quiz.config.startpage.position === "center"} - Icon={AlignCenterIcon} - sx={{ display: designType === "standard" ? "none" : "flex" }} - /> - updateQuiz(quiz.id, quiz => { - quiz.config.startpage.position = "right"; - })} - isActive={quiz.config.startpage.position === "right"} - Icon={AlignRightIcon} - /> - + <> + + Расположение элементов + + + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.position = "left"; + })} + isActive={quiz.config.startpage.position === "left"} + Icon={AlignLeftIcon} + /> + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.position = "center"; + })} + isActive={quiz.config.startpage.position === "center"} + Icon={AlignCenterIcon} + sx={{ display: designType === "standard" ? "none" : "flex" }} + /> + updateQuiz(quiz.id, quiz => { + quiz.config.startpage.position = "right"; + })} + isActive={quiz.config.startpage.position === "right"} + Icon={AlignRightIcon} + /> + + + } {(isTablet || !isSmallMonitor) && ( <> diff --git a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx index 5e83bf19..677690e5 100644 --- a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx +++ b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx @@ -1,12 +1,13 @@ -import { Box } from "@mui/material"; +import { Box, SxProps } from "@mui/material"; interface Props { videoUrl: string; + containerSX?: SxProps; } -export default function YoutubeEmbedIframe({ videoUrl }: Props) { +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; @@ -21,7 +22,8 @@ export default function YoutubeEmbedIframe({ videoUrl }: Props) { "& iframe": { width: "100%", height: "100%", - } + }, + ...containerSX }}>