Compare commits
15 Commits
cc43f228d5
...
react
| Author | SHA1 | Date | |
|---|---|---|---|
|
cc22b6f265 | ||
|
|
dc53f7438f | ||
|
|
e6db182439 | ||
c7df4d248f
|
|||
|
|
53af4d2b1b | ||
|
|
e756a3ab23 | ||
|
|
b90a082cc6 | ||
| 3c109d1619 | |||
|
|
949e186112 | ||
|
|
bffd070793 | ||
|
|
2ac1d34f1b | ||
|
|
d344619507 | ||
|
|
a08d4d3cdf | ||
| 9775e7b206 | |||
| 64c4bdae31 |
59
.gitea/workflows/gitea-push-docker.yml
Normal file
59
.gitea/workflows/gitea-push-docker.yml
Normal file
@@ -0,0 +1,59 @@
|
||||
name: Create and publish a Docker image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
env:
|
||||
REGISTRY: git.zetcraft.ru
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: ubuntu-latest
|
||||
name: Publish image
|
||||
container: catthehacker/ubuntu:act-latest
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Log in to the Container registry
|
||||
uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
|
||||
with:
|
||||
registry: ${{ env.REGISTRY }}
|
||||
username: ${{ gitea.actor }}
|
||||
password: ${{ secrets.TOKEN }}
|
||||
|
||||
- name: Extract metadata (tags, labels) for Docker
|
||||
id: meta
|
||||
uses: https://github.com/docker/metadata-action@v4
|
||||
with:
|
||||
images: ${{ env.REGISTRY }}/${{ gitea.repository }}
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
|
||||
with:
|
||||
context: ./
|
||||
push: true
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
deploy:
|
||||
needs: publish
|
||||
name: Deploy image
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: install ssh keys
|
||||
# check this thread to understand why its needed:
|
||||
# <https://stackoverflow.com/a/70447517>
|
||||
run: |
|
||||
install -m 600 -D /dev/null ~/.ssh/id_rsa
|
||||
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
|
||||
ssh-keyscan -H ${{ secrets.SSH_HOST }} > ~/.ssh/known_hosts
|
||||
- name: connect and pull
|
||||
run: ssh ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "cd ${{ secrets.WORK_DIR }} && docker compose pull && docker compose up -d && docker image prune && exit"
|
||||
- name: cleanup
|
||||
run: rm -rf ~/.ssh
|
||||
17
Dockerfile
Normal file
17
Dockerfile
Normal file
@@ -0,0 +1,17 @@
|
||||
FROM node:20-alpine3.17 AS builder
|
||||
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json .eslintrc.cjs vite.config.js index.html ./
|
||||
COPY public/ public/
|
||||
COPY src/ src/
|
||||
RUN npm ci
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:1.25.2-alpine
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=builder /app/build /usr/share/nginx/html
|
||||
RUN touch /var/run/nginx.pid
|
||||
RUN chown -R nginx:nginx /var/run/nginx.pid /usr/share/nginx/html /var/cache/nginx /var/log/nginx /etc/nginx/conf.d
|
||||
USER nginx
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
27
README.md
27
README.md
@@ -1,8 +1,25 @@
|
||||
# React + Vite
|
||||
# CyberBloomFrontend
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
# Docker
|
||||
|
||||
Currently, two official plugins are available:
|
||||
```bash
|
||||
docker run -d -p 80:80 \
|
||||
--name CyberBloom \
|
||||
--restart=always \
|
||||
-e TZ=Europe/Moscow \
|
||||
git.zetcraft.ru/cyberbloom/ogeetocasecybergarden:main
|
||||
```
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
# Docker Compose
|
||||
|
||||
```yml
|
||||
services:
|
||||
cyberbloomfrontend:
|
||||
ports:
|
||||
- '80:80'
|
||||
container_name: CyberBloom
|
||||
restart: always
|
||||
environment:
|
||||
- TZ=Europe/Moscow
|
||||
image: 'git.zetcraft.ru/cyberbloom/ogeetocasecybergarden:main'
|
||||
```
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,500&family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
9
nginx.conf
Normal file
9
nginx.conf
Normal file
@@ -0,0 +1,9 @@
|
||||
server_tokens off;
|
||||
server {
|
||||
listen 80;
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
try_files $uri /index.html;
|
||||
}
|
||||
}
|
||||
81
package-lock.json
generated
81
package-lock.json
generated
@@ -14,7 +14,10 @@
|
||||
"@mui/icons-material": "^5.15.1",
|
||||
"@mui/material": "^5.15.1",
|
||||
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
|
||||
"@mui/x-date-pickers": "^6.18.6",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"js-cookie": "^3.0.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.21.1",
|
||||
@@ -1370,6 +1373,71 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
},
|
||||
"node_modules/@mui/x-date-pickers": {
|
||||
"version": "6.18.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.18.6.tgz",
|
||||
"integrity": "sha512-pqOrGPUDVY/1xXrM1hofqwgquno/SB9aG9CVS1m2Rs8hKF1VWRC+jYlEa1Qk08xKmvkia5g7NsdV/BBb+tHUZw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2",
|
||||
"@mui/base": "^5.0.0-beta.22",
|
||||
"@mui/utils": "^5.14.16",
|
||||
"@types/react-transition-group": "^4.4.8",
|
||||
"clsx": "^2.0.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.9.0",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/material": "^5.8.6",
|
||||
"@mui/system": "^5.8.0",
|
||||
"date-fns": "^2.25.0",
|
||||
"date-fns-jalali": "^2.13.0-0",
|
||||
"dayjs": "^1.10.7",
|
||||
"luxon": "^3.0.2",
|
||||
"moment": "^2.29.4",
|
||||
"moment-hijri": "^2.1.2",
|
||||
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns-jalali": {
|
||||
"optional": true
|
||||
},
|
||||
"dayjs": {
|
||||
"optional": true
|
||||
},
|
||||
"luxon": {
|
||||
"optional": true
|
||||
},
|
||||
"moment": {
|
||||
"optional": true
|
||||
},
|
||||
"moment-hijri": {
|
||||
"optional": true
|
||||
},
|
||||
"moment-jalaali": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@@ -2210,6 +2278,11 @@
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.10",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
|
||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
@@ -3585,6 +3658,14 @@
|
||||
"set-function-name": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/js-cookie": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
||||
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
||||
@@ -16,7 +16,11 @@
|
||||
"@mui/icons-material": "^5.15.1",
|
||||
"@mui/material": "^5.15.1",
|
||||
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
|
||||
"@mui/x-date-pickers": "^6.18.6",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"js-cookie": "^3.0.5",
|
||||
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.21.1",
|
||||
|
||||
17
src/App.jsx
17
src/App.jsx
@@ -1,13 +1,19 @@
|
||||
|
||||
import './App.css'
|
||||
import FetchUtils from './components/fetchUtils/FetchUtils.jsx'
|
||||
|
||||
// import FetchUtils from './components/utils/FetchUtils.jsx'
|
||||
|
||||
// import FetchUtils from './components/fetchUtils/FetchUtils.jsx'
|
||||
|
||||
// import TableMeets from './components/fetchUtils/TableMeets.jsx'
|
||||
import AddUsers from './Components/AddUsersPage/index.jsx'
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import BeingPage from "./Components/BeingPage/index.jsx";
|
||||
import HomePage from "./Components/HomePage/index.jsx";
|
||||
import MeetPage from "./Components/MeetPage/index.jsx";
|
||||
import MeetAuthPage from "./Components/MeetAuthPage/index.jsx";
|
||||
|
||||
import ProfilePage from './Components/profilePage/index.jsx';
|
||||
import MeetAuthPageAdmin from './Components/MeetAuthPageAdmin/index.jsx'
|
||||
import HomeAuthPageAdmin from './Components/HomePageAdmin/index.jsx'
|
||||
|
||||
|
||||
function App() {
|
||||
@@ -18,10 +24,13 @@ function App() {
|
||||
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/being" element={<BeingPage />}/>
|
||||
<Route path="/addUser" element={<AddUsers />}/>
|
||||
<Route path="/" element={<HomePage />}/>
|
||||
<Route path="/firstMeet" element={<MeetPage />}/>
|
||||
<Route path="/firstMeetAuth" element={<MeetAuthPage />}/>
|
||||
<Route path='/profile' element={<ProfilePage />}/>
|
||||
<Route path='/adminMeets' element={<MeetAuthPageAdmin/>}/>
|
||||
<Route path='/admin' element={<HomeAuthPageAdmin/>}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</>
|
||||
|
||||
154
src/Components/AddUsersPage/index.jsx
Normal file
154
src/Components/AddUsersPage/index.jsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import styles from './style.module.scss';
|
||||
import { useState } from 'react';
|
||||
import avatar from '../../img/profilePage/avatar.png';
|
||||
import Header from '../Header';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Box from '@mui/material/Box';
|
||||
import del from '../../img/AddUsers/delete.png';
|
||||
import perm from '../../img/AddUsers/permission.png';
|
||||
import newAvatar from '../../img/AddUsers/newAvatar.png';
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: "46%",
|
||||
height: "60vh",
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '25px',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
const AddUsers = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
return (
|
||||
<>
|
||||
<Header></Header>
|
||||
|
||||
|
||||
<section className={styles.addUsers__container}>
|
||||
<input className={styles.addUsers__search} type='text' placeholder='Найти мероприятие'></input>
|
||||
<div className={styles.select__container}>
|
||||
<select className={styles.select} name="time__meeting">
|
||||
<option value="">роль пользователя</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div className={styles.addUser__container}>
|
||||
<div className={styles.addUser__cards_container}>
|
||||
<div className={styles.addUser__card_container}>
|
||||
<div onClick={handleOpen} className={styles.round}>+</div>
|
||||
<div className={styles.addUser__card_text}>Добавить пользователя</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_container}>
|
||||
<div className={styles.profile__user_img_container}>
|
||||
<img src={avatar} className={styles.profile__user_img}></img>
|
||||
<div className={styles.profile__user_role}>Участник</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_info_container}>
|
||||
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||
<div className={styles.profile__user_progress_container}>
|
||||
<span>0</span>
|
||||
<span className={styles.profile__user_progress_line}></span>
|
||||
<span>1</span>
|
||||
|
||||
</div>
|
||||
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||
<div className={styles.feautures}>Отправлено</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_container}>
|
||||
<div className={styles.profile__user_img_container}>
|
||||
<img src={avatar} className={styles.profile__user_img}></img>
|
||||
<div className={styles.profile__user_role}>Участник</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_info_container}>
|
||||
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||
<div className={styles.profile__user_progress_container}>
|
||||
<span>0</span>
|
||||
<span className={styles.profile__user_progress_line}></span>
|
||||
<span>1</span>
|
||||
|
||||
</div>
|
||||
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||
<div className={styles.permission_container}><img src={perm} className={styles.permission_img}></img></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_container}>
|
||||
<div className={styles.profile__user_img_container}>
|
||||
<img src={avatar} className={styles.profile__user_img}></img>
|
||||
<div className={styles.profile__user_role}>Участник</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_info_container}>
|
||||
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||
<div className={styles.profile__user_progress_container}>
|
||||
<span>0</span>
|
||||
<span className={styles.profile__user_progress_line}></span>
|
||||
<span>1</span>
|
||||
|
||||
</div>
|
||||
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||
<div className={styles.permission_container}><img src={perm} className={styles.permission_img}></img></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<div className={styles.addModal__title_container}>
|
||||
<div className={styles.addModal__title}>Добавление пользователя</div>
|
||||
<div onClick={handleClose} className={styles.addModal__close}><div className={styles.addModal__close_img}>+</div></div>
|
||||
</div>
|
||||
<div className={styles.addModal_user_container}>
|
||||
<div className={styles.addModal_user_img_container}>
|
||||
<form className={styles.addModal_form} method="post" encType="multipart/form-data">
|
||||
<div className={styles.input_file_row}>
|
||||
<label className={styles.input_file}>
|
||||
<input type="file" name="file[]" multiple accept="image/*"/>
|
||||
<span><img src={newAvatar}></img></span>
|
||||
</label>
|
||||
<div className={styles.input_file_list}></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className={styles.addModal_user_input_container}>
|
||||
<input placeholder='ФИО специалиста' className={styles.addModal_user}></input>
|
||||
<input placeholder='Должность' className={styles.addModal_user}></input>
|
||||
<select className={styles.addModal_user_select}>
|
||||
<option>Пользователь</option>
|
||||
<option>Администратор</option>
|
||||
</select>
|
||||
<input placeholder='Почта' className={styles.addModal_user}></input>
|
||||
<input placeholder='TG' className={styles.addModal_user}></input>
|
||||
<div className={styles.modal__question_button_container}>
|
||||
<button className={styles.modal__question_button + ' ' + styles.yellow}>Добавить</button>
|
||||
<button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</section>
|
||||
|
||||
</>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
export default AddUsers;
|
||||
538
src/Components/AddUsersPage/style.module.scss
Normal file
538
src/Components/AddUsersPage/style.module.scss
Normal file
@@ -0,0 +1,538 @@
|
||||
.select {
|
||||
margin-right: 50px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 200px;
|
||||
padding-left: 10px;
|
||||
option {
|
||||
padding-left: 10px;
|
||||
}
|
||||
&__container {
|
||||
display: flex;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.addUsers {
|
||||
|
||||
|
||||
&__search {
|
||||
margin-top: 150px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
.profile {
|
||||
&__container {
|
||||
margin-top: 200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
}
|
||||
&__user {
|
||||
&_img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
margin-bottom: 110px;
|
||||
position: relative;
|
||||
}
|
||||
&_info_container {
|
||||
text-align: left;
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
}
|
||||
&_fullName {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #FD0;
|
||||
}
|
||||
|
||||
}
|
||||
&_spaciality {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_socialMedia {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_email {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_role {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&_progress {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&_line {
|
||||
height: 2px;
|
||||
width: 140%;
|
||||
background: linear-gradient(90deg, #ffdd00,#d0d2d8);
|
||||
padding: 0 30px 0 30px;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.addUser {
|
||||
|
||||
|
||||
&__cards_container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 120px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
&__card {
|
||||
|
||||
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 48%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
margin-bottom: 110px;
|
||||
}
|
||||
&_text {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.round {
|
||||
cursor: pointer;
|
||||
border-radius: 80%;
|
||||
height: 50px;
|
||||
border: 1px solid var(--yellow, #FD0);
|
||||
background: var(--yellow, #FD0);
|
||||
width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.feautures {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: Montserrat;
|
||||
align-items: center;
|
||||
color: #60AD1E;
|
||||
font-family: Montserrat;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
background: #E7FFD2;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
.permission {
|
||||
|
||||
|
||||
&_container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 40px;
|
||||
}
|
||||
&_img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.delete {
|
||||
|
||||
|
||||
&_container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
}
|
||||
&_img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.addModal {
|
||||
|
||||
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
height: 96px;
|
||||
height: 45px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 78.625px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
top: 13px;
|
||||
right: 50px;
|
||||
}
|
||||
&__title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&_form {
|
||||
margin-top: 100px;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
}
|
||||
&_user {
|
||||
border-radius: 7.794px;
|
||||
border: 0.779px solid var(--gray_stroke, #D0D2D8);
|
||||
height: 35px;
|
||||
width: 200px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
&_select {
|
||||
border-radius: 7.794px;
|
||||
border: 0.779px solid var(--gray_stroke, #D0D2D8);
|
||||
height: 40px;
|
||||
width: 210px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
&_input_container {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 100px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
&_container {
|
||||
height: 96%;
|
||||
|
||||
display: flex;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.input_file_row {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.input_file {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.input_file span {
|
||||
margin-top: 159px;
|
||||
padding-top: 200px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
color: rgb(255 255 255);
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
line-height: 22px;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
margin: 0;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.input_file input[type=file] {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
// .input_file input[type=file]:focus + span {
|
||||
// box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
||||
// }
|
||||
|
||||
/* Hover/active */
|
||||
|
||||
|
||||
/* Disabled */
|
||||
|
||||
|
||||
/* Список c превью */
|
||||
.input_file_list {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.input_file_list_item {
|
||||
display: inline-block;
|
||||
margin: 0 15px 15px;
|
||||
width: 150px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
.input_file_list_item img {
|
||||
width: 150px;
|
||||
}
|
||||
.input_file_list_name {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.input_file_list_remove {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: #ff0202;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.modal {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
width: 300px;
|
||||
&__container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 5000px;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
&__title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
stroke-width: 1px;
|
||||
background-color: #D0D2D8;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
height: 96px;
|
||||
height: 45px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 58.625px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
top: 0px;
|
||||
right: 50px;
|
||||
}
|
||||
&__question {
|
||||
&_number {
|
||||
margin-top: 50px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&_containerSecond {
|
||||
width: 48%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
&_user {
|
||||
&_img {
|
||||
margin-right: 25px;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items:center;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
&_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&_like {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px 0 0 10px;
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
&_input {
|
||||
margin-top: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 100%;
|
||||
height: 235px;
|
||||
padding-top: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
&_containerThird {
|
||||
margin-right: 3%;
|
||||
}
|
||||
&_button {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yellow {
|
||||
border-radius: 10px;
|
||||
background-color: #60AD1E;
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.gray {
|
||||
border-radius: 10px;
|
||||
background: var(--gray_stroke, #D0D2D8);
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
}
|
||||
1
src/Components/BeingPage/style.module.css
Normal file
1
src/Components/BeingPage/style.module.css
Normal file
@@ -0,0 +1 @@
|
||||
/*# sourceMappingURL=style.module.css.map */
|
||||
1
src/Components/BeingPage/style.module.css.map
Normal file
1
src/Components/BeingPage/style.module.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":[],"names":[],"mappings":"","file":"style.module.css"}
|
||||
16
src/Components/Calendar/index.jsx
Normal file
16
src/Components/Calendar/index.jsx
Normal file
@@ -0,0 +1,16 @@
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
|
||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
|
||||
|
||||
export default function DateCalendarFormProps() {
|
||||
return (
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DemoContainer components={['DateCalendar']}>
|
||||
<DateCalendar defaultValue={dayjs('2023-12-24')} readOnly />
|
||||
</DemoContainer>
|
||||
</LocalizationProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import './style.module.scss';
|
||||
|
||||
|
||||
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
const httpApiMethods = new HttpApiMethods()
|
||||
function extractDateTime(dateString) {
|
||||
|
||||
73
src/Components/Card/style.module.css
Normal file
73
src/Components/Card/style.module.css
Normal file
@@ -0,0 +1,73 @@
|
||||
.event_card {
|
||||
width: 292px;
|
||||
height: 626px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.wrapp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
/* max-width: 1521px; */
|
||||
}
|
||||
|
||||
:root {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.event-card_date {
|
||||
color: var(--gray_text, #888);
|
||||
/* title */
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.event-card__photo {
|
||||
width: 292px;
|
||||
height: 340px;
|
||||
flex-shrink: 0;
|
||||
background: #D9D9D9;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.event-card_title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.feautures {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: Montserrat;
|
||||
align-items: center;
|
||||
font-size: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
border-radius: 10px;
|
||||
background: #E7FFD2;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tagged {
|
||||
display: inline-flex;
|
||||
padding: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_text, #888);
|
||||
}
|
||||
|
||||
.taggs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}/*# sourceMappingURL=style.module.css.map */
|
||||
1
src/Components/Card/style.module.css.map
Normal file
1
src/Components/Card/style.module.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["style.module.scss","style.module.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,2BAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,6BAAA;EAEJ,UAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACAA;;ADGA;EACI,YAAA;EACA,aAAA;EACA,cAAA;EACJ,mBAAA;EACA,mBAAA;ACAA;;ADGA;EACI,WAAA;EAEA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACDJ;;ADGA;EAEA,aAAA;EACA,uBAAA;EACA,uBAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;ACDA;;ADIA;EACI,oBAAA;EACJ,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,wCAAA;ACDA;;ADGA;EACI,aAAA;EACA,8BAAA;ACAJ","file":"style.module.css"}
|
||||
@@ -1,21 +1,47 @@
|
||||
|
||||
import styles from './style.module.scss';
|
||||
import logo from '../../img/headerImg/OgettoLogo.png';
|
||||
import logo from '../../img/headerImg/header.png';
|
||||
import google from '../../img/headerImg/google.png';
|
||||
|
||||
import icon from '../../img/headerImg/Icon.png';
|
||||
import Menu from '../Menu'
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
const Header = () => {
|
||||
const navigate = useNavigate();
|
||||
const handleHome = () => {
|
||||
navigate('/');
|
||||
}
|
||||
const isAuth = useState(true)[0];
|
||||
console.log(isAuth)
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.header__container}>
|
||||
<>
|
||||
{(isAuth ? (
|
||||
<div className={styles.header__container}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||
<button className={styles.header__button}>ВХОД</button>
|
||||
<div className={styles.header_img_container}> <img className={styles.header_img} src={icon}></img> <Menu></Menu></div>
|
||||
</header>
|
||||
</div>
|
||||
) :
|
||||
(
|
||||
<div className={styles.header__container}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||
<button className={styles.header__button}>ВХОД <img className={styles.header__button_img} src={google}></img></button>
|
||||
</header>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
top: 0px;
|
||||
background-color: #fff;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
z-index: 20;
|
||||
}
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
@@ -35,5 +35,12 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
&_img {
|
||||
|
||||
width: 55px;
|
||||
margin-right: 40px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,15 @@
|
||||
import Header from "../Header";
|
||||
import styles from "./style.module.scss";
|
||||
import TableMeets from '../TableMeets/TableMeets'
|
||||
import Home from "../Home/Home";
|
||||
import FetchUtils from "../fetchUtils/FetchUtils";
|
||||
import EditForm from "../edit/EditForm";
|
||||
import PostForm from "../post/PostForm";
|
||||
// import EditForm from "../edit/EditMeetsForm";
|
||||
// import PostForm from "../post/Meets";
|
||||
import Users from "../post/Users";
|
||||
// import User from "../get/User";
|
||||
import Questions from "../post/Questions";
|
||||
import { GetQuestions } from "../get/Questions";
|
||||
|
||||
|
||||
import muza from '../../img/homePage/muza.png';
|
||||
const APIURL = ''
|
||||
|
||||
// const events = [
|
||||
@@ -36,7 +40,9 @@ const HomePage = () => {
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
<div className={styles.muza_img_container}><img src={muza} alt='muza' className={styles.muza_img}></img></div>
|
||||
<section className={styles.muza__container}>
|
||||
|
||||
<div className={styles.muza__title}>МУЗА</div>
|
||||
<div className={styles.muza__descr_container}>
|
||||
<div className={styles.muza__descr}>Платформа для проведения well-being мероприятий</div>
|
||||
@@ -66,12 +72,16 @@ const HomePage = () => {
|
||||
<div className={styles.cards__container}>
|
||||
<div className={styles.card}></div>
|
||||
</div>
|
||||
<Home></Home>
|
||||
{/* <Questions></Questions> */}
|
||||
{/* <Home></Home> */}
|
||||
{/* <FetchUtils></FetchUtils> */}
|
||||
{/* <PostForm /> */}
|
||||
{/* <EditForm /> */}
|
||||
{/* <Users></Users> */}
|
||||
{/* <User></User> */}
|
||||
{/* <GetQuestions></GetQuestions> */}
|
||||
<Users></Users>
|
||||
|
||||
|
||||
<PostForm />
|
||||
<EditForm />
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@@ -5,13 +5,19 @@
|
||||
}
|
||||
.muza {
|
||||
&__container {
|
||||
height: 700px;
|
||||
height: 780px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&_img {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 300px;
|
||||
height: 480px;
|
||||
}
|
||||
&__title {
|
||||
margin-top: 150px;
|
||||
color: #000;
|
||||
@@ -23,6 +29,7 @@
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 90%;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
&__descr {
|
||||
@@ -30,7 +37,7 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
margin-top: 50px;
|
||||
margin-top: 100px;
|
||||
margin-left: 70px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
@@ -41,7 +48,7 @@
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 60%;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.meeting {
|
||||
|
||||
85
src/Components/HomePageAdmin/index.jsx
Normal file
85
src/Components/HomePageAdmin/index.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import Header from "../Header";
|
||||
import styles from "./style.module.scss";
|
||||
import TableMeets from '../TableMeets/TableMeets'
|
||||
// import Home from "../Home/Home";
|
||||
// import FetchUtils from "../utils/FetchUtils";
|
||||
// import EditForm from "../edit/EditForm";
|
||||
// import PostForm from "../post/PostForm";
|
||||
// import GetMeets from '../get/Meets';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
const APIURL = ''
|
||||
|
||||
// const events = [
|
||||
// {
|
||||
// id: 1,
|
||||
// date: '10.10.2022',
|
||||
// time: '14:00',
|
||||
// title: 'Мероприятие 1',
|
||||
// speaker: 'Спикер 1',
|
||||
// avatar: 'speaker1.jpg',
|
||||
// description: 'Описание мероприятия 1',
|
||||
// isExpanded: true,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// date: '11.10.2022',
|
||||
// time: '15:30',
|
||||
// title: 'Мероприятие 2',
|
||||
// speaker: 'Спикер 2',
|
||||
// avatar: 'speaker2.jpg',
|
||||
// description: 'Описание мероприятия 2',
|
||||
// isExpanded: true,
|
||||
// },
|
||||
// // Добавьте другие мероприятия сюда
|
||||
// ];
|
||||
const HomePage = () => {
|
||||
const navigate = useNavigate();
|
||||
const handleMeet = () => {
|
||||
navigate('/adminMeets');
|
||||
}
|
||||
return (
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
<section className={styles.muza__container}>
|
||||
<button onClick={handleMeet} className={styles.muza__container_button}>Создать мероприятие</button>
|
||||
|
||||
</section>
|
||||
<section className={styles.meeting__container}>
|
||||
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.select__container}>
|
||||
<select className={styles.select} name="time__meeting">
|
||||
<option value="">Время мироприятия</option>
|
||||
</select>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.NewContainer}>
|
||||
<div className={styles.search_container}>
|
||||
<div className={styles.search__descr}>100 мероприятий</div>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cards__container}>
|
||||
<div className={styles.card}></div>
|
||||
</div>
|
||||
{/* <Home></Home> */}
|
||||
{/* <FetchUtils></FetchUtils> */}
|
||||
{/* <PostForm /> */}
|
||||
{/* <EditForm /> */}
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
export default HomePage;
|
||||
102
src/Components/HomePageAdmin/style.module.scss
Normal file
102
src/Components/HomePageAdmin/style.module.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.muza {
|
||||
&__container {
|
||||
height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
&_button {
|
||||
margin-top: 200px;
|
||||
border-radius: 15px;
|
||||
background: var(--linear, #FD0);
|
||||
width: 60%;
|
||||
height: 130px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-top: 150px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 143.016px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
&__descr {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
margin-top: 50px;
|
||||
margin-left: 70px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 46px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
.meeting {
|
||||
&__container {
|
||||
height: 1400px;
|
||||
}
|
||||
&__inputs {
|
||||
width: 90%;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #000;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.select {
|
||||
margin-right: 50px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 200px;
|
||||
&__container {
|
||||
display: flex;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.NewContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.search_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.search__descr {
|
||||
margin-right: 25px;
|
||||
}
|
||||
@@ -3,34 +3,40 @@ import styles from './style.module.scss';
|
||||
import clock from '../../img/MeetPage/Clock.png';
|
||||
import globe from '../../img/MeetPage/Globe.png';
|
||||
import avatar from '../../img/MeetPage/avatar.png';
|
||||
|
||||
import like from '../../img/MeetPage/Facebook.png';
|
||||
import Card from "../Card";
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
import { useState, CSSProperties, useEffect, useRef } from "react";
|
||||
// import { useState, CSSProperties, useEffect, useRef } from "react";
|
||||
import newAvatar from '../../img/MeetPage/newAvatar.png';
|
||||
import vk from '../../img/MeetPage/Vk.png';
|
||||
import tg from '../../img/MeetPage/Telegram.png';
|
||||
import book from '../../img/MeetPage/Book.png';
|
||||
import * as React from 'react';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: "56%",
|
||||
height: "80vh",
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '25px',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
const MeetPage = () => {
|
||||
|
||||
// const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||
// const [text, setText] = useState("");
|
||||
// const [textAreaHeight, setTextAreaHeight] = useState("auto");
|
||||
// const [parentHeight, setParentHeight] = useState("auto");
|
||||
|
||||
// const parentStyle= {
|
||||
// minHeight: parentHeight,
|
||||
// };
|
||||
|
||||
// const textAreaStyle= {
|
||||
// height: textAreaHeight,
|
||||
// };
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<section className={styles.meets}>
|
||||
@@ -51,9 +57,9 @@ const MeetPage = () => {
|
||||
<a href="#" className={styles.newMeeting__link}>Ссылка на мероприятие</a>
|
||||
<a href="#" className={styles.newMeeting__ling_video}>СКАЧАТЬ ВИДЕО</a>
|
||||
</div>
|
||||
<div className={styles.meets__otziv}>
|
||||
<span className={styles.meets__otziv_title}>Отзывы</span>
|
||||
Оставьте первый отзыв
|
||||
<div onClick={handleOpen} className={styles.meets__otziv}>
|
||||
<span className={styles.meets__otziv_title}>Оставить вопрос</span>
|
||||
Оставьте вопрос первым
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -96,13 +102,7 @@ const MeetPage = () => {
|
||||
<div className={styles.comments__input_container}>
|
||||
<div className={styles.comments__input_img_container}>
|
||||
<img className={styles.comments__input_img} src={newAvatar} alt='avatar'></img>
|
||||
<div style={parentStyle}>
|
||||
<textarea
|
||||
ref={textAreaRef}
|
||||
style={textAreaStyle}
|
||||
rows={1}
|
||||
/>
|
||||
</div>
|
||||
<textarea placeholder="Дмитрий Кирканов" className={styles.comments__input}></textarea>
|
||||
</div>
|
||||
<div className={styles.comments__button_container}>
|
||||
<button className={styles.comments__button}>ОТПРАВИТЬ</button>
|
||||
@@ -121,6 +121,78 @@ const MeetPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -145,6 +217,43 @@ const MeetPage = () => {
|
||||
</Grid>
|
||||
</Box>
|
||||
</section>
|
||||
<div>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<div className={styles.modal__title}>Вопросы</div>
|
||||
<div onClick={handleClose} className={styles.modal__close}><div className={styles.modal__close_img}>+</div></div>
|
||||
<div className={styles.modal__line}></div>
|
||||
<div className={styles.modal__question_number}>Всего <span>1</span></div>
|
||||
<div className={styles.modal__question_container}>
|
||||
<div className={styles.modal__question_containerSecond}>
|
||||
<div className={styles.modal__question_user}>
|
||||
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||
<div className={styles.modal__question_user_descr}>Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями. </div>
|
||||
<div className={styles.modal__question_time_container}>
|
||||
<div className={styles.modal__question_time}>4 мая 1990, 00:00</div>
|
||||
<div className={styles.modal__question_like_container}><img src={like} alt='like' className={styles.modal__question_like_container}></img> <span className={styles.modal__question_like}>0</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.modal__question_containerThird}>
|
||||
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||
<textarea placeholder="Дмитрий Кирканов" className={styles.modal__question_input}></textarea>
|
||||
<div className={styles.modal__question_button_container}>
|
||||
<button className={styles.modal__question_button + ' ' + styles.yellow}>Задать вопрос</button>
|
||||
<button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
@@ -327,6 +327,7 @@
|
||||
&__number {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
@@ -338,6 +339,15 @@
|
||||
align-items: start;
|
||||
padding-left: 20px;
|
||||
text-align: start;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
padding-left: 30px;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
padding-top: 30px;
|
||||
&_img {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
@@ -368,4 +378,218 @@
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__button {
|
||||
border-radius: 5.833px;
|
||||
background: var(--yellow, #FD0);
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
margin-top: 35px;
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&__all_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 500px;
|
||||
margin-top: 50px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.oneComment {
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
margin-top: 70px;
|
||||
}
|
||||
&__img {
|
||||
margin-right: 50px;
|
||||
}
|
||||
&__descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 20px;
|
||||
&_title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-right: 12px;
|
||||
&_container {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
}
|
||||
&_time {
|
||||
color: var(--gray_text, #888);
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
width: 300px;
|
||||
&__container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 5000px;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
&__title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
stroke-width: 1px;
|
||||
background-color: #D0D2D8;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
height: 96px;
|
||||
height: 45px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 58.625px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
top: 0px;
|
||||
right: 50px;
|
||||
}
|
||||
&__question {
|
||||
&_number {
|
||||
margin-top: 50px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&_containerSecond {
|
||||
width: 48%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
&_user {
|
||||
&_img {
|
||||
margin-right: 25px;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items:center;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
&_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&_like {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px 0 0 10px;
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
&_input {
|
||||
margin-top: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 100%;
|
||||
height: 235px;
|
||||
padding-top: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
&_containerThird {
|
||||
margin-right: 3%;
|
||||
}
|
||||
&_button {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yellow {
|
||||
border-radius: 10px;
|
||||
background-color: #FD0;
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.gray {
|
||||
border-radius: 10px;
|
||||
background: var(--gray_stroke, #D0D2D8);
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
}
|
||||
122
src/Components/MeetAuthPageAdmin/index.jsx
Normal file
122
src/Components/MeetAuthPageAdmin/index.jsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import Header from "../Header";
|
||||
import styles from './style.module.scss';
|
||||
import clock from '../../img/MeetPage/Clock.png';
|
||||
import globe from '../../img/MeetPage/Globe.png';
|
||||
import avatar from '../../img/MeetPage/avatar.png';
|
||||
import like from '../../img/MeetPage/Facebook.png';
|
||||
import Card from "../Card";
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
// import { useState, CSSProperties, useEffect, useRef } from "react";
|
||||
import newAvatar from '../../img/MeetPage/newAvatar.png';
|
||||
import vk from '../../img/MeetPage/Vk.png';
|
||||
import tg from '../../img/MeetPage/Telegram.png';
|
||||
import book from '../../img/MeetPage/Book.png';
|
||||
import * as React from 'react';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import newAvatarSecond from '../../img/AddUsers/newAvatar.png';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: "56%",
|
||||
height: "80vh",
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '25px',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
const MeetPage = () => {
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<section className={styles.meets}>
|
||||
<div className={styles.meets__mainInfo_container}>
|
||||
<input placeholder="Ввести название мероприятия" className={styles.meets__mainInfo_descr}></input>
|
||||
<input placeholder='Тип мероприятия' className={styles.meets__mainInfo_type}></input>
|
||||
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <input className={styles.time_input} placeholder="Время миропириятия" ></input> </div>
|
||||
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <input className={styles.status_input} placeholder='Дата проведения'></input> </div>
|
||||
</div>
|
||||
|
||||
<form className={styles.addModal_form} method="post" encType="multipart/form-data">
|
||||
<div className={styles.input_file_row}>
|
||||
<label className={styles.input_file}>
|
||||
<input type="file" name="file[]" multiple accept="image/*"/>
|
||||
<div className={styles.addUser__card_container_new}>
|
||||
<div className={styles.round}>+</div>
|
||||
<div className={styles.addUser__card_text}>Добавить пользователя</div>
|
||||
</div>
|
||||
</label>
|
||||
<div className={styles.input_file_list}></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</section>
|
||||
<div className={styles.container}>
|
||||
|
||||
<div className={styles.meets__otziv_container}>
|
||||
<div className={styles.newMeeting__container}>
|
||||
|
||||
<input placeholder="Ссылка на мероприятие" className={styles.newMeeting__link}></input>
|
||||
<input placeholder="Добавить ссылку на видео" className={styles.newMeeting__link_video}></input>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className={styles.aboutMeet}>
|
||||
<div className={styles.aboutMeet__title}>О мероприятии</div>
|
||||
<textarea placeholder="Написать описание мероприятия" style={{marginTop: '50px'}} className={styles.comments__input}></textarea>
|
||||
</section>
|
||||
<section className={styles.expert}>
|
||||
<div className={styles.expert__title}>Специалист</div>
|
||||
<div className={styles.addModal_user_container}>
|
||||
<div className={styles.addModal_user_img_container}>
|
||||
<form className={styles.addModal_form} method="post" encType="multipart/form-data">
|
||||
<div className={styles.input_file_row}>
|
||||
<label className={styles.input_file}>
|
||||
<input type="file" name="file[]" multiple accept="image/*"/>
|
||||
<span><img src={newAvatarSecond}></img></span>
|
||||
</label>
|
||||
<div className={styles.input_file_list}></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className={styles.addModal_user_input_container}>
|
||||
<input placeholder='ФИО специалиста' className={styles.addModal_user}></input>
|
||||
<input placeholder='Должность' className={styles.addModal_user}></input>
|
||||
<select className={styles.addModal_user_select}>
|
||||
<option>Пользователь</option>
|
||||
<option>Администратор</option>
|
||||
</select>
|
||||
<input placeholder='Почта' className={styles.addModal_user}></input>
|
||||
<input placeholder='Номер телефона' className={styles.addModal_user}></input>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className={styles.btn_contain}>
|
||||
<button className={styles.newMeeting__button}>Опубликовать мероприятие</button>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
export default MeetPage;
|
||||
1172
src/Components/MeetAuthPageAdmin/style.module.scss
Normal file
1172
src/Components/MeetAuthPageAdmin/style.module.scss
Normal file
File diff suppressed because it is too large
Load Diff
@@ -3,36 +3,35 @@ import styles from './style.module.scss';
|
||||
import clock from '../../img/MeetPage/Clock.png';
|
||||
import globe from '../../img/MeetPage/Globe.png';
|
||||
import avatar from '../../img/MeetPage/avatar.png';
|
||||
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
|
||||
import {useState} from 'react'
|
||||
import { style } from "@mui/system";
|
||||
import Card from "../Card";
|
||||
// import Card from "../Card";
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
|
||||
const httpApiMethods = new HttpApiMethods()
|
||||
const meets = await httpApiMethods.GetMeetings()
|
||||
// const httpApiMethods = new HttpApiMethods()
|
||||
// const meets = await httpApiMethods.GetMeetings()
|
||||
|
||||
const MeetPage = () => {
|
||||
|
||||
const filterMeet = meets.filter( (item, index) => index <= 3 )
|
||||
console.log(filterMeet)
|
||||
const id = 5
|
||||
console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
|
||||
const meetPng = (id) => {
|
||||
console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
|
||||
return httpApiMethods.APIURL_FILES + meets[id].speackerImage
|
||||
// const filterMeet = meets.filter( (item, index) => index <= 3 )
|
||||
// console.log(filterMeet)
|
||||
// const id = 0
|
||||
// console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
|
||||
// const meetPng = (id) => {
|
||||
// console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
|
||||
// return httpApiMethods.APIURL_FILES + meets[id].speackerImage
|
||||
|
||||
}
|
||||
console.log(meetPng(id))
|
||||
function extractDateTime(dateString) {
|
||||
const dateTime = new Date(dateString);
|
||||
const date = dateTime.toLocaleDateString();
|
||||
const time = dateTime.toLocaleTimeString();
|
||||
// }
|
||||
// console.log(meetPng(id))
|
||||
// function extractDateTime(dateString) {
|
||||
// const dateTime = new Date(dateString);
|
||||
// const date = dateTime.toLocaleDateString();
|
||||
// const time = dateTime.toLocaleTimeString();
|
||||
|
||||
return { date, time };
|
||||
}
|
||||
// return { date, time };
|
||||
// }
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -45,7 +44,7 @@ const MeetPage = () => {
|
||||
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
|
||||
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
|
||||
</div>
|
||||
<div className={styles.meets__img}><img src={meetPng(id)}></img></div>
|
||||
{/* <div className={styles.meets__img}><img src={meetPng(id)}></img></div> */}
|
||||
|
||||
</section>
|
||||
<div className={styles.meets__otziv_container}>
|
||||
@@ -73,7 +72,7 @@ const MeetPage = () => {
|
||||
<section className={styles.someMeetings}>
|
||||
<div className={styles.someMeetings__title}>Еще мероприятия</div>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Grid container spacing={1}>
|
||||
{/* <Grid container spacing={1}>
|
||||
{Array.isArray(meets) ? (
|
||||
filterMeet.map((item, index) => (
|
||||
|
||||
@@ -97,7 +96,7 @@ const MeetPage = () => {
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
|
||||
</Grid>
|
||||
</Grid> */}
|
||||
</Box>
|
||||
</section>
|
||||
</>
|
||||
|
||||
55
src/Components/Menu/index.jsx
Normal file
55
src/Components/Menu/index.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import avatar from '../../img/headerImg/avatar.png'
|
||||
import { useNavigate } from "react-router-dom";;
|
||||
import styles from './style.module.scss';
|
||||
export default function BasicMenu() {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
const handleHome = () => {
|
||||
navigate('/');
|
||||
setAnchorEl(null);
|
||||
}
|
||||
const handleProfile = () => {
|
||||
navigate('/profile');
|
||||
setAnchorEl(null);
|
||||
}
|
||||
const handleAtchive = () => {
|
||||
navigate('/achievements');
|
||||
setAnchorEl(null);
|
||||
}
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<img
|
||||
src={avatar}
|
||||
className={styles.header_img}
|
||||
aria-controls={open ? 'basic-menu' : undefined}
|
||||
aria-expanded={open ? 'true' : undefined}
|
||||
onClick={handleClick}
|
||||
>
|
||||
</img>
|
||||
<Menu
|
||||
id="basic-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleProfile}>Профиль</MenuItem>
|
||||
<MenuItem onClick={handleAtchive}>Достижения</MenuItem>
|
||||
<MenuItem onClick={handleHome}>Выйти</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
8
src/Components/Menu/style.module.scss
Normal file
8
src/Components/Menu/style.module.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.header {
|
||||
&_img {
|
||||
|
||||
width: 55px;
|
||||
margin-right: 40px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
22
src/Components/UserHeader/index.jsx
Normal file
22
src/Components/UserHeader/index.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
import styles from './style.module.scss';
|
||||
import logo from '../../img/headerImg/OgettoLogo.png';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const Header = () => {
|
||||
const navigate = useNavigate();
|
||||
const handleHome = () => {
|
||||
navigate('/');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.header__container}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||
<button className={styles.header__button}>ВХОД</button>
|
||||
</header>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
export default Header;
|
||||
39
src/Components/UserHeader/style.module.scss
Normal file
39
src/Components/UserHeader/style.module.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
|
||||
|
||||
.header {
|
||||
height: 75px;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
background-color: #fff;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
}
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: #FFED00;
|
||||
width: 200px;
|
||||
height: 42px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
42
src/Components/modal/index.jsx
Normal file
42
src/Components/modal/index.jsx
Normal file
@@ -0,0 +1,42 @@
|
||||
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
export default function BasicModal(open, close) {
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={close}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Text in a modal
|
||||
</Typography>
|
||||
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
74
src/Components/profilePage/index.jsx
Normal file
74
src/Components/profilePage/index.jsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import Header from "../Header";
|
||||
import styles from "./style.module.scss"
|
||||
import Calendar from "../Calendar";
|
||||
import avatar from '../../img/profilePage/avatar.png';
|
||||
import gift from '../../img/profilePage/gift.png';
|
||||
// import Home from '../Home/Home';
|
||||
const ProfilePage = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header></Header>
|
||||
<section className={styles.profile__container}>
|
||||
<div className={styles.profile__user_container}>
|
||||
<div className={styles.profile__user_img_container}>
|
||||
<img src={avatar} className={styles.profile__user_img}></img>
|
||||
<div className={styles.profile__user_role}>Участник</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_info_container}>
|
||||
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||
<div className={styles.profile__user_progress_container}>
|
||||
<span>0</span>
|
||||
<span className={styles.profile__user_progress_line}></span>
|
||||
<span>1</span>
|
||||
<img src={gift} className={styles.profile__user_progress_img}></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.calendar__container}>
|
||||
<Calendar></Calendar>
|
||||
</div>
|
||||
</section>
|
||||
<section className={styles.myMeets}>
|
||||
<div className={styles.myMeets__title}>Ваши мероприятия</div>
|
||||
<div className={styles.meeting__container}>
|
||||
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.select__container}>
|
||||
<select className={styles.select} name="time__meeting">
|
||||
<option value="">Время мироприятия</option>
|
||||
</select>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.NewContainer}>
|
||||
<div className={styles.search_container}>
|
||||
<div className={styles.search__descr}>100 мероприятий</div>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cards__container}>
|
||||
<div className={styles.card}></div>
|
||||
</div>
|
||||
{/* <Home></Home> */}
|
||||
{/* <FetchUtils></FetchUtils> */}
|
||||
{/* <PostForm /> */}
|
||||
{/* <EditForm /> */}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
||||
|
||||
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
export default ProfilePage;
|
||||
154
src/Components/profilePage/style.module.scss
Normal file
154
src/Components/profilePage/style.module.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
|
||||
|
||||
|
||||
.profile {
|
||||
|
||||
&__container {
|
||||
margin-top: 200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&__user {
|
||||
&_img {
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
}
|
||||
&_info_container {
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
}
|
||||
&_fullName {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #FD0;
|
||||
}
|
||||
|
||||
}
|
||||
&_spaciality {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_socialMedia {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_email {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_role {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&_progress {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&_line {
|
||||
height: 2px;
|
||||
width: 140%;
|
||||
background: linear-gradient(90deg, #ffdd00,#d0d2d8);
|
||||
padding: 0 30px 0 30px;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.meeting {
|
||||
&__container {
|
||||
height: 1400px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
&__inputs {
|
||||
width: 90%;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #000;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
.select {
|
||||
margin-right: 50px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 200px;
|
||||
&__container {
|
||||
display: flex;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.NewContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.search_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.search__descr {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.myMeets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: start;
|
||||
text-align: left;
|
||||
justify-content: start;
|
||||
&__title {
|
||||
margin-top: 150px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 52px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
@@ -1,71 +1,71 @@
|
||||
import React from 'react';
|
||||
import './style.css'
|
||||
import styled from 'styled-components';
|
||||
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
|
||||
import {useState} from 'react'
|
||||
import EditForm from '../post/PostForm';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Card from '../Card';
|
||||
import Box from '@mui/material/Box';
|
||||
// import React from 'react';
|
||||
// import './style.css'
|
||||
// import styled from 'styled-components';
|
||||
// // import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
// import {useState} from 'react'
|
||||
// import EditForm from '../post/Meets';
|
||||
// import Grid from '@mui/material/Grid';
|
||||
// import Card from '../Card';
|
||||
// import Box from '@mui/material/Box';
|
||||
|
||||
function extractDateTime(dateString) {
|
||||
const dateTime = new Date(dateString);
|
||||
const date = dateTime.toLocaleDateString();
|
||||
const time = dateTime.toLocaleTimeString();
|
||||
// function extractDateTime(dateString) {
|
||||
// const dateTime = new Date(dateString);
|
||||
// const date = dateTime.toLocaleDateString();
|
||||
// const time = dateTime.toLocaleTimeString();
|
||||
|
||||
return { date, time };
|
||||
}
|
||||
// return { date, time };
|
||||
// }
|
||||
|
||||
const httpApiMethods = new HttpApiMethods()
|
||||
// const httpApiMethods = new HttpApiMethods()
|
||||
|
||||
const meets = await httpApiMethods.GetMeetings()
|
||||
// const meets = await httpApiMethods.GetMeetings()
|
||||
|
||||
|
||||
const Home = () => {
|
||||
const [count, setCount] = useState(7)
|
||||
// const Home = () => {
|
||||
// const [count, setCount] = useState(7)
|
||||
|
||||
const filterMeet = meets.filter( (item, index) => index <= count )
|
||||
const allMeets = () => {
|
||||
setCount(meets.length)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end', alignItems:'center'}}>
|
||||
<Grid container sx={{width: '96%'}}>
|
||||
// const filterMeet = meets.filter( (item, index) => index <= count )
|
||||
// const allMeets = () => {
|
||||
// setCount(meets.length)
|
||||
// }
|
||||
// return (
|
||||
// <>
|
||||
// <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end', alignItems:'center'}}>
|
||||
// <Grid container sx={{width: '96%'}}>
|
||||
|
||||
|
||||
{Array.isArray(meets) ? (
|
||||
filterMeet.map((item, index) => (
|
||||
// {Array.isArray(meets) ? (
|
||||
// filterMeet.map((item, index) => (
|
||||
|
||||
|
||||
<Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||
<div className='event_card' >
|
||||
<div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||
<div className="taggs">
|
||||
<div className='tagged'>{item.tags}</div>
|
||||
<div className="feautures">{item.type}</div>
|
||||
</div>
|
||||
<h4 className="event-card__title">{item.title}</h4>
|
||||
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||
</div>
|
||||
</Grid>
|
||||
// <Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||
// <div className='event_card' >
|
||||
// <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||
// <div className="taggs">
|
||||
// <div className='tagged'>{item.tags}</div>
|
||||
// <div className="feautures">{item.type}</div>
|
||||
// </div>
|
||||
// <h4 className="event-card__title">{item.title}</h4>
|
||||
// <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||
// </div>
|
||||
// </Grid>
|
||||
|
||||
|
||||
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
{/* <EditForm></EditForm> */}
|
||||
</Grid>
|
||||
</Box>
|
||||
<div className='allButton__container'>
|
||||
<button onClick={allMeets} className='allButton'>Все мероприятия</button>
|
||||
</div>
|
||||
</>
|
||||
// ))
|
||||
// ) : (
|
||||
// <p>Неверный тип данных с сервера!</p>
|
||||
// )}
|
||||
// {/* <EditForm></EditForm> */}
|
||||
// </Grid>
|
||||
// </Box>
|
||||
// <div className='allButton__container'>
|
||||
// <button onClick={allMeets} className='allButton'>Все мероприятия</button>
|
||||
// </div>
|
||||
// </>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
// );
|
||||
// }
|
||||
|
||||
export default Home;
|
||||
// export default Home;
|
||||
|
||||
11
src/components/delete/Reactions.jsx
Normal file
11
src/components/delete/Reactions.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const DeleteReactions = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeleteReactions;
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
const EditForm = () => {
|
||||
const EditMeetsForm = () => {
|
||||
const formRef = useRef(null);
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
@@ -10,10 +10,7 @@ const EditForm = () => {
|
||||
event.preventDefault(); // Предотвращение действия по умолчанию
|
||||
let formData = new FormData(formRef.current);
|
||||
setDataIsLoad(false);
|
||||
const updatedMeets = httpApiMethods.EditMeetings(formData)
|
||||
.then(() => {
|
||||
setDataIsLoad(true);
|
||||
});
|
||||
const updatedMeets = await httpApiMethods.EditMeetings(formData);
|
||||
};
|
||||
|
||||
const handleData = (data) => {
|
||||
@@ -44,10 +41,9 @@ const EditForm = () => {
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setSelectedData({
|
||||
...selectedData,
|
||||
[event.target.name]: event.target.value
|
||||
});
|
||||
setSelectedId(event.target.value);
|
||||
const selected = data.find((item) => item.id === event.target.value);
|
||||
setSelectedData(selected);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -63,42 +59,51 @@ const EditForm = () => {
|
||||
<h2>Edit</h2>
|
||||
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||
|
||||
<ul>
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((item, index) => (
|
||||
<button onClick={() => handleDataClick(item.id)} key={index}>
|
||||
{item.id}
|
||||
<div>{item.title}</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
</ul>
|
||||
{/* автозаполнение инпутов */}
|
||||
{selectedData && (
|
||||
<>
|
||||
<ul>
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((item, index) => (
|
||||
<button style={{ border: '1px solid black' }} onClick={() => handleDataClick(item.id)} key={index}>
|
||||
{/* {item.id} */}
|
||||
<div>{item.title}</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
</ul>
|
||||
{/* автозаполнение инпутов */}
|
||||
{selectedData && (
|
||||
<>
|
||||
<form ref={formRef}>
|
||||
<input type="text" placeholder='id' name='id' value={selectedData.id} onChange={handleChange} />
|
||||
<select name="id" value={selectedData.id} onChange={handleChange}>
|
||||
{data.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{/* <input type="text" placeholder='id' name='id' value={selectedData.id} onChange={handleChange} /> */}
|
||||
<input type="text" placeholder='name' name='title' value={selectedData.title} onChange={handleChange} />
|
||||
<input type="text" placeholder='time' name='time' value={selectedData.time} onChange={handleChange} />
|
||||
<input type="text" placeholder='theme' name='theme' value={selectedData.theme} onChange={handleChange} />
|
||||
<input type="text" placeholder='speakerName' name='speakerName' value={selectedData.speakerName} onChange={handleChange} />
|
||||
<input type="file" placeholder='speackerImage' name='speackerImage'/>
|
||||
<input type="file" placeholder='placeImages' name='placeImages'/>
|
||||
<input type="file" placeholder='speackerImage' name='speackerImage' onChange={handleChange} />
|
||||
<input type="file" placeholder='placeImages' name='placeImages' onChange={handleChange} />
|
||||
<input type="text" placeholder='splecializations' name='splecializations' value={selectedData.splecializations} onChange={handleChange} />
|
||||
<input type="text" placeholder='speakerEmail' name='speakerEmail' value={selectedData.speakerEmail} onChange={handleChange} />
|
||||
<input type="text" placeholder='tags' name='tags' value={selectedData.tags} onChange={handleChange} />
|
||||
<input type="text" placeholder='SpeakerTelephone' name='speakerTelephone' value={selectedData.speakerTelephone} onChange={handleChange} />
|
||||
<input type="text" placeholder='type' name='type' value={selectedData.type} onChange={handleChange} />
|
||||
<input type="text" placeholder='videoUrl' name='videoUrl' value={selectedData.videoUrl} onChange={handleChange} />
|
||||
<input type="text" placeholder='urls' name='urls' value={selectedData.urls} onChange={handleChange} />
|
||||
<input type="text" placeholder='placeAdress' name='placeAdress' value={selectedData.placeAdress} onChange={handleChange} />
|
||||
<input type="text" placeholder='duration' name='duration' value={selectedData.duration} onChange={handleChange} />
|
||||
<button onClick={post}>Edit</button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditForm;
|
||||
export default EditMeetsForm;
|
||||
11
src/components/edit/EditQuestions.jsx
Normal file
11
src/components/edit/EditQuestions.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const EditQuestions = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditQuestions;
|
||||
11
src/components/edit/EditReviews.jsx
Normal file
11
src/components/edit/EditReviews.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const EditReviews = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditReviews;
|
||||
11
src/components/edit/EditUsers.jsx
Normal file
11
src/components/edit/EditUsers.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const EditUsers = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditUsers;
|
||||
@@ -1,154 +0,0 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import axios from "axios"
|
||||
import { useState } from "react"
|
||||
import './style.css'
|
||||
|
||||
|
||||
|
||||
export class HttpApiMethods {
|
||||
|
||||
|
||||
|
||||
api = axios.create({
|
||||
baseURL: "https://cyberbloom.zetcraft.ru/api",
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "http://localhost:5173",
|
||||
},
|
||||
});
|
||||
|
||||
APIURL = "https://cyberbloom.zetcraft.ru/api"
|
||||
APIURL_FILES = "https://cyberbloom.zetcraft.ru/api/cyber-boom-files/"
|
||||
|
||||
GetByID = async (id) => {
|
||||
let innerUrl = this.APIURL + `/meetings?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
|
||||
GetMeetings = async () => {
|
||||
let innerUrl = this.APIURL + `/meetings/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// createForm = (data) => {
|
||||
// const [formDat, setFormDat] = useState({});
|
||||
|
||||
// const handleChange = (e) => {
|
||||
// setFormDat({ ...formDat, [e.target.name]: e.target.value });
|
||||
// };
|
||||
|
||||
// const handleSubmit = (e) => {
|
||||
// let innerUrl = this.APIURL + `/meetings`
|
||||
// e.preventDefault();
|
||||
// // Отправка объекта формы на сервер
|
||||
// fetch(innerUrl, {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify(formDat),
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
// })
|
||||
// .then((response) => response.json())
|
||||
// .then((data) => {
|
||||
// // Обработка ответа от сервера
|
||||
// console.log(data);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// // Обработка ошибок
|
||||
// console.error(error);
|
||||
// });
|
||||
// };
|
||||
// let fields = Object.keys(data);
|
||||
|
||||
// let formData = new FormData();
|
||||
// fields.forEach(f => {
|
||||
|
||||
// formData.append(f, data[f]);
|
||||
// })
|
||||
// handleChange(data)
|
||||
// handleSubmit(data)
|
||||
|
||||
// return formData;
|
||||
// }
|
||||
AddMeetings = async (data) => {
|
||||
let innerUrl = this.APIURL + `/meetings`;
|
||||
|
||||
let response = await axios.postForm(innerUrl, data);
|
||||
return response.data;
|
||||
|
||||
}
|
||||
|
||||
EditMeetings = async (data) => {
|
||||
api.get("/meetings").then((response) => {
|
||||
console.log(response.data);
|
||||
return response.data;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
DeleteMeetings = async (id) => {
|
||||
let innerUrl = this.APIURL + `/meetings?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const httpApiMethods = new HttpApiMethods() // Создание экземпляра класса HttpApiMethods
|
||||
|
||||
const meets = httpApiMethods.GetMeetings()
|
||||
|
||||
const FetchUtils = () => {
|
||||
|
||||
const [user, setUser] = useState([])
|
||||
|
||||
async function getData() {
|
||||
const response = await axios.get(APIURL)
|
||||
console.log(response.data)
|
||||
setUser(response.data)
|
||||
}
|
||||
|
||||
const removeList = () => {
|
||||
setUser([])
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={getData}>Click to Get Data</button>
|
||||
<button onClick={removeList}>Click to Remove Data Listing</button>
|
||||
{/* Mapping of data */}
|
||||
<div>
|
||||
{Array.isArray(meets) ? (
|
||||
<ul>
|
||||
{meets.map((item) => (
|
||||
<ol key={item.id}>
|
||||
<li>{item.title}</li>
|
||||
<li>{item.time}</li>
|
||||
<li>{item.speakerName}</li>
|
||||
<li>{item.speackerImage}</li>
|
||||
<li>{item.splecializations}</li>
|
||||
<li>{item.type}</li>
|
||||
<li>{item.speakerTelephone}</li>
|
||||
<li>{item.speakerEmail}</li>
|
||||
<li>{item.tags}</li>
|
||||
<li>{item.videoUrl}</li>
|
||||
</ol>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Bad data type from server!</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default FetchUtils;
|
||||
85
src/components/get/Meets.jsx
Normal file
85
src/components/get/Meets.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
|
||||
import styled from 'styled-components';
|
||||
// import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
import {useState} from 'react'
|
||||
import EditMeetsForm from '../edit/EditMeetsForm';
|
||||
import Grid from '@mui/material/Grid';
|
||||
// import Card from '../Card';
|
||||
import Box from '@mui/material/Box';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function extractDateTime(dateString) {
|
||||
const dateTime = new Date(dateString);
|
||||
const date = dateTime.toLocaleDateString();
|
||||
const time = dateTime.toLocaleTimeString();
|
||||
|
||||
return { date, time };
|
||||
}
|
||||
|
||||
const httpApiMethods = new HttpApiMethods()
|
||||
|
||||
const meets = await httpApiMethods.GetMeetings()
|
||||
|
||||
|
||||
|
||||
export const MeetsGetByID = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const GetMeets = () => {
|
||||
const [count, setCount] = useState(7)
|
||||
|
||||
const filterMeet = meets.filter( (item, index) => index <= count )
|
||||
const allMeets = () => {
|
||||
setCount(meets.length)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end', alignItems:'center'}}>
|
||||
<Grid container sx={{width: '96%'}}>
|
||||
|
||||
|
||||
{Array.isArray(meets) ? (
|
||||
filterMeet.map((item, index) => (
|
||||
|
||||
|
||||
<Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||
<div className='event_card' >
|
||||
<div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||
<div className="taggs">
|
||||
<div className='tagged'>{item.tags}</div>
|
||||
<div className="feautures">{item.type}</div>
|
||||
</div>
|
||||
<h4 className="event-card__title">{item.title}</h4>
|
||||
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
|
||||
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
{/* <EditForm></EditForm> */}
|
||||
</Grid>
|
||||
</Box>
|
||||
<div className='allButton__container'>
|
||||
<button onClick={allMeets} className='allButton'>Все мероприятия</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default GetMeets;
|
||||
53
src/components/get/Questions.jsx
Normal file
53
src/components/get/Questions.jsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
const httpApiMethods = new HttpApiMethods
|
||||
|
||||
|
||||
|
||||
|
||||
export const GetQuestions = async () => {
|
||||
const questions = await httpApiMethods.GetQuestions()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{Array.isArray(questions) ? (
|
||||
questions.map((item, index) => (
|
||||
<div key={index}>
|
||||
<div>{item.id}</div>
|
||||
<div>{item.text}</div>
|
||||
<div>{item.meetingId}</div>
|
||||
<div>{item.userId}</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const GetQuestionsByID = async (id) => {
|
||||
const question = await httpApiMethods.GetByIDQuestions(id)
|
||||
|
||||
return (
|
||||
<div>
|
||||
{Array.isArray(question) ? (
|
||||
question.map((item, index) => (
|
||||
<div key={index}>
|
||||
<div>{item.id}</div>
|
||||
<div>{item.text}</div>
|
||||
<div>{item.meetingId}</div>
|
||||
<div>{item.userId}</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GetQuestionsByID;
|
||||
19
src/components/get/Reactions.jsx
Normal file
19
src/components/get/Reactions.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
export const GetByIDReactions = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getReactions = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Reactions;
|
||||
19
src/components/get/Reviews.jsx
Normal file
19
src/components/get/Reviews.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
export const GetReviews = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const GetReviewsByID = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GetReviewsByID;
|
||||
36
src/components/get/User.jsx
Normal file
36
src/components/get/User.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
const User = () => {
|
||||
let id = '9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'
|
||||
// Cookies.set('userId')
|
||||
const user = new HttpApiMethods().GetUsers(id)
|
||||
|
||||
if (!Array.isArray(user)) {
|
||||
return <p>Неверный тип данных с сервера!</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{user.map((item, index) => (
|
||||
|
||||
<div key={index}>
|
||||
<p>{item.id}</p>
|
||||
<img src={item.avatarUrl} alt={item.avatarUrl}/>
|
||||
<p>{item.fio}</p>
|
||||
<p>{item.specialities}</p>
|
||||
<a>{item.telegramBotUrl}</a>
|
||||
<p>{item.level}</p>
|
||||
<p>{item.userName}</p>
|
||||
<p>{item.normalizedUserName}</p>
|
||||
<p>{item.email}</p>
|
||||
<p>{item.phoneNumber}</p>
|
||||
<p>{item.id}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default User;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
|
||||
const PostForm = () => {
|
||||
@@ -24,8 +24,8 @@ const PostForm = () => {
|
||||
<div>
|
||||
<h2>Post</h2>
|
||||
<div>{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}</div>
|
||||
<form ref={formRef} action='https://cyberbloom.zetcraft.ru/api/meetings'>
|
||||
<input type="text" placeholder='name' name='title'/>
|
||||
<form ref={formRef} action=''>
|
||||
<input type="text" placeholder='title' name='title'/>
|
||||
<input type="text" placeholder='time' name='time'/>
|
||||
<input type="text" placeholder='theme' name='theme'/>
|
||||
<input type="text" placeholder='speakerName' name='speakerName'/>
|
||||
@@ -33,10 +33,12 @@ const PostForm = () => {
|
||||
<input type="file" placeholder='placeImages' name='placeImages'/>
|
||||
<input type="text" placeholder='splecializations' name='splecializations'/>
|
||||
<input type="text" placeholder='speakerEmail' name='speakerEmail'/>
|
||||
<input type="text" placeholder='tags' name='tags'/>
|
||||
<input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
|
||||
<input type="text" placeholder='type' name='type'/>
|
||||
<input type="text" placeholder='videoUrl' name='videoUrl'/>
|
||||
<input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
|
||||
<input type="text" placeholder='tags' name='tags'/>
|
||||
<input type="text" placeholder='urls' name='urls'/>
|
||||
<input type="text" placeholder='placeAdress' name='placeAdress'/>
|
||||
<input type="text" placeholder='duration' name='duration'/>
|
||||
<button onClick={post}>Create</button>
|
||||
</form>
|
||||
</div>
|
||||
13
src/components/post/PostReviews.jsx
Normal file
13
src/components/post/PostReviews.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
const PostReviews = () => {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PostReviews;
|
||||
51
src/components/post/Questions.jsx
Normal file
51
src/components/post/Questions.jsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
const Questions = () => {
|
||||
const formRef = useRef(null);
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||
const [curentUser, setCurentUser] = useState(null);
|
||||
|
||||
let post = async (event) => {
|
||||
event.preventDefault();
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
const user_id = Cookies.get('userData')
|
||||
let formData = new FormData(formRef.current);
|
||||
|
||||
|
||||
|
||||
if (!formData.get('fio') || !formData.get('avatar') || !formData.get('userId') || !formData.get('text') || !formData.get('meetingId')) {
|
||||
console.error('Ошибка: Не все поля формы заполнены');
|
||||
return;
|
||||
}
|
||||
|
||||
setDataIsLoad(false);
|
||||
httpApiMethods.PostQuestions(formData).then(response => {
|
||||
console.log(response)
|
||||
setDataIsLoad(true);
|
||||
meets_id = '9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'
|
||||
// let user_id = response.data.id;
|
||||
// console.log(response)
|
||||
// console.log(user_id)
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Создание Questions, получение ID в Cookies</h2>
|
||||
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||
<form ref={formRef} action=''>
|
||||
|
||||
{/* <input type="text" placeholder='userId' name={Cookies.get('userData')} /> */}
|
||||
<input type="text" placeholder='userId' name='userId' value={Cookies.get('userId')} />
|
||||
<input type="text" placeholder='text' name='text' />
|
||||
<input type="text" placeholder='meetingId' name='meetingId' value={'9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'} />
|
||||
<button onClick={post}>Create</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Questions;
|
||||
13
src/components/post/UserAuth.jsx
Normal file
13
src/components/post/UserAuth.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
const UserAuth = () => {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserAuth;
|
||||
58
src/components/post/Users.jsx
Normal file
58
src/components/post/Users.jsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
export const PostUserModerator = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const Users = () => {
|
||||
const formRef = useRef(null);
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||
const [curentUser, setCurentUser] = useState(null);
|
||||
|
||||
let post = async (event) => {
|
||||
event.preventDefault();
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
let formData = new FormData(formRef.current);
|
||||
|
||||
if (!formData.get('fio') || !formData.get('avatar') || !formData.get('username') || !formData.get('specialities') || !formData.get('telegramBotUrl')) {
|
||||
console.error('Ошибка: Не все поля формы заполнены');
|
||||
return;
|
||||
}
|
||||
|
||||
setDataIsLoad(false);
|
||||
httpApiMethods.PostUsers(formData).then(response => {
|
||||
console.log(response)
|
||||
setDataIsLoad(true);
|
||||
// let user_id = response.data.id;
|
||||
// console.log(response)
|
||||
// console.log(user_id)
|
||||
Cookies.set('userId', response.id);
|
||||
Cookies.set('token', response.token)
|
||||
// return user_id
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Создание пользователя, получение ID в Cookies</h2>
|
||||
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||
<form ref={formRef} action=''>
|
||||
<input type="text" placeholder='fio' name='fio' />
|
||||
<input type="file" placeholder='avatar' name='avatar' />
|
||||
<input type="text" placeholder='username' name='username' />
|
||||
<input type="text" placeholder='specialities' name='specialities' />
|
||||
<input type="text" placeholder='telegramBotUrl' name='telegramBotUrl' />
|
||||
<button onClick={post}>Create</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Users;
|
||||
0
src/components/post/postReactions.jsx
Normal file
0
src/components/post/postReactions.jsx
Normal file
256
src/components/utils/FetchUtils.jsx
Normal file
256
src/components/utils/FetchUtils.jsx
Normal file
@@ -0,0 +1,256 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import axios from "axios"
|
||||
import { useState } from "react"
|
||||
import './style.css'
|
||||
import { Cookie } from "@mui/icons-material"
|
||||
|
||||
|
||||
|
||||
export class HttpApiMethods {
|
||||
|
||||
token;
|
||||
HttpApiMethods()
|
||||
{
|
||||
token = Cookie,get('token')
|
||||
}
|
||||
// URL`s
|
||||
user_id = '17e5fc7a-8f22-4c0b-8b33-5dc3a6937561'
|
||||
APIURL = "https://cyberbloom.zetcraft.ru/api"
|
||||
APIURL_FILES = "https://cyberbloom.zetcraft.ru/api/cyber-boom-files/"
|
||||
// получение мероприятий по ID
|
||||
GetByID = async (id) => {
|
||||
|
||||
let innerUrl = this.APIURL + `/meetings?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Получение всех мероприятий
|
||||
//
|
||||
GetMeetings = async () => {
|
||||
let innerUrl = this.APIURL + `/meetings/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Создание мероприятия
|
||||
AddMeetings = async (data) => {
|
||||
let innerUrl = this.APIURL + `/meetings`;
|
||||
|
||||
let response = await axios.postForm(innerUrl, data); //
|
||||
return response.data;
|
||||
|
||||
}
|
||||
// Редактирование уже существующего мероприятия
|
||||
EditMeetings = async (data) => {
|
||||
let innerUrl = this.APIURL + `/meetings`;
|
||||
let response = await axios.putForm(innerUrl, data); //
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Удалить мероприятие, пока что не реализовано
|
||||
DeleteMeetings = async (id) => {
|
||||
let innerUrl = this.APIURL + `/meetings?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl) //
|
||||
|
||||
return response.data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Users
|
||||
//
|
||||
PostUsers = async (data) => {
|
||||
let innerUrl = this.APIURL + `/users`
|
||||
const responce = await axios.postForm(innerUrl, data)
|
||||
return responce.data
|
||||
}
|
||||
PostUsersModerator = async (data) => {
|
||||
let innerUrl = this.APIURL + `/users/moderator`
|
||||
const responce = await axios.postForm(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} })
|
||||
return responce.data.id
|
||||
}
|
||||
EditUsers = async (data) => {
|
||||
let innerUrl = this.APIURL + `/users`
|
||||
const responce = await axios.putForm(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }) //
|
||||
return responce.data.id
|
||||
}
|
||||
GetUsers = async (id) => {
|
||||
let innerUrl = this.APIURL + `/users?id=${id}`
|
||||
|
||||
const responce = await axios.get(innerUrl) //
|
||||
|
||||
return responce.data
|
||||
}
|
||||
GetUsersStats = async (id) => {
|
||||
let innerUrl = this.APIURL + `/users/stats?id=${id}`
|
||||
|
||||
const responce = await axios.get(innerUrl) //
|
||||
|
||||
return responce.data
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Questions
|
||||
//
|
||||
GetByIDQuestions = async (id) => {
|
||||
|
||||
let innerUrl = this.APIURL + `/questions?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Получение всех мероприятий
|
||||
GetQuestions = async () => {
|
||||
let innerUrl = this.APIURL + `/questions/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Создание мероприятия
|
||||
PostQuestions = async (data) => {
|
||||
let innerUrl = this.APIURL + `/questions`;
|
||||
|
||||
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
|
||||
}
|
||||
// Редактирование уже существующего мероприятия
|
||||
EditQuestions = async (data) => {
|
||||
let innerUrl = this.APIURL + `/questions`;
|
||||
let response = await axios.put(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reactions
|
||||
//
|
||||
GetByIDReactions = async (id) => {
|
||||
|
||||
let innerUrl = this.APIURL + `/reactions?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Получение всех мероприятий
|
||||
GetReactions = async () => {
|
||||
let innerUrl = this.APIURL + `/reactions/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Создание мероприятия
|
||||
PostReactions = async (data) => {
|
||||
let innerUrl = this.APIURL + `/reactions`;
|
||||
|
||||
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
|
||||
}
|
||||
// Редактирование уже существующего мероприятия
|
||||
DeleteReactions = async (id) => {
|
||||
let innerUrl = this.APIURL + `/reactions?id=${id}`;
|
||||
let response = await axios.delete(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
}
|
||||
|
||||
//
|
||||
// Reviews
|
||||
//
|
||||
GetByIDReviews = async (id) => {
|
||||
|
||||
let innerUrl = this.APIURL + `/reviews?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
GetReviews = async () => {
|
||||
let innerUrl = this.APIURL + `/reviews/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Создание мероприятия
|
||||
PostReviews = async (data) => {
|
||||
let innerUrl = this.APIURL + `/reviews`;
|
||||
|
||||
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
|
||||
}
|
||||
// Редактирование уже существующего мероприятия
|
||||
EditReviews = async (data) => {
|
||||
let innerUrl = this.APIURL + `/reviews`;
|
||||
let response = await axios.put(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const FetchUtils = async () => {
|
||||
const httpApiMethods = new HttpApiMethods() // Создание экземпляра класса HttpApiMethods
|
||||
|
||||
const meets = await httpApiMethods.GetMeetings()
|
||||
const [user, setUser] = useState([])
|
||||
|
||||
// async function getData() {
|
||||
// const response = await axios.get()
|
||||
// console.log(response.data)
|
||||
// setUser(response.data)
|
||||
// }
|
||||
|
||||
const removeList = () => {
|
||||
setUser([])
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={getData}>Click to Get Data</button>
|
||||
<button onClick={removeList}>Click to Remove Data Listing</button>
|
||||
{/* Mapping of data */}
|
||||
<div>
|
||||
{Array.isArray(meets) ? (
|
||||
<ul>
|
||||
{meets.map((item) => (
|
||||
<ol key={item.id}>
|
||||
<li>{item.title}</li>
|
||||
<li>{item.time}</li>
|
||||
<li>{item.speakerName}</li>
|
||||
<li>{item.speackerImage}</li>
|
||||
<li>{item.splecializations}</li>
|
||||
<li>{item.type}</li>
|
||||
<li>{item.speakerTelephone}</li>
|
||||
<li>{item.speakerEmail}</li>
|
||||
<li>{item.tags}</li>
|
||||
<li>{item.videoUrl}</li>
|
||||
</ol>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Bad data type from server!</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default FetchUtils;
|
||||
BIN
src/img/AddUsers/delete.png
Normal file
BIN
src/img/AddUsers/delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 688 B |
BIN
src/img/AddUsers/newAvatar.png
Normal file
BIN
src/img/AddUsers/newAvatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
src/img/AddUsers/permission.png
Normal file
BIN
src/img/AddUsers/permission.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
BIN
src/img/MeetPage/Facebook.png
Normal file
BIN
src/img/MeetPage/Facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 710 B |
BIN
src/img/headerImg/Icon.png
Normal file
BIN
src/img/headerImg/Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1016 B |
BIN
src/img/headerImg/avatar.png
Normal file
BIN
src/img/headerImg/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/img/headerImg/google.png
Normal file
BIN
src/img/headerImg/google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 953 B |
BIN
src/img/headerImg/header.png
Normal file
BIN
src/img/headerImg/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/img/homePage/muza.png
Normal file
BIN
src/img/homePage/muza.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
BIN
src/img/profilePage/avatar.png
Normal file
BIN
src/img/profilePage/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
src/img/profilePage/gift.png
Normal file
BIN
src/img/profilePage/gift.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
|
||||
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
|
||||
Reference in New Issue
Block a user