SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

mirror changes from parallel branches

Browse Source
This commit is contained in:
nflnkr 2024-02-13 16:09:49 +03:00
parent 0d10f4a7da
commit a0c83a4e98
3 changed files with 272 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -8,11 +8,11 @@ import {
import { NameplateLogo } from "@icons/NameplateLogo"; import { NameplateLogo } from "@icons/NameplateLogo";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"; import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
import { setCurrentQuizStep } from "@stores/quizView";
import { useQuizData } from "@utils/hooks/useQuizData"; import { useQuizData } from "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext"; import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import type { QuizQuestionResult } from "../../model/questionTypes/result"; import type { QuizQuestionResult } from "../../model/questionTypes/result";
import { setCurrentQuizStep } from "@stores/quizView";
type ResultFormProps = { type ResultFormProps = {
@ -132,6 +132,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
mt: "15px", mt: "15px",
gap: "10px", gap: "10px",
textDecoration: "none", textDecoration: "none",
mb: "5px"
}} }}
> >
<NameplateLogo <NameplateLogo
@ -160,14 +161,19 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
p: settings.cfg.resultInfo.showResultForm === "before" || p:
(
settings.cfg.resultInfo.showResultForm === "before" &&
!Boolean(settings.cfg.score)
) ||
( (
settings.cfg.resultInfo.showResultForm === "after" && settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect resultQuestion.content.redirect
) ? "20px" : "0", )
? "20px" : "0",
}} }}
> >
{settings.cfg.resultInfo.showResultForm === "before" && ( {settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && (
<Button <Button
onClick={() => setCurrentQuizStep("contactform")} onClick={() => setCurrentQuizStep("contactform")}
variant="contained" variant="contained"

461
lib/components/ViewPublicationPage/questions/Number.tsx
View File

@ -5,7 +5,7 @@ import { useDebouncedCallback } from "use-debounce";
import { CustomSlider } from "@ui_kit/CustomSlider"; import { CustomSlider } from "@ui_kit/CustomSlider";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { updateAnswer, useQuizViewStore } from "@stores/quizView"; import { updateAnswer, useQuizViewStore } from "@stores/quizView/store";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
@ -17,237 +17,280 @@ import { useQuizId } from "../../../contexts/QuizIdContext";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext"; import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
type NumberProps = { type NumberProps = {
currentQuestion: QuizQuestionNumber; currentQuestion: QuizQuestionNumber;
}; };
export const Number = ({ currentQuestion }: NumberProps) => { export const Number = ({ currentQuestion }: NumberProps) => {
const qid = useQuizId(); const qid = useQuizId();
const { settings } = useQuizData(); const { settings } = useQuizData();
const [inputValue, setInputValue] = useState<string>("0"); const [inputValue, setInputValue] = useState<string>("0");
const [minRange, setMinRange] = useState<string>("0"); const [minRange, setMinRange] = useState<string>("0");
const [maxRange, setMaxRange] = useState<string>("100000000000"); const [maxRange, setMaxRange] = useState<string>("100000000000");
const theme = useTheme(); const [reversedInputValue, setReversedInputValue] = useState<string>("0");
const { answers } = useQuizViewStore(); const [reversedMinRange, setReversedMinRange] = useState<string>("0");
const [reversedMaxRange, setReversedMaxRange] =
useState<string>("100000000000");
const theme = useTheme();
const { answers } = useQuizViewStore();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const min = window.Number(currentQuestion.content.range.split("—")[0]); const [minBorder, maxBorder] = currentQuestion.content.range
const max = window.Number(currentQuestion.content.range.split("—")[1]); .split("—")
.map(window.Number);
const min = minBorder < maxBorder ? minBorder : maxBorder;
const max = minBorder < maxBorder ? maxBorder : minBorder;
const reversed = minBorder > maxBorder;
const sendAnswerToBackend = async (value: string) => { const sendAnswerToBackend = async (value: string, noUpdate = false) => {
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: value, body: value,
qid, qid,
}); });
updateAnswer(currentQuestion.id, value, 0); if (!noUpdate) {
} catch (e) { updateAnswer(currentQuestion.id, value, 0);
enqueueSnackbar("ответ не был засчитан"); }
} } catch (e) {
}; enqueueSnackbar("ответ не был засчитан");
}
};
const updateValueDebounced = useDebouncedCallback(async (value: string) => { const updateValueDebounced = useDebouncedCallback(async (value: string) => {
const newValue = const newValue =
window.Number(value) < window.Number(minRange) window.Number(value) < window.Number(minRange)
? minRange ? minRange
: window.Number(value) > window.Number(maxRange) : window.Number(value) > window.Number(maxRange)
? maxRange ? maxRange
: value; : value;
setInputValue(newValue); setInputValue(newValue);
await sendAnswerToBackend(newValue); await sendAnswerToBackend(newValue);
}, 1000); }, 1000);
const updateMinRangeDebounced = useDebouncedCallback( const updateMinRangeDebounced = useDebouncedCallback(
async (value: string, crowded = false) => { async (value: string, crowded = false) => {
const newMinValue = crowded const newMinValue = crowded
? maxRange ? maxRange
: window.Number(value.split("—")[0]) < min : window.Number(value.split("—")[0]) < min
? String(min) ? String(min)
: value.split("—")[0]; : value.split("—")[0];
setMinRange(newMinValue); setMinRange(newMinValue);
await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`); await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
}, },
1000 1000
); );
const updateMaxRangeDebounced = useDebouncedCallback( const updateMaxRangeDebounced = useDebouncedCallback(
async (value: string, crowded = false) => { async (value: string, crowded = false) => {
const newMaxValue = crowded const newMaxValue = crowded
? minRange ? minRange
: window.Number(value.split("—")[1]) > max : window.Number(value.split("—")[1]) > max
? String(max) ? String(max)
: value.split("—")[1]; : value.split("—")[1];
setMaxRange(newMaxValue); setMaxRange(newMaxValue);
await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`); await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
}, },
1000 1000
); );
const answer = answers.find( const answer = answers.find(
({ questionId }) => questionId === currentQuestion.id ({ questionId }) => questionId === currentQuestion.id
)?.answer as string; )?.answer as string;
const sliderValue = answer || currentQuestion.content.start + "—" + max; const sliderValue = answer || currentQuestion.content.start + "—" + max;
useEffect(() => { useEffect(() => {
if (answer) { if (answer) {
if (answer.includes("—")) { if (answer.includes("—")) {
setMinRange(answer.split("—")[0]); setMinRange(answer.split("—")[0]);
setMaxRange(answer.split("—")[1]); setMaxRange(answer.split("—")[1]);
} else { } else {
setInputValue(answer); setInputValue(answer);
}
}
if (!answer) {
setMinRange(String(currentQuestion.content.start));
setMaxRange(String(max));
setInputValue(String(currentQuestion.content.start));
}
}, []);
console.log(1111111111, reversedMinRange, reversedMaxRange);
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
gap: "30px",
paddingRight: isMobile ? "10px" : undefined,
}}
>
<CustomSlider
value={
currentQuestion.content.chooseRange
? sliderValue.split("—").length || 0 > 1
? sliderValue.split("—").map((item) => window.Number(item))
: [min, min + 1]
: window.Number(sliderValue.split("—")[0])
}
min={min}
max={max}
step={currentQuestion.content.step || 1}
onChange={(_, value) => {
const range = Array.isArray(value)
? `${value[0]}—${value[1]}`
: String(value);
updateAnswer(currentQuestion.id, range, 0);
}}
onChangeCommitted={async (_, value) => {
if (currentQuestion.content.chooseRange && Array.isArray(value)) {
if (reversed) {
const newMinReversedValue = String(max + min - value[0]);
const newMaxReversedValue = String(max + min - value[1]);
setMinRange(String(value[0]));
setMaxRange(String(value[1]));
setReversedMinRange(newMinReversedValue);
setReversedMaxRange(newMaxReversedValue);
await sendAnswerToBackend(
`${newMinReversedValue}—${newMaxReversedValue}`,
true
);
return;
}
setMinRange(String(value[0]));
setMaxRange(String(value[1]));
await sendAnswerToBackend(`${value[0]}—${value[1]}`);
return;
} }
}
if (!answer) { setInputValue(String(value));
setMinRange(String(currentQuestion.content.start)); await sendAnswerToBackend(String(value));
setMaxRange(String(max)); }}
setInputValue(String(currentQuestion.content.start)); valueLabelFormat={(value) => {
} if (!reversed) {
}, []); return value;
}
return ( const [minSliderBorder, maxSliderBorder] = sliderValue
<Box> .split("—")
<Typography variant="h5" color={theme.palette.text.primary}> .map(window.Number);
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
gap: "30px",
paddingRight: isMobile ? "10px" : undefined,
}}
>
<CustomSlider
value={
currentQuestion.content.chooseRange
? sliderValue.split("—").length || 0 > 1
? sliderValue.split("—").map((item) => window.Number(item))
: [min, min + 1]
: window.Number(sliderValue.split("—")[0])
}
min={min}
max={max}
step={currentQuestion.content.step || 1}
onChange={(_, value) => {
const range = Array.isArray(value)
? `${value[0]}—${value[1]}`
: String(value);
updateAnswer(currentQuestion.id, range, 0); if (value === minSliderBorder) {
}} return max + min - minSliderBorder;
onChangeCommitted={async (_, value) => { }
if (currentQuestion.content.chooseRange && Array.isArray(value)) {
setMinRange(String(value[0]));
setMaxRange(String(value[1]));
await sendAnswerToBackend(`${value[0]}—${value[1]}`);
return; return max + min - maxSliderBorder;
} }}
//@ts-ignore
sx={{
color: theme.palette.primary.main,
"& .MuiSlider-valueLabel": {
background: theme.palette.primary.main,
},
}}
/>
setInputValue(String(value)); {!currentQuestion.content.chooseRange && (
await sendAnswerToBackend(String(value)); <CustomTextField
}} placeholder="0"
//@ts-ignore value={inputValue}
sx={{ onChange={({ target }) => {
color: theme.palette.primary.main, const value = target.value.replace(/\D/g, "");
"& .MuiSlider-valueLabel": { setInputValue(value);
background: theme.palette.primary.main, updateValueDebounced(value);
}, }}
}} sx={{
/> maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
},
}}
/>
)}
{!currentQuestion.content.chooseRange && ( {currentQuestion.content.chooseRange && (
<CustomTextField <Box
placeholder="0" sx={{
value={inputValue} display: "flex",
onChange={({ target }) => { gap: "15px",
const value = target.value.replace(/\D/g, ""); alignItems: "center",
setInputValue(value); "& .MuiFormControl-root": { width: "auto" },
updateValueDebounced(value); }}
}} >
sx={{ <CustomTextField
maxWidth: "80px", placeholder="0"
borderColor: theme.palette.text.primary, value={reversed ? String(reversedMinRange) : minRange}
"& .MuiInputBase-input": { onChange={({ target }) => {
textAlign: "center", const newValue = target.value.replace(/\D/g, "");
backgroundColor: quizThemes[settings.cfg.theme].isLight setMinRange(newValue);
? "white"
: theme.palette.background.default,
},
}}
/>
)}
{currentQuestion.content.chooseRange && ( if (window.Number(newValue) >= window.Number(maxRange)) {
<Box updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
sx={{
display: "flex",
gap: "15px",
alignItems: "center",
"& .MuiFormControl-root": { width: "auto" },
}}
>
<CustomTextField
placeholder="0"
value={minRange}
onChange={({ target }) => {
const newValue = target.value.replace(/\D/g, "");
setMinRange(newValue);
if (window.Number(newValue) >= window.Number(maxRange)) { return;
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true); }
return; updateMinRangeDebounced(`${newValue}—${maxRange}`);
} }}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
},
}}
/>
<Typography color={theme.palette.text.primary}>до</Typography>
<CustomTextField
placeholder="0"
value={reversed ? String(reversedMaxRange) : maxRange}
onChange={({ target }) => {
const newValue = target.value.replace(/\D/g, "");
setMaxRange(newValue);
updateMinRangeDebounced(`${newValue}—${maxRange}`); if (window.Number(newValue) <= window.Number(minRange)) {
}} updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
},
}}
/>
<Typography color={theme.palette.text.primary}>до</Typography>
<CustomTextField
placeholder="0"
value={maxRange}
onChange={({ target }) => {
const newValue = target.value.replace(/\D/g, "");
setMaxRange(newValue);
if (window.Number(newValue) <= window.Number(minRange)) { return;
updateMaxRangeDebounced(`${minRange}—${minRange}`, true); }
return; updateMaxRangeDebounced(`${minRange}—${newValue}`);
} }}
sx={{
updateMaxRangeDebounced(`${minRange}—${newValue}`); maxWidth: "80px",
}} borderColor: theme.palette.text.primary,
sx={{ "& .MuiInputBase-input": {
maxWidth: "80px", textAlign: "center",
borderColor: theme.palette.text.primary, backgroundColor: quizThemes[settings.cfg.theme].isLight
"& .MuiInputBase-input": { ? "white"
textAlign: "center", : theme.palette.background.default,
backgroundColor: quizThemes[settings.cfg.theme].isLight },
? "white" }}
: theme.palette.background.default, />
}, </Box>
}} )}
/> </Box>
</Box> </Box>
)} );
</Box>
</Box>
);
}; };

12
lib/ui_kit/CustomSlider.tsx
View File

@ -1,5 +1,7 @@
import { Slider, SxProps, Theme, useTheme } from "@mui/material"; import { Slider, SxProps, Theme, useTheme } from "@mui/material";
import type { ReactNode } from "react";
type CustomSliderProps = { type CustomSliderProps = {
defaultValue?: number; defaultValue?: number;
value?: number | number[]; value?: number | number[];
@ -8,7 +10,11 @@ type CustomSliderProps = {
step?: number; step?: number;
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
onChange?: (_: Event, value: number | number[]) => void; onChange?: (_: Event, value: number | number[]) => void;
onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void; onChangeCommitted?: (
_: React.SyntheticEvent | Event,
value: number | number[]
) => void;
valueLabelFormat?: (value: number, index: number) => ReactNode;
}; };
export const CustomSlider = ({ export const CustomSlider = ({
@ -19,6 +25,7 @@ export const CustomSlider = ({
step, step,
onChange, onChange,
onChangeCommitted, onChangeCommitted,
valueLabelFormat,
sx, sx,
}: CustomSliderProps) => { }: CustomSliderProps) => {
// const handleChange = ({ type }: Event, newValue: number | number[]) => { // const handleChange = ({ type }: Event, newValue: number | number[]) => {
@ -39,6 +46,7 @@ export const CustomSlider = ({
onChange={onChange} onChange={onChange}
valueLabelDisplay="on" valueLabelDisplay="on"
onChangeCommitted={onChangeCommitted} onChangeCommitted={onChangeCommitted}
valueLabelFormat={valueLabelFormat}
onMouseDown={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}
data-cy="slider" data-cy="slider"
sx={{ sx={{
@ -73,7 +81,7 @@ export const CustomSlider = ({
"& .MuiSlider-track": { "& .MuiSlider-track": {
height: "12px", height: "12px",
}, },
...sx ...sx,
}} }}
/> />
); );