update main page

public/filter.svg

@@ -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>

public/react.svg

@@ -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>

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 (
     <div className="App">
-      <MyMap></MyMap>
+      {/* <MyMap></MyMap> */}
     </div>
   );
 }

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<PlaceCardIE> = (props) =>{
@@ -39,17 +41,20 @@ export const TourCard:React.FC<TourCardIE> = (props) =>{
 
 
     return(
-        <div>
+        <div id={props.id}>
-            {/* <Sidebar
+            <Sidebar
                 sidebar={
-                    <Block  className='tourcard-block'>
+                    <div className='sidebarContent'>
-                    <MyMap></MyMap>
+                        <MyMap points={props.mapPoints}></MyMap>
-                    <Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
+                        <Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
-                    </Block>
+                    </div> 
-                }
+                    }
                 open={showMap}
-                styles={{ sidebar: { background: "white" } }}
+                rootClassName='mainCardContent'
-            ></Sidebar> */}
+                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>
         
     );

src/elements/TourCard/style.css

@@ -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;
+}
+

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<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: [
+        features: props.points.map((point, index)=>{ 
-          {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
+            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>
+            props.points.map((value, index)=>
-            <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 
-            <Checkbox size='m' view='default' checked={checked[1]} onChange={(e:any)=>onCheckChange(e, ['30.231952','60.005933'], 1)} label='30.231952,60.005933'></Checkbox>
+                size='m' 
-            <Checkbox size='m' view='default' checked={checked[2]} onChange={(e:any)=>onCheckChange(e, ['30.265898','60.012630'], 2)} label='30.265898,60.012630'></Checkbox>
+                view='default'
-            <Checkbox size='m' view='default' checked={checked[3]} onChange={(e:any)=>onCheckChange(e, ['30.295340','60.018610'], 3)} label='30.295340,60.018610'></Checkbox>
+                checked={checked[index]}
-            <Checkbox size='m' view='default' checked={checked[4]} onChange={(e:any)=>onCheckChange(e, ['30.329311','60.033712'], 4)} label='30.329311,60.033712'></Checkbox>
+                onChange={(e:any)=>onCheckChange(e, [value[0].toString(), value[1].toString()],index)} 
-            <Checkbox size='m' view='default' checked={checked[5]} onChange={(e:any)=>onCheckChange(e, ['30.416310','60.042787'], 5)} label='30.416310,60.042787'></Checkbox>
+                label={value[0].toString()+", "+value[1].toString()
-            <Checkbox size='m' view='default' checked={checked[6]} onChange={(e:any)=>onCheckChange(e, ['30.288291','59.994208'], 6)} label='30.288291,59.994208'></Checkbox>
+              }></Checkbox>
+            )
+          }
         </div>
 
         <Map initialViewState={{
-            longitude: 30.197141,
+            longitude: props.points[0][0],
-            latitude: 59.997082,
+            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'
         >

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(
-            <TourCard {...tour}></TourCard>
+            <TourCard {...tour} mapPoints={points} id={index.toString()}></TourCard>
         )
     })
 
-    console.log(toursData)
         
 
     return(

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 (
       <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'>

src/pages/Main/style.css

@@ -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
+}
+
+