diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index d687538..c489771 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "bootstrap-icons": "^1.11.3", + "js-cookie": "^3.0.5", "qrcode.react": "^4.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -13124,6 +13125,14 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "engines": { + "node": ">=14" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index 8115113..597268c 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -7,6 +7,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "bootstrap-icons": "^1.11.3", + "js-cookie": "^3.0.5", "qrcode.react": "^4.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/frontend/public/phone_tower.glb b/src/frontend/public/phone_tower.glb new file mode 100644 index 0000000..0ac75d9 Binary files /dev/null and b/src/frontend/public/phone_tower.glb differ diff --git a/src/frontend/public/recources/moxitech.webp b/src/frontend/public/recources/moxitech.webp new file mode 100644 index 0000000..ff3cb1d Binary files /dev/null and b/src/frontend/public/recources/moxitech.webp differ diff --git a/src/frontend/src/Services/Local.js b/src/frontend/src/Services/Local.js index 68d1eea..5b3175c 100644 --- a/src/frontend/src/Services/Local.js +++ b/src/frontend/src/Services/Local.js @@ -1,4 +1,5 @@ +import Cookies from 'js-cookie'; export const LocalSimulationJson = () => { @@ -7,4 +8,19 @@ export const LocalSimulationJson = () => { return { "TODO": "JSON RETURN" } -} \ No newline at end of file +} + +// Функция для установки куки +export const setCustomCookie = (key, value, options = {}) => { + Cookies.set(key, value, { ...options }); +}; + +// Функция для получения куки +export const getCustomCookie = (key) => { + return Cookies.get(key); +}; + +// Функция для удаления куки +export const removeCustomCookie = (key) => { + Cookies.remove(key); +}; \ No newline at end of file diff --git a/src/frontend/src/Sidebar.css b/src/frontend/src/Sidebar.css index 3951c9b..910bb10 100644 --- a/src/frontend/src/Sidebar.css +++ b/src/frontend/src/Sidebar.css @@ -1,6 +1,6 @@ .sidebar { width: 200px; - height: 100vh; + height: 120vh; background-color: #2c3e50; color: white; padding: 20px; diff --git a/src/frontend/src/pages/Dashboard.js b/src/frontend/src/pages/Dashboard.js index 6bbce4e..8b08abf 100644 --- a/src/frontend/src/pages/Dashboard.js +++ b/src/frontend/src/pages/Dashboard.js @@ -1,14 +1,14 @@ import React, { useEffect, useRef, useState } from 'react'; import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'; -import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'; 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 './Dashboard.css'; -// import { NavBar } from './components/Navbar/Navbar'; + + const Dashboard = () => { const mountRef = useRef(null); // Указатель монтирования const sceneRef = useRef(null); // Указатель на сцену @@ -23,10 +23,59 @@ const Dashboard = () => { const [selectedBaseStation, setSelectedBaseStation] = useState(null); // Состояние для выбранной базовой станции const [mapSettings, setMapSettings] = useState({maxHeight: 20, coordX: 0, coordY: 0, }); // Настройки карты - const [isModalOpen, setIsModalOpen] = useState(false); + const [objectType, setObjectType] = useState(1); // 1 = Drone, 2 = Base Station + const [formObjectData, setFormObjectData] = useState({ + name: "", + type: 1, + coordinates_x: 0, + coordinates_y: 0, + coordinates_z: 0, + droneField1: "", + droneField2: "", + baseStationField1: "", + baseStationField2: "" + }); + + + const handleTypeChange = (type) => { + setObjectType(type); + setFormData({ ...formData, type }); + }; + + + + + + + + // Одно состояние для управления всеми модальными окнами + const [modals, setModals] = useState({ + isModalOpen: false, + isModalAddOpen: false, + isModalDeleteOpen: false, + isModalSearchOpen: false, + isModalMapOpen: false, + }); + + // Функция открытия модального окна в зависимости от переданной строки + const openModal = (modalName) => { + setModals((prevModals) => ({ + ...prevModals, + [modalName]: true, + })); + }; + + // Функция закрытия всех модальных окон + const closeAllModals = () => { + setModals({ + isModalOpen: false, + isModalAddOpen: false, + isModalDeleteOpen: false, + isModalSearchOpen: false, + }); + }; + - const openModal = () => setIsModalOpen(true); - const closeModal = () => setIsModalOpen(false); const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 }); // контекстное меню сцены @@ -139,6 +188,9 @@ const Dashboard = () => { drones.forEach(droneData => { scene.add(droneData.getObject()); }); + baseStation.forEach(b => { + scene.add(b.getObject()); + }); // Обработка нажатия ПКМ renderer.domElement.addEventListener('contextmenu', (event) => { @@ -168,39 +220,62 @@ const Dashboard = () => { sceneRef.current.add(drone.getObject()); } }; + // Добавление дрона в сцену + const handleAddBaseStation = () => { + if (sceneRef.current) { + const current = Date.now(); + const base = new BaseStation(current / 1000); + base.setPosition(Math.random() * 20 - 10, 20, Math.random() * 20 - 10); + setBaseStation((prev) => [...prev, base]); + console.log(baseStation.map(b => b.getObject().children[0])); + sceneRef.current.add(base.getObject()); + } + }; + + // Обработчик ввода на форму высот + const handleInputChange = (event) => { + const { name, value } = event.target; + setFormData({ + ...formData, + [name]: value, + }); + }; + + // Обработчик ввода на форму объектов + const handleAddInputChange = (event) => { + const { name, value } = event.target; + setFormObjectData({ + ...formData, + [name]: value, + }); + }; - // Обработчик ввода на форму - // const handleInputChange = (event) => { - // const { name, value } = event.target; - // setFormData({ - // ...formData, - // [name]: value, - // }); - // }; // Добавление элемента карты высот (высоты) - // const handleAddHeight = (event) => { - // event.preventDefault(); - // const { x, y, height } = formData; - // const newPoint = new HeightPoint(parseInt(x), parseInt(y), parseFloat(height)); - // setHeightData((prevData) => [...prevData, newPoint]); - // setFormData({ x: '', y: '', height: '' }); - // }; + const handleAddHeight = (event) => { + event.preventDefault(); + const { x, y, height } = formData; + const newPoint = new HeightPoint(parseInt(x), parseInt(y), parseFloat(height)); + setHeightData((prevData) => [...prevData, newPoint]); + setFormData({ x: '', y: '', height: '' }); + }; // Изменение настроек - // const handleSettingsChange = (event) => { - // const { name, value } = event.target; - // setMapSettings({ - // ...mapSettings, - // [name]: value, - // }); - // }; + const handleSettingsChange = (event) => { + const { name, value } = event.target; + setMapSettings({ + ...mapSettings, + [name]: value, + }); + }; // Открытие контекстного меню const handleContextMenuClick = (action) => { - if (action === 'add') { + if (action === 'add_base'){ + handleAddBaseStation(); + } + else if (action === 'add') { handleAddDrone(); - console.log('Добавить объект'); } else if (action === 'save') { console.log('Сохранить промежуточный результат'); } @@ -218,53 +293,238 @@ const Dashboard = () => { {/* TODO: USERS BADGE */}

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

+ - {/* TEST */} - {/* - -

Кастомное содержимое

- - - */} - {/* END NAVBAR TEST */} - - -

Добавление объекта

- - + +
+
+
+
+
Добавление объекта
+ +
+
+
+ +
+
+ handleTypeChange(1)} + /> + +
+
+ handleTypeChange(2)} + /> + +
+
+
+ +
+ + +
+ +
+ +
+ X + +
+
+ Y + +
+
+ Z + +
+
+ + {objectType === 1 && ( + <> +
+ + +
+
+ + +
+ + )} + + {objectType === 2 && ( + <> +
+ + +
+
+ + +
+ + )} +
+
+ + +
+
+
+
- +

Поиск

 - +

Удаление

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

- + - +

Загрузка JSON

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

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

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

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

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

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

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

+

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

{