CyberBloom/OgeetoCaseCyberGarden
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

idImg

Browse Source
This commit is contained in:
Vsevo;od
2023-12-23 12:29:37 +03:00
parent 64317df44c
commit 8f39b15ab4
4 changed files with 92 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/Components/Card/index.jsx
View File

@@ -1,22 +1,32 @@
import './style.module.scss';
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
const httpApiMethods = new HttpApiMethods()
function extractDateTime(dateString) {
const dateTime = new Date(dateString);
const date = dateTime.toLocaleDateString();
const time = dateTime.toLocaleTimeString();
const Card = () => {
return { date, time };
}
const Card = (item) => {
console.log(item);
return (
<>
<div className='event_card'>
<div className="event-card__photo" />
<div className="taggs">
<div className='tagged'>Психология</div>
<div className="feautures">Предстоящее</div>
</div>
<h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
<p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
<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>
</>
)

60
src/Components/MeetPage/index.jsx
View File

@@ -3,13 +3,37 @@ 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 Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
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
}
console.log(meetPng(id))
function extractDateTime(dateString) {
const dateTime = new Date(dateString);
const date = dateTime.toLocaleDateString();
const time = dateTime.toLocaleTimeString();
return { date, time };
}
return (
<>
<Header></Header>
@@ -21,7 +45,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}></div>
<div className={styles.meets__img}><img src={meetPng(id)}></img></div>
</section>
<div className={styles.meets__otziv_container}>
@@ -50,18 +74,28 @@ const MeetPage = () => {
<div className={styles.someMeetings__title}>Еще мероприятия</div>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid item xs={6} md={4} lg={3} >
<Card></Card>
</Grid>
<Grid item xs={6} md={4} lg={3} >
<Card></Card>
</Grid>
<Grid item xs={6} md={4} lg={3} >
<Card></Card>
</Grid>
<Grid item xs={6} md={4} lg={3} >
<Card></Card>
</Grid>
{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>
)}
</Grid>
</Box>

8
src/Components/MeetPage/style.module.scss
View File

@@ -6,7 +6,13 @@
&__img {
width: 44%;
height: 300px;
background-color: #D9D9D9;
img {
height: 100%;
}
}
&__mainInfo {
&_container {

29
src/components/Home/Home.jsx
View File

@@ -8,6 +8,13 @@ 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();
return { date, time };
}
const httpApiMethods = new HttpApiMethods()
@@ -16,13 +23,7 @@ const meets = await httpApiMethods.GetMeetings()
const Home = () => {
const [count, setCount] = useState(7)
function extractDateTime(dateString) {
const dateTime = new Date(dateString);
const date = dateTime.toLocaleDateString();
const time = dateTime.toLocaleTimeString();
return { date, time };
}
const filterMeet = meets.filter( (item, index) => index <= count )
const allMeets = () => {
setCount(meets.length)
@@ -38,15 +39,15 @@ const Home = () => {
<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 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>
<h4 className="event-card__title">{item.title}</h4>
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
</div>
</Grid>