работа с десктопами 37, 39 настройка передачи результатов выбора в селект

src/pages/startPage/CardWithImage.tsx

@@ -4,15 +4,17 @@ import { Box, Typography, useTheme } from "@mui/material";
 interface Props {
     image: string;
     text: string;
+    border?: string;
 }
 
-export default function CardWithImage({ image, text }: Props) {
+export default function CardWithImage({ image, text, border }: Props) {
     const theme = useTheme();
 
     return (
         <Box sx={{
             flexGrow: 1,
             borderRadius: "12px",
+            border: {border},
             backgroundColor: "white",
             boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24), 
                         0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),

src/pages/startPage/StartPageSettings.tsx

@@ -1,4 +1,4 @@
-import { Box, FormControl, Link, MenuItem, Select, Typography, useTheme } from "@mui/material";
+import {Box, Button, FormControl, Link, MenuItem, Select, Typography, useTheme} from "@mui/material";
 import { useState } from "react";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import AlignLeftIcon from "../../assets/icons/AlignLeftIcon";
@@ -14,6 +14,8 @@ 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 {useParams} from "react-router-dom";
 
 
 const designTypes = [
@@ -27,12 +29,16 @@ type BackgroundType = "image" | "video";
 type AlignType = "left" | "right";
 
 export default function StartPageSettings() {
+    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
+    const params = Number(useParams().quizId);
     const theme = useTheme();
-    const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
+    const designType = listQuizes[params].startpage
+    // const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
     const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
     const [alignType, setAlignType] = useState<AlignType>("left");
 
     return (
+        <>
             <Box sx={{
                 backgroundColor: "white",
                 borderRadius: "12px",
@@ -68,7 +74,9 @@ export default function StartPageSettings() {
                             variant="outlined"
                             value={designType}
                             displayEmpty
-                        onChange={e => setDesignType(e.target.value as DesignType)}
+                            onChange={(e, i) => console.log(e.target, e.target.value, i)}
+                            // onChange={e => setDesignType(e.target.value as DesignType)}
+                            // onChange={updateQuizesList(params, {startpage: "standard"})}
                             sx={{
                                 height: "48px",
                                 borderRadius: "8px",
@@ -114,6 +122,7 @@ export default function StartPageSettings() {
                                 <MenuItem
                                     key={type[0]}
                                     value={type[0]}
+
                                     sx={{
                                         display: "flex",
                                         alignItems: "center",
@@ -272,6 +281,12 @@ export default function StartPageSettings() {
                     </Typography>
                 </Box>
             </Box>
+            <Box>
+                <Button variant="outlined">Отключить стартовую страницу</Button>
+                <Button variant="contained">Настроить вопросы</Button>
+            </Box>
+        </>
+
     );
 }
 

src/pages/startPage/steptwo.tsx

@@ -26,24 +26,27 @@ export default function Steptwo ({handleNext}:HandleNext) {
             }}>
                 <Button variant='text'
                         onClick={() => {
+                            updateQuizesList(params, {startpage: "standard"})
                             handleNext()
                         }}
                 >
-                    <CardWithImage image={cardImage1} text="Standart" />
+                    <CardWithImage image={cardImage1} text="Standard" border={listQuizes[params].startpage === "standard" ? "1px solid #7E2AEA" : "none"} />
                 </Button>
                 <Button variant='text'
                             onClick={() => {
+                                updateQuizesList(params, {startpage: "expanded"})
                                 handleNext()
                             }}
                 >
-                    <CardWithImage image={cardImage2} text="Expanded" />
+                    <CardWithImage image={cardImage2} text="Expanded" border={listQuizes[params].startpage === "expanded" ? "1px solid #7E2AEA" : "none"}/>
                 </Button>
                 <Button variant='text'
                             onClick={() => {
+                                updateQuizesList(params, {startpage: "centered"})
                                 handleNext()
                             }}
                 >
-                    <CardWithImage image={cardImage3} text="Centered" />
+                    <CardWithImage image={cardImage3} text="Centered" border={listQuizes[params].startpage === "centered" ? "1px solid #7E2AEA" : "none"}/>
                 </Button>
             </Box>
         </Box>

src/stores/quizes.ts

@@ -35,41 +35,15 @@ interface Quizes {
     average_time: number,
     super: true,
     group_id: number,
-    step: number
+    step: number,
+    startpage: string,
+    config1?: any
 }
 
 export const quizStore = create<QuizStore>()(
     persist(
         (set, get) => ({
             listQuizes: {
-                //     1: {
-                //     "id": 0,
-                //     "qid": "string",
-                //     "deleted": false,
-                //     "archived": true,
-                //     "fingerprinting": true,
-                //     "repeatable": true,
-                //     "note_prevented": true,
-                //     "mail_notifications": true,
-                //     "unique_answers": true,
-                //     "name": "string",
-                //     "description": "string",
-                //     "config": "string",
-                //     "status": "string",
-                //     "limit": 0,
-                //     "due_to": 0,
-                //     "time_of_passing": 0,
-                //     "pausable": true,
-                //     "version": 0,
-                //     "version_comment": "string",
-                //     "created_at": "string",
-                //     "updated_at": "string",
-                //     "question_cnt": 0,
-                //     "passed_count": 0,
-                //     "average_time": 0,
-                //     "super": true,
-                //     "group_id": 0
-                // }
             },
             updateQuizesList: (id: number, values: any) => {
                 const state = get()["listQuizes"] || {};
@@ -120,7 +94,35 @@ export const quizStore = create<QuizStore>()(
                     "average_time": 0,
                     "super": true,
                     "group_id": 0,
-                    "step": 1
+                    "step": 1,
+                    "startpage": "",
+                    "config1": {
+                        "type": "", // quiz или form
+                        "favicon": [
+                            {"attrs": "320*650apple","link":"hub.pena.digital/fav/squiz1.jpg"}
+                        ],
+                        "logo": "hub.pena.digital/img/logo",
+                        "startpage": {
+                            "description": "",// приветственный текст опроса
+                            "button": "Начать", // текст на кнопке начала опроса
+                            "position": "ltr", // ltr или rtl. отображение элементов поверх фона
+                            "background": {
+                                "type": "image", //image или video
+                                "desctop": "hub.pena.digital/img/back/full.png",
+                                "mobile": "hub.pena.digital/img/back/mobile.png",
+                                "video":"hub.pena.digital/vid/back/vi1.mp4",
+                                "cycle": true //зацикливать видео или нет
+                            },
+                        },
+                        "info": {
+                            "phonenumber": "+79885895677",
+                            "clickable": true,
+                            "orgname": "ООО \"Пена\"",
+                            "site": "hub.pena.digital",
+                            "law": "юридическая информация"
+                        },
+                        "meta": "что-то"
+                    }
                 };
                 set({listQuizes: newListQuizes});
                 return id;