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

поправила в сторе конфиг, добавила модалку(нужно доделать)

Browse Source
This commit is contained in:
Tamara 2023-06-18 01:26:12 +03:00
parent 47e4ad8f08
commit a2bbfe3f14
4 changed files with 102 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/startPage/ModalSizeImage.tsx Normal file
View File

@ -0,0 +1,55 @@
import {Button, Modal, Box, useTheme, Typography} from "@mui/material";
import * as React from "react";
import {useState} from "react";
export default function ModalSizeImage () {
const theme = useTheme();
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
<Button
sx={{
mt: "20px",
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.orange.main,
textDecorationColor: theme.palette.orange.main
}}
onClick={handleOpen}>Размер картинок</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box
sx={{
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
maxWidth: "540px",
width: "100%",
minHeight: "632px",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 0,
}}
>
<Box>
<Typography>Размеры картинок</Typography>
</Box>
<Box></Box>
<Box>
<Typography>Размеры изображений в квизе</Typography>
</Box>
<Box></Box>
</Box>
</Modal>
</>
);
}

77
src/pages/startPage/StartPageSettings.tsx
View File

@ -28,6 +28,7 @@ import CustomTextField from "@ui_kit/CustomTextField";
import {quizStore} from "@root/quizes"; import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import * as React from "react"; import * as React from "react";
import ModalSizeImage from "./ModalSizeImage";
const designTypes = [ const designTypes = [
@ -47,7 +48,7 @@ export default function StartPageSettings() {
const designType = listQuizes[params].startpage const designType = listQuizes[params].startpage
const StartPageClone = listQuizes[params] const StartPageClone = listQuizes[params]
console.log(StartPageClone) console.log(StartPageClone)
const [backgroundType, setBackgroundType] = useState<BackgroundType>("image"); const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
const [alignType, setAlignType] = useState<AlignType>("left"); const [alignType, setAlignType] = useState<AlignType>("left");
//дропзона //дропзона
//для Изображения //для Изображения
@ -154,45 +155,45 @@ export default function StartPageSettings() {
const [video, setVideo] = React.useState(""); const [video, setVideo] = React.useState("");
const mutationHC = (e: any) => { const mutationHC = (e: any) => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.startpage.description = e.target.value SPageClone.startpage.description = e.target.value
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
} }
const mutationButtonHC = (e: any) => { const mutationButtonHC = (e: any) => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.startpage.button = e.target.value SPageClone.startpage.button = e.target.value
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
} }
const mutationPhoneHC = (e: any) => { const mutationPhoneHC = (e: any) => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.info.phonenumber = e.target.value SPageClone.info.phonenumber = e.target.value
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
} }
const mutationSiteHC = (e: any) => { const mutationSiteHC = (e: any) => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.info.site = e.target.value SPageClone.info.site = e.target.value
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
} }
const mutationLawHC = (e: any) => { const mutationLawHC = (e: any) => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.info.law = e.target.value SPageClone.info.law = e.target.value
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
} }
const mutationOrgNameHC = (e: any) => { const mutationOrgNameHC = (e: any) => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.info.orgname = e.target.value SPageClone.info.orgname = e.target.value
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
} }
const mutationOrgMetaHC = (e: any) => { const mutationOrgMetaHC = (e: any) => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.meta = e.target.value SPageClone.meta = e.target.value
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
} }
return ( return (
@ -305,17 +306,17 @@ export default function StartPageSettings() {
}}> }}>
<SelectableButton isSelected={backgroundType === "image"} onClick={() => { <SelectableButton isSelected={backgroundType === "image"} onClick={() => {
setBackgroundType("image") setBackgroundType("image")
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.startpage.background.type = "image" SPageClone.startpage.background.type = "image"
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
}}> }}>
Изображение Изображение
</SelectableButton> </SelectableButton>
<SelectableButton isSelected={backgroundType === "video"} onClick={() => { <SelectableButton isSelected={backgroundType === "video"} onClick={() => {
setBackgroundType("video") setBackgroundType("video")
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.startpage.background.type = "video" SPageClone.startpage.background.type = "video"
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
}}> }}>
Видео Видео
</SelectableButton> </SelectableButton>
@ -366,14 +367,8 @@ export default function StartPageSettings() {
} }
</Box> </Box>
</ButtonBase> </ButtonBase>
<ModalSizeImage/>
<Link sx={{
mt: "20px",
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.orange.main,
textDecorationColor: theme.palette.orange.main
}}>Размер картинок</Link>
<Box sx={{ <Box sx={{
mt: "20px", mt: "20px",
display: "flex", display: "flex",
@ -433,11 +428,11 @@ export default function StartPageSettings() {
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
<CustomCheckbox <CustomCheckbox
label="Зацикливать видео" label="Зацикливать видео"
checked={listQuizes[params].config1.startpage.background.cycle} checked={listQuizes[params].config.startpage.background.cycle}
handleChange={(e) => { handleChange={(e) => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.startpage.background.cycle = e.target.checked SPageClone.startpage.background.cycle = e.target.checked
updateQuizesList(params, {config1: SPageClone })}} updateQuizesList(params, {config: SPageClone })}}
/> />
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
<ButtonBase component="label" sx={{justifyContent: 'flex-start'}} > <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
@ -599,44 +594,44 @@ export default function StartPageSettings() {
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который " placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config1.startpage.description} text={listQuizes[params].config.startpage.description}
onChange={mutationHC} onChange={mutationHC}
/> />
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
<CustomTextField <CustomTextField
placeholder="Начать" placeholder="Начать"
text={listQuizes[params].config1.startpage.button} text={listQuizes[params].config.startpage.button}
onChange={mutationButtonHC} onChange={mutationButtonHC}
/> />
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
<CustomTextField <CustomTextField
placeholder="+7 900 000 00 00" placeholder="+7 900 000 00 00"
text={listQuizes[params].config1.info.phonenumber} text={listQuizes[params].config.info.phonenumber}
onChange={mutationPhoneHC} onChange={mutationPhoneHC}
/> />
<CustomCheckbox label="Кликабельный" <CustomCheckbox label="Кликабельный"
checked={listQuizes[params].config1.info.clickable} checked={listQuizes[params].config.info.clickable}
handleChange={(e) => {console.log(e.target.checked) handleChange={(e) => {console.log(e.target.checked)
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.info.clickable = e.target.checked SPageClone.info.clickable = e.target.checked
updateQuizesList(params, {config1: SPageClone })} updateQuizesList(params, {config: SPageClone })}
}/> }/>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который " placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config1.info.orgname} text={listQuizes[params].config.info.orgname}
onChange={mutationOrgNameHC} onChange={mutationOrgNameHC}
/> />
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который " placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config1.info.site} text={listQuizes[params].config.info.site}
onChange={mutationSiteHC} onChange={mutationSiteHC}
/> />
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который " placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config1.info.law} text={listQuizes[params].config.info.law}
onChange={mutationLawHC} onChange={mutationLawHC}
/> />
<Link sx={{ <Link sx={{
@ -647,7 +642,7 @@ export default function StartPageSettings() {
textDecorationColor: theme.palette.brightPurple.main textDecorationColor: theme.palette.brightPurple.main
}}>Дополнительно</Link> }}>Дополнительно</Link>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography> <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={listQuizes[params].config1.meta} onChange={mutationOrgMetaHC} /> <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={listQuizes[params].config.meta} onChange={mutationOrgMetaHC} />
<Typography sx={{ <Typography sx={{
mt: "20px", mt: "20px",
fontSize: "16px", fontSize: "16px",
@ -676,11 +671,11 @@ export default function StartPageSettings() {
<Button <Button
variant="contained" variant="contained"
onClick={() => { onClick={() => {
let SPageClone = listQuizes[params].config1 let SPageClone = listQuizes[params].config
SPageClone.startpage.background.desktop = "https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg" 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.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" SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ"
updateQuizesList(params, {config1: SPageClone }) updateQuizesList(params, {config: SPageClone })
}} }}
>Настроить вопросы</Button> >Настроить вопросы</Button>
</Box> </Box>

12
src/pages/startPage/stepOne.tsx
View File

@ -27,7 +27,9 @@ export default function StepOne({ handleNext }: HandleNext) {
}} }}
> >
<Button variant="text" onClick={() => { <Button variant="text" onClick={() => {
updateQuizesList(params, {config: "quize"}) let SPageClone = listQuizes[params].config
SPageClone.type = "quize"
updateQuizesList(params, {config: SPageClone })
handleNext() handleNext()
} }
}> }>
@ -35,11 +37,13 @@ export default function StepOne({ handleNext }: HandleNext) {
header="Создание квиз-опроса" header="Создание квиз-опроса"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас" text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage1} image={quizCreationImage1}
border={listQuizes[params].config === "quize" ? "1px solid #7E2AEA" : "none"} border={listQuizes[params].config.type === "quize" ? "1px solid #7E2AEA" : "none"}
/> />
</Button> </Button>
<Button variant="text" onClick={() => { <Button variant="text" onClick={() => {
updateQuizesList(params, {config: "form"}) let SPageClone = listQuizes[params].config
SPageClone.type = "form"
updateQuizesList(params, {config: SPageClone })
handleNext() handleNext()
} }
}> }>
@ -47,7 +51,7 @@ export default function StepOne({ handleNext }: HandleNext) {
header="Создание анкеты" header="Создание анкеты"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас" text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage2} image={quizCreationImage2}
border={listQuizes[params].config === "form" ? "1px solid #7E2AEA" : "none"} border={listQuizes[params].config.type === "form" ? "1px solid #7E2AEA" : "none"}
/> />
</Button> </Button>
</Box> </Box>

8
src/stores/quizes.ts
View File

@ -20,7 +20,6 @@ interface Quizes {
unique_answers: boolean, unique_answers: boolean,
name: string, name: string,
description: string, description: string,
config: string,
status: string, status: string,
limit: number, limit: number,
due_to: number, due_to: number,
@ -37,7 +36,7 @@ interface Quizes {
group_id: number, group_id: number,
step: number, step: number,
startpage: string, startpage: string,
config1: { config: {
type: string, type: string,
logo: string, logo: string,
startpage: { startpage: {
@ -102,7 +101,6 @@ export const quizStore = create<QuizStore>()(
"unique_answers": true, "unique_answers": true,
"name": "", "name": "",
"description": "", "description": "",
"config": "",
"status": "", "status": "",
"limit": 0, "limit": 0,
"due_to": 0, "due_to": 0,
@ -119,11 +117,11 @@ export const quizStore = create<QuizStore>()(
"group_id": 0, "group_id": 0,
"step": 1, "step": 1,
"startpage": "", "startpage": "",
"config1": { "config": {
"type": "", // quiz или form "type": "", // quiz или form
"logo": "hub.pena.digital/img/logo", "logo": "hub.pena.digital/img/logo",
"startpage": { "startpage": {
"description": "привет!",// приветственный текст опроса "description": "",// приветственный текст опроса
"button": "Начать", // текст на кнопке начала опроса "button": "Начать", // текст на кнопке начала опроса
"position": "ltr", // ltr или rtl. отображение элементов поверх фона "position": "ltr", // ltr или rtl. отображение элементов поверх фона
"background": { "background": {