mirror changes from parallel branches
This commit is contained in:
nflnkr
parent
0d10f4a7da
commit
a0c83a4e98
@ -8,11 +8,11 @@ import {
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
|
||||
import { setCurrentQuizStep } from "@stores/quizView";
|
||||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionResult } from "../../model/questionTypes/result";
|
||||
import { setCurrentQuizStep } from "@stores/quizView";
|
||||
|
||||
|
||||
type ResultFormProps = {
|
||||
@ -132,6 +132,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
mt: "15px",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
mb: "5px"
|
||||
}}
|
||||
>
|
||||
<NameplateLogo
|
||||
@ -160,14 +161,19 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
p: settings.cfg.resultInfo.showResultForm === "before" ||
|
||||
p:
|
||||
(
|
||||
settings.cfg.resultInfo.showResultForm === "before" &&
|
||||
!Boolean(settings.cfg.score)
|
||||
) ||
|
||||
(
|
||||
settings.cfg.resultInfo.showResultForm === "after" &&
|
||||
resultQuestion.content.redirect
|
||||
) ? "20px" : "0",
|
||||
)
|
||||
? "20px" : "0",
|
||||
}}
|
||||
>
|
||||
{settings.cfg.resultInfo.showResultForm === "before" && (
|
||||
{settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && (
|
||||
<Button
|
||||
onClick={() => setCurrentQuizStep("contactform")}
|
||||
variant="contained"
|
||||
|
||||
@ -5,7 +5,7 @@ import { useDebouncedCallback } from "use-debounce";
|
||||
import { CustomSlider } from "@ui_kit/CustomSlider";
|
||||
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 { enqueueSnackbar } from "notistack";
|
||||
@ -26,14 +26,22 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
const [inputValue, setInputValue] = useState<string>("0");
|
||||
const [minRange, setMinRange] = useState<string>("0");
|
||||
const [maxRange, setMaxRange] = useState<string>("100000000000");
|
||||
const [reversedInputValue, setReversedInputValue] = useState<string>("0");
|
||||
const [reversedMinRange, setReversedMinRange] = useState<string>("0");
|
||||
const [reversedMaxRange, setReversedMaxRange] =
|
||||
useState<string>("100000000000");
|
||||
const theme = useTheme();
|
||||
const { answers } = useQuizViewStore();
|
||||
|
||||
const isMobile = useRootContainerSize() < 650;
|
||||
const min = window.Number(currentQuestion.content.range.split("—")[0]);
|
||||
const max = window.Number(currentQuestion.content.range.split("—")[1]);
|
||||
const [minBorder, maxBorder] = currentQuestion.content.range
|
||||
.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 {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
@ -41,7 +49,9 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
qid,
|
||||
});
|
||||
|
||||
if (!noUpdate) {
|
||||
updateAnswer(currentQuestion.id, value, 0);
|
||||
}
|
||||
} catch (e) {
|
||||
enqueueSnackbar("ответ не был засчитан");
|
||||
}
|
||||
@ -107,6 +117,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
console.log(1111111111, reversedMinRange, reversedMaxRange);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>
|
||||
@ -142,6 +154,22 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
}}
|
||||
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]}`);
|
||||
@ -152,6 +180,21 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
setInputValue(String(value));
|
||||
await sendAnswerToBackend(String(value));
|
||||
}}
|
||||
valueLabelFormat={(value) => {
|
||||
if (!reversed) {
|
||||
return value;
|
||||
}
|
||||
|
||||
const [minSliderBorder, maxSliderBorder] = sliderValue
|
||||
.split("—")
|
||||
.map(window.Number);
|
||||
|
||||
if (value === minSliderBorder) {
|
||||
return max + min - minSliderBorder;
|
||||
}
|
||||
|
||||
return max + min - maxSliderBorder;
|
||||
}}
|
||||
//@ts-ignore
|
||||
sx={{
|
||||
color: theme.palette.primary.main,
|
||||
@ -194,7 +237,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
>
|
||||
<CustomTextField
|
||||
placeholder="0"
|
||||
value={minRange}
|
||||
value={reversed ? String(reversedMinRange) : minRange}
|
||||
onChange={({ target }) => {
|
||||
const newValue = target.value.replace(/\D/g, "");
|
||||
setMinRange(newValue);
|
||||
@ -221,7 +264,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
<Typography color={theme.palette.text.primary}>до</Typography>
|
||||
<CustomTextField
|
||||
placeholder="0"
|
||||
value={maxRange}
|
||||
value={reversed ? String(reversedMaxRange) : maxRange}
|
||||
onChange={({ target }) => {
|
||||
const newValue = target.value.replace(/\D/g, "");
|
||||
setMaxRange(newValue);
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { Slider, SxProps, Theme, useTheme } from "@mui/material";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
type CustomSliderProps = {
|
||||
defaultValue?: number;
|
||||
value?: number | number[];
|
||||
@ -8,7 +10,11 @@ type CustomSliderProps = {
|
||||
step?: number;
|
||||
sx?: SxProps<Theme>;
|
||||
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 = ({
|
||||
@ -19,6 +25,7 @@ export const CustomSlider = ({
|
||||
step,
|
||||
onChange,
|
||||
onChangeCommitted,
|
||||
valueLabelFormat,
|
||||
sx,
|
||||
}: CustomSliderProps) => {
|
||||
// const handleChange = ({ type }: Event, newValue: number | number[]) => {
|
||||
@ -39,6 +46,7 @@ export const CustomSlider = ({
|
||||
onChange={onChange}
|
||||
valueLabelDisplay="on"
|
||||
onChangeCommitted={onChangeCommitted}
|
||||
valueLabelFormat={valueLabelFormat}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
data-cy="slider"
|
||||
sx={{
|
||||
@ -73,7 +81,7 @@ export const CustomSlider = ({
|
||||
"& .MuiSlider-track": {
|
||||
height: "12px",
|
||||
},
|
||||
...sx
|
||||
...sx,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user