From 2e8a8236746e024fd9dfdf08cb08ce8ea8f12d0b Mon Sep 17 00:00:00 2001 From: semantics Date: Thu, 14 Dec 2023 13:13:49 +0500 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=B0=D1=80=D1=82=D1=8B,=20=D0=BC?= =?UTF-8?q?=D0=BE=D0=B4=D1=83=D0=BB=D1=8F,=20=D1=83=D1=80=D0=BE=D0=B2?= =?UTF-8?q?=D0=BD=D1=8F=20v1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 15 +++- frontend/package.json | 3 +- .../UIComponents/customInput/CustomInput.tsx | 4 +- .../components/authentication/AuthForm.tsx | 6 +- .../mapMenu/SuperUserMap/SuperUserMap.tsx | 85 +++++++++++++++---- frontend/src/store/authStore.ts | 10 +-- frontend/src/store/levelStore.ts | 11 +++ frontend/src/store/moduleMenuStore.ts | 30 +++++-- frontend/src/styles/mapMenu.scss | 2 +- 9 files changed, 127 insertions(+), 39 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 52efe1f..db31455 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -22,7 +22,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", @@ -3628,6 +3629,18 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 4c3a9f2..7337f0c 100644 --- 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 index ebc0e1c..26fda54 100644 --- a/frontend/src/UIComponents/customInput/CustomInput.tsx +++ b/frontend/src/UIComponents/customInput/CustomInput.tsx @@ -18,7 +18,7 @@ interface IPropTypes { register?: UseFormRegister, required?: boolean, value?: string, - handleOnChange?: (e: string) => void, + handleOnChange?: (e: React.FormEvent) => void, } const CustomInput: React.FC = @@ -53,7 +53,7 @@ const CustomInput: React.FC = {...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 && {error.message}}*/} diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx index a2b1ce8..1c4b4c5 100644 --- 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 index 02c87fb..e9cc92b 100644 --- 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 = 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) => { + setMapName(e.currentTarget.value) + }, []) + + const handleOnClickCreateMap = useCallback(() => { + mapName !== "" ? mapMenuStore.createMap(mapName) : alert("Введите название карты") + mapMenuStore.fetchAvailableMaps().then() + }, []) + + + const handleOnChangeModuleName = useCallback((e: React.FormEvent) => { + setModuleName(e.currentTarget.value) + }, []) + + const handleOnClickCreateModule = useCallback(() => { + moduleName !== "" ? moduleMenuStore.createModule(moduleName) : alert("Введите название модуля") + moduleMenuStore.fetchModules().then() + }, []) + return (
{ @@ -59,35 +84,61 @@ const SuperUserMap: React.FC = observer(() => { {/* )}*/} {/**/} -
+
mapMenuStore.changeNewMapName(e)} + type="text" + value={mapName} + handleOnChange={handleOnChangeMapName} /> mapMenuStore.createMap(mapMenuStore.newNameMap)} + handleOnClick={handleOnClickCreateMap} />
-
- mapMenuStore.createMap(mapMenuStore.newNameMap)}/> - mapMenuStore.changeNewMapName(e)}/> +
+ +
- mapMenuStore.deleteMap(mapMenuStore.mapMenu?.id)}/> + mapMenuStore.deleteMap(mapMenuStore.mapMenu?.id)} + /> - {/**/} + + moduleMenuStore.deleteModule(moduleMenuStore.currentModule?.id)} + />
); }); diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts index 6cd31fc..5d73740 100644 --- 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 index 1fab95d..47d7551 100644 --- 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 index 2a50c1e..2934a8f 100644 --- 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 index 7051794..41ac5fe 100644 --- 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;