diff --git a/src/frontend/server.js b/src/frontend/server.js deleted file mode 100644 index 5d61175..0000000 --- a/src/frontend/server.js +++ /dev/null @@ -1,23 +0,0 @@ -// EMULATOR - -const io = require("socket.io")(4000, { - cors: { - origin: "*", // Разрешить все источники - }, -}); - -const devices = [ - { id: 1, name: "Устройство 1", lat: 59.9343, lng: 30.3351, timestamp: Date.now() }, // Санкт-Петербург - { id: 2, name: "Устройство 2", lat: 59.9400, lng: 30.3000, timestamp: Date.now() }, // Санкт-Петербург -]; - -setInterval(() => { - // Имитируем обновление местоположения - devices.forEach(device => { - device.lat += (Math.random() - 0.5) * 0.01; - device.lng += (Math.random() - 0.5) * 0.01; - device.timestamp = Date.now(); - }); - - io.emit("deviceLocationUpdate", devices); // Отправляем обновленные данные клиенту -}, 5000); // Обновляем данные каждые 5 секунд \ No newline at end of file diff --git a/src/frontend/src/Services/Server.js b/src/frontend/src/Services/Server.js index 39aaa5e..cf4f25c 100644 --- a/src/frontend/src/Services/Server.js +++ b/src/frontend/src/Services/Server.js @@ -39,6 +39,10 @@ export const ServerRequest = async (req, type, data = null) => { } }; -export const ServerWebsocketRequest = async () => { - +export const giveMeServerWebsocketRequestAddress = async (groupHash = null) => { + if (groupHash === null) { + groupHash = Math.random().toString(12).substring(2); // генерируем хэш группы + } + const ADDRESS = "ws://localhost:8080/ws/connect?userToken=1&groupHash=" + groupHash; // адрес сервера + return ADDRESS } \ No newline at end of file diff --git a/src/frontend/src/pages/Connections.js b/src/frontend/src/pages/Connections.js index 1e367c4..491d307 100644 --- a/src/frontend/src/pages/Connections.js +++ b/src/frontend/src/pages/Connections.js @@ -41,7 +41,7 @@ const Connections = () => { - {websocketUrl &&

Подключено по WebSocket: {websocketUrl}

} + {websocketUrl &&

Установлены значения: {websocketUrl}

} ); diff --git a/src/frontend/src/pages/Dashboard.js b/src/frontend/src/pages/Dashboard.js index 0e008ff..6bbce4e 100644 --- a/src/frontend/src/pages/Dashboard.js +++ b/src/frontend/src/pages/Dashboard.js @@ -8,7 +8,6 @@ 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); // Указатель монтирования @@ -24,7 +23,10 @@ const Dashboard = () => { const [selectedBaseStation, setSelectedBaseStation] = useState(null); // Состояние для выбранной базовой станции const [mapSettings, setMapSettings] = useState({maxHeight: 20, coordX: 0, coordY: 0, }); // Настройки карты + const [isModalOpen, setIsModalOpen] = useState(false); + const openModal = () => setIsModalOpen(true); + const closeModal = () => setIsModalOpen(false); const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 }); // контекстное меню сцены @@ -216,8 +218,50 @@ const Dashboard = () => { {/* TODO: USERS BADGE */}

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

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

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

+ + +
*/} + {/* END NAVBAR TEST */} + + +

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

+ + +
+ +

Поиск

+ + +
+ + +

Удаление

+

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

+ + +
+ + +

Загрузка JSON

+

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

+ + + +
+ + +

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

+ + +
+ +

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

@@ -230,15 +274,15 @@ const Dashboard = () => {
+ +
+ + + + + + + +
diff --git a/src/frontend/src/pages/Main.js b/src/frontend/src/pages/Main.js index 7bc6017..10fae76 100644 --- a/src/frontend/src/pages/Main.js +++ b/src/frontend/src/pages/Main.js @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import '../css/Custom/Main.css'; -import { ServerRequest } from '../Services/Server'; +import { ServerRequest, giveMeServerWebsocketRequestAddress } from '../Services/Server'; const Main = () => { const [rooms, setRooms] = useState(null) @@ -8,8 +8,11 @@ const Main = () => { useEffect(() => { connectSimulation() }, []) + + const createSimulation = () => { // POST $BASE_ADDR/createSimulation?userToken=? + } const connectSimulation = () => { @@ -29,7 +32,11 @@ const Main = () => {

Создать новую симуляцию


- + +

Присоединиться к моделированию

diff --git a/src/frontend/src/pages/components/Modal/Modal.css b/src/frontend/src/pages/components/Modal/Modal.css index 468ee9e..72e5950 100644 --- a/src/frontend/src/pages/components/Modal/Modal.css +++ b/src/frontend/src/pages/components/Modal/Modal.css @@ -1,13 +1,37 @@ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} -.m_size_fixed { - color: antiquewhite; - width: 200px; - height: 200px; +.modal-window { + background: #fff; + padding: 20px; + border-radius: 8px; + max-width: 500px; + width: 100%; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + position: relative; } -.m_black_color { - color: black; + +.modal-close-button { + position: absolute; + top: 10px; + right: 10px; + background: transparent; + border: none; + font-size: 1.5rem; + cursor: pointer; } -.m_font_scale_32 { - font-size: 32px; + +.modal-content { + margin-top: 10px; } \ No newline at end of file diff --git a/src/frontend/src/pages/components/Modal/Modal.js b/src/frontend/src/pages/components/Modal/Modal.js index 2c057e3..72bf433 100644 --- a/src/frontend/src/pages/components/Modal/Modal.js +++ b/src/frontend/src/pages/components/Modal/Modal.js @@ -1,18 +1,31 @@ -import React, { useState } from 'react'; -import Modal from 'react-modal'; -import './Modal.css' -const ModalWindow = ({ isOpen, closeModal, openModal, title }) => { - - - return ( +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom'; +import './Modal.css'; -
- -

Это модальное окно!

- -
-
- ); -} +const ModalWindow = ({ isOpen, onClose, children }) => { + useEffect(() => { + // Блокировка прокрутки фона при открытии модального окна + if (isOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } + return () => { + document.body.style.overflow = ''; + }; + }, [isOpen]); -export default ModalWindow; + if (!isOpen) return null; + + return ReactDOM.createPortal( +
+
e.stopPropagation()}> + +
{children}
+
+
, + document.body + ); +}; + +export default ModalWindow; \ No newline at end of file