добавление карты, модуля, уровня v1

codEnjoyer · Dec 14, 2023 · 2e8a823 · 2e8a823
1 parent adc47bd
commit 2e8a823
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 39 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,7 +24,8 @@
     "react-starfield": "^1.0.3",
     "sass": "^1.69.5",
     "serve": "^14.2.1",
-    "sort-by": "^0.0.2"
+    "sort-by": "^0.0.2",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/progressbar.js": "^1.1.7",

diff --git a/frontend/src/UIComponents/customInput/CustomInput.tsx b/frontend/src/UIComponents/customInput/CustomInput.tsx
@@ -18,7 +18,7 @@ interface IPropTypes {
     register?: UseFormRegister<FormValues>,
     required?: boolean,
     value?: string,
-    handleOnChange?: (e: string) => void,
+    handleOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
 }
 
 const CustomInput: React.FC<IPropTypes> =
@@ -53,7 +53,7 @@ const CustomInput: React.FC<IPropTypes> =
                     {...register !== undefined && name !== undefined ? {...register(name, validateRules)} : ""}
                     {...inputProps}
                     value={value}
-                    onChange={(e) => handleOnChange ? (e.target.value) : undefined}
+                    onChange={(e) => handleOnChange ? handleOnChange(e) : undefined}
                 />
                 {/*{error.message && <span className="custom-input__error">{error.message}</span>}*/}
             </div>

diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx
@@ -28,9 +28,9 @@ const AuthForm: React.FC = observer(() => {
     }, [isPasswordShows])
 
     const onHandleSubmit = useCallback((data: { login: string, password: string }) => {
-        // authStore.signIn(data.login, data.password).then(() => navigateTo('/map'))
-        authStore.authorize()
-        navigateTo('/map')
+        authStore.signIn(data.login, data.password).then(() => navigateTo('/map'))
+        // authStore.authorize()
+        // navigateTo('/map')
     }, [navigateTo])
 
     return (

diff --git a/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx b/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx
@@ -9,6 +9,7 @@ import {IMapType} from "../../../types/MapType.ts";
 import ModalWindow from "../../../UIComponents/modalWindow/ModalWindow.tsx";
 import UsersListModalBody from "./UsersListModalBody.tsx";
 import CustomAddButton from "../../../UIComponents/customAddButton/CustomAddButton.tsx";
+import {IModuleType} from "../../../types/ModuleType.ts";
 
 interface ISuperUserMap {
 
@@ -31,10 +32,34 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
         mapMenuStore.selectMap(map).then(() => mapMenuStore.changeCurrentMapIndex(indexMap))
     }, [])
 
+    const handleOnClickOptionModule = useCallback((module: IModuleType, index) => {
+        moduleMenuStore.selectModule(module).then(() => moduleMenuStore.changeCurrentModuleIndex(index))
+    }, [])
+
     const handleOnClickChangeIsModalOpen = useCallback(() => {
         setIsUserListModalOpen(!isUsersListModalOpen)
     }, [isUsersListModalOpen])
 
+
+    const handleOnChangeMapName = useCallback((e: React.FormEvent<HTMLInputElement>) => {
+        setMapName(e.currentTarget.value)
+    }, [])
+
+    const handleOnClickCreateMap = useCallback(() => {
+        mapName !== "" ? mapMenuStore.createMap(mapName) : alert("Введите название карты")
+        mapMenuStore.fetchAvailableMaps().then()
+    }, [])
+
+
+    const handleOnChangeModuleName = useCallback((e: React.FormEvent<HTMLInputElement>) => {
+        setModuleName(e.currentTarget.value)
+    }, [])
+
+    const handleOnClickCreateModule = useCallback(() => {
+        moduleName !== "" ? moduleMenuStore.createModule(moduleName) : alert("Введите название модуля")
+        moduleMenuStore.fetchModules().then()
+    }, [])
+
     return (
         <div>
             {
@@ -59,35 +84,61 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
             {/*        <option key={user.username} value={user.username}>{user.username}</option>)}*/}
             {/*</select>*/}
 
-            <div className="map-create">
+            <div className="map-creator-item map-create">
                 <CustomInput
-                    type="text" value={mapMenuStore.newNameMap}
-                    handleOnChange={(e) => mapMenuStore.changeNewMapName(e)}
+                    type="text"
+                    value={mapName}
+                    handleOnChange={handleOnChangeMapName}
                 />
                 <CustomAddButton
-                    handleOnClick={() => mapMenuStore.createMap(mapMenuStore.newNameMap)}
+                    handleOnClick={handleOnClickCreateMap}
                 />
             </div>
 
-            <div className="module-create">
-                <CustomButton text="Создать новый модуль"
-                              handleOnClick={() => mapMenuStore.createMap(mapMenuStore.newNameMap)}/>
-                <CustomInput type="text" value={mapMenuStore.newNameMap}
-                             handleOnChange={(e) => mapMenuStore.changeNewMapName(e)}/>
+            <div className="map-creator-item module-create">
+                <CustomInput
+                    type="text"
+                    value={moduleName}
+                    handleOnChange={handleOnChangeModuleName}
+                />
+                <CustomAddButton
+                    handleOnClick={handleOnClickCreateModule}
+                />
             </div>
 
             <select className="available-maps">
                 {mapMenuStore.availableMaps?.map((map, index) =>
-                    <option key={map.id} value={map.title}
-                            onClick={() => handleOnClickOptionMap(map, index)}>{map.title}</option>)}
+                    <option
+                        key={map.id}
+                        value={map.title}
+                        onClick={() => handleOnClickOptionMap(map, index)}
+                    >
+                        {map.title}
+                    </option>)
+                }
             </select>
-            <CustomButton text="Удалить выбранную карту" additionalClassName="delete-map__btn"
-                          handleOnClick={() => mapMenuStore.deleteMap(mapMenuStore.mapMenu?.id)}/>
+            <CustomButton
+                text="Удалить выбранную карту"
+                additionalClassName="delete-map__btn"
+                handleOnClick={() => mapMenuStore.deleteMap(mapMenuStore.mapMenu?.id)}
+            />
 
-            {/*<select className="available-modules">*/}
-            {/*    {moduleMenuStore.availableModules.map((module) =>*/}
-            {/*        <option key={module.id} value={module.title}>{module.title}</option>)}*/}
-            {/*</select>*/}
+            <select className="available-modules">
+                {moduleMenuStore.availableModules.map((module, index) =>
+                    <option
+                        key={module.id}
+                        value={module.title}
+                        onClick={() => handleOnClickOptionModule(module, index)}
+                    >
+                        {module.title}
+                    </option>)
+                }
+            </select>
+            <CustomButton
+                text="Удалить выбранный модуль"
+                additionalClassName="delete-module__btn"
+                handleOnClick={() => moduleMenuStore.deleteModule(moduleMenuStore.currentModule?.id)}
+            />
         </div>
     );
 });

diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
@@ -30,15 +30,15 @@ class AuthStore {
         axios.post("http://localhost:8000/auth/logout").catch(reason => console.log(reason))
     }
 
-    authorize = () => {
-        this.isUserAuthorized = true
-    }
-
     private unauthorize = () => {
         this.isUserAuthorized = false
     }
 
-    private async signUp(login: string, password: string) {
+    private authorize = () => {
+        this.isUserAuthorized = true
+    }
+
+    private async signUp(login: string, password: string,) {
         axios.post("http://localhost:8000/auth/register", {
             username: login,
             password: password

diff --git a/frontend/src/store/levelStore.ts b/frontend/src/store/levelStore.ts
@@ -1,4 +1,7 @@
 import {makeAutoObservable} from "mobx";
+import axios from "axios";
+import mapMenuStore from "./mapMenuStore.ts";
+import {IModuleType} from "../types/ModuleType.ts";
 
 class levelStore {
     chosenTaskIndex: number = 1
@@ -14,6 +17,14 @@ class levelStore {
     closeLevel() {
         this.chosenTaskIndex = 1
     }
+
+    async fetchLevels() {
+        await axios.get("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/")
+            .then((response) => {
+                this.setAvailableModules([])
+                this.setAvailableModules(response.data.filter((module: IModuleType) => module.map_id === mapMenuStore.currentMapId))
+            })
+    }
 }
 
 export default new levelStore()
diff --git a/frontend/src/store/moduleMenuStore.ts b/frontend/src/store/moduleMenuStore.ts
@@ -2,12 +2,15 @@ import {makeAutoObservable} from "mobx";
 import {IModuleType} from "../types/ModuleType.ts";
 import axios from "axios";
 import mapMenuStore from "./mapMenuStore.ts";
+import {v4 as uuidv4} from 'uuid';
+import levelStore from "./levelStore.ts";
 
 class ModuleMenuStore {
     currentModuleId: string | null = null
     modulesMap: string[] = []
     availableModules: IModuleType[] = []
     currentModule: IModuleType | null = null
+    currentModuleIndex: number = 0
 
     constructor() {
         makeAutoObservable(this)
@@ -21,8 +24,14 @@ class ModuleMenuStore {
         this.availableModules = modules
     }
 
-    setCurrentModule(newModule: IModuleType) {
+    async selectModule(newModule: IModuleType) {
         this.currentModule = newModule
+        this.currentModuleId = newModule.id
+    }
+
+    changeCurrentModuleIndex(newIndex: number) {
+        this.currentModuleIndex = newIndex
+        this.fetchModuleById(this.availableModules[this.currentModuleIndex].id).then(() => levelStore.fetchLevels())
     }
 
     async fetchModules() {
@@ -33,24 +42,27 @@ class ModuleMenuStore {
             })
     }
 
-    async createModule(mapId: string, title: string, previousModuleId: string, nextModuleId: string) {
-        axios.post("http://localhost:8000/maps/" + mapId + "/modules/", {
-            map_id: mapId,
+    async createModule(title: string) {
+        const newId = uuidv4();
+
+        await axios.post("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/", {
+            map_id: mapMenuStore.currentMapId,
             title: title,
-            previous_module_id: previousModuleId,
-            next_module_id: nextModuleId,
+            previous_module_id: newId,
+            next_module_id: newId,
         })
     }
 
     async fetchModuleById(id: string) {
         await axios.get("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/" + id).then((response) => {
-            this.setCurrentModule(response.data)
+            this.selectModule(response.data)
             this.currentModuleId = response.data.id
         })
     }
 
-    async deleteModule(id: string) {
-        axios.delete("http://localhost:8000/modules/" + id)
+    async deleteModule(id?: string) {
+        console.log(id)
+        axios.delete("http://localhost:8000/modules/" + id).catch(() => alert("Выберите модуль"))
     }
 
     updateModuleById(mapId: string, id: string, title?: string, previousModuleId?: string, nextModuleId?: string, levels?: string[]) {

diff --git a/frontend/src/styles/mapMenu.scss b/frontend/src/styles/mapMenu.scss
@@ -162,7 +162,7 @@
   margin-bottom: 10px;
 }
 
-.map-create {
+.map-creator-item {
   display: flex;
   align-items: end;
   justify-content: center;