добавляет отрисовку задания с теориями

codEnjoyer · Nov 20, 2023 · e3ffa3b · e3ffa3b
1 parent e56021f
commit e3ffa3b
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 42 deletions.
diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -21,7 +21,6 @@ const MapMenu: React.FC = observer(() => {
                 mapMenuStore.fetchModules().then(() => {
                     mapMenuStore.fetchModuleById(mapMenuStore.availableModules[0].id).then(() => {
                         mapMenuStore.fetchLevels().then(() => {
-                            console.log(mapMenuStore.availableLevels)
                         })
                     })
                 })
@@ -37,8 +36,9 @@ const MapMenu: React.FC = observer(() => {
             <br/>
             <div className="geolocations">
                 <div className="geolocations__wrapper">
-                    {mapMenuStore.availableLevels.map((level, index) =>
-                        <Module id={(index + 1).toString()} key={level.id} title={level.title}/>)
+                    {mapMenuStore.availableLevels.map((level, index) => {
+                        return <Module id={(index + 1).toString()} key={level.id} title={level.title} theoryUnits={level.theory_units}/>
+                    })
                     }
                 </div>
             </div>

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -2,20 +2,33 @@ import React, {useState} from 'react';
 import "./modalLevelBody.scss"
 import ArrowLeft from "../UIChooseModule/ArrowLeft.tsx";
 import ArrowRight from "../UIChooseModule/ArrowRight.tsx";
+import {ITheoryUnitType} from "../../../../types/TheoryUnitType.ts";
 
 interface IModalLevelProps {
-    id: string,
-    title: string
+    title: string,
+    theoryUnits?: ITheoryUnitType[]
 }
 
-const ModalLevelBody: React.FC<IModalLevelProps> = ({title}) => {
-    // const tasks = [
-    //     {name: "theory", element: <Theory/>},
-    //     {name: "video", element: <Video/>},
-    //     {name: "test", element: <Test/>}
-    // ]
-    //
-    // const [currentTaskIndex, setCurrentTaskIndex] = useState(0)
+const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits}) => {
+    const tasks = [
+        {name: "theory", element: <Theory/>},
+        {name: "video", element: <Video/>},
+        {name: "test", element: <Test/>}
+    ]
+
+    console.log(theoryUnits)
+
+    const [currentTaskIndex, setCurrentTaskIndex] = useState(0)
+
+    const renderMenuTheoryBlocks = (countTheoryBlocks: number) => {
+        const theoryBlocks: JSX.Element[] = []
+        for (let i = 0; i < countTheoryBlocks; i++) {
+            theoryBlocks.push(<div key={i} className="menu-item" onClick={() => {
+                setCurrentTaskIndex(i)
+            }}>{tasks[0].element}</div>)
+        }
+        return theoryBlocks
+    }
 
     return (
         <div>
@@ -31,31 +44,17 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({title}) => {
                 </div>
             </div>
 
-            {/*<div className="menu">*/}
-            {/*    {tasks.map((item, index) =>*/}
-            {/*        tasks.map((task) => {*/}
-            {/*            return task === item*/}
-            {/*                ? <div key={index} className="menu-item" onClick={() => {*/}
-            {/*                    setCurrentTaskIndex(index)*/}
-            {/*                }}>{task}</div>*/}
-            {/*                : ""*/}
-            {/*        }))}*/}
+            {theoryUnits && theoryUnits.length !== 0
+                ? <div className="menu">{renderMenuTheoryBlocks(theoryUnits!.length)}</div>
+                : ""}
 
-            {/*    /!*{tasks.map((item, index) =>*!/*/}
-            {/*    /!*    tasks.map((task) => {*!/*/}
-            {/*    /!*        return task.name === item.taskName*!/*/}
-            {/*    /!*            ? <div key={index} className="menu-item" onClick={() => {*!/*/}
-            {/*    /!*                setCurrentTaskIndex(index)*!/*/}
-            {/*    /!*            }}>{task.element}</div>*!/*/}
-            {/*    /!*            : ""*!/*/}
-            {/*    /!*    }))}*!/*/}
-
-            {/*</div>*/}
-            <div className="text-info">
-                <div className="level-title">{title.toUpperCase()}</div>
-                {/*<div className="level-body">{menu[currentTaskIndex].body}</div>*/}
-                {/*<div className="level-body">{tasks[currentTaskIndex]}</div>*/}
-            </div>
+            {theoryUnits![currentTaskIndex] !== undefined &&
+                (<div className="text-info">
+                        <div className="level-title">{theoryUnits![currentTaskIndex].title}</div>
+                        <div className="level-body">{theoryUnits![currentTaskIndex].content}</div>
+                    </div>
+                )
+            }
         </div>
     );
 };

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/Module.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/Module.tsx
@@ -4,10 +4,11 @@ import ModalLevelBody from "./ModalLevelBody.tsx";
 
 interface IModuleProps {
     id: string,
-    title: string
+    title: string,
+    theoryUnits?: string[]
 }
 
-const Module: React.FC<IModuleProps> = ({id, title}) => {
+const Module: React.FC<IModuleProps> = ({id, title, theoryUnits}) => {
     const [isOpenModalWindow, setOpenModalWindow] = useState(false)
     const classNameGeolocation = "geolocation-" + id
     return (
@@ -16,14 +17,13 @@ const Module: React.FC<IModuleProps> = ({id, title}) => {
             {isOpenModalWindow
                 ? <ModalWindow
                     onClose={() => setOpenModalWindow(!isOpenModalWindow)}
-                    body={<ModalLevelBody id={id} title={title}/>}
+                    body={<ModalLevelBody key={id} title={title} theoryUnits={theoryUnits}/>}
                 />
                 : ""}
 
             <div>
                 <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <g style={{mixBlendMode: "color-dodge"}}>
-                        <rect width="150" height="150" fill="black"/>
                         <circle cx="75" cy="75" r="75" fill="url(#paint0_radial_108_17393)"/>
                     </g>
                     <defs>

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css.map b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css.map
diff --git a/frontend/src/store/mapMenuStore.ts b/frontend/src/store/mapMenuStore.ts
@@ -113,6 +113,13 @@ class MapMenuStore {
             levels_ids: levels
         })
     }
+
+    createTheoryUnit() {
+        axios.post("http://localhost:8000/maps/" + this.currentMapId + "/modules/" + this.currentModuleId + "/levels/" + "8aa85f64-5717-4562-b3fc-2c963f66afa6" + "/theory", {
+            title: "Заголовок 1",
+            content: "Контент"
+        })
+    }
 }
 
 export default new MapMenuStore()
diff --git a/frontend/src/types/LevelType.ts b/frontend/src/types/LevelType.ts
@@ -2,5 +2,5 @@ export interface ILevelType {
     id: string,
     title: string,
     body?: string,
-    tasks?: string[]
+    theory_units?: string[]
 }
diff --git a/frontend/src/types/TheoryUnitType.ts b/frontend/src/types/TheoryUnitType.ts
@@ -0,0 +1,4 @@
+export interface ITheoryUnitType {
+    title: string,
+    content: string,
+}