From 1116ccfb3677026e58c965890bb466072c720a52 Mon Sep 17 00:00:00 2001 From: moxitech Date: Mon, 14 Oct 2024 05:05:29 +0700 Subject: [PATCH] Refactoring Dashboard.js => hooks & state --- src/frontend/src/pages/ContextMenu/CtxMenu.js | 30 ++ src/frontend/src/pages/Dashboard.js | 459 +++--------------- .../src/pages/MainScreen/ProgramInterface.js | 78 +++ src/frontend/src/pages/Modal/MAdd.js | 209 ++++++++ src/frontend/src/pages/Modal/MDelete.js | 14 + src/frontend/src/pages/Modal/MJson.js | 15 + src/frontend/src/pages/Modal/MMap.js | 69 +++ src/frontend/src/pages/Modal/MSearch.js | 18 + .../helpers/generateRandomHeightPoints.js | 11 - 9 files changed, 487 insertions(+), 416 deletions(-) create mode 100644 src/frontend/src/pages/ContextMenu/CtxMenu.js create mode 100644 src/frontend/src/pages/MainScreen/ProgramInterface.js create mode 100644 src/frontend/src/pages/Modal/MAdd.js create mode 100644 src/frontend/src/pages/Modal/MDelete.js create mode 100644 src/frontend/src/pages/Modal/MJson.js create mode 100644 src/frontend/src/pages/Modal/MMap.js create mode 100644 src/frontend/src/pages/Modal/MSearch.js delete mode 100644 src/frontend/src/pages/helpers/generateRandomHeightPoints.js diff --git a/src/frontend/src/pages/ContextMenu/CtxMenu.js b/src/frontend/src/pages/ContextMenu/CtxMenu.js new file mode 100644 index 0000000..7fa6196 --- /dev/null +++ b/src/frontend/src/pages/ContextMenu/CtxMenu.js @@ -0,0 +1,30 @@ +import React from 'react'; + +export const CtxMenu = ({contextMenu, handleContextMenuClick }) => { + return ( + <> + {contextMenu.visible && ( + + )} + + ) +} \ No newline at end of file diff --git a/src/frontend/src/pages/Dashboard.js b/src/frontend/src/pages/Dashboard.js index 8ba9860..05ffb14 100644 --- a/src/frontend/src/pages/Dashboard.js +++ b/src/frontend/src/pages/Dashboard.js @@ -4,18 +4,23 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import Drone from './model/Drone'; import BaseStation from './model/BaseStation'; import HeightPoint from './model/HeightPoint'; -import { RandomHeightPoint } from './helpers/generateRandomHeightPoints' -import ModalWindow from './components/Modal/Modal'; import { getCustomCookie } from '../Services/Local'; import useWebsocketConnection, { DeleteSignal, spawnJsonSignal, RunSimulatorSignal } from '../Services/WebsocketHook'; import './Dashboard.css'; +import { ModalDelete } from './Modal/MDelete'; +import { ModalAdd } from './Modal/MAdd'; +import { ModalSearch } from './Modal/MSearch'; +import { ModalJson } from './Modal/MJson'; +import { ModalMap } from './Modal/MMap'; +import { CtxMenu } from './ContextMenu/CtxMenu'; +import { ProgramInterface } from './MainScreen/ProgramInterface'; const Dashboard = () => { const mountRef = useRef(null); // Указатель монтирования const sceneRef = useRef(null); // Указатель на сцену const {websocketStruct, sendMessage} = useWebsocketConnection(getCustomCookie("userToken"), 1); - const [heightData, setHeightData] = useState(RandomHeightPoint()); // Высоты + const [heightData, setHeightData] = useState([new HeightPoint()]); // Высоты const [formData, setFormData] = useState({ x: '', y: '', height: '' }); // Форма для ввода данных карты const [mouseState, setMouseState] = useState({ x: 0, y: 0, z: 0 }); // Форма для ввода данных карты const [drones, setDrones] = useState([]) // Все дроны @@ -66,7 +71,8 @@ const Dashboard = () => { } }); setSelectedDrone(foundDrone); - } else if (foundBaseStation) { + } + if (foundBaseStation) { // Выделяем найденную базу if (selectedBaseStation) { selectedBaseStation.getObject().traverse((child) => { @@ -378,7 +384,6 @@ const containsObjectRecursively = (parent, target) => { sceneRef.current.add(base.getObject()); } }; - // Обработчик ввода на форму высот const handleInputChange = (event) => { const { name, value } = event.target; @@ -387,7 +392,6 @@ const containsObjectRecursively = (parent, target) => { [name]: value, }); }; - // Обработчик ввода на форму объектов const handleAddInputChange = (event) => { const { name, value } = event.target; @@ -396,8 +400,6 @@ const containsObjectRecursively = (parent, target) => { [name]: value, }); }; - - // Добавление элемента карты высот (высоты) const handleAddHeight = (event) => { event.preventDefault(); @@ -406,7 +408,6 @@ const containsObjectRecursively = (parent, target) => { setHeightData((prevData) => [...prevData, newPoint]); setFormData({ x: '', y: '', height: '' }); }; - // Изменение настроек const handleSettingsChange = (event) => { const { name, value } = event.target; @@ -415,7 +416,6 @@ const containsObjectRecursively = (parent, target) => { [name]: value, }); }; - // Открытие контекстного меню const handleContextMenuClick = (action) => { if (action === 'add_base'){ @@ -428,414 +428,63 @@ const containsObjectRecursively = (parent, target) => { } setContextMenu({ ...contextMenu, visible: false }); }; - - // IS LOADING - // return (
- {/* TODO: USERS BADGE */}

Drone Network Simulator - окно разработки

- + - -
-
-
-
-
Добавление объекта
- -
-
-
- -
-
- handleTypeChange(1)} - /> - -
-
- handleTypeChange(2)} - /> - -
-
-
-
- - -
+ -
- -
- X - -
-
- Y - -
-
- Z - -
-
-
- -
- Радиус антенны - -
-
- Направление X - -
-
- Направление Y - -
-
- Направление Z - -
-
- Модуляция - -
-
- Пропускная способность - -
-
- Скорость - -
- -
+ - {objectType === 1 && ( - <> -
- - -
-
- - -
-
- - -
- - )} + -
-
- - -
-
-
-
- - - -

Поиск

- setSearchTerm(e.target.value)} - /> - - - - -

Удаление

-

Вы точно хотите удалить объект X?

- - - - - -

Загрузка JSON

-

Выберите или переташите файл для загрузки

- - - - - - {/* Форма для добавления новых высот */} - -

Настройки карты

-
-
-
-
- - -
-
- - -
-
- - -
- -
-
- {/* Настройки карты */} -
-
-

Настройки карты

-
- - -
-
-
-
- - - + {/* Окно программы */} -
-
-

X: {mouseState.x} Y: {mouseState.y} Z: {mouseState.z}

-
-
- -
-
-

Websocket data

- {websocketStruct ? ( - 
{JSON.stringify(websocketStruct, null, 2)}
- ) : ( -

Waiting for WebSocket data...

- )} -
- {/* Контекстное меню */} - {contextMenu.visible && ( -
    -
    -
    -
  • handleContextMenuClick('add')}>Добавить объект
    • -
  • handleContextMenuClick('add_base')}>Добавить базовую станцию
    • -
  • handleContextMenuClick('save')}>Сохранить промежуточный результат
    • -
  • handleContextMenuClick('cancel')}>Отмена
    • -
    -
- )} + +
); diff --git a/src/frontend/src/pages/MainScreen/ProgramInterface.js b/src/frontend/src/pages/MainScreen/ProgramInterface.js new file mode 100644 index 0000000..76e2ed2 --- /dev/null +++ b/src/frontend/src/pages/MainScreen/ProgramInterface.js @@ -0,0 +1,78 @@ + + + +export const ProgramInterface = ({mouseState, mountRef, openModal, sendMessage, RunSimulatorSignal, getCustomCookie}) => { + return ( +
+
+

X: {mouseState.x} Y: {mouseState.y} Z: {mouseState.z}

+
+
+ +
+ ) +} \ No newline at end of file diff --git a/src/frontend/src/pages/Modal/MAdd.js b/src/frontend/src/pages/Modal/MAdd.js new file mode 100644 index 0000000..f041590 --- /dev/null +++ b/src/frontend/src/pages/Modal/MAdd.js @@ -0,0 +1,209 @@ +import React from 'react'; +import ModalWindow from '../components/Modal/Modal'; + + +export const ModalAdd = ({isModalAddOpen, objectType, formObjectData, modalAddDroneOrBaseStation, closeAllModals, handleAddInputChange, handleTypeChange}) => { + return ( + +
+
+
+
+
Добавление объекта
+ +
+
+
+ +
+
+ handleTypeChange(1)} + /> + +
+
+ handleTypeChange(2)} + /> + +
+
+
+ +
+ + +
+ +
+ +
+ X + +
+
+ Y + +
+
+ Z + +
+
+
+ +
+ Радиус антенны + +
+
+ Направление X + +
+
+ Направление Y + +
+
+ Направление Z + +
+
+ Модуляция + +
+
+ Пропускная способность + +
+
+ Скорость + +
+ +
+ + {objectType === 1 && ( + <> +
+ + +
+
+ + +
+
+ + +
+ + )} + +
+
+ + +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/frontend/src/pages/Modal/MDelete.js b/src/frontend/src/pages/Modal/MDelete.js new file mode 100644 index 0000000..d99c5ea --- /dev/null +++ b/src/frontend/src/pages/Modal/MDelete.js @@ -0,0 +1,14 @@ +import React from 'react'; +import ModalWindow from '../components/Modal/Modal'; + + +export const ModalDelete = ({isModalDeleteOpen, closeAllModals, handleDeleteSignal}) => { + return ( + +

Удаление

+

Вы точно хотите удалить объект X?

+ + + + ) +} \ No newline at end of file diff --git a/src/frontend/src/pages/Modal/MJson.js b/src/frontend/src/pages/Modal/MJson.js new file mode 100644 index 0000000..2001d05 --- /dev/null +++ b/src/frontend/src/pages/Modal/MJson.js @@ -0,0 +1,15 @@ +import React from 'react'; +import ModalWindow from '../components/Modal/Modal'; + + +export const ModalJson= ({isModalOpen, closeAllModals}) => { + return ( + +

Загрузка JSON

+

Выберите или переташите файл для загрузки

+ + + + + ) +} \ No newline at end of file diff --git a/src/frontend/src/pages/Modal/MMap.js b/src/frontend/src/pages/Modal/MMap.js new file mode 100644 index 0000000..814a5ad --- /dev/null +++ b/src/frontend/src/pages/Modal/MMap.js @@ -0,0 +1,69 @@ +import React from 'react'; +import ModalWindow from '../components/Modal/Modal'; + + +export const ModalMap = ({isModalMapOpen, closeAllModals, handleAddHeight, formData, handleInputChange, mapSettings, handleSettingsChange}) => { + return ( + +

Настройки карты

+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {/* Настройки карты */} +
+
+

Настройки карты

+
+ + +
+
+
+
+ + + + ) +} \ No newline at end of file diff --git a/src/frontend/src/pages/Modal/MSearch.js b/src/frontend/src/pages/Modal/MSearch.js new file mode 100644 index 0000000..f7d0609 --- /dev/null +++ b/src/frontend/src/pages/Modal/MSearch.js @@ -0,0 +1,18 @@ +import React from 'react'; +import ModalWindow from '../components/Modal/Modal'; + + +export const ModalSearch = ({isModalSearchOpen, closeAllModals, handleSearch, searchTerm, setSearchTerm}) => { + return ( + +

Поиск

+ setSearchTerm(e.target.value)} + /> + + + ) +} \ No newline at end of file diff --git a/src/frontend/src/pages/helpers/generateRandomHeightPoints.js b/src/frontend/src/pages/helpers/generateRandomHeightPoints.js deleted file mode 100644 index 50847dd..0000000 --- a/src/frontend/src/pages/helpers/generateRandomHeightPoints.js +++ /dev/null @@ -1,11 +0,0 @@ -import HeightPoint from '../model/HeightPoint'; - -export const RandomHeightPoint = () => { - let result = []; - for (let i = 0; i < 100; i++) { - for (let j = 0; j < 100; j++) { - result.push(new HeightPoint(i, j, Math.random() * 10 + 1)); - } - } - return result; -};