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

final (maybe) commmit

Browse Source
This commit is contained in:
= 2023-05-28 22:14:31 +03:00
parent 545dd522e7
commit ca0568e62d
9 changed files with 115 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/elements/GenerateCard/index.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import { Button } from '../Button'
import { Block } from '../Block'
import './style.css'
import { useNavigate } from "react-router-dom";
@ -9,7 +10,8 @@ import './style.css'
export const GenerateCard:React.FC = (props) =>{
let navigate = useNavigate()
return(
<Block className='generatecard-block'>
@ -19,8 +21,7 @@ export const GenerateCard:React.FC = (props) =>{
</div>
</div>
<img src='generateTour.png'></img>
<Button className='generate-y'>Выбрать <img className="wand" src='magicWand.svg'></img></Button>
<Button onClick={()=>navigate('/event-match')} className='generate-y'>Выбрать <img className="wand" src='magicWand.svg'></img></Button>
</Block>
);

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

@ -1,22 +1,23 @@
import React from "react";
import { useNavigate } from "react-router-dom";
import './style.css'
export const RusPassHeader:React.FC = () =>{
let navigate = useNavigate()
return(
<div className="padding">
<div className="headerWrapper">
<div className="iconWrapper">
<img className="headerIcon" src='/logo.svg'></img>
<img className="headerIcon" src='/menu.svg'></img>
<img className="headerIcon" src='/bonus.svg'></img>
<img className="headerIcon" src='/search.svg'></img>
<img className="headerIcon" src='/logo.svg' onClick={()=>navigate('/')}></img>
<img className="headerIcon" src='/menu.svg' onClick={()=>navigate('/')}></img>
<img className="headerIcon" src='/bonus.svg' onClick={()=>navigate('/event-match')}></img>
<img className="headerIcon" src='/search.svg' onClick={()=>navigate('/')}></img>
</div>
<div className="iconWrapper">
<img className="headerIcon" src='/language.svg'></img>
<img className="headerIcon" src='/support.svg'></img>
<img className="headerIcon" src='/favorites.svg'></img>
<img className="headerIcon" src='/profile.svg'></img>
<img className="headerIcon" src='/favorites.svg' onClick={()=>navigate('/favorites')}></img>
<img className="headerIcon" src='/profile.svg'onClick={()=>navigate('/login')} ></img>
</div>
</div>
</div>

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

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Carousel, Tabs } from 'antd';
import { Carousel, Spin, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { Button } from "../Button";
import './style.css'
@ -9,6 +9,7 @@ import axios from "axios";
import { backend } from "../../consts";
import { HotelCard, HotelCardIE } from "../HotelCard";
import { AttractionCard, AttractionCardIE } from "../AttractionCard";
import { useNavigate } from "react-router-dom";
export const Prefernces = () =>{
const [activeTab, setActiveTab] = useState(1)
const [cities, setCities] = useState([])
@ -265,6 +266,7 @@ export const Prefernces = () =>{
<h2>Выберите понравившеися вам отели</h2>
<div className='hotelsCardWrapper'>
{
hotels.length == 0? <Spin></Spin>:
hotels.map((hotel:HotelCardIE)=><HotelCard key={hotel.title} {...hotel}></HotelCard>)
}
</div>
@ -296,7 +298,9 @@ export const Prefernces = () =>{
<div>
<h2>Выберите самое интересное</h2>
<div className='hotelsCardWrapper'>
{
events.length == 0? <Spin></Spin>:
events.map((event:AttractionCardIE)=>{
return <AttractionCard key={event.oid} {...event}></AttractionCard>
})
@ -307,9 +311,15 @@ export const Prefernces = () =>{
},
];
let navigate = useNavigate()
const onNextClick = () =>{
setActiveTab((activeTab+1)%5)
if (activeTab+1 == 5){
localStorage.setItem('firstAuth', 'false');
navigate('/')
}
}
return(
<div className="prefsbg">
<div className="prefs">
@ -318,7 +328,7 @@ export const Prefernces = () =>{
<div style={{color:'rgba(29, 29, 29, 0.5)'}}>Отметьте свои предпочтения, чтобы мы смогли предоставить лучшие рекомендации туров</div>
</div>
<Tabs activeKey={activeTab.toString()} items={items} onChange={(e)=>setActiveTab(Number(e))} />
<Button className="btn-y" onClick={()=> setActiveTab((activeTab+1)%5)}>Далее</Button>
<Button className="btn-y" onClick={()=> onNextClick()}>Далее</Button>
</div>
</div>

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

@ -20,9 +20,13 @@
}
.prefsbg{
position: absolute;
right: 0;
top:0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.2);
z-index: 1000000;
}
.hotelsCardWrapper{

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

@ -63,7 +63,7 @@ export const MyMap: React.FC<MapIE> = (props) =>{
'line-cap': 'round'
},
paint: {
'line-color': '#3887be',
'line-color': '#FFCF08',
'line-width': 5,
'line-opacity': 0.75
}

40
src/pages/Login/index.tsx
View File

@ -1,6 +1,44 @@
import react from 'react'
import { Block } from '../../elements/Block'
import { Input } from '../../elements/Input'
import './style.css'
import { Button } from '../../elements/Button'
import { register, signin } from '../../client'
import { useNavigate } from "react-router-dom";
const yandexConnect = require('react-yandex-login')
const {YandexLogin, YandexLogout} = yandexConnect;
const clientID = '11e53cfa7add4c55b84168d408a22eb1';
export const Login: react.FC = () => {
const navigate = useNavigate();
const [username, setUseranme] = react.useState('');
const [password, setPassword] = react.useState('');
return <div>Login</div>
return <div className='centered'>
<Block className='reg-block'>
<h4>Вход</h4>
<Input placeholder='Почта' className='reg-input' onChange={setUseranme}/>
<Input placeholder='Пароль' className='reg-input' onChange={setPassword}/>
<Button className='' onClick={() => {
signin(username, password).then((e) => {
localStorage.setItem('token', e.access);
localStorage.setItem('firstAuth', 'true');
navigate('/')
});
}}>Войти</Button>
<div className="separator">
<div className="sep-item"></div>
<span>или</span>
<div className="sep-item"></div>
</div>
<YandexLogin clientID={clientID} onSuccess={() => {}}>
<button className="btn-y">Yandex login</button>
</YandexLogin>
</Block>
</div>
}

31
src/pages/Login/style.css Normal file
View File

@ -0,0 +1,31 @@
.centered{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 50px;
}
.reg-block{
padding-left: 50px;
padding-right: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.reg-input{
display: block;
width: 400px;
}
.btn-y{
width: 440px!important;
background-color: #FFCF08;
border-radius: 10px;
padding: 15px 50px;
outline: none;
border: none;
cursor: pointer;
}

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

@ -13,12 +13,21 @@ import type { RangePickerProps } from 'antd/es/date-picker';
import { Search } from '../../elements/Search';
import { AttractionCard } from '../../elements/AttractionCard';
import { EventCard, EventCardIE } from '../../elements/EventCard';
import { Prefernces } from '../../elements/Prefernces';
export const Main: react.FC = () => {
const [events, setEvents] = useState([])
const [favorites, setFavorites] = useState([])
let navigate = useNavigate()
let token = localStorage.getItem('token')
let firstAuth = localStorage.getItem('firstAuth')
useEffect(()=>{
if (null == localStorage.getItem('token')){
navigate('/login')
}
if (favorites.length == 0){
backend.get('user/favorite').then((e)=>setFavorites(e.data))
}
@ -39,6 +48,9 @@ export const Main: react.FC = () => {
return (
<div className='mainWrapper'>
{
firstAuth == 'true'? <Prefernces></Prefernces>:null
}
<RusPassHeader></RusPassHeader>
<div className='headMainWrapper'>
<img className='backgroundIMG' src='background.png'></img>

3
src/pages/Register/index.tsx
View File

@ -27,8 +27,9 @@ export const Register: react.FC = () => {
<Button className='' onClick={() => {
register(username, password).then((e) => {
signin(username, password).then((e) => {
localStorage.setItem('firstAuth', 'true');
localStorage.setItem('token', e.access);
navigate('/event-match')
navigate('/')
});
});
}}>Зарегистрироваться</Button>