SQuiz/frontPanel
2
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into answers-settings

Browse Source
This commit is contained in:
Nastya 2023-12-13 23:55:40 +03:00
commit edda0a372f
5 changed files with 340 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Landing/Landing.tsx
View File

@ -24,7 +24,7 @@ export default function Landing() {
<Header/> <Header/>
<Hero/> <Hero/>
<Counter/> <Counter/>
<Collaboration/> {/* <Collaboration/> */}
<HowItWorks/> <HowItWorks/>
<BusinessPluses/> <BusinessPluses/>
<HowToUse/> <HowToUse/>

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

@ -1,162 +1,295 @@
import { useParams } from "react-router-dom";
import { import {
Box, Box,
Button, Button,
ButtonBase,
Link,
Paper,
Typography, Typography,
useTheme,
useMediaQuery, useMediaQuery,
useTheme,
} from "@mui/material"; } from "@mui/material";
import useSWR from "swr"; import { useCurrentQuiz } from "@root/quizes/hooks";
import { isAxiosError } from "axios"; import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe";
import { enqueueSnackbar } from "notistack"; import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { devlog } from "@frontend/kitui"; import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice";
import { quizApi } from "@api/quiz"; export const StartPageViewPublication = () => {
console.log("startpage")
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();
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(630)); const quiz = useCurrentQuiz();
const quiz = quizes.find(({ backendId }) => quizId === backendId); const { isMobileDevice } = useUADevice();
const isMediaFileExist = console.log(quiz)
quiz?.config.startpage.background.desktop ||
quiz?.config.startpage.background.video;
useSWR("quizes", () => quizApi.getList(), { if (!quiz) return null;
onSuccess: setQuizes,
onError: (error: unknown) => {
const message = isAxiosError<string>(error)
? error.response?.data ?? ""
: "";
devlog("Error getting quiz list", error); const handleCopyNumber = () => {
enqueueSnackbar(`Не удалось получить квизы. ${message}`); navigator.clipboard.writeText(quiz.config.info.phonenumber);
}, };
});
const background = quiz.config.startpage.background.type === "image"
? quiz.config.startpage.background.desktop
? (
<img
src={quiz.config.startpage.background.desktop}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
overflow: "hidden"
}}
/>
)
: null
: quiz.config.startpage.background.type === "video"
? quiz.config.startpage.background.video
? (
<YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video}
containerSX={{
width: quiz.config.startpageType === "centered" ? "550px" : quiz.config.startpageType === "expanded" ? "100vw" : "100%",
height: quiz.config.startpageType === "centered" ? "275px" : quiz.config.startpageType === "expanded" ? "100vh" : "100%",
borderRadius: quiz.config.startpageType === "centered" ? "10px" : "0",
overflow: "hidden",
"& iframe": {
width: "100%",
height: "100%",
transform: quiz.config.startpageType === "centered" ? "" : quiz.config.startpageType === "expanded" ? "scale(1.5)" : "scale(2.4)",
}
}}
/>
)
: null
: null;
return ( return (
<Box <Paper className="quiz-preview-draghandle"
sx={{ sx={{
height: "100vh", height: "100vh",
display: "flex", background: quiz.config.startpageType === "expanded" ?
flexDirection: quiz.config.startpage.position === "left" ? "linear-gradient(90deg,#272626,transparent)" :
quiz?.config.startpage.position === "left" ? "row" : "row-reverse", quiz.config.startpage.position === "center" ? "linear-gradient(180deg,transparent,#272626)" :
flexGrow: 1, "linear-gradient(270deg,#272626,transparent)"
"&::-webkit-scrollbar": { width: 0 }, : "",
}} color: quiz.config.startpageType === "expanded" ? "white" : "black"
>
<Box
sx={{ }}>
width: isMediaFileExist && !isTablet ? "40%" : "100%", <QuizPreviewLayoutByType
padding: "16px", quizHeaderBlock={<Box
display: "flex", p={quiz.config.startpageType === "standard" ? "" : "16px"}
flexDirection: "column", >
alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center", <Box sx={{
}}
>
<Box
sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "20px", gap: "20px",
}} mb: "7px"
> }}>
{quiz?.config.startpage.background.mobile && ( {quiz.config.startpage.logo && (
<img <img
src={quiz.config.startpage.background.mobile} src={quiz.config.startpage.logo}
style={{
height: "50px",
maxWidth: "100px",
objectFit: "cover",
}}
alt=""
/>
)}
<Typography sx={{ fontSize: "18px" }}>
{quiz?.config.info.orgname}
</Typography>
</Box>
<Box
sx={{
flexGrow: 1,
display: "flex",
gap: "10px",
flexDirection: "column",
justifyContent: "center",
}}
>
<Typography sx={{ fontWeight: "bold", fontSize: "20px" }}>
{quiz?.name}
</Typography>
<Typography sx={{ fontSize: "16px" }}>
{quiz?.config.startpage.description}
</Typography>
<Box>
<Button
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
// disabled={!questions.length}
onClick={() => setVisualStartPage(false)}
>
{quiz?.config.startpage.button
? quiz?.config.startpage.button
: "Пройти тест"}
</Button>
</Box>
</Box>
<Box>
<Typography
sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
>
{quiz?.config.info.phonenumber}
</Typography>
<Typography sx={{ fontSize: "12px" }}>
{quiz?.config.info.law}
</Typography>
</Box>
</Box>
{!isTablet && isMediaFileExist && (
<Box sx={{ width: "60%" }}>
{quiz?.config.startpage.background.mobile && (
<img
src={quiz.config.startpage.background.mobile}
alt=""
style={{
display: "block",
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
)}
{quiz.config.startpage.background.type === "video" &&
quiz.config.startpage.background.video && (
<video
src={quiz.config.startpage.background.video}
controls
style={{ style={{
width: "100%", height: "37px",
height: "100%", maxWidth: "43px",
objectFit: "cover", objectFit: "cover",
}} }}
alt=""
/> />
)} )}
</Box> <Typography sx={{ fontSize: "14px" }}>
)} {quiz.config.info.orgname}
</Box> </Typography>
</Box>
<Link mb="16px" href={quiz.config.info.site}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.site}
</Typography>
</Link>
</Box>}
quizMainBlock={<>
<Box sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: quiz.config.startpageType === "centered" ? "center" :
quiz.config.startpageType === "expanded"
? quiz.config.startpage.position === "center" ?
"center"
: "start": "start",
mt: "28px",
width: "100%"
}}>
<Typography sx={{
fontWeight: "bold",
fontSize: "26px",
fontStyle: "normal",
fontStretch: "normal",
lineHeight: "1.2",
}}>{quiz.name}</Typography>
<Typography sx={{
fontSize: "16px",
m: "16px 0"
}}>
{quiz.config.startpage.description}
</Typography>
<Box width={ quiz.config.startpageType === "standard" ? "100%" : "auto"}>
<Button
variant="contained"
sx={{
fontSize: "16px",
padding: "10px 15px",
width: quiz.config.startpageType === "standard" ? "100%" : "auto"
}}
>
{quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
</Button>
</Box>
</Box>
<Box
sx={{
mt: "46px"
}}
>
{quiz.config.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
)}
<Typography sx={{ fontSize: "12px", textAlign: "end" }}>
{quiz.config.info.law}
</Typography>
</Box>
</>}
backgroundBlock={background}
startpageType={quiz.config.startpageType}
alignType={quiz.config.startpage.position}
/>
</Paper>
); );
}
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 (
<Box sx={{
display: "flex",
flexDirection: alignType === "left" ? "row" : "row-reverse",
flexGrow: 1,
height: "100vh",
"&::-webkit-scrollbar": { width: 0 },
}}>
<Box sx={{
width: !isTablet ? "40%" : "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: !isTablet ? "flex-start" : "center",
p: "25px"
}}>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box sx={{
width: "60%",
overflow: "hidden"
}}>
{backgroundBlock}
</Box>
</Box>
);
}
case "expanded": {
return (
<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: 2,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
}}>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box sx={{
position: "absolute",
left: 0,
top: 0,
height: "100%",
width: "100%",
zIndex: 1,
overflow: "hidden"
}}>
{backgroundBlock}
</Box>
</Box>
);
}
case "centered": {
return (
<Box sx={{
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
overflow: "hidden"
}}>
{quizHeaderBlock}
{backgroundBlock &&
<Box>
{backgroundBlock}
</Box>
}
{quizMainBlock}
</Box>
);
}
default: notReachable(startpageType);
}
}
const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
left: "start",
center: "center",
right: "end",
}; };

23
src/pages/ViewPublicationPage/index.tsx
View File

@ -5,11 +5,29 @@ import { StartPageViewPublication } from "./StartPageViewPublication";
import { Question } from "./Question"; import { Question } from "./Question";
import { useQuestions } from "@root/questions/hooks"; import { useQuestions } from "@root/questions/hooks";
import { useCurrentQuiz } from "@root/quizes/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 type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import { enqueueSnackbar } from "notistack";
export const ViewPage = () => { export const ViewPage = () => {
useSWR("quizes", () => quizApi.getList(), {
onSuccess: setQuizes,
onError: error => {
const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
devlog("Error getting quiz list", error);
enqueueSnackbar(`Не удалось получить квизы. ${message}`);
},
});
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
console.log(quiz)
const { questions } = useQuestions(); const { questions } = useQuestions();
const [visualStartPage, setVisualStartPage] = useState<boolean>( const [visualStartPage, setVisualStartPage] = useState<boolean>(
!quiz?.config.noStartPage !quiz?.config.noStartPage
@ -30,10 +48,7 @@ export const ViewPage = () => {
return ( return (
<Box> <Box>
{visualStartPage ? ( {visualStartPage ? (
<StartPageViewPublication <StartPageViewPublication/>
setVisualStartPage={setVisualStartPage}
showNextButton={!!filteredQuestions.length}
/>
) : ( ) : (
<Question questions={filteredQuestions} /> <Question questions={filteredQuestions} />
)} )}

199
src/pages/startPage/StartPageSettings.tsx
View File

@ -331,74 +331,7 @@ export default function StartPageSettings() {
<ModalSizeImage /> <ModalSizeImage />
<Box
sx={{
mt: "10px",
display: "flex",
gap: "10px",
flexDirection: "column",
}}
>
<FormControlLabel
control={
<Checkbox
icon={<IconCheck />}
checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />}
/>
}
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 ? (
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "11px",
mb: "14px",
}}
>
Изображение для мобильной версии
</Typography>
<DropZone
text={"5 MB максимум"}
imageUrl={quiz.config.startpage.background.mobile}
originalImageUrl={quiz.config.startpage.background.originalMobile}
onImageUploadClick={file => {
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;
});
}}
/>
</Box>
) : (
<></>
)}
</Box>
</Box> </Box>
<Box <Box
@ -415,96 +348,52 @@ export default function StartPageSettings() {
quiz.config.startpage.background.video = e.target.value; quiz.config.startpage.background.video = e.target.value;
})} })}
/> />
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "5px",
}}
>
Настройки видео
</Typography>
<CustomCheckbox
label="Зацикливать видео"
checked={quiz.config.startpage.background.cycle}
handleChange={e => updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.cycle = e.target.checked;
})}
/>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "11px",
mb: "14px",
}}
>
Изображение для мобильной версии
</Typography>
<DropZone
text={"5 MB максимум"}
imageUrl={quiz.config.startpage.background.mobile}
originalImageUrl={quiz.config.startpage.background.originalMobile}
onImageUploadClick={file => {
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;
});
}}
/>
</Box> </Box>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "20px",
mb: "14px",
}}
>
Расположение элементов
</Typography>
{designType !== "centered" && {designType !== "centered" &&
<Box <>
sx={{ <Typography
display: "flex", sx={{
gap: "10px", fontWeight: 500,
}} color: theme.palette.grey3.main,
> mt: "20px",
<SelectableIconButton mb: "14px",
onClick={() => updateQuiz(quiz.id, quiz => { }}
quiz.config.startpage.position = "left"; >
})} Расположение элементов
isActive={quiz.config.startpage.position === "left"} </Typography>
Icon={AlignLeftIcon} <Box
/> sx={{
<SelectableIconButton display: "flex",
onClick={() => updateQuiz(quiz.id, quiz => { gap: "10px",
quiz.config.startpage.position = "center"; }}
})} >
isActive={quiz.config.startpage.position === "center"} <SelectableIconButton
Icon={AlignCenterIcon} onClick={() => updateQuiz(quiz.id, quiz => {
sx={{ display: designType === "standard" ? "none" : "flex" }} quiz.config.startpage.position = "left";
/> })}
<SelectableIconButton isActive={quiz.config.startpage.position === "left"}
onClick={() => updateQuiz(quiz.id, quiz => { Icon={AlignLeftIcon}
quiz.config.startpage.position = "right"; />
})} <SelectableIconButton
isActive={quiz.config.startpage.position === "right"} onClick={() => updateQuiz(quiz.id, quiz => {
Icon={AlignRightIcon} quiz.config.startpage.position = "center";
/> })}
</Box> isActive={quiz.config.startpage.position === "center"}
Icon={AlignCenterIcon}
sx={{ display: designType === "standard" ? "none" : "flex" }}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "right";
})}
isActive={quiz.config.startpage.position === "right"}
Icon={AlignRightIcon}
/>
</Box>
</>
} }
{(isTablet || !isSmallMonitor) && ( {(isTablet || !isSmallMonitor) && (
<> <>

8
src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
View File

@ -1,12 +1,13 @@
import { Box } from "@mui/material"; import { Box, SxProps } from "@mui/material";
interface Props { interface Props {
videoUrl: string; 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 extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1]; const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
if (!videoId) return null; if (!videoId) return null;
@ -21,7 +22,8 @@ export default function YoutubeEmbedIframe({ videoUrl }: Props) {
"& iframe": { "& iframe": {
width: "100%", width: "100%",
height: "100%", height: "100%",
} },
...containerSX
}}> }}>
<iframe <iframe
src={embedUrl} src={embedUrl}