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

update main page

Browse Source
This commit is contained in:
= 2023-05-23 14:18:22 +03:00
parent 5fe168fbc3
commit 3e6c41d899
11 changed files with 291 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

3
public/filter.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 7C11 5.34315 12.3431 4 14 4C15.3999 4 16.5759 4.9589 16.907 6.25572C16.9374 6.25195 16.9685 6.25 17 6.25H21C21.4142 6.25 21.75 6.58579 21.75 7C21.75 7.41421 21.4142 7.75 21 7.75H17C16.9685 7.75 16.9374 7.74805 16.907 7.74428C16.5759 9.0411 15.3999 10 14 10C12.3431 10 11 8.65685 11 7ZM3 6.25C2.58579 6.25 2.25 6.58579 2.25 7C2.25 7.41421 2.58579 7.75 3 7.75H8C8.41421 7.75 8.75 7.41421 8.75 7C8.75 6.58579 8.41421 6.25 8 6.25H3ZM3 16.25C2.58579 16.25 2.25 16.5858 2.25 17C2.25 17.4142 2.58579 17.75 3 17.75H7C7.03151 17.75 7.06256 17.7481 7.09305 17.7443C7.42409 19.0411 8.60006 20 10 20C11.6569 20 13 18.6569 13 17C13 15.3431 11.6569 14 10 14C8.60006 14 7.42409 14.9589 7.09305 16.2557C7.06256 16.2519 7.03151 16.25 7 16.25H3ZM16 16.25C15.5858 16.25 15.25 16.5858 15.25 17C15.25 17.4142 15.5858 17.75 16 17.75H21C21.4142 17.75 21.75 17.4142 21.75 17C21.75 16.5858 21.4142 16.25 21 16.25H16Z" fill="#1D1D1D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
public/react.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="2" height="24" viewBox="0 0 2 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="2" height="24" rx="1" fill="#FAEFDB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 153 B

4
src/App.tsx
View File

@ -1,13 +1,13 @@
import React from 'react';
import { Register } from './pages/Register';
import { MyMap } from './сomponents/map';
import { MyMap } from './elements/map';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return (
<div className="App">
<MyMap></MyMap>
{/* <MyMap></MyMap> */}
</div>
);
}

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

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { Button } from '../../elements/Button'
import { Block } from '../../elements/Block'
import './style.css'
import { MyMap } from "../../сomponents/map";
import { MyMap } from "../map";
import Sidebar from "react-sidebar";
export interface PlaceCardIE{
@ -18,7 +18,9 @@ export interface TourCardIE{
description:string,
days:number,
points: PlaceCardIE[],
imageURL?: string
imageURL?: string;
id?: string
mapPoints: number[][]
}
export const PlaceCard: React.FC<PlaceCardIE> = (props) =>{
@ -39,17 +41,20 @@ export const TourCard:React.FC<TourCardIE> = (props) =>{
return(
<div>
{/* <Sidebar
<div id={props.id}>
<Sidebar
sidebar={
<Block className='tourcard-block'>
<MyMap></MyMap>
<Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
</Block>
}
<div className='sidebarContent'>
<MyMap points={props.mapPoints}></MyMap>
<Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
</div>
}
open={showMap}
styles={{ sidebar: { background: "white" } }}
></Sidebar> */}
rootClassName='mainCardContent'
contentClassName="mainCardContent"
sidebarClassName="tourCardSidebar"
styles={{ sidebar: { background: "white"}}}
>
<Block className='tourcard-block'>
<div className="cardDescr">
@ -71,6 +76,7 @@ export const TourCard:React.FC<TourCardIE> = (props) =>{
<Button className='' onClick={()=>setShowMap(!showMap)}>Посмотреть</Button>
</Block>
</Sidebar>
</div>
);

24
src/elements/TourCard/style.css
View File

@ -71,4 +71,26 @@
.placeType{
color:rgba(29, 29, 29, 0.5);
font-size: 12px;
}
}
.mainCardContent{
position: relative !important;
}
.tourCardSidebar{
position: fixed !important;
left: 0px;
width: 30%;
top:0px;
border-radius: 0px 20px 20px 0px;
padding: 50px;
}
.sidebarContent{
display: flex;
flex-direction: column;
gap:50px;
align-items: center;
justify-content: space-between;
}

65
src/сomponents/map/index.tsx → src/elements/map/index.tsx
View File

@ -7,17 +7,34 @@ import { configureRootTheme } from '@yandex/ui/Theme'
import { theme } from '@yandex/ui/Theme/presets/default'
configureRootTheme({ theme })
export const MyMap: React.FC = () =>{
export interface MapIE{
points: number[][]
}
export const MyMap: React.FC<MapIE> = (props) =>{
console.log(props.points)
let pathString = ''
let firstChecked = new Array<Boolean>()
props.points.forEach((point, index) => {
firstChecked.push(true)
pathString = pathString + point[0] + ',' + point[1] + (index == (props.points.length-1)? '':';')
});
const [route, setRoute] = useState()
const [path, setPath] = useState(pathString)
const [checked, setChecked] = useState(firstChecked)
const [route, setRoute] = useState({})
const [points, setPoints] = useState({})
const [path, setPath] = useState('30.197141%2C59.997082%3B30.209432%2C60.004412')
const [checked, setChecked] = useState(new Array<Boolean>())
useEffect(()=>{
axios.get('https://api.mapbox.com/directions/v5/mapbox/walking/'+path+'?alternatives=true&continue_straight=true&geometries=geojson&language=en&overview=simplified&steps=true&access_token=pk.eyJ1IjoiZmlyZXNpZWh0IiwiYSI6ImNrdW9kemYzbTB4ZGkycHAxbXN2YnIzaGMifQ.G0fl-qVbecucfOvn8OtU4Q').then(
if (route == undefined){
axios.get('https://api.mapbox.com/directions/v5/mapbox/driving/'+path+'?alternatives=true&continue_straight=true&geometries=geojson&language=en&overview=simplified&steps=true&access_token=pk.eyJ1IjoiZmlyZXNpZWh0IiwiYSI6ImNrdW9kemYzbTB4ZGkycHAxbXN2YnIzaGMifQ.G0fl-qVbecucfOvn8OtU4Q').then(
(data:any) => setRoute(data.data.routes[0].geometry)
)
}
})
const onCheckChange = (e:any, cords:Array<string>, ind:number) => {
console.log(e)
if (e.target.checked){
@ -40,7 +57,7 @@ export const MyMap: React.FC = () =>{
type: 'Feature',
properties: {},
geometry: data.data.routes[0].geometry
})
} as any)
)
checked[ind] = false
setChecked(checked)
@ -49,9 +66,10 @@ export const MyMap: React.FC = () =>{
const geojson = {
type: 'FeatureCollection',
features: [
{type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
]
features: props.points.map((point, index)=>{
return {type: 'Feature', geometry: {type: 'Point', coordinates: point}}
}
)
};
@ -81,28 +99,29 @@ export const MyMap: React.FC = () =>{
}
};
const [viewport, setViewport] = React.useState();
return (
<div>
<div>
<Checkbox size='m' view='default' checked={true} onChange={(e:any)=>onCheckChange(e, ['30.197141','59.997082'],7)} label='30.197141,59.997082'></Checkbox>
<Checkbox size='m' view='default' checked={true} onChange={(e:any)=>onCheckChange(e, ['30.209432','60.004412'], 8)} label = '30.209432,60.004412'></Checkbox>
<Checkbox size='m' view='default' checked={checked[0]} onChange={(e:any)=>onCheckChange(e, ['30.215966','60.004645'], 0)} label='30.215966,60.004645'></Checkbox>
<Checkbox size='m' view='default' checked={checked[1]} onChange={(e:any)=>onCheckChange(e, ['30.231952','60.005933'], 1)} label='30.231952,60.005933'></Checkbox>
<Checkbox size='m' view='default' checked={checked[2]} onChange={(e:any)=>onCheckChange(e, ['30.265898','60.012630'], 2)} label='30.265898,60.012630'></Checkbox>
<Checkbox size='m' view='default' checked={checked[3]} onChange={(e:any)=>onCheckChange(e, ['30.295340','60.018610'], 3)} label='30.295340,60.018610'></Checkbox>
<Checkbox size='m' view='default' checked={checked[4]} onChange={(e:any)=>onCheckChange(e, ['30.329311','60.033712'], 4)} label='30.329311,60.033712'></Checkbox>
<Checkbox size='m' view='default' checked={checked[5]} onChange={(e:any)=>onCheckChange(e, ['30.416310','60.042787'], 5)} label='30.416310,60.042787'></Checkbox>
<Checkbox size='m' view='default' checked={checked[6]} onChange={(e:any)=>onCheckChange(e, ['30.288291','59.994208'], 6)} label='30.288291,59.994208'></Checkbox>
{
props.points.map((value, index)=>
<Checkbox
size='m'
view='default'
checked={checked[index]}
onChange={(e:any)=>onCheckChange(e, [value[0].toString(), value[1].toString()],index)}
label={value[0].toString()+", "+value[1].toString()
}></Checkbox>
)
}
</div>
<Map initialViewState={{
longitude: 30.197141,
latitude: 59.997082,
longitude: props.points[0][0],
latitude: props.points[0][1],
zoom: 14
}}
style={{width: 600, height: 400}}
style={{width: '100%', height: '40vh'}}
mapStyle="mapbox://styles/mapbox/streets-v9"
mapboxAccessToken='pk.eyJ1IjoiZmlyZXNpZWh0IiwiYSI6ImNrdW9kemYzbTB4ZGkycHAxbXN2YnIzaGMifQ.G0fl-qVbecucfOvn8OtU4Q'
>

0
src/сomponents/map/map.css → src/elements/map/map.css
View File

13
src/pages/GenerateTour/index.tsx
View File

@ -21,19 +21,26 @@ export const GenerateTour = () =>{
backend.get('/route/build').then((data)=>setToursData(data.data))
}
})
console.log(toursData)
let tours = new Array()
toursData.forEach(tour => {
toursData.forEach((tour, index) => {
const points = [] as number[][]
tour.points.forEach((point, index)=>{
points.push([point.location[1], point.location[0]])
})
tours.push(
<TourCard {...tour}></TourCard>
<TourCard {...tour} mapPoints={points} id={index.toString()}></TourCard>
)
})
console.log(toursData)
return(

133
src/pages/Main/index.tsx
View File

@ -1,4 +1,5 @@
import react from 'react'
import { AutoComplete, DatePicker, Input, Checkbox } from 'antd';
import react, { useState } from 'react'
import { Button } from '../../elements/Button';
import { FavoriteCard, FavoriteCardIE } from '../../elements/FavoriteCard';
import { GenerateCard } from '../../elements/GenerateCard';
@ -7,16 +8,21 @@ import { TourCard, TourCardIE } from '../../elements/TourCard';
import './style.css'
export const Main: react.FC = () => {
const { RangePicker } = DatePicker;
const TourPropsCard = {
name: 'Я покажу тебе Москву',
days: 8,
id:'23343',
mapPoints: [[-71.0703,42.3419],[-71.0688, 42.3393],[-71.0728, 42.3348]],
imageURL: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
points: [
{
title:'Парк Горького',
description: 'Место',
icon:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
location:[1,2]
location:[1,2],
},
{
title:'Отель Москва',
@ -39,9 +45,132 @@ export const Main: react.FC = () => {
location:'Казань'
} as FavoriteCardIE
const [dates, setDates] = useState()
const options = [
{
label: 'Подсказка 1',
options: 'Подсказка 1',
},
{
label: 'Подсказка 2',
options: 'Подсказка 2',
},
{
label: 'Подсказка 3',
options: 'Подсказка 3',
},
];
const [toolsOpened, setToolsOpened] = useState(false)
return (
<div className='mainWrapper'>
<RusPassHeader></RusPassHeader>
<div className='headMainWrapper'>
<img className='backgroundIMG' src='background.png'></img>
<div style={{width:'75%'}}>
<div style={{borderRadius: toolsOpened? '20px 20px 0px 0px':'20px'}} className='toolsMainWrapper'>
<div className='rowWrapper' onClick={()=>setToolsOpened(!toolsOpened)}>
<img src='filter.svg'></img>
<div>Фильтры</div>
</div>
<img src='react.svg'></img>
<AutoComplete>
<Input.Search style={{width:'25vw'}} className='searchBar' size="large" placeholder="Введите направление"/>
</AutoComplete>
<img src='react.svg'></img>
<RangePicker
onChange={(e)=>setDates(e as any)}
></RangePicker>
<img src='react.svg'></img>
<Button className='btn-y'>Сгенерировать</Button>
</div>
{
toolsOpened? <div className='searchOpened'>
<div className='questionWrapper'>
<h2>Как добраться</h2>
<div className='checkboxWrapper'>
<Checkbox>Самолет</Checkbox>
<Checkbox>ЖД</Checkbox>
<Checkbox>Автобус</Checkbox>
<Checkbox>Смешанный</Checkbox>
</div>
</div>
<div className='questionWrapper'>
<h2>Где остановимся</h2>
<div className='checkboxWrapper'>
<Checkbox>Отель</Checkbox>
<Checkbox>Хостел</Checkbox>
<Checkbox>Апартаменты</Checkbox>
</div>
</div>
<div className='questionWrapper'>
<h2>Как перемещаться на месте</h2>
<div className='checkboxWrapper'>
<Checkbox>Машина</Checkbox>
<Checkbox>Общественный транспорт</Checkbox>
<Checkbox>Пешком</Checkbox>
</div>
</div>
<div className='questionWrapper'>
<h2>Что посмотреть</h2>
<div className='checkboxWrapper'>
<Checkbox>Музеи и выставки</Checkbox>
<Checkbox>Мероприятия и места</Checkbox>
<Checkbox>Обзорные экскурсии</Checkbox>
<Checkbox>Культурное наследие</Checkbox>
<Checkbox>Парки и прогулки</Checkbox>
</div>
</div>
<div className='questionWrapper'>
<h2>Где питаться</h2>
<div className='checkboxWrapper'>
<Checkbox>Рестораны</Checkbox>
<Checkbox>Кафе</Checkbox>
<Checkbox>Бары</Checkbox>
</div>
</div>
<div className='questionWrapper'>
<h2>Дополнительно</h2>
<div className='checkboxWrapper'>
<Checkbox>С детьми</Checkbox>
<Checkbox>С животными</Checkbox>
</div>
</div>
<div className='questionWrapper'>
<h2>Рейтинг</h2>
<div className='checkboxWrapper'>
<Checkbox>5*</Checkbox>
<Checkbox>4*</Checkbox>
<Checkbox>3*</Checkbox>
<Checkbox>2*</Checkbox>
<Checkbox>1*</Checkbox>
</div>
</div>
<div className='questionWrapper'>
<h2>Рейтинг</h2>
<div className='checkboxWrapper'>
<Checkbox>5*</Checkbox>
<Checkbox>4*</Checkbox>
<Checkbox>3*</Checkbox>
<Checkbox>2*</Checkbox>
<Checkbox>1*</Checkbox>
</div>
</div>
</div>:null
}
</div>
</div>
<div className='mainCard'>
<h2>Рекомендации</h2>
<div className='cardWrapper'>

61
src/pages/Main/style.css
View File

@ -56,4 +56,63 @@
justify-content: center;
align-items: center;
padding-bottom: 100px;
}
}
.toolsMainWrapper{
display: flex;
align-items: center;
justify-content: space-between;
gap:15px;
background-color: white;
border-radius: 20px;
padding: 10px 50px;
margin-top: -50px;
}
.headMainWrapper{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.backgroundIMG{
width: calc(100% - 100px);
}
.rowWrapper{
display: flex;
flex-direction: row;
gap:10px;
cursor: pointer;
align-items: center;
justify-content: center;
}
.searchOpened{
transition: 0.3s;
margin-top: 0px;
background-color: white;
position: relative;
border-radius: 0px 0px 20px 20px;
padding: 10px 50px;
gap:25px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap:50px;
padding-bottom: 50px;
}
.checkboxWrapper{
display: flex;
flex-direction: column;
gap:10px
}