добавляет монетки

codEnjoyer · Dec 17, 2023 · 209765d · 209765d
1 parent 6ad4412
commit 209765d
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 44 deletions.
diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx
@@ -30,6 +30,7 @@ const AuthForm: React.FC = observer(() => {
 
     const onHandleSubmit = useCallback((data: { login: string, password: string }) => {
         authStore.signIn(data.login, data.password).then(() => navigateTo('/map'))
+        authStore.setUser(data.login)
     }, [])
 
     return (

diff --git a/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx b/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 
 import Coins from "../UIMapMenu/Coins.tsx";
 import ChooseModuleWindow from "../UIMapMenu/ChooseModuleWindow.tsx";
@@ -11,9 +11,11 @@ import {observer} from "mobx-react-lite";
 
 import moduleMenuStore from "../../../store/moduleMenuStore.ts";
 import mapMenuStore from "../../../store/mapMenuStore.ts"
+import levelStore from "../../../store/levelStore.ts";
 
 import {IUserType} from "../../../types/UserType.ts";
-import levelStore from "../../../store/levelStore.ts";
+import axios from "axios";
+import Starfield from "react-starfield";
 
 
 interface IEmployeeMap {
@@ -23,37 +25,81 @@ interface IEmployeeMap {
 }
 
 const EmployeeMap: React.FC<IEmployeeMap> = observer(({user, formattedDate, logOut}) => {
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    const [employee, setEmployee] = useState(null)
+
+    useEffect(() => {
+        // console.log(user)
+        axios.get("http://localhost:8000/employees").then((r) => {
+            r.data.map((employee) => {
+                if (user?.id === employee.user.id) {
+                    setEmployee(employee)
+                    setIsLoading(false)
+                }
+            })
+        })
+    }, []);
+
     useEffect(() => {
         mapMenuStore.fetchAvailableMaps().then(() => {
             mapMenuStore.fetchMapById(mapMenuStore.availableMaps[0].id).then(() => {
                 moduleMenuStore.fetchModules().then(() => {
                     moduleMenuStore.fetchModuleById(moduleMenuStore.availableModules[0].id).then(() => {
                         levelStore.fetchLevels().then(() => {
-
-                        }).catch(() => alert("Нет доступных уровней для данного модуля"))
+                        })
                     })
                 }).catch(() => alert("Нет доступных модулей для данной карты"))
             })
         }).catch(() => alert("Нет доступных карт для данного пользователя"))
     }, []);
 
     return (
-        <div className="employee-interface">
-            <Coins coins={100} additionalClassname="coins"/>
-            <ChooseModuleWindow moduleName={moduleMenuStore.choosedModule?.title.toUpperCase()}/>
-            <UserProfile logOut={logOut} user={user} formattedDate={formattedDate}/>
-            <CustomProgressBar className="progress-bar-wrapper" progress={54}/>
-            <div className="geolocations">
-                <div className="geolocations__wrapper">
-                    {levelStore.availableLevels.map((level, index) => {
-                        return <Level
-                            id={(index + 1).toString()}
-                            level={level}
-                        />
-                    })}
+        isLoading ? (
+                <Starfield
+                    starCount={1000}
+                    starColor={[255, 255, 255]}
+                    speedFactor={0.05}
+                    backgroundColor="black"
+                />
+            )
+            :
+            (
+                <div className="employee-interface">
+                    <Starfield
+                        starCount={1000}
+                        starColor={[255, 255, 255]}
+                        speedFactor={0.05}
+                        backgroundColor="black"
+                    />
+                    <Coins
+                        coins={employee ? employee.coins : 0}
+                        additionalClassname="coins"
+                    />
+                    <ChooseModuleWindow
+                        moduleName={moduleMenuStore.choosedModule?.title.toUpperCase()}
+                    />
+                    <UserProfile
+                        logOut={logOut}
+                        user={user}
+                        formattedDate={formattedDate}
+                    />
+                    <CustomProgressBar
+                        className="progress-bar-wrapper"
+                        progress={54}
+                    />
+                    <div className="geolocations">
+                        <div className="geolocations__wrapper">
+                            {levelStore.availableLevels.map((level, index) => {
+                                return <Level
+                                    key={level.id}
+                                    id={(index + 1).toString()}
+                                    level={level}
+                                />
+                            })}
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
+            )
     );
 });
 

diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -21,12 +21,13 @@ const MapMenu: React.FC = observer(() => {
     const navigate = useNavigate()
 
     const [user, setUser] = useState<IUserType>()
-    const [formattedDate, setFormattedDate] = useState("")
+    const [formattedDate, setFormattedDate] = useState<string>("")
+    const [isLoading, setIsLoading] = useState<boolean>(true)
 
     useEffect(() => {
         axios.get("http://localhost:8000/users/").then((response) => {
             response.data.map((user: IUserType) => {
-                if (user.username === authStore.userLogin) {
+                if (user.email === authStore.nickname) {
                     setUser(user)
                 }
             })
@@ -36,6 +37,7 @@ const MapMenu: React.FC = observer(() => {
                 const date = new Date(Date.parse(user!.registered_at))
                 setFormattedDate(`${date.getDay()}.${date.getMonth()}.${date.getUTCFullYear()}`)
             }
+            setIsLoading(false)
         })
     }, [])
 
@@ -52,20 +54,22 @@ const MapMenu: React.FC = observer(() => {
 
     return (
         <div>
-            <Starfield
-                starCount={1000}
-                starColor={[255, 255, 255]}
-                speedFactor={0.05}
-                backgroundColor="black"
-            />
-            {
-                user?.is_superuser
-                    ? <SuperUserMap/>
-                    : <EmployeeMap
-                        logOut={handleOnLogOut}
-                        user={user}
-                        formattedDate={formattedDate}
-                    />
+            {isLoading
+                ? <Starfield
+                    starCount={1000}
+                    starColor={[255, 255, 255]}
+                    speedFactor={0.05}
+                    backgroundColor="black"
+                />
+                : (
+                    user?.is_superuser
+                        ? <SuperUserMap/>
+                        : <EmployeeMap
+                            logOut={handleOnLogOut}
+                            user={user}
+                            formattedDate={formattedDate}
+                        />
+                )
             }
         </div>
     );

diff --git a/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx b/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx
@@ -30,7 +30,7 @@ const CreateUnit: React.FC<IPropTypes> =
          currentUnitId,
          availableUnits
      }) => {
-        let btnText = ""
+        let btnText: string
 
         if (unitName === "map") {
             btnText = "Удалить выбранную карту"
@@ -48,6 +48,7 @@ const CreateUnit: React.FC<IPropTypes> =
                         <option
                             key={unit.id}
                             value={unit.title}
+                            // @ts-ignore: Unreachable code error
                             onClick={() => handleOnClickOptionUnit(unit, index)}
                         >
                             {unit.title}

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -23,17 +23,21 @@ interface IModalLevelProps {
 const ModalLevelBody: React.FC<IModalLevelProps> = observer(({level}) => {
     const bodyHeader = renderBodyHeader()
 
-
     const menuItems: IMenuItemType[] = [
         {
             type: "theory",
-            length: level?.theoryUnits.length,
+            length: level.theoryUnits ? level.theoryUnits.length : 0,
             item: level?.theoryUnits
         },
         {
-            length: level?.taskUnits.length,
+            length: level.taskUnits ? level?.taskUnits.length : 0,
             type: "tests",
             item: level?.taskUnits
+        },
+        {
+            type: "task",
+            length: level.taskUnits ? level?.taskUnits.length : 0,
+            item: level?.taskUnits
         }
     ]
 
@@ -101,18 +105,23 @@ const ModalLevelBody: React.FC<IModalLevelProps> = observer(({level}) => {
                         </form>
                     </div>
                 )
+            case ("task"):
+                return (
+                    <div>
+                        {unit.title}
+                        {unit.content}
+                    </div>
+                )
             default:
                 return (<div>Блок пуст</div>)
         }
     }
 
     function renderTasks(menuItems?: IMenuItemType[], theoryUnits?: ITheoryUnitType[], taskUnits?: ITaskType[]) {
-        console.log(levelStore.chosenTaskIndex)
         if (menuItems && levelStore.chosenTaskIndex <= menuItems[0].length)
             return renderChosenTask(theoryUnits[levelStore.chosenTaskIndex - 1], "theory")
         if (menuItems && levelStore.chosenTaskIndex <= menuItems[0].length + menuItems[1].length)
             return renderChosenTask(taskUnits[levelStore.chosenTaskIndex - menuItems[0].length - 1], "test")
-
     }
 
     return (

diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
@@ -1,16 +1,18 @@
 import {makeAutoObservable} from "mobx";
 import axios from "axios";
 
-
 class AuthStore {
     isUserAuthorized: boolean = false
-
-    // userRole: string | null = null
+    nickname: string | null = null
 
     constructor() {
         makeAutoObservable(this)
     }
 
+    setUser(nickname: string) {
+        this.nickname = nickname
+    }
+
     async signIn(login: string, password: string) {
         await axios.post("http://localhost:8000/auth/login", {
             username: login,

diff --git a/frontend/src/types/UserType.ts b/frontend/src/types/UserType.ts
@@ -1,6 +1,7 @@
 export interface IUserType {
     username: string,
     email: string,
+    id: string,
     registered_at: string,
     is_superuser: boolean
 }