515 lines
25 KiB
TypeScript
Executable File
515 lines
25 KiB
TypeScript
Executable File
import {
|
||
Box,
|
||
Button,
|
||
ButtonBase,
|
||
Checkbox,
|
||
FormControl, FormControlLabel,
|
||
MenuItem,
|
||
Select,
|
||
Typography,
|
||
useTheme
|
||
} from "@mui/material";
|
||
import { useState } from "react";
|
||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||
import AlignLeftIcon from "../../assets/icons/AlignLeftIcon";
|
||
import AlignRightIcon from "../../assets/icons/AlignRightIcon";
|
||
import ArrowDown from "../../assets/icons/ArrowDownIcon";
|
||
import InfoIcon from "../../assets/icons/InfoIcon";
|
||
import LayoutCenteredIcon from "../../assets/icons/LayoutCenteredIcon";
|
||
import LayoutExpandedIcon from "../../assets/icons/LayoutExpandedIcon";
|
||
import LayoutStandartIcon from "../../assets/icons/LayoutStandartIcon";
|
||
import MobilePhoneIcon from "../../assets/icons/MobilePhoneIcon";
|
||
import UploadIcon from "../../assets/icons/UploadIcon";
|
||
import SelectableButton from "@ui_kit/SelectableButton";
|
||
import SelectableIconButton from "./SelectableIconButton";
|
||
import UploadBox from "@ui_kit/UploadBox";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import {quizStore} from "@root/quizes";
|
||
import {useNavigate, useParams} from "react-router-dom";
|
||
import * as React from "react";
|
||
import ModalSizeImage from "./ModalSizeImage";
|
||
import DropZone from "./dropZone";
|
||
import Extra from "./extra";
|
||
import AlignCenterIcon from "@icons/AlignCenterIcon";
|
||
import DropFav from "./dropfavicon";
|
||
import {questionStore} from "@root/questions";
|
||
|
||
interface HandleNext {
|
||
handleNext: () => void;
|
||
}
|
||
|
||
const designTypes = [
|
||
["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
|
||
["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
|
||
["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"]
|
||
] as const;
|
||
// type DesignType = typeof designTypes[number][0];
|
||
|
||
type BackgroundType = "image" | "video";
|
||
type AlignType = "left" | "right" | "center";
|
||
|
||
export default function StartPageSettings({ handleNext }: HandleNext) {
|
||
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
|
||
const {listQuestions, updateQuestionsList, createQuestion} = questionStore()
|
||
const params = Number(useParams().quizId);
|
||
const theme = useTheme();
|
||
const designType = listQuizes[params].startpage
|
||
const StartPageClone = listQuizes[params]
|
||
console.log(StartPageClone)
|
||
const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
|
||
const [alignType, setAlignType] = useState<AlignType>("left");
|
||
|
||
// для видео
|
||
const videoHC = (videoInp:any) => {
|
||
const [file] = videoInp.files
|
||
setVideo(URL.createObjectURL(file))
|
||
}
|
||
const [video, setVideo] = React.useState("");
|
||
|
||
const mutationHC = (e: any) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.description = e.target.value
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}
|
||
|
||
const mutationButtonHC = (e: any) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.button = e.target.value
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}
|
||
|
||
const mutationPhoneHC = (e: any) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.info.phonenumber = e.target.value
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}
|
||
|
||
const mutationSiteHC = (e: any) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.info.site = e.target.value
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}
|
||
|
||
const mutationLawHC = (e: any) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.info.law = e.target.value
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}
|
||
|
||
const mutationOrgNameHC = (e: any) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.info.orgname = e.target.value
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}
|
||
|
||
const mutationPositionHC = (e: any) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.position = e.target.value
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}
|
||
|
||
const [mobileVersion, setMobileVersion] = React.useState(false);
|
||
const MobileVersionHC = (bool:boolean) => {
|
||
setMobileVersion(bool)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<DropFav
|
||
text="a"
|
||
sx={{}}
|
||
heightImg="100"
|
||
widthImg="200"
|
||
/>
|
||
<Typography variant="h5" sx={{marginTop: "60px"}}>Стартовая страница</Typography>
|
||
<Box sx={{
|
||
backgroundColor: "white",
|
||
borderRadius: "12px",
|
||
p: "20px",
|
||
display: "flex",
|
||
gap: "20px",
|
||
marginTop: "40px",
|
||
maxWidth: "1160px",
|
||
width: "100%",
|
||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
|
||
}}>
|
||
<Box sx={{
|
||
pr: "20px",
|
||
borderRight: `1px solid ${theme.palette.grey2.main}`,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
flex: `1 1 342px`,
|
||
}}>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
|
||
<FormControl
|
||
fullWidth
|
||
size="small"
|
||
sx={{
|
||
width: "100%",
|
||
minWidth: "200px",
|
||
height: "48px",
|
||
}}
|
||
>
|
||
<Select
|
||
id="category-select"
|
||
variant="outlined"
|
||
value={designType}
|
||
displayEmpty
|
||
onChange={e => updateQuizesList(params, {startpage: e.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 => <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[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
|
||
{type[2]}
|
||
</MenuItem>
|
||
)}
|
||
</Select>
|
||
</FormControl>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
|
||
<Box sx={{
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}>
|
||
<SelectableButton isSelected={backgroundType === "image"} onClick={() => {
|
||
setBackgroundType("image")
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.background.type = "image"
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}}>
|
||
Изображение
|
||
</SelectableButton>
|
||
<SelectableButton isSelected={backgroundType === "video"} onClick={() => {
|
||
setBackgroundType("video")
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.background.type = "video"
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}}>
|
||
Видео
|
||
</SelectableButton>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
display: backgroundType === "image" ? "flex" : "none",
|
||
flexDirection: "column"
|
||
}}>
|
||
<Box sx={{
|
||
display: mobileVersion ? "none" : "flex",
|
||
flexDirection: "column"
|
||
}}>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||
Изображение</Typography>
|
||
<DropZone text={"5 MB максимум"} heightImg={"110px"}/>
|
||
</Box>
|
||
|
||
|
||
<ModalSizeImage/>
|
||
|
||
<Box sx={{
|
||
mt: "20px",
|
||
display: "flex",
|
||
gap: "10px",
|
||
flexDirection: "column"
|
||
|
||
}}>
|
||
<FormControlLabel
|
||
control={
|
||
<Checkbox
|
||
icon={<IconCheck/>}
|
||
checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"}/>}
|
||
/>}
|
||
label= "мобильная версия"
|
||
sx={{
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationLine: "underline",
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
ml: "-9px",
|
||
userSelect: "none",
|
||
}}
|
||
onClick={() => {MobileVersionHC(!mobileVersion)}}
|
||
/>
|
||
{mobileVersion ?
|
||
<Box sx={{display: "flex", flexDirection: "column"}}>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
|
||
Изображение для мобильной версии</Typography>
|
||
<DropZone text={"5 MB максимум"} heightImg={"110px"}/>
|
||
</Box>
|
||
:
|
||
<></>
|
||
}
|
||
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
display: backgroundType === "image" ? "none" : "flex",
|
||
flexDirection: "column"
|
||
}}>
|
||
<Box sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "7px",
|
||
mt: "20px",
|
||
mb: "14px",
|
||
}}>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
|
||
<InfoIcon />
|
||
</Box>
|
||
<ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
|
||
<input onChange={event => videoHC(event.target) } hidden accept=".mp4" multiple type="file" />
|
||
<UploadBox
|
||
icon={<UploadIcon />}
|
||
sx={{
|
||
height: "48px",
|
||
width: "48px",
|
||
marginBottom: "20px"
|
||
}}
|
||
/>
|
||
</ButtonBase>
|
||
{video ?
|
||
<video src={video} width="400" controls/>
|
||
:
|
||
null
|
||
}
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
|
||
<CustomCheckbox
|
||
label="Зацикливать видео"
|
||
checked={listQuizes[params].config.startpage.background.cycle}
|
||
handleChange={(e) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.background.cycle = e.target.checked
|
||
updateQuizesList(params, {config: SPageClone })}}
|
||
/>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
|
||
Изображение для мобильной версии</Typography>
|
||
<DropZone text={"5 MB максимум"} heightImg={"110px"}/>
|
||
</Box>
|
||
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
|
||
<Box sx={{
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}>
|
||
<SelectableIconButton onClick={() => {
|
||
setAlignType("left")
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.position = "ltr"
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}} isActive={alignType === "left"} Icon={AlignLeftIcon} />
|
||
<SelectableIconButton onClick={() => {
|
||
setAlignType("center")
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.position = "cnt"
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}} isActive={alignType === "center"} Icon={AlignCenterIcon} sx={{display: designType === "centered" ? "flex" : "none"}}/>
|
||
<SelectableIconButton onClick={() => {
|
||
setAlignType("right")
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.position = "rtl"
|
||
updateQuizesList(params, {config: SPageClone })
|
||
}} isActive={alignType === "right"} Icon={AlignRightIcon} />
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: backgroundType === "image" ? "flex" : "none",
|
||
flexDirection: "column"
|
||
}}
|
||
>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, margin: "20px 0" }}>
|
||
Логотип</Typography>
|
||
<DropZone text={"5 MB максимум"} heightImg={"110px"}/>
|
||
</Box>
|
||
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||
Favicon</Typography>
|
||
<Box sx={{
|
||
display: "flex",
|
||
alignItems: "end",
|
||
gap: "10px",
|
||
}}>
|
||
<DropZone sx={{height: "48px", width: "48px"}} heightImg={"48px"} widthImg={"48px"}/>
|
||
|
||
<Typography sx={{
|
||
color: theme.palette.orange.main,
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
textDecoration: "underline",
|
||
}}>5 MB максимум</Typography>
|
||
</Box>
|
||
{/*<DropFav heightImg={"200px"}/>*/}
|
||
</Box>
|
||
{/*Правая сторона*/}
|
||
<Box sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
flex: `1 1 795px`,
|
||
}}>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
|
||
<CustomTextField
|
||
placeholder="Текст-заполнитель — это текст, который"
|
||
text={listQuizes[params].name}
|
||
onChange={e => updateQuizesList(params, {name: e.target.value})}
|
||
/>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
|
||
<CustomTextField
|
||
placeholder="Текст-заполнитель — это текст, который "
|
||
text={listQuizes[params].config.startpage.description}
|
||
onChange={mutationHC}
|
||
/>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
|
||
<CustomTextField
|
||
placeholder="Начать"
|
||
text={listQuizes[params].config.startpage.button}
|
||
onChange={mutationButtonHC}
|
||
/>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
|
||
<CustomTextField
|
||
placeholder="+7 900 000 00 00"
|
||
text={listQuizes[params].config.info.phonenumber}
|
||
onChange={mutationPhoneHC}
|
||
/>
|
||
<CustomCheckbox label="Кликабельный"
|
||
checked={listQuizes[params].config.info.clickable}
|
||
handleChange={(e) => {console.log(e.target.checked)
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.info.clickable = e.target.checked
|
||
updateQuizesList(params, {config: SPageClone })}
|
||
}/>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
|
||
<CustomTextField
|
||
placeholder="Текст-заполнитель — это текст, который "
|
||
text={listQuizes[params].config.info.orgname}
|
||
onChange={mutationOrgNameHC}
|
||
/>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
|
||
<CustomTextField
|
||
placeholder="Текст-заполнитель — это текст, который "
|
||
text={listQuizes[params].config.info.site}
|
||
onChange={mutationSiteHC}
|
||
/>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
|
||
<CustomTextField
|
||
placeholder="Текст-заполнитель — это текст, который "
|
||
text={listQuizes[params].config.info.law}
|
||
onChange={mutationLawHC}
|
||
/>
|
||
<Extra/>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "20px",
|
||
justifyContent: "flex-end",
|
||
marginTop: "20px",
|
||
maxWidth: "1200px"
|
||
}}
|
||
>
|
||
<FormControlLabel
|
||
control={
|
||
<Checkbox
|
||
icon={<Button variant="outlined" sx={{backgroundColor: "transparent", color: theme.palette.brightPurple.main}}>Отключить стартовую страницу</Button>}
|
||
checkedIcon={<Button variant="outlined" sx={{backgroundColor: theme.palette.brightPurple.main, color: "white"}}>Включить стартовую страницу</Button>}
|
||
sx={{
|
||
borderRadius: 0,
|
||
padding: 0}}
|
||
onChange={(e) => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.noStartPage = e.target.checked
|
||
updateQuizesList(params, {config: SPageClone })}}
|
||
checked={listQuizes[params].config.noStartPage}
|
||
/>}
|
||
label= ""
|
||
sx={{
|
||
color: theme.palette.brightPurple.main,
|
||
ml: "-9px",
|
||
userSelect: "none",
|
||
}}
|
||
|
||
|
||
/>
|
||
<Button
|
||
variant="contained"
|
||
onClick={() => {
|
||
let SPageClone = listQuizes[params].config
|
||
SPageClone.startpage.background.desktop = "https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg"
|
||
SPageClone.startpage.background.mobile = "https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png"
|
||
SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ"
|
||
updateQuizesList(params, {config: SPageClone })
|
||
handleNext()
|
||
createQuestion(params)
|
||
}}
|
||
>Настроить вопросы</Button>
|
||
</Box>
|
||
</>
|
||
|
||
);
|
||
}
|
||
|
||
function IconCheck() {
|
||
return (
|
||
<Box sx={{
|
||
height: "36px",
|
||
width: "36px",
|
||
borderRadius: "8px",
|
||
backgroundColor: "#EEE4FC",
|
||
}} />
|
||
);
|
||
} |