линейное отображение корректно, + шильдики
This commit is contained in:
parent
7df3bc3b31
commit
6417e70736
23
src/assets/icons/NameplateLogoFQ.tsx
Normal file
23
src/assets/icons/NameplateLogoFQ.tsx
Normal file
File diff suppressed because one or more lines are too long
@ -13,6 +13,7 @@ import { useQuestionsStore } from "@root/quizData/store";
|
||||
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { sendFC } from "@api/quizRelase";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
|
||||
type ContactFormProps = {
|
||||
currentQuestion: AnyTypedQuizQuestion;
|
||||
@ -133,6 +134,18 @@ export const ContactForm = ({
|
||||
</Typography>
|
||||
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "20px"
|
||||
}}
|
||||
>
|
||||
<NameplateLogo style={{ fontSize: "34px" }} />
|
||||
<Typography sx={{ fontSize: "20px", color: "#4D4D4D", whiteSpace: "nowrap" }}>Сделано на PenaQuiz</Typography>
|
||||
</Box>
|
||||
|
||||
</Paper>
|
||||
</Box >
|
||||
</Box >
|
||||
@ -221,8 +234,10 @@ const Inputs = (currentQuestion: any) => {
|
||||
}
|
||||
|
||||
const CustomInput = ({ title, desc, Icon, onChange }: any) => {
|
||||
//@ts-ignore
|
||||
return <Box m="15px 0">
|
||||
<Typography mb="7px">{title}</Typography>
|
||||
|
||||
<TextField
|
||||
onChange={onChange}
|
||||
sx={{
|
||||
|
||||
@ -6,7 +6,7 @@ import { useQuestionsStore } from "@root/quizData/store";
|
||||
import { getQuestionById } from "@root/quizData/actions";
|
||||
import { useQuizViewStore } from "@root/quizView/store";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
||||
|
||||
type FooterProps = {
|
||||
setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
|
||||
@ -25,6 +25,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
|
||||
|
||||
const linear = !items.find(({ content }) => content.rule.parentId === "root");
|
||||
console.log("linear ", linear)
|
||||
|
||||
useEffect(() => {
|
||||
// Логика для аргумента disabled у кнопки "Назад"
|
||||
@ -189,22 +190,10 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
position: "relative",
|
||||
padding: "15px 0",
|
||||
borderTop: `1px solid ${theme.palette.grey[400]}`,
|
||||
height: '75px',
|
||||
display: "flex"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "absolute",
|
||||
top: "-45px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo style={{ fontSize: "34px" }} />
|
||||
<Typography sx={{ fontSize: "20px", color: "#4D4D4D", whiteSpace: "nowrap" }}>Сделано на PenaQuiz</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
@ -216,6 +205,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -225,26 +215,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
color: theme.palette.grey1.main,
|
||||
}}
|
||||
>
|
||||
{/* <Typography>Шаг</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
fontWeight: "bold",
|
||||
borderRadius: "50%",
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
color: "#FFF",
|
||||
background: theme.palette.brightPurple.main,
|
||||
}}
|
||||
>
|
||||
{stepNumber} */}
|
||||
{/* </Typography> */}
|
||||
{/* <Typography>Из</Typography>
|
||||
<Typography sx={{ fontWeight: "bold" }}>
|
||||
{items.length}
|
||||
</Typography> */}
|
||||
</Box>
|
||||
<Button
|
||||
disabled={disablePreviousButton}
|
||||
|
||||
@ -42,23 +42,27 @@ const QUESTIONS_MAP: any = {
|
||||
|
||||
export const Question = ({ questions }: QuestionProps) => {
|
||||
const { settings, cnt, items } = useQuestionsStore()
|
||||
const [currentQuestion, setCurrentQuestion] =
|
||||
useState<AnyTypedQuizQuestion>();
|
||||
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
|
||||
const [showContactForm, setShowContactForm] = useState<boolean>(false);
|
||||
const [showResultForm, setShowResultForm] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const nextQuestion = getQuestionById(settings?.cfg.haveRoot || "");
|
||||
|
||||
if (nextQuestion?.type) {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
if (settings?.cfg.haveRoot) {//ветвимся
|
||||
const nextQuestion = getQuestionById(settings?.cfg.haveRoot || "");
|
||||
|
||||
return;
|
||||
if (nextQuestion?.type) {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
console.log("я нашёл вопрос вперёд всех")
|
||||
console.log(nextQuestion)
|
||||
return;
|
||||
}
|
||||
|
||||
} else {//идём прямо
|
||||
setCurrentQuestion(questions[0]);
|
||||
}
|
||||
|
||||
setCurrentQuestion(questions[0]);
|
||||
console.log(currentQuestion)
|
||||
console.log(questions[0])
|
||||
console.log("нулевой элемент списка вопросов ", questions[0])
|
||||
}, []);
|
||||
|
||||
if (!currentQuestion) return <>не смог отобразить вопрос</>;
|
||||
@ -66,9 +70,12 @@ export const Question = ({ questions }: QuestionProps) => {
|
||||
const QuestionComponent =
|
||||
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
|
||||
|
||||
console.log("showResultForm " , showResultForm)
|
||||
console.log("showResultForm ", showResultForm)
|
||||
console.log("currentQuestion ", currentQuestion)
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
height="100vh"
|
||||
>
|
||||
{!showContactForm && !showResultForm && (
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
@ -4,6 +4,7 @@ import { useQuestionsStore } from "@root/quizData/store"
|
||||
|
||||
import type { QuizQuestionResult } from "@model/questionTypes/result";
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
|
||||
type ResultFormProps = {
|
||||
currentQuestion: any;
|
||||
@ -60,12 +61,12 @@ export const ResultForm = ({
|
||||
}}
|
||||
>
|
||||
{
|
||||
//@ts-ignore
|
||||
//@ts-ignore
|
||||
!resultQuestion?.content.useImage &&
|
||||
//@ts-ignore
|
||||
resultQuestion.content.video &&
|
||||
<YoutubeEmbedIframe
|
||||
//@ts-ignore
|
||||
//@ts-ignore
|
||||
videoUrl={resultQuestion.content.video}
|
||||
containerSX={{
|
||||
width: "490px",
|
||||
@ -74,7 +75,7 @@ export const ResultForm = ({
|
||||
/>
|
||||
}
|
||||
{
|
||||
//@ts-ignore
|
||||
//@ts-ignore
|
||||
resultQuestion?.content.useImage &&
|
||||
resultQuestion.content.back &&
|
||||
<Box
|
||||
@ -104,31 +105,55 @@ export const ResultForm = ({
|
||||
|
||||
</Box>
|
||||
|
||||
{
|
||||
settings?.cfg.resultInfo.when === "before" &&
|
||||
<Box width="100%">
|
||||
<Box
|
||||
sx={{
|
||||
height: "100px",
|
||||
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
width: "100%",
|
||||
justifyContent: "end",
|
||||
px: "20px"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={followNextForm}
|
||||
variant="contained"
|
||||
<Box
|
||||
sx={{
|
||||
p: "10px 20px",
|
||||
width: "210px",
|
||||
height: "50px"
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "15px"
|
||||
}}
|
||||
>
|
||||
{resultQuestion.content.hint.text || "Узнать подробнее"}
|
||||
</Button>
|
||||
<NameplateLogo style={{ fontSize: "34px" }} />
|
||||
<Typography sx={{ fontSize: "20px", color: "#4D4D4D", whiteSpace: "nowrap" }}>Сделано на PenaQuiz</Typography>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
settings?.cfg.resultInfo.when === "before" &&
|
||||
<Box
|
||||
sx={{
|
||||
height: "100px",
|
||||
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={followNextForm}
|
||||
variant="contained"
|
||||
sx={{
|
||||
p: "10px 20px",
|
||||
width: "210px",
|
||||
height: "50px"
|
||||
}}
|
||||
>
|
||||
{resultQuestion.content.hint.text || "Узнать подробнее"}
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ const QID =
|
||||
process.env.NODE_ENV === "production" ?
|
||||
window.location.pathname.replace(/\//g, '')
|
||||
:
|
||||
"e593a043-8ad2-4e16-9bf2-afb4f28385eb"
|
||||
"e0857d80-2cdb-43cc-bc00-04c0af725da1"
|
||||
|
||||
|
||||
export const ViewPage = () => {
|
||||
@ -36,7 +36,7 @@ export const ViewPage = () => {
|
||||
const parseData = {
|
||||
settings: {
|
||||
//@ts-ignore
|
||||
qid: window.location.pathname.replace(/\//g, '') || "e593a043-8ad2-4e16-9bf2-afb4f28385eb",
|
||||
qid: window.location.pathname.replace(/\//g, '') || "e0857d80-2cdb-43cc-bc00-04c0af725da1",
|
||||
fp: settings.fp,
|
||||
rep: settings.rep,
|
||||
name: settings.name,
|
||||
@ -75,7 +75,7 @@ export const ViewPage = () => {
|
||||
},[])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {//установка фавиконки
|
||||
if (Object.values(settings).length > 0) {
|
||||
console.log(settings)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user