Compare commits
No commits in common. "49f3a2be71bf6e01c05a185172f84dbee6922d7e" and "3bfd4533b8093ef87a311d77a652a89deb416d99" have entirely different histories.
49f3a2be71
...
3bfd4533b8
@ -1,6 +1,6 @@
|
||||
|
||||
import './App.css'
|
||||
import FetchUtils from './components/fetchUtils/FetchUtils.jsx'
|
||||
import FetchUtils from './components/fetchUtils/FetchUtils'
|
||||
// import TableMeets from './components/fetchUtils/TableMeets.jsx'
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import BeingPage from "./Components/BeingPage/index.jsx";
|
||||
|
||||
@ -2,35 +2,30 @@ 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";
|
||||
|
||||
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 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 = () => {
|
||||
return (
|
||||
<>
|
||||
@ -67,9 +62,6 @@ const HomePage = () => {
|
||||
<div className={styles.card}></div>
|
||||
</div>
|
||||
<Home></Home>
|
||||
{/* <FetchUtils></FetchUtils> */}
|
||||
<PostForm />
|
||||
<EditForm />
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@ -47,8 +47,8 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
// &__arrow {
|
||||
&__arrow {
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,44 +1,37 @@
|
||||
import React from 'react';
|
||||
// import Header from '../Header';
|
||||
import './style.css'
|
||||
import styled from 'styled-components';
|
||||
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
|
||||
import EditForm from '../post/PostForm';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Card from '../Card';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
|
||||
|
||||
const httpApiMethods = new HttpApiMethods()
|
||||
|
||||
const meets = await httpApiMethods.GetMeetings()
|
||||
|
||||
const Home = () => {
|
||||
|
||||
function extractDateTime(dateString) {
|
||||
const dateTime = new Date(dateString);
|
||||
const date = dateTime.toLocaleDateString();
|
||||
const time = dateTime.toLocaleTimeString();
|
||||
|
||||
return { date, time };
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='wrapp'>
|
||||
{Array.isArray(meets) ? (
|
||||
meets.map((item, index) => (
|
||||
<div className='event_card' key={index}>
|
||||
<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>
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
{/* <EditForm></EditForm> */}
|
||||
</div>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={6} md={4}>
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4}>
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4}>
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4}>
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4}>
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4}>
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -3,14 +3,12 @@
|
||||
height: 626px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 100px;
|
||||
margin-right: 11px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.wrapp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 40px;
|
||||
/* max-width: 1521px; */
|
||||
}
|
||||
|
||||
@ -20,7 +18,6 @@
|
||||
|
||||
.event-card_date {
|
||||
color: var(--gray_text, #888);
|
||||
text-align: left;
|
||||
|
||||
/* title */
|
||||
font-family: Montserrat;
|
||||
@ -46,13 +43,6 @@ margin-bottom: 26px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 292px;
|
||||
height: 340px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.feautures {
|
||||
|
||||
|
||||
@ -1,104 +0,0 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
|
||||
|
||||
const EditForm = () => {
|
||||
const formRef = useRef(null);
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
|
||||
const post = async (event) => {
|
||||
event.preventDefault(); // Предотвращение действия по умолчанию
|
||||
let formData = new FormData(formRef.current);
|
||||
setDataIsLoad(false);
|
||||
const updatedMeets = httpApiMethods.EditMeetings(formData)
|
||||
.then(() => {
|
||||
setDataIsLoad(true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleData = (data) => {
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
setData(data);
|
||||
} else {
|
||||
setData([]);
|
||||
console.error('Неверный тип данных с сервера!');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const data = await httpApiMethods.GetMeetings();
|
||||
handleData(data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const [selectedId, setSelectedId] = useState('');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
|
||||
const handleDataClick = (id) => {
|
||||
const selected = data.find((item) => item.id === id);
|
||||
setSelectedData(selected);
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setSelectedData({
|
||||
...selectedData,
|
||||
[event.target.name]: event.target.value
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const FillInputs = () => {
|
||||
httpApiMethods.GetByID()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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 && (
|
||||
<>
|
||||
<form ref={formRef}>
|
||||
<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="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} />
|
||||
<button onClick={post}>Edit</button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditForm;
|
||||
@ -5,150 +5,64 @@ 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 = () => {
|
||||
// default value of data is object or array/nums/string
|
||||
// const [rata, setRata] = useState([])
|
||||
const [user, setUser] = useState([])
|
||||
// single axios feetching
|
||||
|
||||
const [user, setUser] = useState([])
|
||||
// useEffect(
|
||||
// () => {
|
||||
// async function getData() {
|
||||
// const response = await axios.get('http://localhost:5000/weatherforecast')
|
||||
// console.log(response.data)
|
||||
// setRata(response.data)
|
||||
// }
|
||||
// getData()
|
||||
// }, []
|
||||
// )
|
||||
// useEffect(
|
||||
// () => {
|
||||
async function getData() {
|
||||
const response = await axios.get('https://jsonplaceholder.typicode.com/users')
|
||||
console.log(response.data)
|
||||
setUser(response.data)
|
||||
}
|
||||
// getData()
|
||||
// }, []
|
||||
// )
|
||||
// Loop of axios fetching \\
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
// async function getData() {
|
||||
// const response = await axios.get('http://localhost:5000/weatherforecast')
|
||||
// console.log(response.data)
|
||||
// setRata(response.data)
|
||||
// }
|
||||
// getData()
|
||||
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(user) ? (
|
||||
<ul>
|
||||
{user.map((item) => (
|
||||
<ol key={item.id}>
|
||||
<li>{item.name}</li>
|
||||
<li>{item.username}</li>
|
||||
<li>{item.email}</li>
|
||||
</ol>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Bad data type from server!</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default FetchUtils;
|
||||
@ -1,46 +0,0 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
|
||||
|
||||
|
||||
const PostForm = () => {
|
||||
const formRef = useRef(null); // Добавление этой строки
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false)
|
||||
|
||||
let post = async () => {
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
let formData = new FormData(formRef.current); // Изменение этой строки
|
||||
setDataIsLoad(false)
|
||||
const updatedMeets = httpApiMethods.AddMeetings(formData)
|
||||
.then(
|
||||
() => {
|
||||
setDataIsLoad(true)
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Post</h2>
|
||||
<div>{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}</div>
|
||||
<form ref={formRef} action='https://cyberbloom.zetcraft.ru/api/meetings'>
|
||||
<input type="text" placeholder='name' name='title'/>
|
||||
<input type="text" placeholder='time' name='time'/>
|
||||
<input type="text" placeholder='theme' name='theme'/>
|
||||
<input type="text" placeholder='speakerName' name='speakerName'/>
|
||||
<input type="file" placeholder='speackerImage' name='speackerImage'/>
|
||||
<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'/>
|
||||
<button onClick={post}>Create</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PostForm;
|
||||
Loading…
x
Reference in New Issue
Block a user