modal window

This commit is contained in:
moxitech 2024-10-07 01:17:13 +07:00
parent 63f4e70896
commit 7357f02ac6
7 changed files with 143 additions and 58 deletions

View File

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

View File

@ -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
}

View File

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

View File

@ -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>
@ -268,6 +312,22 @@ const Dashboard = () => {
<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>

View File

@ -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>

View File

@ -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;
}

View File

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