modal window

src/frontend/server.js

@@ -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 секунд

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
 }

src/frontend/src/pages/Connections.js

@@ -41,7 +41,7 @@ const Connections = () => {
           <button type="submit">Подключиться</button>
         </form>
 
-        {websocketUrl && <p>Подключено по WebSocket: {websocketUrl}</p>}
+        {websocketUrl && <p>Установлены значения: {websocketUrl}</p>}
       </div>
     </div>
   );

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,7 +218,49 @@ const Dashboard = () => {
         {/* TODO: USERS BADGE */}
         <h4><b>Drone</b> Network Simulator - окно разработки</h4>
       </div>
-      {/* <NavBar/> */}
+      
+      {/* <NavBar/> TEST */}
+      {/* <button onClick={openModal}>Открыть модальное окно</button>
+      <ModalWindow isOpen={isModalOpen} onClose={closeModal}>
+        <h2>Кастомное содержимое</h2>
+        <input type="text" placeholder="Введите текст" />
+        <button onClick={() => alert('Действие!')}>Добавить</button>
+      </ModalWindow> */}
+      {/* END NAVBAR TEST  */}
+      
+      <ModalWindow isOpen={isModalOpen} onClose={closeModal}>
+        <h2>Добавление объекта</h2>
+        <input type="text" placeholder="Введите название" />
+        <button onClick={() => alert('Добавлено')}>Добавить</button>
+      </ModalWindow>
+
+      <ModalWindow isOpen={isModalOpen} onClose={closeModal}>
+        <h2>Поиск</h2>
+        <input type="text" placeholder="Введите имя" />
+        <button onClick={() => alert('Добавлено')}>Выбор</button>
+      </ModalWindow>
+
+      <ModalWindow isOpen={isModalOpen} onClose={closeModal}>
+        <h2>Удаление</h2>
+        <h2>Вы точно хотите удалить объект X?</h2>
+        <button onClick={closeModal}>Отмена</button>
+        <button onClick={() => alert('Удалено')}>Удалить</button>
+      </ModalWindow>
+
+      <ModalWindow isOpen={isModalOpen} onClose={closeModal}>
+        <h2>Загрузка JSON</h2>
+        <p>Выберите или переташите файл для загрузки</p>
+        <input type='file'/>
+        <button onClick={closeModal}>Отмена</button>
+        <button onClick={() => alert('Загружено')}>Загрузить</button>
+      </ModalWindow>
+
+      <ModalWindow isOpen={isModalOpen} onClose={closeModal}>
+        <h2>Настройки карты</h2>
+        <button onClick={closeModal}>Отмена</button>
+        <button onClick={() => alert('Обновлена карта!')}>Готово</button>
+      </ModalWindow>
+
       
       <div className='coler-border'>
         <div>
@@ -230,15 +274,15 @@ const Dashboard = () => {
         <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
           <div class="btn-group me-2" role="group" aria-label="First group">
             
-            <button type="button" class="btn btn-success">
+            <button type="button" onClick={openModal} class="btn btn-success">
               <i class="bi-plus"/>Добавить
             </button>
 
-            <button type="button" class="btn btn-success">
+            <button type="button" onClick={openModal} class="btn btn-success">
               <i class="bi-trash"/>Удалить
             </button>
             
-            <button type="button" class="btn btn-success">
+            <button type="button" onClick={openModal} class="btn btn-success">
               <i class="bi-search"/>Выбрать
             </button>
             
@@ -262,12 +306,28 @@ const Dashboard = () => {
             </button>
             
             {/* <button type="button" class="btn btn-secondary">6</button> */}
-            </div>
+          </div>
           <div class="btn-group" role="group" aria-label="Third group">
             <button type="button" class="btn btn-info">
               <i class="bi-play"/>
             </button>
           </div>
+
+          <div class="btn-group me-2" role="group" aria-label="Последние 3 симуляции">
+            
+            <button type="button" class="btn btn-info">
+              <i class="bi-play"/> Симуляция : 01:00:04 
+            </button>
+            
+            <button type="button" class="btn btn-info">
+              <i class="bi-play"/> Симуляция : 03:00:04 
+            </button>
+
+            <button type="button" class="btn btn-info">
+              <i class="bi-play"/> Симуляция : 03:00:04 
+            </button>
+
+          </div>
         </div>
       </div>
 

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 = () => {
         <div className="col">
           <h1 className="title">Создать новую симуляцию</h1>
           <hr/>
-          <button className="btn btn-primary">Create</button>
+          
+          <button className="btn btn-primary" onClick={() => giveMeServerWebsocketRequestAddress()}>
+          <div class="spinner-border text-primary" role="status"/>
+          Create
+          </button>
         </div>
         <div className="col">
           <h1 className="title">Присоединиться к моделированию</h1>

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 {
+.modal-window {
-    color: antiquewhite;
+  background: #fff;
-    width: 200px;
+  padding: 20px;
-    height: 200px;
+  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;
 }

src/frontend/src/pages/components/Modal/Modal.js

@@ -1,18 +1,31 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
-import Modal from 'react-modal';
+import ReactDOM from 'react-dom';
-import './Modal.css'
+import './Modal.css';
-const ModalWindow = ({ isOpen, closeModal, openModal, title }) => {
 
+const ModalWindow = ({ isOpen, onClose, children }) => {
+  useEffect(() => {
+    // Блокировка прокрутки фона при открытии модального окна
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
 
-    return (
+  if (!isOpen) return null;
 
-        <div className=''>
+  return ReactDOM.createPortal(
-          <Modal className={"m_size_fixed"} isOpen={isOpen} onRequestClose={closeModal}>
+    <div className="modal-overlay" onClick={onClose}>
-            <h2 className='m_black_color m_font_scale_32'>Это модальное окно!</h2>
+      <div className="modal-window" onClick={(e) => e.stopPropagation()}>
-            <button className='button is-primary' onClick={closeModal}>Закрыть</button>
+        <button className="modal-close-button" onClick={onClose}>×</button>
-          </Modal>
+        <div className="modal-content">{children}</div>
-        </div>
+      </div>
-      );
+    </div>,
-}
+    document.body
+  );
+};
 
 export default ModalWindow;