VORKOUT-9 #6
1174
client/package-lock.json
generated
1174
client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,7 @@
|
|||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.6.1",
|
||||||
"@testing-library/dom": "^10.4.0",
|
"@testing-library/dom": "^10.4.0",
|
||||||
"@testing-library/jest-dom": "^6.6.3",
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
"@testing-library/react": "^16.2.0",
|
"@testing-library/react": "^16.2.0",
|
||||||
@ -11,8 +12,13 @@
|
|||||||
"@types/node": "^16.18.126",
|
"@types/node": "^16.18.126",
|
||||||
"@types/react": "^19.0.11",
|
"@types/react": "^19.0.11",
|
||||||
"@types/react-dom": "^19.0.4",
|
"@types/react-dom": "^19.0.4",
|
||||||
|
"antd": "^5.24.7",
|
||||||
|
"i18next": "^25.0.1",
|
||||||
|
"i18next-browser-languagedetector": "^8.0.5",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
|
"react-i18next": "^15.5.1",
|
||||||
|
"react-router-dom": "^7.5.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"typescript": "^4.9.5",
|
"typescript": "^4.9.5",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
|
|||||||
3
client/public/icons/drawer/add_photo_alternate.svg
Normal file
3
client/public/icons/drawer/add_photo_alternate.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H10V2H2V16H16V8H18V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H2ZM3 14H15L11.25 9L8.25 13L6 10L3 14ZM14 6V4H12V2H14V0H16V2H18V4H16V6H14Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 443 B |
3
client/public/icons/drawer/arrow_back.svg
Normal file
3
client/public/icons/drawer/arrow_back.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3.825 9L9.425 14.6L8 16L0 8L8 0L9.425 1.4L3.825 7H16V9H3.825Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 193 B |
3
client/public/icons/drawer/delete.svg
Normal file
3
client/public/icons/drawer/delete.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 18C2.45 18 1.97917 17.8042 1.5875 17.4125C1.19583 17.0208 1 16.55 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.8042 17.0208 14.4125 17.4125C14.0208 17.8042 13.55 18 13 18H3ZM13 3H3V16H13V3ZM5 14H7V5H5V14ZM9 14H11V5H9V14Z" fill="#FF0000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 352 B |
3
client/public/icons/drawer/reg.svg
Normal file
3
client/public/icons/drawer/reg.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0.5 16V13.2C0.5 12.65 0.641667 12.1333 0.925 11.65C1.20833 11.1667 1.6 10.8 2.1 10.55C2.95 10.1167 3.90833 9.75 4.975 9.45C6.04167 9.15 7.21667 9 8.5 9C9 9 9.4875 9.025 9.9625 9.075C10.4375 9.125 10.9 9.2 11.35 9.3L9.6 11.05C9.41667 11.0167 9.2375 11 9.0625 11H8.5C7.31667 11 6.25417 11.1417 5.3125 11.425C4.37083 11.7083 3.6 12.0167 3 12.35C2.85 12.4333 2.72917 12.55 2.6375 12.7C2.54583 12.85 2.5 13.0167 2.5 13.2V14H8.75L10.75 16H0.5ZM14.05 16.4L10.6 12.95L12 11.55L14.05 13.6L19.1 8.55L20.5 9.95L14.05 16.4ZM8.5 8C7.4 8 6.45833 7.60833 5.675 6.825C4.89167 6.04167 4.5 5.1 4.5 4C4.5 2.9 4.89167 1.95833 5.675 1.175C6.45833 0.391667 7.4 0 8.5 0C9.6 0 10.5417 0.391667 11.325 1.175C12.1083 1.95833 12.5 2.9 12.5 4C12.5 5.1 12.1083 6.04167 11.325 6.825C10.5417 7.60833 9.6 8 8.5 8ZM8.5 6C9.05 6 9.52083 5.80417 9.9125 5.4125C10.3042 5.02083 10.5 4.55 10.5 4C10.5 3.45 10.3042 2.97917 9.9125 2.5875C9.52083 2.19583 9.05 2 8.5 2C7.95 2 7.47917 2.19583 7.0875 2.5875C6.69583 2.97917 6.5 3.45 6.5 4C6.5 4.55 6.69583 5.02083 7.0875 5.4125C7.47917 5.80417 7.95 6 8.5 6Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
3
client/public/icons/drawer/save.svg
Normal file
3
client/public/icons/drawer/save.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18.5 4V16C18.5 16.55 18.3042 17.0208 17.9125 17.4125C17.5208 17.8042 17.05 18 16.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16V2C0.5 1.45 0.695833 0.979167 1.0875 0.5875C1.47917 0.195833 1.95 0 2.5 0H14.5L18.5 4ZM16.5 4.85L13.65 2H2.5V16H16.5V4.85ZM9.5 15C10.3333 15 11.0417 14.7083 11.625 14.125C12.2083 13.5417 12.5 12.8333 12.5 12C12.5 11.1667 12.2083 10.4583 11.625 9.875C11.0417 9.29167 10.3333 9 9.5 9C8.66667 9 7.95833 9.29167 7.375 9.875C6.79167 10.4583 6.5 11.1667 6.5 12C6.5 12.8333 6.79167 13.5417 7.375 14.125C7.95833 14.7083 8.66667 15 9.5 15ZM3.5 7H12.5V3H3.5V7Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 744 B |
3
client/public/icons/header/add_2.svg
Normal file
3
client/public/icons/header/add_2.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.125 18V10H0.125V8H8.125V0H10.125V8H18.125V10H10.125V18H8.125Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 195 B |
3
client/public/icons/header/more.svg
Normal file
3
client/public/icons/header/more.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 392 B |
3
client/public/icons/sider/menu.svg
Normal file
3
client/public/icons/sider/menu.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 12V10H18V12H0ZM0 7V5H18V7H0ZM0 2V0H18V2H0Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 176 B |
3
client/public/icons/sider/menu_open.svg
Normal file
3
client/public/icons/sider/menu_open.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 12V10H13V12H0ZM16.6 11L11.6 6L16.6 1L18 2.4L14.4 6L18 9.6L16.6 11ZM0 7V5H10V7H0ZM0 2V0H13V2H0Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 228 B |
3
client/public/icons/sider/process-diagram.svg
Normal file
3
client/public/icons/sider/process-diagram.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.4 19L12 17.6L13.575 16L12 14.425L13.4 13L15 14.6L16.575 13L18 14.425L16.4 16L18 17.6L16.575 19L15 17.425L13.4 19ZM3 17C3.28333 17 3.52083 16.9042 3.7125 16.7125C3.90417 16.5208 4 16.2833 4 16C4 15.7167 3.90417 15.4792 3.7125 15.2875C3.52083 15.0958 3.28333 15 3 15C2.71667 15 2.47917 15.0958 2.2875 15.2875C2.09583 15.4792 2 15.7167 2 16C2 16.2833 2.09583 16.5208 2.2875 16.7125C2.47917 16.9042 2.71667 17 3 17ZM3 19C2.16667 19 1.45833 18.7083 0.875 18.125C0.291667 17.5417 0 16.8333 0 16C0 15.1667 0.291667 14.4583 0.875 13.875C1.45833 13.2917 2.16667 13 3 13C3.61667 13 4.17917 13.1708 4.6875 13.5125C5.19583 13.8542 5.56667 14.3167 5.8 14.9C6.45 14.7167 6.97917 14.3583 7.3875 13.825C7.79583 13.2917 8 12.6833 8 12V8C8 6.61667 8.4875 5.4375 9.4625 4.4625C10.4375 3.4875 11.6167 3 13 3H14.15L12.575 1.425L14 0L18 4L14 8L12.575 6.6L14.15 5H13C12.1667 5 11.4583 5.29167 10.875 5.875C10.2917 6.45833 10 7.16667 10 8V12C10 13.2167 9.60833 14.2875 8.825 15.2125C8.04167 16.1375 7.05 16.7083 5.85 16.925C5.65 17.5417 5.2875 18.0417 4.7625 18.425C4.2375 18.8083 3.65 19 3 19ZM1.4 7L0 5.6L1.575 4L0 2.425L1.4 1L3 2.6L4.575 1L6 2.425L4.4 4L6 5.6L4.575 7L3 5.425L1.4 7Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
3
client/public/icons/sider/running-processes.svg
Normal file
3
client/public/icons/sider/running-processes.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13 16V14H9V9H7V11H0V5H7V7H9V2H13V0H20V6H13V4H11V12H13V10H20V16H13ZM15 14H18V12H15V14ZM2 9H5V7H2V9ZM15 4H18V2H15V4Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 246 B |
3
client/public/icons/sider/settings.svg
Normal file
3
client/public/icons/sider/settings.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8 18V12H10V14H18V16H10V18H8ZM0 16V14H6V16H0ZM4 12V10H0V8H4V6H6V12H4ZM8 10V8H18V10H8ZM12 6V0H14V2H18V4H14V6H12ZM0 4V2H10V4H0Z" fill="#606060"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 256 B |
@ -24,7 +24,7 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>VORKOUT</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|||||||
@ -1,7 +1,19 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Route, Routes } from 'react-router-dom';
|
||||||
|
import MainLayout from './pages/MainLayout';
|
||||||
|
import ProtectedRoute from './pages/ProtectedRoute';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return <div className="App"></div>;
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/login" element={<div>login</div>} />
|
||||||
|
<Route element={<ProtectedRoute />}>
|
||||||
|
<Route path="*" element={<MainLayout />}></Route>
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
161
client/src/components/ContentDrawer.tsx
Normal file
161
client/src/components/ContentDrawer.tsx
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
import { Drawer } from 'antd';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { Avatar, Typography } from 'antd';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
interface ContentDrawerProps {
|
||||||
|
open: boolean;
|
||||||
|
closeDrawer: () => void;
|
||||||
|
children: React.ReactNode;
|
||||||
|
type: 'create' | 'edit';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContentDrawer({
|
||||||
|
open,
|
||||||
|
closeDrawer,
|
||||||
|
children,
|
||||||
|
type,
|
||||||
|
}: ContentDrawerProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [width, setWidth] = useState<number | string>('30%');
|
||||||
|
|
||||||
|
const calculateWidths = () => {
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const expanded = Math.max(windowWidth * 0.3, 300);
|
||||||
|
setWidth(expanded);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
calculateWidths();
|
||||||
|
window.addEventListener('resize', calculateWidths);
|
||||||
|
return () => window.removeEventListener('resize', calculateWidths);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const editDrawerTitle = (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
gap: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onClick={closeDrawer}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '24px',
|
||||||
|
width: '24px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="./icons/drawer/arrow_back.svg"
|
||||||
|
alt="close_drawer"
|
||||||
|
style={{ height: '16px', width: '16px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
|
||||||
|
<Avatar
|
||||||
|
src="https://cdn-icons-png.flaticon.com/512/219/219986.png"
|
||||||
|
size={40}
|
||||||
|
style={{ flexShrink: 0 }}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<Typography.Text strong style={{ display: 'block' }}>
|
||||||
|
Александр Александров
|
||||||
|
</Typography.Text>
|
||||||
|
<Typography.Text type="secondary" style={{ fontSize: 14 }}>
|
||||||
|
alexandralex@vorkout.ru
|
||||||
|
</Typography.Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '24px',
|
||||||
|
width: '24px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="./icons/drawer/delete.svg"
|
||||||
|
alt="delete"
|
||||||
|
style={{ height: '18px', width: '16px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const createDrawerTitle = (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
gap: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onClick={closeDrawer}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '24px',
|
||||||
|
width: '24px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="./icons/drawer/arrow_back.svg"
|
||||||
|
alt="close_drawer"
|
||||||
|
style={{ height: '16px', width: '16px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 12,
|
||||||
|
flex: 1,
|
||||||
|
fontSize: '20px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('newAccount')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '24px',
|
||||||
|
width: '24px',
|
||||||
|
}}
|
||||||
|
onClick={closeDrawer}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="./icons/drawer/delete.svg"
|
||||||
|
alt="delete"
|
||||||
|
style={{ height: '18px', width: '16px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
title={type === 'create' ? createDrawerTitle : editDrawerTitle}
|
||||||
|
placement="right"
|
||||||
|
open={open}
|
||||||
|
width={width}
|
||||||
|
destroyOnClose={true}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
}
|
||||||
55
client/src/components/Header.tsx
Normal file
55
client/src/components/Header.tsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { Avatar } from 'antd';
|
||||||
|
import Title from 'antd/es/typography/Title';
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
title: string;
|
||||||
|
additionalContent?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Header({ title, additionalContent }: HeaderProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '72px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Title style={{ marginLeft: '16px' }} level={3}>
|
||||||
|
{title}
|
||||||
|
</Title>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '24px',
|
||||||
|
marginRight: '26px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{additionalContent}
|
||||||
|
<img
|
||||||
|
src="./icons/header/more.svg"
|
||||||
|
alt="more"
|
||||||
|
style={{ height: '16px', width: '16px' }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: '50%',
|
||||||
|
border: '2px solid #8BC34A',
|
||||||
|
height: '32px',
|
||||||
|
width: '32px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
size={25.77}
|
||||||
|
src={`https://cdn-icons-png.flaticon.com/512/219/219986.png`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
118
client/src/components/SiderMenu.tsx
Normal file
118
client/src/components/SiderMenu.tsx
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
import { Divider, Menu, Tooltip } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
interface SiderMenuProps {
|
||||||
|
collapsed: boolean;
|
||||||
|
selectedKey: string;
|
||||||
|
hangleMenuClick: (e: any) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SiderMenu({
|
||||||
|
collapsed,
|
||||||
|
selectedKey,
|
||||||
|
hangleMenuClick,
|
||||||
|
}: SiderMenuProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const collapseStyle = collapsed
|
||||||
|
? { fontSize: '12px' }
|
||||||
|
: { fontSize: '12px', paddingLeft: '52px' };
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{
|
||||||
|
key: 'toggle',
|
||||||
|
icon: (
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
!collapsed
|
||||||
|
? './icons/sider/menu_open.svg'
|
||||||
|
: './icons/sider/menu.svg'
|
||||||
|
}
|
||||||
|
alt="toggle"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
label: 'VORKOUT',
|
||||||
|
style: { fontSize: '20px' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/process-diagram',
|
||||||
|
icon: (
|
||||||
|
<img src="./icons/sider/process-diagram.svg" alt="process diagram" />
|
||||||
|
),
|
||||||
|
label: (
|
||||||
|
<Tooltip title={t('processDiagrams')}>{t('processDiagrams')}</Tooltip>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/running-processes',
|
||||||
|
icon: (
|
||||||
|
<img
|
||||||
|
src="./icons/sider/running-processes.svg"
|
||||||
|
alt="running processes"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
label: (
|
||||||
|
<Tooltip title={t('runningProcesses')}>{t('runningProcesses')}</Tooltip>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
!collapsed
|
||||||
|
? {
|
||||||
|
key: 'divider',
|
||||||
|
label: <Divider />,
|
||||||
|
style: {
|
||||||
|
marginBottom: '-16px',
|
||||||
|
marginTop: '-4px',
|
||||||
|
cursor: 'default',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
disabled: true,
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
{
|
||||||
|
key: 'sub1',
|
||||||
|
icon: <img src="./icons/sider/settings.svg" alt="settings" />,
|
||||||
|
label: t('settings'),
|
||||||
|
className: 'no-expand-icon',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '/accounts',
|
||||||
|
label: !collapsed ? (
|
||||||
|
<Tooltip title={t('accounts')}>{t('accounts')}</Tooltip>
|
||||||
|
) : (
|
||||||
|
t('accounts')
|
||||||
|
),
|
||||||
|
style: collapseStyle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/events-list',
|
||||||
|
label: !collapsed ? (
|
||||||
|
<Tooltip title={t('eventsList')}>{t('eventsList')}</Tooltip>
|
||||||
|
) : (
|
||||||
|
t('eventsList')
|
||||||
|
),
|
||||||
|
style: collapseStyle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/configuration',
|
||||||
|
label: !collapsed ? (
|
||||||
|
<Tooltip title={t('configuration')}>{t('configuration')}</Tooltip>
|
||||||
|
) : (
|
||||||
|
t('configuration')
|
||||||
|
),
|
||||||
|
style: collapseStyle,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Menu
|
||||||
|
theme="light"
|
||||||
|
selectedKeys={[selectedKey]}
|
||||||
|
mode="inline"
|
||||||
|
onClick={hangleMenuClick}
|
||||||
|
defaultOpenKeys={['sub1']}
|
||||||
|
items={menuItems}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
229
client/src/components/UserCreate.tsx
Normal file
229
client/src/components/UserCreate.tsx
Normal file
@ -0,0 +1,229 @@
|
|||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Form,
|
||||||
|
Input,
|
||||||
|
Select,
|
||||||
|
Upload,
|
||||||
|
Image,
|
||||||
|
UploadFile,
|
||||||
|
GetProp,
|
||||||
|
UploadProps,
|
||||||
|
} from 'antd';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
|
||||||
|
|
||||||
|
const getBase64 = (file: FileType): Promise<string> =>
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = () => resolve(reader.result as string);
|
||||||
|
reader.onerror = (error) => reject(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function UserCreate() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [previewOpen, setPreviewOpen] = useState(false);
|
||||||
|
const [previewImage, setPreviewImage] = useState('');
|
||||||
|
|
||||||
|
const [fileList, setFileList] = useState<UploadFile[]>([]);
|
||||||
|
|
||||||
|
const handlePreview = async (file: UploadFile) => {
|
||||||
|
if (!file.url && !file.preview) {
|
||||||
|
file.preview = await getBase64(file.originFileObj as FileType);
|
||||||
|
}
|
||||||
|
|
||||||
|
setPreviewImage(file.url || (file.preview as string));
|
||||||
|
setPreviewOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
|
||||||
|
setFileList(newFileList);
|
||||||
|
|
||||||
|
const customUploadButton = (
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '102px',
|
||||||
|
width: '102px',
|
||||||
|
backgroundColor: '#E2E2E2',
|
||||||
|
borderRadius: '50%',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: 8,
|
||||||
|
marginTop: 30,
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="./icons/drawer/add_photo_alternate.svg"
|
||||||
|
alt="add_photo_alternate"
|
||||||
|
style={{ height: '18px', width: '18px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span style={{ fontSize: '14px', color: '#8c8c8c' }}>
|
||||||
|
{t('selectPhoto')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const photoToUpload = (
|
||||||
|
<div style={{ height: '102px' }}>
|
||||||
|
<Upload
|
||||||
|
listType="picture-circle"
|
||||||
|
fileList={fileList}
|
||||||
|
onPreview={handlePreview}
|
||||||
|
onChange={handleChange}
|
||||||
|
beforeUpload={() => false}
|
||||||
|
>
|
||||||
|
{fileList.length > 0 ? null : customUploadButton}
|
||||||
|
</Upload>
|
||||||
|
{previewImage && (
|
||||||
|
<Image
|
||||||
|
wrapperStyle={{ display: 'none' }}
|
||||||
|
preview={{
|
||||||
|
visible: previewOpen,
|
||||||
|
onVisibleChange: (visible) => setPreviewOpen(visible),
|
||||||
|
afterOpenChange: (visible) => !visible && setPreviewImage(''),
|
||||||
|
}}
|
||||||
|
src={previewImage}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: '36px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{photoToUpload}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Form
|
||||||
|
name="user-edit-form"
|
||||||
|
layout="vertical"
|
||||||
|
// onFinish={onFinish}
|
||||||
|
initialValues={{
|
||||||
|
name: '',
|
||||||
|
login: '',
|
||||||
|
password: '',
|
||||||
|
email: '',
|
||||||
|
tenant: '',
|
||||||
|
role: '',
|
||||||
|
status: '',
|
||||||
|
}}
|
||||||
|
style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
label={t('name')}
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true, message: t('nameMessage') }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('login')}
|
||||||
|
name="login"
|
||||||
|
rules={[{ required: true, message: t('loginMessage') }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('password')}
|
||||||
|
name="password"
|
||||||
|
rules={[{ required: true, message: t('passwordMessage') }]}
|
||||||
|
>
|
||||||
|
<Input.Password />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('email')}
|
||||||
|
name="email"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: t('emailMessage') },
|
||||||
|
{ type: 'email', message: t('emailErrorMessage') },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('tenant')}
|
||||||
|
name="tenant"
|
||||||
|
rules={[{ required: true, message: t('tenantMessage') }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('role')}
|
||||||
|
name="role"
|
||||||
|
rules={[{ required: true, message: t('roleMessage') }]}
|
||||||
|
>
|
||||||
|
<Select placeholder={t('roleMessage')}>
|
||||||
|
<Option value="Директор магазина">Директор магазина</Option>
|
||||||
|
<Option value="Менеджер">Менеджер</Option>
|
||||||
|
<Option value="Кассир">Кассир</Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('status')}
|
||||||
|
name="status"
|
||||||
|
rules={[{ required: true, message: t('statusMessage') }]}
|
||||||
|
>
|
||||||
|
<Select placeholder={t('statusMessage')}>
|
||||||
|
<Option value="ACTIVE">Активен</Option>
|
||||||
|
<Option value="DISABLED">Неактивен</Option>
|
||||||
|
<Option value="BLOCKED">Заблокирован</Option>
|
||||||
|
<Option value="DELETED">Удален</Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<div style={{ flexGrow: 1 }} />
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
block
|
||||||
|
style={{ color: '#000' }}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/icons/drawer/reg.svg"
|
||||||
|
alt="save"
|
||||||
|
style={{ height: '18px', width: '18px' }}
|
||||||
|
/>{' '}
|
||||||
|
{t('addAccount')}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
113
client/src/components/UserEdit.tsx
Normal file
113
client/src/components/UserEdit.tsx
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import { Button, Form, Input, Select } from 'antd';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
export default function UserEdit() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||||
|
<Form
|
||||||
|
name="user-edit-form"
|
||||||
|
layout="vertical"
|
||||||
|
// onFinish={onFinish}
|
||||||
|
initialValues={{
|
||||||
|
name: 'Александр Александров',
|
||||||
|
login: 'alexandralex@vorkout.ru',
|
||||||
|
password: 'jKUUl776GHd',
|
||||||
|
email: 'alexandralex@vorkout.ru',
|
||||||
|
tenant: 'text',
|
||||||
|
role: 'Директор магазина',
|
||||||
|
status: 'Активен',
|
||||||
|
}}
|
||||||
|
style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
label={t('name')}
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true, message: t('nameMessage') }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('login')}
|
||||||
|
name="login"
|
||||||
|
rules={[{ required: true, message: t('loginMessage') }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('password')}
|
||||||
|
name="password"
|
||||||
|
rules={[{ required: true, message: t('passwordMessage') }]}
|
||||||
|
>
|
||||||
|
<Input.Password />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('email')}
|
||||||
|
name="email"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: t('emailMessage') },
|
||||||
|
{ type: 'email', message: t('emailErrorMessage') },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('tenant')}
|
||||||
|
name="tenant"
|
||||||
|
rules={[{ required: true, message: t('tenantMessage') }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('role')}
|
||||||
|
name="role"
|
||||||
|
rules={[{ required: true, message: t('roleMessage') }]}
|
||||||
|
>
|
||||||
|
<Select placeholder={t('roleMessage')}>
|
||||||
|
<Option value="Директор магазина">Директор магазина</Option>
|
||||||
|
<Option value="Менеджер">Менеджер</Option>
|
||||||
|
<Option value="Кассир">Кассир</Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t('status')}
|
||||||
|
name="status"
|
||||||
|
rules={[{ required: true, message: t('statusMessage') }]}
|
||||||
|
>
|
||||||
|
<Select placeholder={t('statusMessage')}>
|
||||||
|
<Option value="ACTIVE">Активен</Option>
|
||||||
|
<Option value="DISABLED">Неактивен</Option>
|
||||||
|
<Option value="BLOCKED">Заблокирован</Option>
|
||||||
|
<Option value="DELETED">Удален</Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<div style={{ flexGrow: 1 }} />
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
block
|
||||||
|
style={{ color: '#000' }}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/icons/drawer/save.svg"
|
||||||
|
alt="save"
|
||||||
|
style={{ height: '18px', width: '18px' }}
|
||||||
|
/>{' '}
|
||||||
|
{t('save')}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
client/src/config/AppWrapper.tsx
Normal file
24
client/src/config/AppWrapper.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import './i18n';
|
||||||
|
import { ConfigProvider } from 'antd';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { theme } from './customTheme';
|
||||||
|
|
||||||
|
import en from 'antd/locale/en_US';
|
||||||
|
import ru from 'antd/locale/ru_RU';
|
||||||
|
|
||||||
|
const antdLocales = {
|
||||||
|
en: en,
|
||||||
|
ru: ru,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AppWrapper({ children }: any) {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
const currentLang = i18n.language.split('-')[0] as 'en' | 'ru';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConfigProvider locale={antdLocales[currentLang]} theme={theme}>
|
||||||
|
{children}
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
15
client/src/config/customTheme.ts
Normal file
15
client/src/config/customTheme.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
export const theme = {
|
||||||
|
token: {
|
||||||
|
fontFamily: 'Roboto, sans-serif',
|
||||||
|
colorPrimary: '#C2DA3D',
|
||||||
|
Menu: {
|
||||||
|
itemColor: 'f2f2f2',
|
||||||
|
itemBg: '#f2f2f2',
|
||||||
|
subMenuItemBg: '#f2f2f2',
|
||||||
|
iconSize: '18px',
|
||||||
|
},
|
||||||
|
Layout: {
|
||||||
|
bodyBg: '#f2f2f2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
74
client/src/config/i18n.ts
Normal file
74
client/src/config/i18n.ts
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
import i18n from 'i18next';
|
||||||
|
import { initReactI18next } from 'react-i18next';
|
||||||
|
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||||
|
|
||||||
|
i18n
|
||||||
|
.use(LanguageDetector)
|
||||||
|
.use(initReactI18next)
|
||||||
|
.init({
|
||||||
|
fallbackLng: 'en',
|
||||||
|
supportedLngs: ['en', 'ru'],
|
||||||
|
interpolation: { escapeValue: false },
|
||||||
|
resources: {
|
||||||
|
en: {
|
||||||
|
translation: {
|
||||||
|
accounts: 'Accounts',
|
||||||
|
processDiagrams: 'Process diagrams',
|
||||||
|
runningProcesses: 'Running processes',
|
||||||
|
settings: 'Settings',
|
||||||
|
eventsList: 'Events list',
|
||||||
|
configuration: 'Configuration',
|
||||||
|
selectPhoto: 'Select photo',
|
||||||
|
name: 'Name',
|
||||||
|
login: 'Login',
|
||||||
|
password: 'Password',
|
||||||
|
email: 'Email',
|
||||||
|
tenant: 'Tenant',
|
||||||
|
role: 'Role',
|
||||||
|
status: 'Status',
|
||||||
|
nameMessage: 'Enter name',
|
||||||
|
loginMessage: 'Enter login',
|
||||||
|
passwordMessage: 'Enter password',
|
||||||
|
emailMessage: 'Enter email',
|
||||||
|
emailErrorMessage: 'Incorrect email',
|
||||||
|
tenantMessage: 'Enter tenant',
|
||||||
|
roleMessage: 'Choose role',
|
||||||
|
statusMessage: 'Choose status',
|
||||||
|
addAccount: 'Add account',
|
||||||
|
save: 'Save changes',
|
||||||
|
newAccount: 'New account',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ru: {
|
||||||
|
translation: {
|
||||||
|
accounts: 'Учетные записи',
|
||||||
|
processDiagrams: 'Схемы процессов',
|
||||||
|
runningProcesses: 'Запущенные процессы',
|
||||||
|
settings: 'Настройки',
|
||||||
|
eventsList: 'Справочкин событий',
|
||||||
|
configuration: 'Конфигурация',
|
||||||
|
selectPhoto: 'Выбрать фото',
|
||||||
|
name: 'Имя',
|
||||||
|
login: 'Логин',
|
||||||
|
password: 'Пароль',
|
||||||
|
email: 'Имейл',
|
||||||
|
tenant: 'Привязка',
|
||||||
|
role: 'Роль',
|
||||||
|
status: 'Статус',
|
||||||
|
nameMessage: 'Введите имя',
|
||||||
|
loginMessage: 'Введите логин',
|
||||||
|
passwordMessage: 'Введите пароль',
|
||||||
|
emailMessage: 'Введите имейл',
|
||||||
|
emailErrorMessage: 'Некорректный имейл',
|
||||||
|
tenantMessage: 'Введите привязку',
|
||||||
|
roleMessage: 'Выберите роль',
|
||||||
|
statusMessage: 'Выберите статус',
|
||||||
|
addAccount: 'Добавить аккаунт',
|
||||||
|
save: 'Сохранить изменения',
|
||||||
|
newAccount: 'Новая учетная запись',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default i18n;
|
||||||
@ -11,3 +11,34 @@ code {
|
|||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
monospace;
|
monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-menu-inline .ant-menu-submenu-selected {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-inline .ant-menu-submenu-selected > .ant-menu-submenu-title {
|
||||||
|
color: #548d10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-inline .ant-menu-item-selected {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #548d10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-item-selected {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-item-selected a,
|
||||||
|
.ant-menu-item-selected {
|
||||||
|
color: #548d10 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-expand-icon .ant-menu-submenu-arrow {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|||||||
@ -2,8 +2,17 @@ import React from 'react';
|
|||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
|
import AppWrapper from './config/AppWrapper';
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(
|
const root = ReactDOM.createRoot(
|
||||||
document.getElementById('root') as HTMLElement
|
document.getElementById('root') as HTMLElement
|
||||||
);
|
);
|
||||||
root.render(<App />);
|
|
||||||
|
root.render(
|
||||||
|
<AppWrapper>
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
</BrowserRouter>
|
||||||
|
</AppWrapper>
|
||||||
|
);
|
||||||
|
|||||||
37
client/src/pages/AccountsPage.tsx
Normal file
37
client/src/pages/AccountsPage.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import Header from '../components/Header';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import ContentDrawer from '../components/ContentDrawer';
|
||||||
|
import UserCreate from '../components/UserCreate';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
export default function AccountsPage() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const showDrawer = () => setOpen(true);
|
||||||
|
const closeDrawer = () => setOpen(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header
|
||||||
|
title={t('accounts')}
|
||||||
|
additionalContent={
|
||||||
|
<img
|
||||||
|
src="./icons/header/add_2.svg"
|
||||||
|
alt="add"
|
||||||
|
style={{
|
||||||
|
height: '18px',
|
||||||
|
width: '18px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
onClick={showDrawer}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ContentDrawer open={open} closeDrawer={closeDrawer} type="create">
|
||||||
|
<UserCreate />
|
||||||
|
</ContentDrawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
client/src/pages/ConfigurationPage.tsx
Normal file
11
client/src/pages/ConfigurationPage.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import Header from '../components/Header';
|
||||||
|
|
||||||
|
export default function ConfigurationPage() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header title={t('configuration')} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
client/src/pages/EventsListPage.tsx
Normal file
11
client/src/pages/EventsListPage.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import Header from '../components/Header';
|
||||||
|
|
||||||
|
export default function EventsListPage() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header title={t('eventsList')} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
87
client/src/pages/MainLayout.tsx
Normal file
87
client/src/pages/MainLayout.tsx
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
/* eslint-disable react-hooks/exhaustive-deps */
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Layout } from 'antd';
|
||||||
|
import Sider from 'antd/es/layout/Sider';
|
||||||
|
import SiderMenu from '../components/SiderMenu';
|
||||||
|
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
|
||||||
|
import ProcessDiagramPage from './ProcessDiagramPage';
|
||||||
|
import RunningProcessesPage from './RunningProcessesPage';
|
||||||
|
import AccountsPage from './AccountsPage';
|
||||||
|
import EventsListPage from './EventsListPage';
|
||||||
|
import ConfigurationPage from './ConfigurationPage';
|
||||||
|
|
||||||
|
export default function MainLayout() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
const [selectedKey, setSelectedKey] = useState('1');
|
||||||
|
|
||||||
|
const [width, setWidth] = useState<number | string>('15%');
|
||||||
|
const [collapsedWidth, setCollapsedWidth] = useState(50);
|
||||||
|
|
||||||
|
const calculateWidths = () => {
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const expanded = Math.min(Math.max(windowWidth * 0.15, 180), 240);
|
||||||
|
const collapsed = Math.max(windowWidth * 0.038, 50);
|
||||||
|
setWidth(expanded);
|
||||||
|
setCollapsedWidth(collapsed);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
calculateWidths();
|
||||||
|
window.addEventListener('resize', calculateWidths);
|
||||||
|
return () => window.removeEventListener('resize', calculateWidths);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (location.pathname === '/') {
|
||||||
|
navigate('/process-diagram');
|
||||||
|
}
|
||||||
|
setSelectedKey(location.pathname);
|
||||||
|
}, [location.pathname]);
|
||||||
|
|
||||||
|
function hangleMenuClick(e: any) {
|
||||||
|
const key = e.key;
|
||||||
|
if (key === 'toggle') {
|
||||||
|
setCollapsed(!collapsed);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (key === 'divider') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedKey(key);
|
||||||
|
navigate(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout style={{ minHeight: '100vh' }}>
|
||||||
|
<Sider
|
||||||
|
className="sider"
|
||||||
|
collapsible
|
||||||
|
collapsed={collapsed}
|
||||||
|
onCollapse={(value) => setCollapsed(value)}
|
||||||
|
theme="light"
|
||||||
|
width={width}
|
||||||
|
collapsedWidth={collapsedWidth}
|
||||||
|
trigger={null}
|
||||||
|
>
|
||||||
|
<SiderMenu
|
||||||
|
collapsed={collapsed}
|
||||||
|
selectedKey={selectedKey}
|
||||||
|
hangleMenuClick={hangleMenuClick}
|
||||||
|
/>
|
||||||
|
</Sider>
|
||||||
|
<Layout>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/process-diagram" element={<ProcessDiagramPage />} />
|
||||||
|
<Route path="/running-processes" element={<RunningProcessesPage />} />
|
||||||
|
<Route path="/accounts" element={<AccountsPage />} />
|
||||||
|
<Route path="/events-list" element={<EventsListPage />} />
|
||||||
|
<Route path="/configuration" element={<ConfigurationPage />} />
|
||||||
|
<Route path="*" element={<div>404 Not Found</div>} />
|
||||||
|
</Routes>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
client/src/pages/ProcessDiagramPage.tsx
Normal file
11
client/src/pages/ProcessDiagramPage.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import Header from '../components/Header';
|
||||||
|
|
||||||
|
export default function ProcessDiagramPage() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header title={t('processDiagrams')} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
8
client/src/pages/ProtectedRoute.tsx
Normal file
8
client/src/pages/ProtectedRoute.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
// ProtectedRoute.js
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const ProtectedRoute = (): React.JSX.Element => {
|
||||||
|
return <Outlet />;
|
||||||
|
};
|
||||||
|
export default ProtectedRoute;
|
||||||
11
client/src/pages/RunningProcessesPage.tsx
Normal file
11
client/src/pages/RunningProcessesPage.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import Header from '../components/Header';
|
||||||
|
|
||||||
|
export default function RunningProcessesPage() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header title={t('runningProcesses')} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user