- {activeTab === 'map' &&
} {/* Подключаем компонент Dashboard */}
- {activeTab === 'connection' &&
Подключение
}
- {activeTab === 'account' &&
Аккаунт пользователя
}
- {activeTab === 'groups' &&
} {/* Группы устройств */}
- {activeTab === 'devices' &&
} {/* Устройства */}
+
+
+
{/* Передаем onLogout */}
+
+ {activeTab === 'map' && } {/* Подключаем компонент Dashboard */}
+ {activeTab === 'connection' && } {/* Страница подключений */}
+ {activeTab === 'account' && } {/* Подключаем компонент UserAccount */}
+ {activeTab === 'groups' && } {/* Группы устройств */}
+ {activeTab === 'devices' && } {/* Устройства */}
+
);
diff --git a/src/Connections.scss b/src/Connections.scss
new file mode 100644
index 0000000..f95be0f
--- /dev/null
+++ b/src/Connections.scss
@@ -0,0 +1,34 @@
+.section {
+ margin-bottom: 20px;
+
+ form {
+ input {
+ margin-right: 10px;
+ padding: 8px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ }
+
+ button {
+ padding: 8px 12px;
+ background-color: #2980b9;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #3498db;
+ }
+ }
+ }
+
+ ul {
+ list-style-type: none;
+ padding: 0;
+
+ li {
+ margin-top: 10px;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/Login.scss b/src/Login.scss
new file mode 100644
index 0000000..3daef89
--- /dev/null
+++ b/src/Login.scss
@@ -0,0 +1,70 @@
+// styles/Login.scss
+
+.login-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f0f0f0;
+
+ .login-box {
+ background-color: #fff;
+ padding: 40px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ max-width: 400px;
+ width: 100%;
+ display: flex;
+ flex-direction: column; // Выровнять элементы по колонке
+
+ h2 {
+ text-align: center;
+ margin-bottom: 20px;
+ color: #333;
+ }
+
+ form {
+ display: flex;
+ flex-direction: column;
+
+ .input-group {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 20px;
+
+ label {
+ margin-bottom: 8px;
+ color: #666;
+ font-size: 14px;
+ }
+
+ input {
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 16px;
+ transition: border-color 0.3s ease;
+ &:focus {
+ outline: none;
+ border-color: #007bff;
+ }
+ }
+ }
+
+ button {
+ padding: 12px;
+ background-color: #007bff;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+
+ &:hover {
+ background-color: #0056b3;
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/Sidebar.js b/src/Sidebar.js
index 1a288f0..e5304f2 100644
--- a/src/Sidebar.js
+++ b/src/Sidebar.js
@@ -1,7 +1,14 @@
-import React from 'react';
-import './Sidebar.css';
+import React, { useState } from 'react'; // Ensure useState is imported
+import './Sidebar.css'; // Change this to Sidebar.scss if using SCSS
+
+const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
+ const [isSubMenuOpen, setIsSubMenuOpen] = useState(false); // For managing dropdown items
+
+ const toggleSubMenu = () => {
+ setIsSubMenuOpen(!isSubMenuOpen);
+ onSelectTab('account'); // Keep the logic to display the account when clicking on "Аккаунт пользователя"
+ };
-const Sidebar = ({ onSelectTab, activeTab }) => {
return (
Меню
@@ -12,14 +19,21 @@ const Sidebar = ({ onSelectTab, activeTab }) => {
onSelectTab('connection')}>
Подключение
- onSelectTab('account')}>
+
Аккаунт пользователя
- onSelectTab('groups')}>
- Группы устройств
-
- onSelectTab('devices')}>
- Устройства
+ {isSubMenuOpen && ( // Dropdown menu
+ <>
+ onSelectTab('groups')}>
+ Группы устройств
+
+ onSelectTab('devices')}>
+ Устройства
+
+
+ )}
+
+ Выйти
diff --git a/src/UserAccount.scss b/src/UserAccount.scss
new file mode 100644
index 0000000..eb5cf87
--- /dev/null
+++ b/src/UserAccount.scss
@@ -0,0 +1,87 @@
+.user-account {
+ padding: 20px;
+ background-color: #f4f4f4;
+ border-radius: 10px;
+ max-width: 400px;
+ margin: 0 auto;
+
+ h1 {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ .user-info, .edit-form {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ label {
+ display: flex;
+ justify-content: space-between;
+ font-size: 16px;
+ }
+
+ input {
+ padding: 8px;
+ font-size: 14px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ }
+
+ p {
+ font-size: 18px;
+ margin: 10px 0;
+ }
+
+ .buttons {
+ display: flex;
+ justify-content: space-between;
+
+ button {
+ padding: 10px 20px;
+ font-size: 14px;
+ cursor: pointer;
+ border: none;
+ border-radius: 5px;
+ background-color: #3498db;
+ color: white;
+ transition: background-color 0.3s ease;
+
+ &:hover {
+ background-color: #2980b9;
+ }
+
+ &:last-child {
+ background-color: #e74c3c;
+
+ &:hover {
+ background-color: #c0392b;
+ }
+ }
+ }
+ }
+ }
+
+ .edit-button {
+ margin-top: 20px;
+ padding: 10px 25px;
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+ background-color: #2ecc71; /* Зелёный цвет */
+ color: white;
+ border: none;
+ border-radius: 5px;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+
+ &:hover {
+ background-color: #27ae60;
+ transform: scale(1.05); /* Небольшой зум при наведении */
+ }
+
+ &:active {
+ background-color: #1e8449;
+ transform: scale(0.98); /* Легкий уменьшенный эффект при нажатии */
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/pages/Connections.js b/src/pages/Connections.js
new file mode 100644
index 0000000..edc243b
--- /dev/null
+++ b/src/pages/Connections.js
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import '../Connections.scss';
+
+const Connections = () => {
+ const [webhooks, setWebhooks] = useState([]);
+ const [websocketUrl, setWebsocketUrl] = useState('');
+
+ const addWebhook = (newWebhook) => {
+ setWebhooks([...webhooks, newWebhook]);
+ };
+
+ const handleWebhookSubmit = (e) => {
+ e.preventDefault();
+ const newWebhook = {
+ url: e.target.webhookUrl.value,
+ groups: e.target.groups.value.split(','),
+ };
+ addWebhook(newWebhook);
+ e.target.reset();
+ };
+
+ return (
+
+
Подключения
+
+ {/* Webhook подключение */}
+
+
Подключения Webhooks
+
+
+
+ {webhooks.map((webhook, index) => (
+ -
+ Webhook: {webhook.url} (Группы: {webhook.groups.join(', ')})
+
+ ))}
+
+
+
+ {/* WebSocket подключение */}
+
+
Подключения WebSockets
+
+
+ {websocketUrl &&
Подключено по WebSocket: {websocketUrl}
}
+
+
+ );
+};
+
+export default Connections;
\ No newline at end of file
diff --git a/src/pages/Login.js b/src/pages/Login.js
new file mode 100644
index 0000000..a6b2673
--- /dev/null
+++ b/src/pages/Login.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import '../Login.scss';
+
+const Login = ({ onLogin }) => {
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ // Simple login/password check
+ if (username === 'admin' && password === 'admin') {
+ onLogin(); // Call function on successful login
+ } else {
+ setError('Неверный логин или пароль');
+ }
+ };
+
+ return (
+
+
{/* Added a wrapper for styling */}
+
Вход
+ {error &&
{error}
}
+
+
+
+ );
+ };
+
+ export default Login;
\ No newline at end of file
diff --git a/src/pages/UserAccount.js b/src/pages/UserAccount.js
new file mode 100644
index 0000000..0440cc8
--- /dev/null
+++ b/src/pages/UserAccount.js
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import '../UserAccount.scss';
+
+const UserAccount = () => {
+ const [userData, setUserData] = useState({
+ username: 'Мамут Рахал',
+ email: 'yatupoidayn@mail.ru',
+ phone: '+666',
+ });
+
+ const [isEditing, setIsEditing] = useState(false);
+ const [formData, setFormData] = useState(userData);
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData((prevData) => ({
+ ...prevData,
+ [name]: value,
+ }));
+ };
+
+ const handleSave = () => {
+ setUserData(formData);
+ setIsEditing(false);
+ };
+
+ const handleCancel = () => {
+ setFormData(userData);
+ setIsEditing(false);
+ };
+
+ return (
+
+
Данные
+
+ {isEditing ? (
+
+ ) : (
+
+
Имя: {userData.username}
+
Email: {userData.email}
+
Телефон: {userData.phone}
+
+
+ )}
+
+ );
+};
+
+export default UserAccount;
\ No newline at end of file