diff --git a/public/background.png b/public/background.png new file mode 100644 index 0000000..23b733b Binary files /dev/null and b/public/background.png differ diff --git a/public/filter.svg b/public/filter.svg new file mode 100644 index 0000000..8bc8bd6 --- /dev/null +++ b/public/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/react.svg b/public/react.svg new file mode 100644 index 0000000..ac01f3f --- /dev/null +++ b/public/react.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/App.tsx b/src/App.tsx index 45ec261..080bb80 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 (
- + {/* */}
); } diff --git a/src/elements/TourCard/index.tsx b/src/elements/TourCard/index.tsx index 2f0a350..49f0333 100644 --- a/src/elements/TourCard/index.tsx +++ b/src/elements/TourCard/index.tsx @@ -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 = (props) =>{ @@ -39,17 +41,20 @@ export const TourCard:React.FC = (props) =>{ return( -
- {/* + - - - - } +
+ + +
+ } open={showMap} - styles={{ sidebar: { background: "white" } }} - > */} + rootClassName='mainCardContent' + contentClassName="mainCardContent" + sidebarClassName="tourCardSidebar" + styles={{ sidebar: { background: "white"}}} + >
@@ -71,6 +76,7 @@ export const TourCard:React.FC = (props) =>{ +
); diff --git a/src/elements/TourCard/style.css b/src/elements/TourCard/style.css index 7071c72..3c6f66c 100644 --- a/src/elements/TourCard/style.css +++ b/src/elements/TourCard/style.css @@ -71,4 +71,26 @@ .placeType{ color:rgba(29, 29, 29, 0.5); font-size: 12px; -} \ No newline at end of file +} + +.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; +} + diff --git a/src/сomponents/map/index.tsx b/src/elements/map/index.tsx similarity index 59% rename from src/сomponents/map/index.tsx rename to src/elements/map/index.tsx index afccfc5..05f8c4e 100644 --- a/src/сomponents/map/index.tsx +++ b/src/elements/map/index.tsx @@ -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 = (props) =>{ + console.log(props.points) + + let pathString = '' + let firstChecked = new Array() + 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()) 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, 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 (
- onCheckChange(e, ['30.197141','59.997082'],7)} label='30.197141,59.997082'> - onCheckChange(e, ['30.209432','60.004412'], 8)} label = '30.209432,60.004412'> - onCheckChange(e, ['30.215966','60.004645'], 0)} label='30.215966,60.004645'> - onCheckChange(e, ['30.231952','60.005933'], 1)} label='30.231952,60.005933'> - onCheckChange(e, ['30.265898','60.012630'], 2)} label='30.265898,60.012630'> - onCheckChange(e, ['30.295340','60.018610'], 3)} label='30.295340,60.018610'> - onCheckChange(e, ['30.329311','60.033712'], 4)} label='30.329311,60.033712'> - onCheckChange(e, ['30.416310','60.042787'], 5)} label='30.416310,60.042787'> - onCheckChange(e, ['30.288291','59.994208'], 6)} label='30.288291,59.994208'> + { + props.points.map((value, index)=> + onCheckChange(e, [value[0].toString(), value[1].toString()],index)} + label={value[0].toString()+", "+value[1].toString() + }> + ) + }
diff --git a/src/сomponents/map/map.css b/src/elements/map/map.css similarity index 100% rename from src/сomponents/map/map.css rename to src/elements/map/map.css diff --git a/src/pages/GenerateTour/index.tsx b/src/pages/GenerateTour/index.tsx index 27d75c9..79eea5d 100644 --- a/src/pages/GenerateTour/index.tsx +++ b/src/pages/GenerateTour/index.tsx @@ -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( - + ) }) - console.log(toursData) return( diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index 2857763..f982d32 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -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 (
+
+ +
+
+
setToolsOpened(!toolsOpened)}> + +
Фильтры
+
+ + + + + + setDates(e as any)} + > + + +
+ { + toolsOpened?
+
+

Как добраться

+
+ Самолет + ЖД + Автобус + Смешанный +
+
+ +
+

Где остановимся

+
+ Отель + Хостел + Апартаменты +
+
+ +
+

Как перемещаться на месте

+
+ Машина + Общественный транспорт + Пешком +
+
+ +
+

Что посмотреть

+
+ Музеи и выставки + Мероприятия и места + Обзорные экскурсии + Культурное наследие + Парки и прогулки +
+
+ +
+

Где питаться

+
+ Рестораны + Кафе + Бары +
+
+ +
+

Дополнительно

+
+ С детьми + С животными +
+
+ +
+

Рейтинг

+
+ 5* + 4* + 3* + 2* + 1* +
+
+ +
+

Рейтинг

+
+ 5* + 4* + 3* + 2* + 1* +
+
+
:null + } +
+ +

Рекомендации

diff --git a/src/pages/Main/style.css b/src/pages/Main/style.css index 8f0e175..78c9d9b 100644 --- a/src/pages/Main/style.css +++ b/src/pages/Main/style.css @@ -56,4 +56,63 @@ justify-content: center; align-items: center; padding-bottom: 100px; -} \ No newline at end of file + +} + +.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 +} + +