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

feat: questions store hint

Browse Source
This commit is contained in:
IlyaDoronin 2023-08-24 14:09:47 +03:00
parent a7778a3120
commit 6ea8bdb1a9
23 changed files with 857 additions and 685 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/pages/Questions/DataOptions/DataOptions.tsx
View File

@ -1,56 +1,70 @@
import {Box, Typography, useTheme} from "@mui/material";
import { Box, Typography, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import SwitchData from "./switchData";
import React, {useState} from "react";
import React, { useState } from "react";
import InfoIcon from "../../../assets/icons/InfoIcon";
import SelectableButton from "@ui_kit/SelectableButton";
type dataType = "calendar" | "mask";
interface Props{
totalIndex: number
interface Props {
totalIndex: number;
}
export default function DataOptions({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
export default function DataOptions({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
const [dataType, setDataType] = useState<dataType>("calendar");
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '640px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
>
<Box sx={{gap: '10px', display: 'flex'}}>
<SelectableButton isSelected={dataType === "calendar"} onClick={() => setDataType("calendar")}>
Использовать календарь
</SelectableButton>
<SelectableButton isSelected={dataType === "mask"} onClick={() => setDataType("mask")}>
Использовать маску
</SelectableButton>
</Box>
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
<Typography sx={{
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.96px',
color: theme.palette.grey2.main
}}>Пользователю будет предложено выбрать дату</Typography>
<InfoIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchData switchState={switchState}/>
</>
)
}
const [dataType, setDataType] = useState<dataType>("calendar");
return (
<>
<Box
sx={{
width: "100%",
maxWidth: "640px",
display: "flex",
padding: "20px",
flexDirection: "column",
gap: "20px",
}}
>
<Box sx={{ gap: "10px", display: "flex" }}>
<SelectableButton
isSelected={dataType === "calendar"}
onClick={() => setDataType("calendar")}
>
Использовать календарь
</SelectableButton>
<SelectableButton
isSelected={dataType === "mask"}
onClick={() => setDataType("mask")}
>
Использовать маску
</SelectableButton>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Typography
sx={{
fontWeight: 400,
fontSize: "16px",
lineHeight: "18.96px",
color: theme.palette.grey2.main,
}}
>
Пользователю будет предложено выбрать дату
</Typography>
<InfoIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchData switchState={switchState} totalIndex={totalIndex} />
</>
);
}

40
src/pages/Questions/DataOptions/switchData.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react';
import * as React from "react";
import HelpQuestions from "../helpQuestions";
import SettingData from "./settingData";
import BranchingQuestions from "../branchingQuestions";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchData({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingData/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchData({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingData />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

105
src/pages/Questions/DropDown/DropDown.tsx
View File

@ -1,60 +1,65 @@
import {Box, Typography, Link, useTheme} from "@mui/material";
import { Box, Typography, Link, useTheme } from "@mui/material";
import React from "react";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchDropDown from "./switchDropDown";
import ButtonsOptions from "../ButtonsOptions";
interface Props {
totalIndex: number
totalIndex: number;
}
export default function DropDown({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
export default function DropDown({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data);
};
const SSHC = (data: string) => {
setSwitchState(data)
}
return (
<>
<Box sx={{ padding: '20px'}}>
<Typography
sx={{
padding: '0 0 33px 80px',
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>
Добавьте ответ
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
<Link
component="button"
variant="body2"
sx={{color: theme.palette.brightPurple.main}}
// onClick={() => {
// console.info("I'm a button.");
// }}
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>или нажмите Enter</Typography>
<EnterIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchDropDown switchState={switchState}/>
</>
)
}
return (
<>
<Box sx={{ padding: "20px" }}>
<Typography
sx={{
padding: "0 0 33px 80px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link
component="button"
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
// onClick={() => {
// console.info("I'm a button.");
// }}
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
</>
);
}

40
src/pages/Questions/DropDown/switchDropDown.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react';
import * as React from "react";
import HelpQuestions from "../helpQuestions";
import SettingDropDown from "./settingDropDown";
import BranchingQuestions from "../branchingQuestions";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchDropDown({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingDropDown/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchDropDown({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingDropDown />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

115
src/pages/Questions/Emoji/Emoji.tsx
View File

@ -1,61 +1,68 @@
import {Box, Link, Typography, useTheme} from "@mui/material";
import { Box, Link, Typography, useTheme } from "@mui/material";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import ButtonsOptions from "../ButtonsOptions";
import SwitchEmoji from "./switchEmoji";
import React from "react";
import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
interface Props{
totalIndex: number
interface Props {
totalIndex: number;
}
export default function Emoji({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
return (
<>
<Box sx={{ padding: "20px" }}>
<Box
sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
>
<AddEmoji />
<Typography
sx={{
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link
component="button"
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
// onClick={() => {
// console.info("I'm a button.");
// }}
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
</>
);
}
export default function Emoji({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return (
<>
<Box sx={{ padding: '20px'}}>
<Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
<AddEmoji/>
<Typography
sx={{
padding: '0 0 0 20px',
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>
Добавьте ответ
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
<Link
component="button"
variant="body2"
sx={{color: theme.palette.brightPurple.main}}
// onClick={() => {
// console.info("I'm a button.");
// }}
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>или нажмите Enter</Typography>
<EnterIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchEmoji switchState={switchState}/>
</>
)
}

40
src/pages/Questions/Emoji/switchEmoji.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react';
import * as React from "react";
import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions";
import SettingEmoji from "./settingEmoji";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchEmoji({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingEmoji/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchEmoji({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingEmoji />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

12
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -18,7 +18,9 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
return (
<>
<Box sx={{ padding: "20px" }}>
<Box sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}>
<Box
sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
>
<AddImage />
<Typography
sx={{
@ -56,8 +58,12 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
<EnterIcon />
</Box>
</Box>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchOptionsAndPict switchState={switchState} />
<ButtonsOptionsAndPict
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} />
</>
);
}

46
src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx
View File

@ -1,30 +1,32 @@
import * as React from 'react';
import * as React from "react";
import BranchingQuestions from "../branchingQuestions";
import SettingOptionsAndPict from "./SettingOptionsAndPict";
import HelpQuestions from "../helpQuestions";
import UploadImage from "../UploadImage";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchOptionsAndPict({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingOptionsAndPict/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
case 'image':
return (<UploadImage/>);
break;
default:
return (<></>)
}
}
export default function SwitchOptionsAndPict({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingOptionsAndPict />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
case "image":
return <UploadImage />;
break;
default:
return <></>;
}
}

139
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -1,71 +1,82 @@
import {Box, Link, Typography, useTheme} from "@mui/material";
import { Box, Link, Typography, useTheme } from "@mui/material";
import React from "react";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import AddImage from "../../../assets/icons/questionsPage/addImage";
import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptionsPict from "./switchOptionsPict";
interface Props {
totalIndex: number
}
export default function OptionsPicture({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
// const [addInput, setAddInput] = React.useState([
// 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
// ]);
const SSHC = (data: string) => {
setSwitchState(data)
}
interface Props {
totalIndex: number;
}
export default function OptionsPicture({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
// const [addInput, setAddInput] = React.useState([
// 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
// ]);
const SSHC = (data: string) => {
setSwitchState(data);
};
// const createCondition = (name) => {
// addInput([...state, {name: name}])
// }
//
// const deleteCondition = (index) => {
//
// }
return (
<>
<Box sx={{ padding: '20px'}}>
<Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
<AddImage/>
<Typography
sx={{
padding: '0 0 0 20px',
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>
Добавьте ответ
</Typography>
</Box>
// const createCondition = (name) => {
// addInput([...state, {name: name}])
// }
//
// const deleteCondition = (index) => {
//
// }
return (
<>
<Box sx={{ padding: "20px" }}>
<Box
sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
>
<AddImage />
<Typography
sx={{
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
<Link
component="button"
variant="body2"
sx={{color: theme.palette.brightPurple.main}}
// onClick={() => {
// console.info("I'm a button.");
// }}
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>или нажмите Enter</Typography>
<EnterIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchAnswerOptionsPict switchState={switchState}/>
</>
)
}
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link
component="button"
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
// onClick={() => {
// console.info("I'm a button.");
// }}
>
Добавьте ответ
</Link>
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchAnswerOptionsPict
switchState={switchState}
totalIndex={totalIndex}
/>
</>
);
}

40
src/pages/Questions/OptionsPicture/switchOptionsPict.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react';
import * as React from "react";
import BranchingQuestions from "../branchingQuestions";
import SettingOpytionsPict from "./settingOpytionsPict";
import HelpQuestions from "../helpQuestions";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchAnswerOptionsPict({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingOpytionsPict/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchAnswerOptionsPict({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingOpytionsPict />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

79
src/pages/Questions/OwnTextField/OwnTextField.tsx
View File

@ -1,4 +1,4 @@
import {Box, Typography, useTheme} from "@mui/material";
import { Box, Typography, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import SwitchTextField from "./switchTextField";
import React from "react";
@ -6,38 +6,47 @@ import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "../../../assets/icons/InfoIcon";
interface Props {
totalIndex: number
totalIndex: number;
}
export default function OwnTextField({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
return (
<>
<Box
sx={{
width: "100%",
maxWidth: "640px",
display: "flex",
padding: "20px",
flexDirection: "column",
gap: "20px",
}}
>
<CustomTextField placeholder={"Пример ответа"} text={""} />
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Typography
sx={{
fontWeight: 400,
fontSize: "16px",
lineHeight: "18.96px",
color: theme.palette.grey2.main,
}}
>
Пользователю будет дано поле для ввода значения{" "}
</Typography>
<InfoIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchTextField switchState={switchState} totalIndex={totalIndex} />
</>
);
}
export default function OwnTextField({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '640px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
>
<CustomTextField placeholder={"Пример ответа"} text={''}/>
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
<Typography sx={{
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.96px',
color: theme.palette.grey2.main
}}>Пользователю будет дано поле для ввода значения </Typography>
<InfoIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchTextField switchState={switchState}/>
</>
)
}

40
src/pages/Questions/OwnTextField/switchTextField.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react';
import * as React from "react";
import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions";
import SettingTextField from "./settingTextField";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchTextField({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingTextField/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchTextField({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingTextField />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

8
src/pages/Questions/PageOptions/PageOptions.tsx
View File

@ -59,8 +59,12 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
</Typography>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
<SwitchPageOptions switchState={switchState} />
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
</>
);
}

38
src/pages/Questions/PageOptions/switchPageOptions.tsx
View File

@ -2,24 +2,26 @@ import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions";
import SettingPageOptions from "./SettingPageOptions";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchPageOptions({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingPageOptions/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchPageOptions({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingPageOptions />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

109
src/pages/Questions/RatingOptions/RatingOptions.tsx
View File

@ -1,47 +1,76 @@
import {Box, Typography, useTheme} from "@mui/material";
import { Box, Typography, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React from "react";
import Rating from '@mui/material/Rating';
import Rating from "@mui/material/Rating";
import RatingStar from "../../../assets/icons/questionsPage/ratingStar";
import SwitchRating from "./switchRating";
interface Props{
totalIndex: number
interface Props {
totalIndex: number;
}
export default function RatingOptions({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '310px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
>
<Rating
name="customized-color"
defaultValue={2}
getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
precision={1}
icon={<RatingStar color={theme.palette.brightPurple.main}/>}
emptyIcon={<RatingStar color={"#9A9AAF"}/>}
sx={{display: 'flex', gap: '15px'}}
/>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Негативно</Typography>
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Позитивно</Typography>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchRating switchState={switchState}/>
</>
)
}
export default function RatingOptions({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
return (
<>
<Box
sx={{
width: "100%",
maxWidth: "310px",
display: "flex",
padding: "20px",
flexDirection: "column",
gap: "20px",
}}
>
<Rating
name="customized-color"
defaultValue={2}
getLabelText={(value: number) =>
`${value} Heart${value !== 1 ? "s" : ""}`
}
precision={1}
icon={<RatingStar color={theme.palette.brightPurple.main} />}
emptyIcon={<RatingStar color={"#9A9AAF"} />}
sx={{ display: "flex", gap: "15px" }}
/>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "16px",
fontWeight: 400,
}}
>
Негативно
</Typography>
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "16px",
fontWeight: 400,
}}
>
Позитивно
</Typography>
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchRating switchState={switchState} totalIndex={totalIndex} />
</>
);
}

38
src/pages/Questions/RatingOptions/switchRating.tsx
View File

@ -2,24 +2,26 @@ import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions";
import SettingRating from "./settingRating";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchRating({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingRating/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchRating({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingRating />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

101
src/pages/Questions/SliderOptions/SliderOptions.tsx
View File

@ -1,54 +1,63 @@
import {Box, Typography, useTheme} from "@mui/material";
import { Box, Typography, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import SwitchSlider from "./switchSlider";
interface Props{
totalIndex: number
interface Props {
totalIndex: number;
}
export default function SliderOptions({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
export default function SliderOptions({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '640px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
>
<Box sx={{gap: '10px', display: 'flex', flexDirection: 'column'}}>
<Typography>Выбор значения из диапазона</Typography>
<Box sx={{display: 'flex', alignItems: 'center', gap: '20px'}}>
<CustomTextField placeholder={'0'} text={''}/>
<Typography>—</Typography>
<CustomTextField placeholder={'100'} text={''}/>
</Box>
</Box>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
<Box>
<Typography>Начальное значение</Typography>
<CustomTextField placeholder={'50'} text={''}/>
</Box>
<Box>
<Typography>Шаг</Typography>
<CustomTextField placeholder={'1'} text={''}/>
</Box>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchSlider switchState={switchState}/>
</>
)
}
return (
<>
<Box
sx={{
width: "100%",
maxWidth: "640px",
display: "flex",
padding: "20px",
flexDirection: "column",
gap: "20px",
}}
>
<Box sx={{ gap: "10px", display: "flex", flexDirection: "column" }}>
<Typography>Выбор значения из диапазона</Typography>
<Box sx={{ display: "flex", alignItems: "center", gap: "20px" }}>
<CustomTextField placeholder={"0"} text={""} />
<Typography>—</Typography>
<CustomTextField placeholder={"100"} text={""} />
</Box>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Box>
<Typography>Начальное значение</Typography>
<CustomTextField placeholder={"50"} text={""} />
</Box>
<Box>
<Typography>Шаг</Typography>
<CustomTextField placeholder={"1"} text={""} />
</Box>
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchSlider switchState={switchState} totalIndex={totalIndex} />
</>
);
}

40
src/pages/Questions/SliderOptions/switchSlider.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react';
import * as React from "react";
import HelpQuestions from "../helpQuestions";
import BranchingQuestions from "../branchingQuestions";
import SettingSlider from "./settingSlider";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchSlider({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingSlider/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchSlider({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingSlider />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

262
src/pages/Questions/UploadFile/UploadFile.tsx
View File

@ -1,133 +1,149 @@
import {Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme} from "@mui/material";
import {
Box,
FormControl,
MenuItem,
Select,
SelectChangeEvent,
Typography,
useTheme,
} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React, {useState} from "react";
import React, { useState } from "react";
import InfoIcon from "../../../assets/icons/InfoIcon";
import ArrowDown from "../../../assets/icons/ArrowDownIcon";
import SwitchUpload from "./switchUpload";
interface Props{
totalIndex: number
interface Props {
totalIndex: number;
}
export default function UploadFile({totalIndex}: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
export default function UploadFile({ totalIndex }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => {
setSwitchState(data);
};
const designTypes = [
["Все типы файлов"],
["Изображения"],
["Видео"],
["Аудио"],
["Документ"]
]
const [designType, setDesignType] = useState(designTypes[0][0]);
const handleChange = (event: SelectChangeEvent) => {
setDesignType(event.target.value);
}
const designTypes = [
["Все типы файлов"],
["Изображения"],
["Видео"],
["Аудио"],
["Документ"],
];
const [designType, setDesignType] = useState(designTypes[0][0]);
const handleChange = (event: SelectChangeEvent) => {
setDesignType(event.target.value);
};
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '640px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
return (
<>
<Box
sx={{
width: "100%",
maxWidth: "640px",
display: "flex",
padding: "20px",
flexDirection: "column",
gap: "20px",
}}
>
<Box sx={{ gap: "10px", display: "flex" }}>
<FormControl
fullWidth
size="small"
sx={{
width: "100%",
minWidth: "200px",
height: "48px",
}}
>
<Select
id="category-select"
variant="outlined"
value={designType}
displayEmpty
onChange={handleChange}
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) => <ArrowDown {...props} />}
>
<Box sx={{gap: '10px', display: 'flex'}}>
<FormControl
fullWidth
size="small"
sx={{
width: "100%",
minWidth: "200px",
height: "48px",
}}
>
<Select
id="category-select"
variant="outlined"
value={designType}
displayEmpty
onChange={handleChange}
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 => <ArrowDown {...props} />}
>
{designTypes.map(type =>
<MenuItem
key={type[0]}
value={type[0]}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
{type[0]}
</MenuItem>
)}
</Select>
</FormControl>
</Box>
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
<Typography sx={{
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.96px',
color: theme.palette.grey2.main
}}>Пользователь может загрузить любой собственный файл</Typography>
<InfoIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchUpload switchState={switchState}/>
</>
)
}
{designTypes.map((type) => (
<MenuItem
key={type[0]}
value={type[0]}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
{type[0]}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Typography
sx={{
fontWeight: 400,
fontSize: "16px",
lineHeight: "18.96px",
color: theme.palette.grey2.main,
}}
>
Пользователь может загрузить любой собственный файл
</Typography>
<InfoIcon />
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchUpload switchState={switchState} totalIndex={totalIndex} />
</>
);
}

40
src/pages/Questions/UploadFile/switchUpload.tsx
View File

@ -1,26 +1,28 @@
import * as React from 'react';
import * as React from "react";
import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions";
import SettingsUpload from "./settingUpload";
interface Props {
switchState: string,
switchState: string;
totalIndex: number;
}
export default function SwitchUpload({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingsUpload/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}
export default function SwitchUpload({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <SettingsUpload />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
default:
return <></>;
}
}

47
src/pages/Questions/answerOptions/switchAnswerOptions.tsx
View File

@ -1,31 +1,32 @@
import * as React from 'react';
import * as React from "react";
import UploadImage from "../UploadImage";
import HelpQuestions from "../helpQuestions";
import ResponseSettings from "./responseSettings";
import BranchingQuestions from "../branchingQuestions";
interface Props {
switchState: string,
totalIndex: number,
switchState: string;
totalIndex: number;
}
export default function SwitchAnswerOptions({switchState = 'setting', totalIndex }: Props) {
switch (switchState) {
case 'setting':
return (<ResponseSettings totalIndex={totalIndex}/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
case 'image':
return (<UploadImage/>);
break;
default:
return (<></>)
}
}
export default function SwitchAnswerOptions({
switchState = "setting",
totalIndex,
}: Props) {
switch (switchState) {
case "setting":
return <ResponseSettings totalIndex={totalIndex} />;
break;
case "help":
return <HelpQuestions totalIndex={totalIndex} />;
break;
case "branching":
return <BranchingQuestions />;
break;
case "image":
return <UploadImage />;
break;
default:
return <></>;
}
}

45
src/pages/Questions/helpQuestions.tsx
View File

@ -12,16 +12,21 @@ import CustomTextField from "@ui_kit/CustomTextField";
import { useState } from "react";
import UploadIcon from "../../assets/icons/UploadIcon";
import UploadBox from "@ui_kit/UploadBox";
import { questionStore, updateQuestionsList } from "@root/questions";
import type { DragEvent } from "react";
type BackgroundType = "text" | "video";
type BackgroundTypeModal = "linkVideo" | "ownVideo";
export default function HelpQuestions() {
type HelpQuestionsProps = {
totalIndex: number;
};
export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) {
const [open, setOpen] = useState(false);
const [video, setVideo] = useState("");
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
const { listQuestions } = questionStore();
const [backgroundTypeModal, setBackgroundTypeModal] =
useState<BackgroundTypeModal>("linkVideo");
const theme = useTheme();
@ -31,8 +36,10 @@ export default function HelpQuestions() {
const videoHC = (fileList: FileList | null) => {
if (fileList?.length) {
const file = fileList[0];
setVideo(URL.createObjectURL(file));
const clonContent = listQuestions[totalIndex].content;
clonContent.hint.video = URL.createObjectURL(fileList[0]);
clonContent.hint.videoUrl = "";
updateQuestionsList(totalIndex, { content: clonContent });
handleClose();
}
};
@ -77,7 +84,15 @@ export default function HelpQuestions() {
</Box>
{backgroundType === "text" ? (
<>
<CustomTextField placeholder={"Текст консультанта"} text={""} />
<CustomTextField
placeholder={"Текст консультанта"}
text={listQuestions[totalIndex].content.hint.text}
onChange={({ target }) => {
let clonContent = listQuestions[totalIndex].content;
clonContent.hint.text = target.value;
updateQuestionsList(totalIndex, { content: clonContent });
}}
/>
</>
) : (
<Box>
@ -88,8 +103,16 @@ export default function HelpQuestions() {
onClick={handleOpen}
sx={{ justifyContent: "flex-start" }}
>
{video ? (
<video src={video} width="400" controls />
{listQuestions[totalIndex].content.hint.videoUrl ||
listQuestions[totalIndex].content.hint.video ? (
<video
src={
listQuestions[totalIndex].content.hint.videoUrl ||
listQuestions[totalIndex].content.hint.video
}
width="400"
controls
/>
) : (
<>
<UploadBox
@ -158,7 +181,13 @@ export default function HelpQuestions() {
</Typography>
<CustomTextField
placeholder={"http://example.com"}
text={""}
text={listQuestions[totalIndex].content.hint.videoUrl}
onChange={({ target }) => {
let clonContent = listQuestions[totalIndex].content;
clonContent.hint.videoUrl = target.value;
clonContent.hint.video = "";
updateQuestionsList(totalIndex, { content: clonContent });
}}
/>
</Box>
) : (

12
src/stores/questions.ts
View File

@ -7,6 +7,12 @@ export type Variants = {
hints: string;
};
type Hint = {
text: string;
video: string;
videoUrl: string;
};
export interface Question {
id: number;
title: string;
@ -17,6 +23,7 @@ export interface Question {
page: number;
content: {
variants: Variants[];
hint: Hint;
large: boolean;
multi: boolean;
own: boolean;
@ -85,6 +92,11 @@ export const createQuestion = (id: number) => {
hints: "",
},
],
hint: {
text: "",
video: "",
videoUrl: "",
},
large: false,
multi: false,
own: false,