mirror of
https://github.com/task-17-lct/frontend.git
synced 2024-11-10 23:46:33 +03:00
final (maybe) commmit
This commit is contained in:
parent
545dd522e7
commit
ca0568e62d
|
@ -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,6 +10,7 @@ import './style.css'
|
|||
|
||||
|
||||
export const GenerateCard:React.FC = (props) =>{
|
||||
let navigate = useNavigate()
|
||||
|
||||
|
||||
return(
|
||||
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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{
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
31
src/pages/Login/style.css
Normal 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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user