добавляет отображение вопросов в уровне

codEnjoyer · Nov 20, 2023 · afab79b · afab79b
1 parent 9f13959
commit afab79b
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 20 deletions.
diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -39,7 +39,7 @@ const MapMenu: React.FC = observer(() => {
                 <div className="geolocations__wrapper">
                     {mapMenuStore.availableLevels.map((level, index) => {
                         return <Module id={(index + 1).toString()} key={level.id} title={level.title}
-                                       theoryUnits={level.theory_units}/>
+                                       theoryUnits={level.theoryUnits} taskUnits={level.taskUnits}/>
                     })}
                 </div>
             </div>

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -3,21 +3,21 @@ import "./modalLevelBody.scss"
 import ArrowLeft from "../UIChooseModule/ArrowLeft.tsx";
 import ArrowRight from "../UIChooseModule/ArrowRight.tsx";
 import {ITheoryUnitType} from "../../../../types/TheoryUnitType.ts";
+import {ITaskType} from "../../../../types/TaskType.ts";
 
 interface IModalLevelProps {
     title: string,
-    theoryUnits?: ITheoryUnitType[]
+    theoryUnits?: ITheoryUnitType[],
+    taskUnits?: ITaskType[]
 }
 
-const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits}) => {
+const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits, taskUnits}) => {
     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) => {
@@ -30,6 +30,17 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits}) => {
         return theoryBlocks
     }
 
+    const renderMenuTaskBlocks = (countTheoryBlocks: number, countTaskBlocks: number) => {
+        const taskBlocks: JSX.Element[] = []
+
+        for (let i = countTheoryBlocks; i < countTaskBlocks + countTheoryBlocks; i++) {
+            taskBlocks.push(<div key={i} className="menu-item" onClick={() => {
+                setCurrentTaskIndex(i)
+            }}>{tasks[2].element}</div>)
+        }
+        return taskBlocks
+    }
+
     return (
         <div>
             <div className="header-modal">
@@ -45,7 +56,8 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits}) => {
             </div>
 
             {theoryUnits && theoryUnits.length !== 0
-                ? <div className="menu">{renderMenuTheoryBlocks(theoryUnits!.length)}</div>
+                ? <div
+                    className="menu">{renderMenuTheoryBlocks(theoryUnits!.length)}{renderMenuTaskBlocks(theoryUnits!.length, taskUnits!.length)}</div>
                 : ""}
 
             {theoryUnits![currentTaskIndex] !== undefined &&
@@ -55,6 +67,14 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits}) => {
                     </div>
                 )
             }
+
+            {taskUnits![currentTaskIndex] !== undefined &&
+                (<div className="text-info">
+                        <div className="level-title">{taskUnits![currentTaskIndex].questions[0].question}</div>
+                        {/*<div className="level-body">{taskUnits![currentTaskIndex].questions[0].possibleAnswers.map((answer) => answer.answer)}</div>*/}
+                    </div>
+                )
+            }
         </div>
     );
 };

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/Module.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/Module.tsx
@@ -1,23 +1,27 @@
 import React, {useState} from 'react';
 import ModalWindow from "../../../../UIComponents/modalWindow/ModalWindow.tsx";
 import ModalLevelBody from "./ModalLevelBody.tsx";
+import {ITheoryUnitType} from "../../../../types/TheoryUnitType.ts";
+import {ITaskType} from "../../../../types/TaskType.ts";
 
 interface IModuleProps {
     id: string,
     title: string,
-    theoryUnits?: string[]
+    theoryUnits?: ITheoryUnitType[],
+    taskUnits?: ITaskType[]
 }
 
-const Module: React.FC<IModuleProps> = ({id, title, theoryUnits}) => {
+const Module: React.FC<IModuleProps> = ({id, title, theoryUnits, taskUnits}) => {
     const [isOpenModalWindow, setOpenModalWindow] = useState(false)
     const classNameGeolocation = "geolocation-" + id
+
     return (
         <div onClick={() => setOpenModalWindow(!isOpenModalWindow)} className={classNameGeolocation}>
 
             {isOpenModalWindow
                 ? <ModalWindow
                     onClose={() => setOpenModalWindow(!isOpenModalWindow)}
-                    body={<ModalLevelBody key={id} title={title} theoryUnits={theoryUnits}/>}
+                    body={<ModalLevelBody key={id} title={title} theoryUnits={theoryUnits} taskUnits={taskUnits}/>}
                 />
                 : ""}
 

diff --git a/frontend/src/store/mapMenuStore.ts b/frontend/src/store/mapMenuStore.ts
@@ -2,7 +2,8 @@ import {makeAutoObservable} from "mobx";
 import axios from "axios";
 import {IMapType} from "../types/MapType.ts";
 import {IModuleType} from "../types/ModuleType.ts";
-import {ILevelType} from "../types/LevelType.ts";
+import {ILevelType} from "../types/LevelType/LevelType.ts";
+import {IFetchLevelType} from "../types/LevelType/FetchLevelType.ts";
 
 class MapMenuStore {
     mapMenu: IMapType | null = null
@@ -57,8 +58,16 @@ class MapMenuStore {
         this.availableModules = modules
     }
 
-    setAvailableLevels(levels: ILevelType[]) {
-        this.availableLevels = levels
+    setAvailableLevels(levels: IFetchLevelType[]) {
+        this.availableLevels = levels.map((level) => {
+            return {
+                id: level.id,
+                title: level.title,
+                body: level.body,
+                theoryUnits: level.theory_units,
+                taskUnits: level.task_units
+            }
+        })
     }
 
     setCurrentModule(newModule: IModuleType) {

diff --git a/frontend/src/types/AnswerType.ts b/frontend/src/types/AnswerType.ts
@@ -0,0 +1,5 @@
+export interface IAnswerType {
+    id: string,
+    questionId: string,
+    answer: string
+}
diff --git a/frontend/src/types/LevelType.ts b/frontend/src/types/LevelType.ts
diff --git a/frontend/src/types/LevelType/FetchLevelType.ts b/frontend/src/types/LevelType/FetchLevelType.ts
@@ -0,0 +1,10 @@
+import {ITheoryUnitType} from "../TheoryUnitType.ts";
+import {ITaskType} from "../TaskType.ts";
+
+export interface IFetchLevelType {
+    id: string,
+    title: string,
+    body?: string,
+    theory_units?: ITheoryUnitType[]
+    task_units?: ITaskType[]
+}
diff --git a/frontend/src/types/LevelType/LevelType.ts b/frontend/src/types/LevelType/LevelType.ts
@@ -0,0 +1,10 @@
+import {ITheoryUnitType} from "../TheoryUnitType.ts";
+import {ITaskType} from "../TaskType.ts";
+
+export interface ILevelType {
+    id: string,
+    title: string,
+    body?: string,
+    theoryUnits?: ITheoryUnitType[]
+    taskUnits?: ITaskType[]
+}
diff --git a/frontend/src/types/QuestionType.ts b/frontend/src/types/QuestionType.ts
@@ -0,0 +1,9 @@
+import {IAnswerType} from "./AnswerType.ts";
+
+export interface IQuestionType {
+    id: string
+    possibleAnswers: IAnswerType[]
+    question: string
+    taskId: string
+    type: string
+}
diff --git a/frontend/src/types/TaskType.ts b/frontend/src/types/TaskType.ts
@@ -1,5 +1,10 @@
+import {IQuestionType} from "./QuestionType.ts";
+
 export interface ITaskType {
     id: string,
-    name: string,
-    body: string
+    levelId: string,
+    questions: IQuestionType[],
+    requiresReview: boolean,
+    scoreReward: number,
+    type: string
 }