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
}}>