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

add adaptive and fix bugs

Browse Source
This commit is contained in:
= 2023-06-08 15:56:19 +03:00
parent c6e547f4d6
commit ba33783464
23 changed files with 325 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/bonus.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 63 KiB

4
public/favorites.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

4
public/index.html
View File

@ -25,10 +25,10 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Russpass MAGNUM OPUS</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>Включите JavaScript чтобы насладится нашим шикарном приложением</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.

4
public/profile.svg
View File

@ -1,8 +1,8 @@
<svg width="108" height="49" viewBox="0 0 108 49" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="111" height="49" viewBox="0 0 111 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_0_55)"> <g clip-path="url(#clip0_0_55)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.96 16.25C24.7049 16.25 22.8767 18.0782 22.8767 20.3333C22.8767 22.5885 24.7049 24.4167 26.96 24.4167C29.2152 24.4167 31.0433 22.5885 31.0433 20.3333C31.0433 18.0782 29.2152 16.25 26.96 16.25ZM24.46 26.25C22.2049 26.25 20.3767 28.0782 20.3767 30.3333C20.3767 31.668 21.4587 32.75 22.7934 32.75H31.1267C32.4614 32.75 33.5433 31.668 33.5433 30.3333C33.5433 28.0782 31.7152 26.25 29.46 26.25H24.46Z" fill="#1D1D1D"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M26.96 16.25C24.7049 16.25 22.8767 18.0782 22.8767 20.3333C22.8767 22.5885 24.7049 24.4167 26.96 24.4167C29.2152 24.4167 31.0433 22.5885 31.0433 20.3333C31.0433 18.0782 29.2152 16.25 26.96 16.25ZM24.46 26.25C22.2049 26.25 20.3767 28.0782 20.3767 30.3333C20.3767 31.668 21.4587 32.75 22.7934 32.75H31.1267C32.4614 32.75 33.5433 31.668 33.5433 30.3333C33.5433 28.0782 31.7152 26.25 29.46 26.25H24.46Z" fill="#1D1D1D"/>
</g> </g>
<path d="M46.4298 18.9H50.0618C52.8938 18.9 54.8778 19.54 54.8778 22.404C54.8778 25.284 52.8938 25.908 50.0618 25.908H48.0618V30.5H46.4298V18.9ZM50.1898 20.276H48.0618V24.484H50.1898C51.9018 24.484 53.2138 24.308 53.2138 22.404C53.2138 20.516 51.9018 20.276 50.1898 20.276ZM60.5094 21.86V23.412C60.2054 23.364 59.9334 23.348 59.6934 23.348C58.3494 23.348 57.6774 24.084 57.6774 25.988V30.5H56.2214V21.892H57.6454V23.396C58.0774 22.42 58.9414 21.892 60.0774 21.844C60.2214 21.844 60.3334 21.844 60.5094 21.86ZM62.7446 26.228C62.7446 28.532 63.9926 29.428 65.3206 29.428C66.6486 29.428 67.8966 28.436 67.8966 26.228C67.8966 23.924 66.6486 23.028 65.3206 23.028C63.9926 23.028 62.7446 23.876 62.7446 26.228ZM65.3206 21.748C67.3206 21.748 69.4486 23.108 69.4486 26.228C69.4486 29.348 67.3206 30.708 65.3206 30.708C63.3206 30.708 61.1926 29.348 61.1926 26.228C61.1926 23.108 63.3206 21.748 65.3206 21.748ZM71.6363 21.892V21.268C71.6363 19.476 71.9883 18.9 73.9563 18.9H74.7083V20.116H73.9883C73.2203 20.116 73.0923 20.292 73.0923 21.188V21.892H74.7083V23.06H73.0923V30.5H71.6363V23.06H70.4363V21.892H71.6363ZM76.2839 21.892H77.7399V30.5H76.2839V21.892ZM76.2839 18.9H77.7399V20.66H76.2839V18.9ZM81.5055 18.9V30.5H80.0495V18.9H81.5055ZM91.4151 26.676H84.7911C84.8391 28.532 86.1831 29.428 87.4471 29.428C88.7271 29.428 89.4311 28.852 89.7991 28.004H91.3031C90.9191 29.476 89.5431 30.708 87.4471 30.708C84.7271 30.708 83.2231 28.756 83.2231 26.212C83.2231 23.476 85.0471 21.748 87.3991 21.748C90.0391 21.748 91.5911 23.94 91.4151 26.676ZM87.3991 22.996C86.1191 22.996 84.9351 23.7 84.8071 25.428H89.8791C89.8311 24.212 88.9511 22.996 87.3991 22.996Z" fill="#1D1D1D"/> <path d="M47.0097 30.5V18.8636H51.0779C51.8885 18.8636 52.5571 19.0038 53.0836 19.2841C53.6101 19.5606 54.0022 19.9337 54.2597 20.4034C54.5173 20.8693 54.6461 21.3864 54.6461 21.9545C54.6461 22.4545 54.5571 22.8674 54.3791 23.1932C54.2048 23.5189 53.9738 23.7765 53.6859 23.9659C53.4018 24.1553 53.0931 24.2955 52.7597 24.3864V24.5C53.1158 24.5227 53.4738 24.6477 53.8336 24.875C54.1935 25.1023 54.4946 25.428 54.737 25.8523C54.9794 26.2765 55.1006 26.7955 55.1006 27.4091C55.1006 27.9924 54.9681 28.517 54.7029 28.983C54.4378 29.4489 54.0192 29.8182 53.4472 30.0909C52.8753 30.3636 52.131 30.5 51.2143 30.5H47.0097ZM48.4188 29.25H51.2143C52.1347 29.25 52.7881 29.072 53.1745 28.7159C53.5647 28.3561 53.7597 27.9205 53.7597 27.4091C53.7597 27.0152 53.6594 26.6515 53.4586 26.3182C53.2578 25.9811 52.9719 25.7121 52.6006 25.5114C52.2294 25.3068 51.79 25.2045 51.2825 25.2045H48.4188V29.25ZM48.4188 23.9773H51.0325C51.4567 23.9773 51.8393 23.8939 52.1802 23.7273C52.5249 23.5606 52.7976 23.3258 52.9984 23.0227C53.2029 22.7197 53.3052 22.3636 53.3052 21.9545C53.3052 21.4432 53.1272 21.0095 52.7711 20.6534C52.415 20.2936 51.8506 20.1136 51.0779 20.1136H48.4188V23.9773ZM58.3933 24.9318H60.8933C61.916 24.9318 62.6982 25.1913 63.2399 25.7102C63.7815 26.2292 64.0524 26.8864 64.0524 27.6818C64.0524 28.2045 63.9311 28.6799 63.6887 29.108C63.4463 29.5322 63.0902 29.8712 62.6205 30.125C62.1508 30.375 61.5751 30.5 60.8933 30.5H57.2342V21.7727H58.5751V29.25H60.8933C61.4236 29.25 61.8592 29.1098 62.2001 28.8295C62.541 28.5492 62.7114 28.1894 62.7114 27.75C62.7114 27.2879 62.541 26.911 62.2001 26.6193C61.8592 26.3277 61.4236 26.1818 60.8933 26.1818H58.3933V24.9318ZM65.4387 30.5V21.7727H66.7796V30.5H65.4387ZM70.5751 28.5227L74.7796 21.7727H76.3251V30.5H74.9842V23.75L70.8024 30.5H69.2342V21.7727H70.5751V28.5227ZM73.8933 18.8636H75.1433C75.1433 19.4773 74.9311 19.9792 74.5069 20.3693C74.0827 20.7595 73.5069 20.9545 72.7796 20.9545C72.0637 20.9545 71.4936 20.7595 71.0694 20.3693C70.6489 19.9792 70.4387 19.4773 70.4387 18.8636H71.6887C71.6887 19.1591 71.7702 19.4186 71.933 19.642C72.0997 19.8655 72.3819 19.9773 72.7796 19.9773C73.1774 19.9773 73.4614 19.8655 73.6319 19.642C73.8061 19.4186 73.8933 19.1591 73.8933 18.8636ZM77.5935 23.0227V21.7727H84.6845V23.0227H81.8208V30.5H80.4799V23.0227H77.5935ZM87.9813 28.5227L92.1859 21.7727H93.7313V30.5H92.3904V23.75L88.2086 30.5H86.6404V21.7727H87.9813V28.5227Z" fill="#1D1D1D"/>
<defs> <defs>
<clipPath id="clip0_0_55"> <clipPath id="clip0_0_55">
<rect width="20" height="20" fill="white" transform="translate(16.96 14.5)"/> <rect width="20" height="20" fill="white" transform="translate(16.96 14.5)"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

12
public/search.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 12 KiB

2
src/elements/Card/index.tsx
View File

@ -20,7 +20,7 @@ interface ITinderCard{
export const TinderCardContent: react.FC<ITinderCard> = (props) => { export const TinderCardContent: react.FC<ITinderCard> = (props) => {
return <Card className='tinder-card__card'> return <Card className='tinder-card__card'>
<img src='/sample.jpg' width={200} height={200}></img> <img src='/generateTour.png' width={300} height={300}></img>
<div className="tinder__content"> <div className="tinder__content">
<span><strong>Название:</strong> {props.title}</span> <span><strong>Название:</strong> {props.title}</span>

3
src/elements/Card/style.css
View File

@ -16,7 +16,8 @@
border: none!important; border: none!important;
gap: 5px; gap: 5px;
padding: 10px; padding: 10px;
max-width: 180px; max-width: 280px;
height: 210px;
} }
.tin{ .tin{

13
src/elements/ChoiceIcon/style.css
View File

@ -42,3 +42,16 @@
justify-content: center; justify-content: center;
gap:10px gap:10px
} }
@media screen and (max-device-width: 500px) {
.choiceIconWrapper{
gap:15px
}
.choiceBtn{
width: 20px;
padding: 10px;
}
.choiceBtnActive{
width: 20px;
padding: 10px;
}
}

9
src/elements/Header/index.tsx
View File

@ -9,13 +9,12 @@ export const RusPassHeader:React.FC = () =>{
<div className="headerWrapper"> <div className="headerWrapper">
<div className="iconWrapper"> <div className="iconWrapper">
<img className="headerIcon" src='/logo.svg' onClick={()=>navigate('/')}></img> <img className="headerIcon" src='/logo.svg' onClick={()=>navigate('/')}></img>
<img className="headerIcon" src='/menu.svg' onClick={()=>navigate('/')}></img> <img className="headerIcon delete600" src='/menu.svg' onClick={()=>navigate('/')}></img>
<img className="headerIcon" src='/bonus.svg' onClick={()=>navigate('/event-match')}></img> <img className="headerIcon delete600" src='/bonus.svg' onClick={()=>navigate('/event-match')}></img>
<img className="headerIcon" src='/search.svg' onClick={()=>navigate('/')}></img> <img className="headerIcon delete600" src='/search.svg' onClick={()=>navigate('/')}></img>
</div> </div>
<div className="iconWrapper"> <div className="iconWrapper">
<img className="headerIcon" src='/language.svg'></img> <img className="headerIcon delete600" src='/language.svg'></img>
<img className="headerIcon" src='/support.svg'></img>
<img className="headerIcon" src='/favorites.svg' onClick={()=>navigate('/favorites')}></img> <img className="headerIcon" src='/favorites.svg' onClick={()=>navigate('/favorites')}></img>
<img className="headerIcon" src='/profile.svg'onClick={()=>navigate('/login')} ></img> <img className="headerIcon" src='/profile.svg'onClick={()=>navigate('/login')} ></img>
</div> </div>

20
src/elements/Header/style.css
View File

@ -25,3 +25,23 @@
.headerIcon:hover{ .headerIcon:hover{
transform: scale(1.05); transform: scale(1.05);
} }
@media screen and (max-device-width: 1000px) {
.headerWrapper{
flex-wrap: wrap;
}
}
@media screen and (max-device-width: 600px) {
.delete600{
display: none;
}
}
@media screen and (max-device-width: 400px) {
.padding{
padding-left: 15px;
padding-right: 15px;
width: calc(100% - 30px);
}
}

5
src/elements/HotelCard/index.tsx
View File

@ -58,11 +58,12 @@ export const HotelCard:React.FC<HotelCardIE> = (props) =>{
</div> </div>
</div> </div>
<div> <div>
{props.rooms.map((room)=><div> {props.rooms != null? props.rooms.map((room)=><div>
<h5>{room.name}</h5> <h5>{room.name}</h5>
<div>{room.description}</div> <div>{room.description}</div>
</div> </div>
)} ) : null
}
</div> </div>
<Button className="" onClick={()=>setOpened(!opened)}>Закрыть</Button> <Button className="" onClick={()=>setOpened(!opened)}>Закрыть</Button>
</div> </div>

12
src/elements/Prefernces/index.tsx
View File

@ -12,17 +12,9 @@ import { AttractionCard, AttractionCardIE } from "../AttractionCard";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
export const Prefernces = () =>{ export const Prefernces = () =>{
const [activeTab, setActiveTab] = useState(1) const [activeTab, setActiveTab] = useState(1)
const [cities, setCities] = useState([])
const [regions, setRegions] = useState([])
const [hotels, setHotels] = useState([]) const [hotels, setHotels] = useState([])
const [events, setEvents] = useState([]) const [events, setEvents] = useState([])
useEffect(()=>{
if (cities.length == 0){
backend.get('/data/cities').then((response)=>setCities(response.data))
backend.get('/data/regions').then((response)=>setRegions(response.data))
}
})
const transportOptions = { const transportOptions = {
@ -255,7 +247,7 @@ export const Prefernces = () =>{
label: `Проживание`, label: `Проживание`,
children: <div> children: <div>
<div> <div>
<h2>Где вы предпочитаете остановится</h2> <h2>Где вы предпочитаете остановиться</h2>
<ChoiceIcon {...hotelOptions}></ChoiceIcon> <ChoiceIcon {...hotelOptions}></ChoiceIcon>
</div> </div>
<div> <div>
@ -263,7 +255,7 @@ export const Prefernces = () =>{
<ChoiceIcon {...ratingOptions}></ChoiceIcon> <ChoiceIcon {...ratingOptions}></ChoiceIcon>
</div> </div>
<div> <div>
<h2>Выберите понравившеися вам отели</h2> <h2>Выберите понравившиеся вам отели</h2>
<div className='hotelsCardWrapper'> <div className='hotelsCardWrapper'>
{ {
hotels.length == 0? <Spin></Spin>: hotels.length == 0? <Spin></Spin>:

20
src/elements/Prefernces/style.css
View File

@ -3,12 +3,13 @@
position: fixed; position: fixed;
top:0px; top:0px;
right:0px; right:0px;
height: 100vh; height: calc(100vh - 50px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
padding: 25px; padding: 25px;
background-color: white; background-color: white;
overflow-y: scroll;
} }
.prefsHeadWrapper{ .prefsHeadWrapper{
@ -20,7 +21,7 @@
} }
.prefsbg{ .prefsbg{
position: absolute; position: fixed;
right: 0; right: 0;
top:0; top:0;
width: 100%; width: 100%;
@ -40,3 +41,18 @@
overflow-y: scroll; overflow-y: scroll;
margin-bottom: 15px; margin-bottom: 15px;
} }
@media screen and (max-device-width: 700px) {
.prefs{
width: calc(100% - 50px);
}
}
@media screen and (max-device-width: 600px) {
h2{
font-size: 16px;
}
}
@media screen and (max-device-width: 500px) {
}

25
src/elements/RouteCard/style.css
View File

@ -158,3 +158,28 @@
.likeBtn:hover{ .likeBtn:hover{
opacity: 0.5; 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;
}
}

29
src/elements/Search/index.tsx
View File

@ -1,14 +1,13 @@
import { AutoComplete, DatePicker, Input, Checkbox, Select, Radio, Space } from 'antd'; import { DatePicker, Checkbox, Select, Radio, Space } from 'antd';
import react, { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { backend } from '../../consts'; import { backend, updateBackend } from '../../consts';
import { Button } from '../../elements/Button'; import { Button } from '../../elements/Button';
import './style.css' import './style.css'
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { RangePickerProps } from 'antd/es/date-picker'; import type { RangePickerProps } from 'antd/es/date-picker';
import type { Dayjs } from 'dayjs'; import type { Dayjs } from 'dayjs';
import { propTypes } from 'react-tinder-card';
type RangeValue = [Dayjs | null, Dayjs | null] | null; type RangeValue = [Dayjs | null, Dayjs | null] | null;
@ -19,7 +18,9 @@ export const Search:React.FC<{onSearch?:()=>void}> = (props) =>{
useEffect(()=>{ useEffect(()=>{
if (cities.length == 0){ if (cities.length == 0 && localStorage.getItem('token') != null){
updateBackend()
console.log(localStorage.getItem('token'))
backend.get('/data/cities').then((response)=>setCities(response.data)) backend.get('/data/cities').then((response)=>setCities(response.data))
} }
}) })
@ -79,12 +80,10 @@ export const Search:React.FC<{onSearch?:()=>void}> = (props) =>{
} }
let searchParams = {}
if (datesValue.length == 2){ let searchParams = {
searchParams = { date_from: datesValue.length == 2? new Date((datesValue as any)[0]).toISOString().split('T')[0]:null,
date_from: new Date((datesValue as any)[0]).toISOString().split('T')[0], date_to: datesValue.length == 2? new Date((datesValue as any)[1]).toISOString().split('T')[0]:null,
date_to: new Date((datesValue as any)[1]).toISOString().split('T')[0],
city: city, city: city,
stars:stars, stars:stars,
what_to_see:whatToSee, what_to_see:whatToSee,
@ -94,7 +93,7 @@ export const Search:React.FC<{onSearch?:()=>void}> = (props) =>{
with_animals: withAnimals, with_animals: withAnimals,
movement: transport movement: transport
} }
}
const disabledDate: RangePickerProps['disabledDate'] = (current:any) => { const disabledDate: RangePickerProps['disabledDate'] = (current:any) => {
if (!dates) { if (!dates) {
@ -106,6 +105,8 @@ export const Search:React.FC<{onSearch?:()=>void}> = (props) =>{
return current && current < dayjs().endOf('day') || !!tooEarly || !!tooLate;; return current && current < dayjs().endOf('day') || !!tooEarly || !!tooLate;;
}; };
const onOpenChange = (open: boolean) => { const onOpenChange = (open: boolean) => {
if (open) { if (open) {
setDates([null, null]); setDates([null, null]);
@ -129,7 +130,7 @@ export const Search:React.FC<{onSearch?:()=>void}> = (props) =>{
<img src='/filter.svg'></img> <img src='/filter.svg'></img>
<div>Фильтры</div> <div>Фильтры</div>
</div> </div>
<img src='/react.svg'></img> <img className='rectIMG' src='/react.svg'></img>
<Select <Select
className='antdBorder' className='antdBorder'
showSearch showSearch
@ -148,7 +149,7 @@ export const Search:React.FC<{onSearch?:()=>void}> = (props) =>{
)} )}
/> />
<img src='/react.svg'></img> <img className='rectIMG' src='/react.svg'></img>
<RangePicker <RangePicker
disabledDate={disabledDate} disabledDate={disabledDate}
onCalendarChange={(val) => { onCalendarChange={(val) => {
@ -158,7 +159,7 @@ export const Search:React.FC<{onSearch?:()=>void}> = (props) =>{
changeOnBlur changeOnBlur
onChange={(e)=>setDatesValue(e as any)} onChange={(e)=>setDatesValue(e as any)}
></RangePicker> ></RangePicker>
<img src='/react.svg'></img> <img className='rectIMG' src='/react.svg'></img>
<Button className='btn-y' onClick={()=>onNavigate()}>Сгенерировать</Button> <Button className='btn-y' onClick={()=>onNavigate()}>Сгенерировать</Button>
</div> </div>
{ {

2
src/pages/EventMatch/index.tsx
View File

@ -7,6 +7,7 @@ import { Button } from '../../elements/Button'
import { dailySelectionBuild, dailySelectionGenerate, saveTinderPath, startTinder, swipe, } from '../../client' import { dailySelectionBuild, dailySelectionGenerate, saveTinderPath, startTinder, swipe, } from '../../client'
import {useNavigate} from 'react-router-dom'; import {useNavigate} from 'react-router-dom';
import { MyMap } from '../../elements/map' import { MyMap } from '../../elements/map'
import { RusPassHeader } from '../../elements/Header'
interface IEventData{ interface IEventData{
title: string; title: string;
@ -33,6 +34,7 @@ export const EventMatch: react.FC = () => {
} }
return <div className='centered tin'> return <div className='centered tin'>
<RusPassHeader></RusPassHeader>
<Block className='tinder-block'> <Block className='tinder-block'>
{ {
dailyData.map((e) => { dailyData.map((e) => {

12
src/pages/EventMatch/style.css
View File

@ -45,3 +45,15 @@ a:visited{
justify-content: center; justify-content: center;
} }
@media screen and (max-device-width: 800px) {
.tinder-block{
width: auto;
padding: 10px;
}
.cont-span{
width: auto;
padding: 50px;
align-items: center ;
}
}

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

@ -1,5 +1,5 @@
import { AutoComplete, DatePicker, Input, Checkbox, Select, Radio, Space, Spin } from 'antd'; import { AutoComplete, DatePicker, Input, Checkbox, Select, Radio, Space, Spin } from 'antd';
import react, { useEffect, useState } from 'react' import react, { useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { backend, updateBackend } from '../../consts'; import { backend, updateBackend } from '../../consts';
import { Button } from '../../elements/Button'; import { Button } from '../../elements/Button';
@ -23,29 +23,40 @@ export const Main: react.FC = () => {
let token = localStorage.getItem('token') let token = localStorage.getItem('token')
let firstAuth = localStorage.getItem('firstAuth') let firstAuth = localStorage.getItem('firstAuth')
console.log(token) console.log(token)
const queried = useRef(false);
useEffect(()=>{ useEffect(()=>{
updateBackend() updateBackend()
const dataLoad = async () =>{
const favorites = await backend.get('user/favorite')
const events = await backend.get('recommendations/recommendations/')
return {
favorites, events
}
}
if (!queried.current && localStorage.getItem('token') != null && localStorage.getItem('firstAuth') != 'true') {
queried.current = true;
dataLoad().then((data) => {
setFavorites(data.favorites.data as any);
setEvents(data.events.data as any);
})
}
if (null == localStorage.getItem('token')){ if (null == localStorage.getItem('token')){
navigate('/login') navigate('/login')
} }
if (favorites.length == 0){
backend.get('user/favorite').then((e)=>setFavorites(e.data)) // if (favorites.length == 0){
} // backend.get('user/favorite').then((e)=>setFavorites(e.data))
if (events.length == 0){ // }
backend.get('recommendations/recommendations/').then((e)=>setEvents(e.data as any)); // if (events.length == 0){
} // backend.get('recommendations/recommendations/').then((e)=>setEvents(e.data as any));
// }
}) })
const favoriteCardProps = {
imageURL:'restourant.png',
title:'Кафе Сказка',
location:'Казань'
} as FavoriteCardIE
return ( return (
<div className='mainWrapper'> <div className='mainWrapper'>
{ {
@ -53,7 +64,10 @@ export const Main: react.FC = () => {
} }
<RusPassHeader></RusPassHeader> <RusPassHeader></RusPassHeader>
<div className='headMainWrapper'> <div className='headMainWrapper'>
<img className='backgroundIMG' src='background.png'></img> <div className='backgroundMainIMG'>
<div className='imgHeader'>Сгенерируйте ваш идеальный тур</div>
<div className='imgDescr'>Туры, достопримечательности, отели - все в одном cервисе</div>
</div>
<Search onSearch={()=>null}></Search> <Search onSearch={()=>null}></Search>
</div> </div>
<div className='mainCard'> <div className='mainCard'>
@ -102,7 +116,7 @@ export const Main: react.FC = () => {
</div> </div>
</div> </div>
<a href='/'>Документация</a> <a href='https://1drv.ms/w/s!AuaFmGWFNV5Np0OhMmVtxPXlG2Ob?e=f7NDCp'>Документация</a>
<div className='mainIconWrapper'> <div className='mainIconWrapper'>
<img className='mainIcon' src='icons/yt.svg'></img> <img className='mainIcon' src='icons/yt.svg'></img>

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

@ -1,6 +1,6 @@
.mainCard{ .mainCard{
background-color: #FFFBF3; background-color: #FFFBF3;
width: сalc(100%-100px); width: calc(100%-100px);
margin: 0px 50px; margin: 0px 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -9,9 +9,9 @@
padding: 50px; padding: 50px;
width: calc(100% - 200px); width: calc(100% - 200px);
} }
.mainCard>h2{ .mainCard>h2{
display: inline-block; display: inline-block;
width: 400px;
} }
.cardWrapper{ .cardWrapper{
@ -24,9 +24,10 @@
.fav-wrapper{ .fav-wrapper{
display: flex; display: flex;
justify-content: space-between; justify-content: center;
gap: 25px; gap: 25px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
} }
.grey{ .grey{
@ -80,8 +81,18 @@
} }
.backgroundIMG{ .backgroundMainIMG{
width: calc(100% - 100px); width: calc(100% - 260px);
height: 25vh;
background-image: url('../../../public/background.png');
background-size: cover;
border-radius: 48px;
display: flex;
padding: 80px;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap:20px
} }
.rowWrapper{ .rowWrapper{
@ -121,3 +132,51 @@
.ant-select-selector, .ant-picker{ .ant-select-selector, .ant-picker{
border: 0px !important; border: 0px !important;
} }
.imgHeader{
font-style: normal;
font-weight: 600;
font-size: 44px;
line-height: 46px;
color: #FFFFFF;
text-align: center;
}
.imgDescr{
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 24px;
display: flex;
align-items: flex-end;
text-align: center;
color: #FFFFFF;
}
@media screen and (max-device-width: 700px) {
.imgHeader{
font-size: 24px;
line-height: 28px;
}
.imgDescr{
font-size: 18px;
line-height: 22px;
}
.mainCard{
padding: 25px !important;
margin: 0px 25px !important;
border-radius: 20px !important;
}
}
@media screen and (max-device-width: 500px) {
.backgroundMainIMG{
width: calc(100% - 90px) !important;
padding: 20px !important;
padding-bottom: 60px !important;
}
}

12
src/pages/Register/style.css
View File

@ -28,3 +28,15 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
@media screen and (max-device-width: 600px) {
.reg-input{
width: 280px !important;
}
}
@media screen and (max-device-width: 600px) {
.reg-input{
width: 200px !important;
}
}

19
src/pages/SearchPage/index.tsx
View File

@ -11,25 +11,23 @@ import { EventCard } from "../../elements/EventCard";
export const SearchPage:React.FC = () =>{ export const SearchPage:React.FC = () =>{
let { prefs } = useParams(); let { prefs } = useParams();
const [cities, setCities] = useState([])
const [data, setData] = useState([]) const [data, setData] = useState([])
const [events, setEvents] = useState([]) const [events, setEvents] = useState([])
const queried = useRef(false); const queried = useRef(false);
useEffect(()=>{ useEffect(()=>{
const dataLoad = async (prefs: string) => { const dataLoad = async (prefs: string) => {
const cities = await backend.get('/data/cities')
const routes = await backend.post('/route/build',JSON.parse(prefs as string)) const routes = await backend.post('/route/build',JSON.parse(prefs as string))
const events = await backend.post('/recommendations/build_events/',JSON.parse(prefs as string)) const events = await backend.post('/recommendations/build_events/',JSON.parse(prefs as string))
return { return {
cities, routes, events routes, events
} }
} }
if (!queried.current) { if (!queried.current) {
queried.current = true; queried.current = true;
dataLoad(prefs as string).then((data) => { dataLoad(prefs as string).then((data) => {
setCities(data.cities.data as any);
setData(data.routes.data as any); setData(data.routes.data as any);
setEvents(data.events.data as any); setEvents(data.events.data as any);
}) })
@ -74,21 +72,12 @@ export const SearchPage:React.FC = () =>{
const onSearch = () =>{ const onSearch = () =>{
setData([]) setData([])
} }
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
return( return(
<div className="mainWrapper"> <div className="mainWrapper">
<RusPassHeader></RusPassHeader> <RusPassHeader></RusPassHeader>
<h1>Посмотрите, что мы нашли по вашему запросу</h1> <h1>Посмотрите, что мы нашли по вашему запросу</h1>
<Search onSearch={()=>onSearch()}></Search> <Search onSearch={()=>onSearch()}></Search>
{ {
@ -124,7 +113,7 @@ export const SearchPage:React.FC = () =>{
} }
<a href='/'>Документация</a> <a href='https://1drv.ms/w/s!AuaFmGWFNV5Np0OhMmVtxPXlG2Ob?e=f7NDCp'>Документация</a>
<div className='mainIconWrapper'> <div className='mainIconWrapper'>
<img className='mainIcon' src='/icons/yt.svg'></img> <img className='mainIcon' src='/icons/yt.svg'></img>

43
src/pages/SearchPage/style.css
View File

@ -1,6 +1,5 @@
.mainCard{ .mainCard{
background-color: #FFFBF3; background-color: #FFFBF3;
width: сalc(100%-100px);
margin: 0px 50px; margin: 0px 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -21,7 +20,7 @@
.fav-wrapper{ .fav-wrapper{
display: flex; display: flex;
justify-content: space-between; justify-content: center;
gap: 25px; gap: 25px;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -53,6 +52,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-bottom: 100px; padding-bottom: 100px;
width: 100%;
} }
@ -118,3 +118,42 @@
.ant-select-selector, .ant-picker{ .ant-select-selector, .ant-picker{
border: 0px !important; border: 0px !important;
} }
@media screen and (max-device-width: 1000px) {
.toolsMainWrapper{
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 10px 15px;
}
.rectIMG{
display: none;
}
.mainCard{
padding: 25px !important;
margin: 0px 25px !important;
border-radius: 20px !important;
}
}
@media screen and (max-device-width: 700px) {
h1{
font-size: 24px;
text-align: center;
}
}
@media screen and (max-device-width: 500px) {
.mainCard{
margin: 0px 15px !important;
padding: 10px;
width: calc(100% - 100px);
}
h1{
width: 100%;
font-size: 16px;
text-align: center;
margin-top: -50px;
}
}