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

update

Browse Source
This commit is contained in:
ArtChaos189 2023-12-21 01:59:28 +03:00
parent 9bdf5bf678
commit a448ddfffa
5 changed files with 289 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/ViewPublicationPage/Question.tsx
View File

@ -43,8 +43,7 @@ const QUESTIONS_MAP: any = {
export const Question = ({ questions }: QuestionProps) => { export const Question = ({ questions }: QuestionProps) => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const [currentQuestion, setCurrentQuestion] = const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false); const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false); const [showResultForm, setShowResultForm] = useState<boolean>(false);
@ -62,8 +61,7 @@ export const Question = ({ questions }: QuestionProps) => {
if (!currentQuestion) return <>не смог отобразить вопрос</>; if (!currentQuestion) return <>не смог отобразить вопрос</>;
const QuestionComponent = const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
return ( return (
<Box> <Box>

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

@ -12,10 +12,14 @@ export const Page = ({ currentQuestion }: PageProps) => {
const { answers } = useQuizViewStore(); const { answers } = useQuizViewStore();
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {}; const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
console.log(currentQuestion);
return ( return (
<Box> <Box>
<Typography variant="h5" sx={{ paddingBottom: "25px" }}>{currentQuestion.title}</Typography> <Typography variant="h5" sx={{ paddingBottom: "25px" }}>
<Typography>{currentQuestion.content.text}</Typography> {currentQuestion.title}
</Typography>
<Typography>{currentQuestion.content.text}</Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -24,23 +28,20 @@ export const Page = ({ currentQuestion }: PageProps) => {
marginTop: "20px", marginTop: "20px",
}} }}
> >
{currentQuestion.content.picture && ( {currentQuestion.content.useImage ? (
<Box sx={{borderRadius: "12px", <Box sx={{ borderRadius: "12px", border: "1px solid #9A9AAF", overflow: "hidden" }}>
border: "1px solid #9A9AAF", overflow: "hidden" }}> <img
<img src={currentQuestion.content.back}
src={currentQuestion.content.picture} alt=""
alt="" style={{
style={{ display: "block",
display: "block", width: "100%",
width: "100%", height: "100%",
height: "100%", objectFit: "contain",
objectFit: "contain", }}
}} />
/> </Box>
</Box> ) : (
)}
{currentQuestion.content.video && (
<video <video
src={currentQuestion.content.video} src={currentQuestion.content.video}
controls controls

75
src/pages/startPage/ModalInfoWhyCantCreate.tsx
View File

@ -1,49 +1,44 @@
import { Box, Modal, Typography, Divider } from "@mui/material" import { Box, Modal, Typography, Divider } from "@mui/material";
import { useUiTools } from "@root/uiTools/store"; import { useUiTools } from "@root/uiTools/store";
import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions"; import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
import { useLayoutEffect } from "react"; import { useLayoutEffect } from "react";
export const ModalInfoWhyCantCreate = () => { export const ModalInfoWhyCantCreate = () => {
const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();
const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools(); return (
<Modal open={openModalInfoWhyCantCreate} onClose={() => updateModalInfoWhyCantCreate(false)}>
return ( <Box
<Modal sx={{
open={openModalInfoWhyCantCreate} position: "absolute" as "absolute",
onClose={() => updateModalInfoWhyCantCreate(false)} top: "50%",
> left: "50%",
<Box sx={{ transform: "translate(-50%, -50%)",
position: 'absolute' as 'absolute', maxWidth: "620px",
top: '50%', width: "100%",
left: '50%', bgcolor: "background.paper",
transform: 'translate(-50%, -50%)', borderRadius: "12px",
maxWidth: '620px',
width: '100%',
bgcolor: 'background.paper',
borderRadius: '12px',
boxShadow: 24, boxShadow: 24,
p: "25px", p: "25px",
minHeight: "60vh", minHeight: "60vh",
maxHeight: "90vh", maxHeight: "90vh",
overflow: "auto" overflow: "auto",
}} }}
> >
{ {Object.values(whyCantCreatePublic).map((data) => {
Object.values(whyCantCreatePublic).map((data) => { return (
return ( <Box>
<Box> <Typography color="#7e2aea">У вопроса "{data.name}"</Typography>
<Typography color="#7e2aea">У вопроса "{data.name}"</Typography> {data.problems.map((problem) => (
{ <Typography p="5px 0">{problem}</Typography>
data.problems.map((problem) => <Typography p="5px 0">{problem}</Typography>) ))}
} <Divider />
<Divider/>
</Box>
)
})
}
</Box> </Box>
</Modal> );
) })}
} </Box>
</Modal>
);
};

414
src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
View File

@ -1,10 +1,20 @@
import { Box, Button, LinearProgress, Paper, Typography, FormControl, Select as MuiSelect, MenuItem, useTheme } from "@mui/material"; import {
Box,
Button,
LinearProgress,
Paper,
Typography,
FormControl,
Select as MuiSelect,
MenuItem,
useTheme,
} from "@mui/material";
import { useQuestionsStore } from "@root/questions/store"; import { useQuestionsStore } from "@root/questions/store";
import { import {
decrementCurrentQuestionIndex, decrementCurrentQuestionIndex,
incrementCurrentQuestionIndex, incrementCurrentQuestionIndex,
useQuizPreviewStore, useQuizPreviewStore,
setCurrentQuestionIndex setCurrentQuestionIndex,
} from "@root/quizPreview"; } from "@root/quizPreview";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared"; import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared";
import { useEffect } from "react"; import { useEffect } from "react";
@ -24,217 +34,211 @@ import { notReachable } from "../../utils/notReachable";
import ArrowDownIcon from "@icons/ArrowDownIcon"; import ArrowDownIcon from "@icons/ArrowDownIcon";
export default function QuizPreviewLayout() { export default function QuizPreviewLayout() {
const theme = useTheme(); const theme = useTheme();
const questions = useQuestionsStore(state => state.questions); const questions = useQuestionsStore((state) => state.questions);
const currentQuizStep = useQuizPreviewStore( const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex);
(state) => state.currentQuestionIndex
);
const nonDeletedQuizQuestions = questions.filter( const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted);
(question) => !question.deleted const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
); const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
const maxCurrentQuizStep =
nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
const currentProgress = Math.floor(
(currentQuizStep / maxCurrentQuizStep) * 100
);
const currentQuestion = nonDeletedQuizQuestions[currentQuizStep]; const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
useEffect( useEffect(
function resetCurrentQuizStep() { function resetCurrentQuizStep() {
if (currentQuizStep > maxCurrentQuizStep) { if (currentQuizStep > maxCurrentQuizStep) {
decrementCurrentQuestionIndex(); decrementCurrentQuestionIndex();
} }
}, },
[currentQuizStep, maxCurrentQuizStep] [currentQuizStep, maxCurrentQuizStep]
); );
return ( return (
<Paper <Paper
className="quiz-preview-draghandle" className="quiz-preview-draghandle"
data-cy="quiz-preview-layout" data-cy="quiz-preview-layout"
sx={{
height: "100%",
display: "flex",
flexDirection: "column",
flexGrow: 1,
borderRadius: "12px",
pointerEvents: "auto",
}}
>
<Box
sx={{
p: "40px 20px 20px",
whiteSpace: "break-spaces",
overflowY: "auto",
flexGrow: 1,
"&::-webkit-scrollbar": { width: 0, display: "none" },
msOverflowStyle: "none",
scrollbarWidth: "none",
}}
>
<QuestionPreviewComponent question={currentQuestion} />
</Box>
<Box
sx={{
mt: "auto",
p: "16px",
borderTop: "1px solid #E3E3E3",
}}
>
<Box sx={{ marginBottom: "10px" }}>
<FormControl fullWidth size="small" sx={{ width: "100%", minWidth: "200px", height: "48px" }}>
<MuiSelect
id="category-select"
variant="outlined"
value={currentQuizStep}
placeholder="Заголовок вопроса"
onChange={({ target }) => setCurrentQuestionIndex(window.Number(target.value))}
sx={{
height: "48px",
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`,
},
}}
MenuProps={{
PaperProps: {
sx: {
mt: "8px",
p: "4px",
borderRadius: "8px",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
},
MenuListProps: {
sx: {
py: 0,
display: "flex",
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main,
},
},
},
}}
inputProps={{
sx: {
color: theme.palette.brightPurple.main,
display: "flex",
alignItems: "center",
px: "9px",
gap: "20px",
},
}}
IconComponent={(props) => <ArrowDownIcon {...props} />}
>
{Object.values(questions).map(({ id, title }, index) => (
<MenuItem
key={id}
value={index}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
{`${index + 1}. ${title}`}
</MenuItem>
))}
</MuiSelect>
</FormControl>
</Box>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Box
sx={{ sx={{
height: "100%", flexGrow: 1,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
flexGrow: 1, gap: 1,
borderRadius: "12px",
pointerEvents: "auto",
}} }}
> >
<Box <Typography>
{nonDeletedQuizQuestions.length > 0
? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
: "Нет вопросов"}
</Typography>
{nonDeletedQuizQuestions.length > 0 && (
<LinearProgress
variant="determinate"
value={currentProgress}
sx={{ sx={{
p: "40px 20px 20px", "&.MuiLinearProgress-colorPrimary": {
whiteSpace: "break-spaces", backgroundColor: "fadePurple.main",
overflowY: "auto", },
flexGrow: 1, "& .MuiLinearProgress-barColorPrimary": {
"&::-webkit-scrollbar": { width: 0, display: "none" }, backgroundColor: "brightPurple.main",
msOverflowStyle: "none", },
scrollbarWidth: "none",
}} }}
/>
)}
</Box>
<Box
sx={{
ml: 2,
display: "flex",
gap: 1,
}}
>
<Button
variant="outlined"
onClick={decrementCurrentQuestionIndex}
disabled={currentQuizStep === 0}
sx={{ px: 1, minWidth: 0 }}
> >
<QuestionPreviewComponent question={currentQuestion} /> <ArrowLeft />
</Box> </Button>
<Box <Button
sx={{ variant="contained"
mt: "auto", onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
p: "16px", disabled={currentQuizStep >= maxCurrentQuizStep}
borderTop: "1px solid #E3E3E3",
}}
> >
<Box sx={{ marginBottom: "10px" }}> Далее
<FormControl </Button>
fullWidth </Box>
size="small" </Box>
sx={{ width: "100%", minWidth: "200px", height: "48px" }} </Box>
> </Paper>
<MuiSelect );
id="category-select"
variant="outlined"
value={currentQuizStep}
placeholder="Заголовок вопроса"
onChange={({ target }) =>
setCurrentQuestionIndex(window.Number(target.value))
}
sx={{
height: "48px",
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`,
},
}}
MenuProps={{
PaperProps: {
sx: {
mt: "8px",
p: "4px",
borderRadius: "8px",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
},
MenuListProps: {
sx: {
py: 0,
display: "flex",
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main,
},
},
},
}}
inputProps={{
sx: {
color: theme.palette.brightPurple.main,
display: "flex",
alignItems: "center",
px: "9px",
gap: "20px",
},
}}
IconComponent={(props) => <ArrowDownIcon {...props} />}
>
{Object.values(questions).map(
({ id, title }, index) => (
<MenuItem
key={id}
value={index}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
{`${index + 1}. ${title}`}
</MenuItem>
)
)}
</MuiSelect>
</FormControl>
</Box>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Box
sx={{
flexGrow: 1,
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Typography>
{nonDeletedQuizQuestions.length > 0
? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length
}`
: "Нет вопросов"}
</Typography>
{nonDeletedQuizQuestions.length > 0 && (
<LinearProgress
variant="determinate"
value={currentProgress}
sx={{
"&.MuiLinearProgress-colorPrimary": {
backgroundColor: "fadePurple.main",
},
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "brightPurple.main",
},
}}
/>
)}
</Box>
<Box
sx={{
ml: 2,
display: "flex",
gap: 1,
}}
>
<Button
variant="outlined"
onClick={decrementCurrentQuestionIndex}
disabled={currentQuizStep === 0}
sx={{ px: 1, minWidth: 0 }}
>
<ArrowLeft />
</Button>
<Button
variant="contained"
onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
disabled={currentQuizStep >= maxCurrentQuizStep}
>
Далее
</Button>
</Box>
</Box>
</Box>
</Paper>
);
} }
function QuestionPreviewComponent({ question }: { function QuestionPreviewComponent({ question }: { question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined }) {
question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined; if (!question || question.type === null) return null;
}) {
if (!question || question.type === null) return null;
switch (question.type) { switch (question.type) {
case "variant": return <Variant question={question} />; case "variant":
case "images": return <Images question={question} />; return <Variant question={question} />;
case "varimg": return <Varimg question={question} />; case "images":
case "emoji": return <Emoji question={question} />; return <Images question={question} />;
case "text": return <Text question={question} />; case "varimg":
case "select": return <Select question={question} />; return <Varimg question={question} />;
case "date": return <Date question={question} />; case "emoji":
case "number": return <Number question={question} />; return <Emoji question={question} />;
case "file": return <File question={question} />; case "text":
case "page": return <Page question={question} />; return <Text question={question} />;
case "rating": return <Rating question={question} />; case "select":
default: notReachable(question); return <Select question={question} />;
} case "date":
return <Date question={question} />;
case "number":
return <Number question={question} />;
case "file":
return <File question={question} />;
case "page":
return <Page question={question} />;
case "rating":
return <Rating question={question} />;
default:
notReachable(question);
}
} }

39
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
View File

@ -1,4 +1,5 @@
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import YoutubeEmbedIframe from "@ui_kit/StartPagePreview/YoutubeEmbedIframe";
import type { QuizQuestionPage } from "model/questionTypes/page"; import type { QuizQuestionPage } from "model/questionTypes/page";
@ -7,6 +8,7 @@ interface Props {
} }
export default function Page({ question }: Props) { export default function Page({ question }: Props) {
console.log(question);
return ( return (
<Box <Box
sx={{ sx={{
@ -16,22 +18,27 @@ export default function Page({ question }: Props) {
gap: 1, gap: 1,
}} }}
> >
<Typography variant="h6" data-cy="question-title" sx={{ paddingBottom: "25px" }}>{question.title}</Typography> <Typography variant="h6" data-cy="question-title" sx={{ paddingBottom: "25px" }}>
<Typography data-cy="question-text" sx={{ paddingBottom: "20px" }}>{question.content.text}</Typography> {question.title}
{question.content.picture && ( </Typography>
<Box sx={{borderRadius: "12px",
border: "1px solid #9A9AAF", width: "100%", overflow: "hidden"}}> <Typography data-cy="question-text" sx={{ paddingBottom: "20px" }}>
<img {question.content.text}
src={question.content.picture} </Typography>
alt=""
style={{ {question.content.useImage ? (
display: "block", <img
width: "100%", src={question.content.back}
height: "100%", alt=""
objectFit: "contain", style={{
}} display: "block",
/> width: "100%",
</Box> height: "100%",
objectFit: "contain",
}}
/>
) : (
<YoutubeEmbedIframe containerSX={{ width: "100%", height: "50vh" }} videoUrl={question.content.video} />
)} )}
</Box> </Box>
); );