Compare commits

..

No commits in common. "main" and "ia_durachok" have entirely different histories.

15 changed files with 68 additions and 420 deletions

76
package-lock.json generated
View File

@ -12,9 +12,6 @@
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"chart.js": "^4.4.4", "chart.js": "^4.4.4",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primereact": "^10.8.2",
"react": "^18.3.1", "react": "^18.3.1",
"react-chartjs-2": "^5.2.0", "react-chartjs-2": "^5.2.0",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
@ -4764,15 +4761,6 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"node_modules/@types/react-transition-group": {
"version": "4.4.11",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
"integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
"license": "MIT",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/resolve": { "node_modules/@types/resolve": {
"version": "1.17.1", "version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -7880,16 +7868,6 @@
"utila": "~0.4" "utila": "~0.4"
} }
}, },
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/dom-serializer": { "node_modules/dom-serializer": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@ -14279,6 +14257,7 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@ -16290,41 +16269,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1" "url": "https://github.com/chalk/ansi-styles?sponsor=1"
} }
}, },
"node_modules/primeflex": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz",
"integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==",
"license": "MIT"
},
"node_modules/primeicons": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
"integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
"license": "MIT"
},
"node_modules/primereact": {
"version": "10.8.2",
"resolved": "https://registry.npmjs.org/primereact/-/primereact-10.8.2.tgz",
"integrity": "sha512-bf7vktogGh0PmKT9WLDcJQoQNqqFqcAlP2crUqccnlTu63FNnQV82qEYyaFvE12Qd5qhm3EYmpsHjpf6/+olTQ==",
"license": "MIT",
"dependencies": {
"@types/react-transition-group": "^4.4.1",
"react-transition-group": "^4.4.1"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/process-nextick-args": { "node_modules/process-nextick-args": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@ -16360,6 +16304,7 @@
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"loose-envify": "^1.4.0", "loose-envify": "^1.4.0",
@ -16371,6 +16316,7 @@
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/proxy-addr": { "node_modules/proxy-addr": {
@ -16852,22 +16798,6 @@
} }
} }
}, },
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"license": "BSD-3-Clause",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/read-cache": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

View File

@ -7,9 +7,6 @@
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"chart.js": "^4.4.4", "chart.js": "^4.4.4",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primereact": "^10.8.2",
"react": "^18.3.1", "react": "^18.3.1",
"react-chartjs-2": "^5.2.0", "react-chartjs-2": "^5.2.0",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",

View File

@ -35,4 +35,4 @@
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

View File

@ -6,27 +6,21 @@ import Migration from './pages/migration';
import GlobalMailing from './pages/GlobalMailing'; import GlobalMailing from './pages/GlobalMailing';
import GlobalVariables from './pages/GlobalVariables'; import GlobalVariables from './pages/GlobalVariables';
import PerformanceMetrics from './pages/performance'; import PerformanceMetrics from './pages/performance';
import Sidebar from './pages/sidebar'; import Navbar from './components/navbar';
import 'primereact/resources/themes/lara-light-indigo/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
function App() { function App() {
return ( return (
<Router> <Router>
<div style={{ display: 'flex' }}> <div>
<Sidebar /> <Navbar />
<div style={{ flex: 1, marginLeft: '200px', padding: '20px' }}> <Routes>
<Routes> <Route path="/" element={<Users />} />
<Route path="/" element={<Users />} /> <Route path="/groups" element={<Groups />} />
<Route path="/groups" element={<Groups />} /> <Route path="/migration" element={<Migration />} />
<Route path="/migration" element={<Migration />} /> <Route path="/globalMailing" element={<GlobalMailing />} />
<Route path="/globalMailing" element={<GlobalMailing />} /> <Route path="/globalVariables" element={<GlobalVariables />} />
<Route path="/globalVariables" element={<GlobalVariables />} /> <Route path="/performance" element={<PerformanceMetrics />} />
<Route path="/performance" element={<PerformanceMetrics />} /> </Routes>
</Routes>
</div>
</div> </div>
</Router> </Router>
); );

View File

@ -1,39 +0,0 @@
.global-mailing-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.global-mailing-container h2 {
margin-bottom: 20px;
color: #333;
}
.global-mailing-container select {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
width: 100%;
max-width: 300px;
}
.global-mailing-container button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.global-mailing-container button:hover {
background-color: #0056b3;
}

View File

@ -1,51 +0,0 @@
.global-variables-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
}
.global-variables-container h2 {
margin-bottom: 20px;
color: #333;
}
.global-variables-container div {
margin-bottom: 15px;
width: 100%;
}
.global-variables-container label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.global-variables-container input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.global-variables-container button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.global-variables-container button:hover {
background-color: #0056b3;
}

19
src/components/navbar.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<ul>
<li><Link to="/">Users</Link></li>
<li><Link to="/groups">User Groups</Link></li>
<li><Link to="/migration">Data Migration</Link></li>
<li><Link to="/GlobalMailing">Global Mailing</Link></li>
<li><Link to="/GlobalVariables">Global Variables</Link></li>
<li><Link to="/performance">Performance Metrics</Link></li>
</ul>
</nav>
);
}
export default Navbar;

View File

@ -1,54 +0,0 @@
.sidebar {
width: 250px;
height: 100vh;
background-color: #2c3e50;
padding: 20px;
color: white;
position: fixed;
top: 0;
left: 0;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
overflow-y: auto;
z-index: 1; /* чтобы сайдбар был поверх контента */
}
.sidebar h3 {
margin-bottom: 20px;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #ecf0f1;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin: 15px 0;
}
.sidebar ul li a {
color: #ecf0f1;
text-decoration: none;
font-size: 1.1rem;
display: block;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.sidebar ul li a:hover {
background-color: #34495e;
}
.sidebar ul li a.active {
background-color: #2980b9;
}
body {
margin-left: 250px;
padding: 0;
}

View File

@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import { Button } from 'primereact/button';
const UserActions = () => { const UserActions = () => {
return ( return (
<div className="p-d-flex p-ai-center"> <div>
<Button label="Заблокировать" icon="pi pi-lock" className="p-button-warning p-button-xs p-mr-2" /> <button>Заблокировать</button>
<Button label="Удалить" icon="pi pi-trash" className="p-button-danger p-button-xs p-mr-2" /> <button>Удалить</button>
<Button label="Сменить пароль" icon="pi pi-key" className="p-button-secondary p-button-xs" /> <button>Сменить пароль</button>
</div> </div>
); );
}; };

View File

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import '../components/GlobalMailing.css';
const GlobalMailing = () => { const GlobalMailing = () => {
const groups = ['Admins', 'Editors', 'Viewers']; const groups = ['Admins', 'Editors', 'Viewers'];
@ -9,11 +8,11 @@ const GlobalMailing = () => {
}; };
return ( return (
<div className="global-mailing-container"> <div>
<h2>Global Mailing</h2> <h2>Global Mailing</h2>
<select> <select>
{groups.map((group, index) => ( {groups.map((group, index) => (
<option key={index} value={group}>{group}</option> <option key = {index} value={group}>{group}</option>
))} ))}
</select> </select>
<button onClick={handleSendMail}>Send Emails</button> <button onClick={handleSendMail}>Send Emails</button>

View File

@ -1,5 +1,4 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import '../components/GlobalVariables.css';
const GlobalVariables = () => { const GlobalVariables = () => {
const [variables, setVariables] = useState({ const [variables, setVariables] = useState({
@ -19,7 +18,7 @@ const GlobalVariables = () => {
}; };
return ( return (
<div className="global-variables-container"> <div>
<h2>Global Variables</h2> <h2>Global Variables</h2>
{Object.keys(variables).map((key) => ( {Object.keys(variables).map((key) => (
<div key={key}> <div key={key}>

View File

@ -1,74 +1,16 @@
import React, { useState } from 'react'; import React from 'react';
import { Card } from 'primereact/card';
import { Dropdown } from 'primereact/dropdown';
import { Panel } from 'primereact/panel';
const Groups = () => { const Groups = () => {
const [selectedGroup, setSelectedGroup] = useState(null); const groups = ['Admins', 'Editors', 'Viewers']; //заглушка(потом нужно убрать и доделать)
const [selectedSubOption, setSelectedSubOption] = useState(null);
//заглушка
const groups = [
{ label: 'Admins', value: 'Admins' },
{ label: 'Editors', value: 'Editors' },
{ label: 'Viewers', value: 'Viewers' }
];
const groupOptions = {
Admins: [
{ label: 'Manage Users', value: 'ManageUsers' },
{ label: 'View Reports', value: 'ViewReports' }
],
Editors: [
{ label: 'Edit Content', value: 'EditContent' },
{ label: 'Publish Content', value: 'PublishContent' }
],
Viewers: [
{ label: 'View Content', value: 'ViewContent' },
{ label: 'Subscribe', value: 'Subscribe' }
]
};
const onGroupChange = (e) => {
setSelectedGroup(e.value);
setSelectedSubOption(null);
};
const onSubOptionChange = (e) => {
setSelectedSubOption(e.value);
};
return ( return (
<div className="p-grid p-justify-center p-mt-5"> <div>
<div className="p-col-12 p-md-6"> <h2>Группы пользователей</h2>
<Card title="Группы пользователей" className="p-shadow-3"> <ul>
<Panel header="Выберите группу"> {groups.map((group, index) => (
<Dropdown <li key={index}>{group}</li>
value={selectedGroup} ))}
options={groups} </ul>
onChange={onGroupChange}
placeholder="Выберите группу"
className="p-mt-2"
style={{ width: '100%' }}
/>
</Panel>
{}
{selectedGroup && (
<Panel header={`Выберите действие для ${selectedGroup}`} className="p-mt-4">
<Dropdown
value={selectedSubOption}
options={groupOptions[selectedGroup]}
onChange={onSubOptionChange}
placeholder={`Выберите действие для ${selectedGroup}`}
className="p-mt-2"
style={{ width: '100%' }}
/>
</Panel>
)}
</Card>
</div>
</div> </div>
); );
}; };

View File

@ -1,35 +1,14 @@
import React, { useState } from 'react'; import React from "react";
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { Panel } from 'primereact/panel';
const Migration = () => { const Migration = () => {
const [showImage, setShowImage] = useState(false);
const handleMigration = () => { const handleMigration = () => {
setShowImage(true); alert('Migration started');
}; };
return ( return (
<div className="p-grid p-justify-center p-mt-5"> <div>
<div className="p-col-12 p-md-6"> <h2>Data Migration</h2>
<Card title="Data Migration" className="p-shadow-3"> <button onClick={handleMigration}>Start Migration</button>
<Panel header="Start the Data Migration Process">
<div className="p-d-flex p-jc-center p-mb-3">
<Button label="Start Migration" icon="pi pi-play" className="p-button-success" onClick={handleMigration} />
</div>
{showImage && (
<div className="p-d-flex p-jc-center" style={{ marginTop: '20px' }}>
<img
src="https://avatars.dzeninfra.ru/get-zen_doc/271828/pub_65efb8c82e34d760b9c5ae41_65f3c7bdd5f4eb7797f3a3ae/scale_1200"
alt="Migration"
style={{ maxWidth: '100%', height: 'auto' }}
/>
</div>
)}
</Panel>
</Card>
</div>
</div> </div>
); );
}; };

View File

@ -1,21 +0,0 @@
import React from 'react';
import { Link } from 'react-router-dom';
import '../components/sidebar.css';
const Sidebar = () => {
return (
<div className="sidebar">
<ul>
<li><Link to="/">Users</Link></li>
<li><Link to="/groups">Groups</Link></li>
<li><Link to="/migration">Migration</Link></li>
<li><Link to="/globalMailing">Global Mailing</Link></li>
<li><Link to="/globalVariables">Global Variables</Link></li>
<li><Link to="/performance">Performance</Link></li>
</ul>
</div>
);
};
export default Sidebar;

View File

@ -1,65 +1,20 @@
import React, { useState } from 'react'; import React from 'react';
import { Card } from 'primereact/card'; import UserActions from '../components/userActions';
import { ListBox } from 'primereact/listbox';
import { Button } from 'primereact/button';
import { Panel } from 'primereact/panel';
import { Dropdown } from 'primereact/dropdown';
import UserActions from '../components/userActions'; // компонент для действий пользователя
const Users = () => { const Users = () => {
const users = [ const users = ['User1', 'User2', 'User3']; //заглушка(потом нужно убрать и доделать)
{ label: 'User1', value: 'User1', devices: ['iPhone 12 европеоидный', 'MacBook Pro пидорас', 'iPad Air с яблоками'] },
{ label: 'User2', value: 'User2', devices: ['Samsung Galaxy S21 наш', 'Dell XPS 15 слоняра'] },
{ label: 'User3', value: 'User3', devices: ['Google Pixel 6 хуйня ебаная', 'HP Spectre x360 хуйня для даунов'] }
]; // заглушка (потом нужно убрать и доделать)
const [selectedUser, setSelectedUser] = useState(null);
const [selectedDevice, setSelectedDevice] = useState(null);
return ( return (
<div className="p-grid p-justify-center p-mt-5"> <div>
<div className="p-col-12 p-md-6"> <h2>Пользователи</h2>
<Card title="Список пользователей" className="p-shadow-3"> <ul>
<Panel header="Доступные пользователи"> {users.map((user, index) => (
<ListBox <li key={index}>
value={selectedUser} {user}
options={users} <UserActions />
onChange={(e) => { </li>
setSelectedUser(e.value); ))}
setSelectedDevice(null); // сбросить выбранное устройство при изменении пользователя </ul>
}}
style={{ width: '100%' }}
listStyle={{ maxHeight: '250px' }}
className="p-mt-2"
optionLabel="label" // показывает "label" из каждого объекта пользователя
/>
{selectedUser && (
<div className="p-mt-3">
<h4>Устройства {selectedUser.label}</h4>
<Dropdown
value={selectedDevice}
options={selectedUser.devices ? selectedUser.devices.map((device) => ({ label: device, value: device })) : []}
onChange={(e) => setSelectedDevice(e.value)}
placeholder="Выберите устройство"
style={{ width: '100%' }}
/>
</div>
)}
<div className="p-d-flex p-jc-center p-mt-3">
<Button label="Добавить пользователя" icon="pi pi-plus" className="p-button-success p-mr-2" />
</div>
</Panel>
<Panel header="Действия с устройствами" className="p-mt-4">
{users.map((user, index) => (
<div key={index} className="p-d-flex p-ai-center p-mb-3">
<span className="p-mr-3">{user.label}</span>
<UserActions />
</div>
))}
</Panel>
</Card>
</div>
</div> </div>
); );
}; };