task-17-lct/frontend
1
0
Fork 0
mirror of https://github.com/task-17-lct/frontend.git synced 2024-11-10 22:36:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

add generate logic

Browse Source
This commit is contained in:
= 2023-05-21 01:42:17 +03:00
parent b67d63173f
commit 1bc386893f
7 changed files with 135 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -22,6 +22,7 @@
"@yandex/ui": "^3.33.0",
"antd": "^5.5.0",
"axios": "^1.4.0",
"gl-matrix": "^3.4.3",
"mapbox-gl": "^2.14.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

3
package.json
View File

@ -3,10 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-spring/web": "^9.7.2",
"@bem-react/classname": "^1.6.0",
"@bem-react/core": "^5.1.0",
"@bem-react/di": "^5.0.0",
"@react-spring/web": "^9.7.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@ -17,6 +17,7 @@
"@yandex/ui": "^3.33.0",
"antd": "^5.5.0",
"axios": "^1.4.0",
"gl-matrix": "^3.4.3",
"mapbox-gl": "^2.14.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

1
src/App.tsx
View File

@ -3,7 +3,6 @@ import { Register } from './pages/Register';
import { MyMap } from './сomponents/map';
import 'mapbox-gl/dist/mapbox-gl.css';
configureRootTheme({ theme })
function App() {
return (

53
src/elements/TourCard/index.tsx
View File

@ -1,7 +1,8 @@
import React from "react";
import React, { useState } from "react";
import { Button } from '../../elements/Button'
import { Block } from '../../elements/Block'
import './style.css'
import { MyMap } from "../../сomponents/map";
export interface PlaceCardIE{
title:string,
@ -30,28 +31,40 @@ export const PlaceCard: React.FC<PlaceCardIE> = (props) =>{
export const TourCard:React.FC<TourCardIE> = (props) =>{
const [showMap, setShowMap] = useState(false)
return(
<Block className='tourcard-block'>
<div className="cardDescr">
<div className="cardTitle">
<div className="titleText">{props.title}</div>
<div className="cardInfo">
<div>{props.days} дней,</div>
<div>{props.placeCards.length} мест</div>
</div>
</div>
<img className="cardAvatar" src={props.imageURL}></img>
</div>
<div className="placesWrapper">
{
props.placeCards.map((value, index) => <PlaceCard {...value}></PlaceCard>)
}
</div>
<Button className=''>Посмотреть</Button>
<div>
{showMap? <div>
<Block className='tourcard-block'>
<MyMap></MyMap>
<Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
</Block>
</Block>
</div>:null}
<Block className='tourcard-block'>
<div className="cardDescr">
<div className="cardTitle">
<div className="titleText">{props.title}</div>
<div className="cardInfo">
<div>{props.days} дней,</div>
<div>{props.placeCards.length} мест</div>
</div>
</div>
<img className="cardAvatar" src={props.imageURL}></img>
</div>
<div className="placesWrapper">
{
props.placeCards.map((value, index) => <PlaceCard {...value}></PlaceCard>)
}
</div>
<Button className='' onClick={()=>setShowMap(!showMap)}>Посмотреть</Button>
</Block>
</div>
);

84
src/pages/GenerateTour/index.tsx Normal file
View File

@ -0,0 +1,84 @@
import React, { useState } from "react";
import { DatePicker, Select } from 'antd';
import { RusPassHeader } from "../../elements/Header";
import { Block } from "../../elements/Block";
import { Button } from "../../elements/Button";
import { TourCard, TourCardIE } from "../../elements/TourCard";
const { RangePicker } = DatePicker;
export const GenerateTour = () =>{
const [dates, setDates] = useState()
const [theme, setTheme] = useState('jack')
const [generate, setGenerate] = useState(false)
const TourPropsCard = {
title: 'Я покажу тебе Москву',
days: 8,
imageURL: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
placeCards: [
{
title:'Парк Горького',
type: 'Место',
imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
},
{
title:'Отель Москва',
type: 'Отель',
imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
},
{
title:'Ресторан Сказка',
type: 'Ресторан',
imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
}
]
} as TourCardIE
let tours = []
for (let i=0; i<=5; i++){
tours.push(
<TourCard {...TourPropsCard}></TourCard>
)
}
return(
<div>
<RusPassHeader></RusPassHeader>
<div>
<Block className="">
<div>
<RangePicker
onChange={(e)=>setDates(e as any)}
></RangePicker>
<Select
defaultValue="lucy"
style={{ width: 120 }}
value={theme}
onChange={(e)=>setTheme(e)}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
{ value: 'disabled', label: 'Disabled'},
]}
/>
<Button onClick={()=>setGenerate(!generate)} className="btn-y">Сгенирировать</Button>
</div>
<div>
{
generate? tours:null
}
</div>
</Block>
</div>
</div>
);
}

9
src/pages/GenerateTour/style.css Normal file
View File

@ -0,0 +1,9 @@
.btn-y{
width: 200px!important;
background-color: #FFCF08;
border-radius: 10px;
padding: 15px 50px;
outline: none;
border: none;
cursor: pointer;
}

6
src/router.tsx
View File

@ -6,6 +6,7 @@ import { Register } from './pages/Register';
import { Login } from './pages/Login';
import { Main } from './pages/Main';
import { EventMatch } from './pages/EventMatch';
import { GenerateTour } from './pages/GenerateTour';
const routes = [
@ -28,7 +29,12 @@ const routes = [
{
path: '/event-match',
element: <EventMatch></EventMatch>
},
{
path: '/generate',
element: <GenerateTour></GenerateTour>
}
]
export const router = createBrowserRouter(routes);