modal window
This commit is contained in:
moxitech
parent
63f4e70896
commit
7357f02ac6
@ -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 секунд
|
||||
@ -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
|
||||
}
|
||||
@ -41,7 +41,7 @@ const Connections = () => {
|
||||
<button type="submit">Подключиться</button>
|
||||
</form>
|
||||
|
||||
{websocketUrl && <p>Подключено по WebSocket: {websocketUrl}</p>}
|
||||
{websocketUrl && <p>Установлены значения: {websocketUrl}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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';
|
||||
|
||||
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=''>
|
||||
<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>
|
||||
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;
|
||||
Loading…
Reference in New Issue
Block a user