This commit is contained in:
gotika 2024-09-08 18:35:57 +03:00
parent 913208cc70
commit 87d1b6ff2b
14 changed files with 274 additions and 54 deletions

View File

@ -11,7 +11,6 @@ import 'primereact/resources/themes/lara-light-indigo/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
import './components/styles.css';
function App() {
return (

View File

@ -0,0 +1,39 @@
.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

@ -0,0 +1,51 @@
.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;
}

View File

@ -1,33 +1,54 @@
.sidebar {
width: 200px;
padding: 20px;
border-right: 1px solid #ddd;
background-color: #f4f4f4;
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-top: 0;
margin-bottom: 20px;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #ecf0f1;
}
.sidebar ul {
list-style-type: none;
list-style: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 10px;
margin: 15px 0;
}
.sidebar ul li a {
color: #ecf0f1;
text-decoration: none;
color: #333;
font-size: 16px;
font-size: 1.1rem;
display: block;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.sidebar ul li a:hover {
color: #007bff;
background-color: #34495e;
}
.sidebar ul li a.active {
background-color: #2980b9;
}
body {
margin-left: 250px;
padding: 0;
}

View File

@ -1,9 +0,0 @@
.card-custom {
background-color: #f9fafb;
border-radius: 10px;
}
.listbox-custom {
background-color: #fff;
border: 1px solid #e5e7eb;
}

View File

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

View File

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

View File

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

View File

@ -1,22 +1,72 @@
import React from 'react';
import React, { useState } from 'react';
import { Card } from 'primereact/card';
import { ListBox } from 'primereact/listbox';
import { Dropdown } from 'primereact/dropdown';
import { Panel } from 'primereact/panel';
const Groups = () => {
const [selectedGroup, setSelectedGroup] = useState(null);
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 (
<div className="p-grid p-justify-center p-mt-5">
<div className="p-col-12 p-md-6">
<Card title="Группы пользователей" className="p-shadow-3">
<Panel header="Доступные группы">
<ListBox value={null} options={groups} className="p-mt-2" style={{ width: '100%' }} />
<Panel header="Выберите группу">
<Dropdown
value={selectedGroup}
options={groups}
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>

View File

@ -1,14 +1,35 @@
import React from "react";
import React, { useState } from 'react';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { Panel } from 'primereact/panel';
const Migration = () => {
const [showImage, setShowImage] = useState(false);
const handleMigration = () => {
alert('Migration started');
setShowImage(true);
};
return (
<div>
<h2>Data Migration</h2>
<button onClick={handleMigration}>Start Migration</button>
<div className="p-grid p-justify-center p-mt-5">
<div className="p-col-12 p-md-6">
<Card title="Data Migration" className="p-shadow-3">
<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>
);
};

View File

@ -1,11 +1,11 @@
import React from 'react';
import { Link } from 'react-router-dom';
import '../components/sidebar.css'; // Импорт стилей
import '../components/sidebar.css';
const Sidebar = () => {
return (
<div className="sidebar">
<h3>Navigation</h3>
<ul>
<li><Link to="/">Users</Link></li>
<li><Link to="/groups">Groups</Link></li>

View File

@ -1,20 +1,65 @@
import React from 'react';
import UserActions from '../components/userActions';
import React, { useState } from 'react';
import { Card } from 'primereact/card';
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 = ['User1', 'User2', 'User3']; //заглушка(потом нужно убрать и доделать)
const users = [
{ 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 (
<div>
<h2>Пользователи</h2>
<ul>
<div className="p-grid p-justify-center p-mt-5">
<div className="p-col-12 p-md-6">
<Card title="Список пользователей" className="p-shadow-3">
<Panel header="Доступные пользователи">
<ListBox
value={selectedUser}
options={users}
onChange={(e) => {
setSelectedUser(e.value);
setSelectedDevice(null); // сбросить выбранное устройство при изменении пользователя
}}
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) => (
<li key={index}>
{user}
<div key={index} className="p-d-flex p-ai-center p-mb-3">
<span className="p-mr-3">{user.label}</span>
<UserActions />
</li>
</div>
))}
</ul>
</Panel>
</Card>
</div>
</div>
);
};