diff --git a/public/redpin.png b/public/redpin.png new file mode 100644 index 0000000..4140c98 Binary files /dev/null and b/public/redpin.png differ diff --git a/src/elements/RouteChangeCard/index.tsx b/src/elements/RouteChangeCard/index.tsx new file mode 100644 index 0000000..9d5b18e --- /dev/null +++ b/src/elements/RouteChangeCard/index.tsx @@ -0,0 +1,102 @@ +import React, { useState } from "react"; +import { Button } from '../Button' +import { Block } from '../Block' +import './style.css' +import { MyMap } from "../map"; +import Sidebar from "react-sidebar"; +import { PlaceCard } from "../TourCard"; +import { Collapse, Tabs, TabsProps } from "antd"; +import { backend } from "../../consts"; + +export interface RouteCardIE{ + rawProps:any, + city:string, + options: { + date:string, + paths:({ + type:string + distance:number, + point_type:string, + point:{ + lat:number, + lon:number, + title: string, + description:string, + oid:string + } + })[] + }[] +} + +const { Panel } = Collapse; + + +export const RouteChangeCard:React.FC = (props) =>{ + + const [selectedDay, setSelectedDay] = useState('0') + + let cntPlaces = 0 + props.options.forEach((route)=>{ + cntPlaces += route.paths.length + }) + + let points = props.options[Number(selectedDay)].paths.map((path)=>{ + return { + description:path.point.description, + title: path.point.title, + cords:[path.point.lon, path.point.lat] + } + }) + + let remappedPoints = props.options[Number(selectedDay)].paths.map((path)=>{ + if (path.point_type == 'remapped_point'){ + return { + description:path.point.description, + title: path.point.title, + cords:[path.point.lon, path.point.lat] + } + } + + }) + + for (let i = 0; i < remappedPoints.length; i++) { + if (remappedPoints[i] == undefined) { + remappedPoints.splice(i, 1); + i--; + } + } + console.log(remappedPoints) + + + + const colapseItems: TabsProps['items'] = props.options.map((day, index)=>{ + + return { + key:index.toString(), + label: (index+1).toString() + 'день', + children: + { + day.paths.map((value, index2) => + + +

{value.point.description}

+ + ) + } + + + } + }) + + + return( +
+
{props.city}
+ + setSelectedDay(e)} /> +
+ + ); +} \ No newline at end of file diff --git a/src/elements/RouteChangeCard/style.css b/src/elements/RouteChangeCard/style.css new file mode 100644 index 0000000..3b98599 --- /dev/null +++ b/src/elements/RouteChangeCard/style.css @@ -0,0 +1,191 @@ +.tourcard-block{ + width: 400px; + height: 548px; + display: flex; + flex-direction: column; + gap:25px; + padding: 25px; + border: solid #F5DFB8 1px; + background-color: #fff; +} + +.cardDescr{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.cardTitle{ + display: flex; + flex-direction: column; + gap:15px; +} + +.cardInfo{ + display: flex; + gap:15px; + color:rgba(29, 29, 29, 0.5) +} + +.cardAvatar{ + height: 100px; + transform: rotate(5deg); +} + +.titleText{ + font-size: 24px; + padding-right: 50px; +} + +.placesWrapper{ + display: flex; + flex-direction: column; + gap:20px; + margin-top: 30px; + height: 260px; + overflow-y: scroll; +} +.placesWrapper::-webkit-scrollbar { + width: 0; + } +.placeCard{ + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.placeImage{ + width: 40px; + height: 40px; + border-radius: 5px; +} + +.placeDescrWrapper{ + display: flex; + flex-direction: column; + gap:7px; + font-size: 16px; +} + +.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; +} + +.sidebarChangeContent{ + display: flex; + flex-direction: column; + gap:50px; + align-items: center; + justify-content: space-between; + width: 400px; + height: 100%; +} + + +.openBtn{ + display: flex; + flex-direction: row; + +} + +.yOpenBtn{ + width: 80%; + height:48px; + background: #FFCF08; + padding: 0px 16px; + border-radius: 20px 4px 4px 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + transition: 0.3s; +} + +.yOpenBtn:hover{ + opacity: 0.5; +} + +.yOpenBtnTitle{ + font-weight: 500; + font-size: 16px; + line-height: 22px; + color: #1D1D1D; +} +.yOpenBtnDescr{ + font-weight: 500; + font-size: 14px; + line-height: 18px; + text-align: center; + color: rgba(29, 29, 29, 0.5); +} + +.btnWrapper{ + display: flex; + flex-direction: row; + width: 100%; + gap:5px; + align-items: center; + justify-content: center; +} + +.likeBtn{ + height:48px; + padding: 0px 13px 0px 11px; + background: rgba(245, 223, 184, 0.5); + border-radius: 4px 20px 20px 4px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + cursor: pointer; + transition: 0.3s; +} + +.likeBtn:hover{ + opacity: 0.5; +} + +@media screen and (max-device-width: 600px) { + .tourcard-block{ + width: 300px; + gap:15px; + padding: 15px; + } + .titleText{ + font-size: 18px; + line-height: 22px; + } + + .cardInfo{ + font-size: 14px; + } + .tourCardSidebar{ + width: calc(100% - 150px); + } +} + +@media screen and (max-device-width: 400px) { + .tourcard-block{ + width: 280px; + } +} + +.tabs{ + width: 100%; +} \ No newline at end of file diff --git a/src/elements/map/index.tsx b/src/elements/map/index.tsx index 883b8f3..5852437 100644 --- a/src/elements/map/index.tsx +++ b/src/elements/map/index.tsx @@ -14,6 +14,12 @@ export interface MapIE{ description:string }[] + remapedPoints?:{ + cords:number[], + title:string, + description:string + }[] + } export const MyMap: React.FC = (props) =>{ @@ -26,7 +32,6 @@ export const MyMap: React.FC = (props) =>{ const [route, setRoute] = useState() - console.log(route) useEffect(()=>{ @@ -91,7 +96,6 @@ export const MyMap: React.FC = (props) =>{ } }; - console.log(props) return (
@@ -119,6 +123,13 @@ export const MyMap: React.FC = (props) =>{ }) } + { + props.remapedPoints != undefined? props.remapedPoints.map((point, index)=>{ + return + + + }) : null + }
diff --git a/src/pages/Weather/index.tsx b/src/pages/Weather/index.tsx new file mode 100644 index 0000000..cb3a397 --- /dev/null +++ b/src/pages/Weather/index.tsx @@ -0,0 +1,104 @@ +import { Spin } from "antd"; +import React, { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { backend } from "../../consts"; +import { Button } from "../../elements/Button"; +import { RusPassHeader } from "../../elements/Header"; +import { RouteCard } from "../../elements/RouteCard"; +import { RouteChangeCard } from "../../elements/RouteChangeCard"; +import './styles.css' +export const Weather:React.FC = () =>{ + let {routeChangeId} = useParams() + const [weather, setWeather] = useState() + + useEffect(()=>{ + if (weather == undefined){ + backend.get('weather/' + routeChangeId + '/').then((e)=>setWeather(e.data)) + } + }) + + let prev_route; + let predicted_route; + console.log(weather ) + if (weather != undefined){ + + let newPath = weather.prev_route.points.map((path:any)=>{ + let newPaths = path.paths + for (let i = 0; i < newPaths.length; i++) { + if (newPaths[i].type == 'transition') { + newPaths.splice(i, 1); + i--; + } + } + + return { + date:path.date, + paths: newPaths + } + }) + + + prev_route = { + city: 'Старый маршрут', + path: newPath + } + + let newPredictPath = weather.predicted_route.points.map((path:any)=>{ + let newPaths = path.paths + for (let i = 0; i < newPaths.length; i++) { + if (newPaths[i].type == 'transition') { + newPaths.splice(i, 1); + i--; + } + } + + return { + date:path.date, + paths: newPaths + } + }) + + predicted_route = { + city: 'Предлагаемый маршрут', + path: newPredictPath + } + + } + return
+ + + + { + prev_route == undefined || predicted_route == undefined? + + : +
+

Измените маршрут из-за погоды!

+ +
+ + +
+
+ + + +
+
+} + + + + Документация + +
+ + + + + +
+ +
© 2023 A project of the Government of Moscow
+
+} \ No newline at end of file diff --git a/src/pages/Weather/styles.css b/src/pages/Weather/styles.css new file mode 100644 index 0000000..7c68a5b --- /dev/null +++ b/src/pages/Weather/styles.css @@ -0,0 +1,21 @@ +.changeBtnWrapper{ + display: flex; + flex-direction: row; + gap:25px; + align-items:center ; + justify-content: center; +} + +.changeYBtn{ + width: 400px; + background: #FFCF08; +} +.changeBtn{ + width: 400px; +} + +@media screen and (max-device-width: 500px) { + .changeBtnWrapper{ + flex-wrap: wrap; + } +} \ No newline at end of file diff --git a/src/router.tsx b/src/router.tsx index 2022b0a..31d3d65 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -10,6 +10,7 @@ import { GenerateTour } from './pages/GenerateTour'; import { SearchPage } from './pages/SearchPage'; import { Prefernces } from './elements/Prefernces'; import { Favorites } from './pages/Favorites'; +import { Weather } from './pages/Weather'; const routes = [ @@ -48,6 +49,10 @@ const routes = [ { path:'/favorites', element: + }, + { + path: '/route/:routeChangeId/change', + element: } ]