EasyTravel/FichaFrontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

last
All checks were successful
Create and publish a Docker image / Publish image (push) Successful in 50s
Details
Create and publish a Docker image / Deploy image (push) Successful in 4s
Details

Browse Source
This commit is contained in:
VITALY-VORON 2023-08-26 14:42:17 +03:00
parent 5c5661bef5
commit 932362af0b
6 changed files with 153 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/pngwing 7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 B

8
src/components/City/City.css
View File

@ -1,11 +1,11 @@
/* .button-container { .button-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease;
} */ }
.animated-button { .animated-button {
width: 304px; width: 304px;
@ -40,7 +40,7 @@
} }
/* .button-container.visible { .button-container.visible {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} */ }

3
src/components/City/City.js
View File

@ -93,6 +93,9 @@ const City = (props) => {
<option value="" style={{ <option value="" style={{
maxWidth: 200, maxWidth: 200,
}}>Выберите город...</option> }}>Выберите город...</option>
<option value="Таганрог" style={{
maxWidth: 200,
}}>Таганрог</option>
{filteredCityOptions.map(option => ( {filteredCityOptions.map(option => (
<option key={option.id} value={option.name} style={{ <option key={option.id} value={option.name} style={{
maxWidth: 200, maxWidth: 200,

33
src/components/Main/Footer.js Normal file
View File

@ -0,0 +1,33 @@
const Footer = () => {
return (
<div>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
marginTop: 50,
marginBottom: 50,
}}>
<img src="./logo5121.png" alt="#" style={{
height: 53,
width: 53,
}}/>
<span style={{
color: '#F68C43',
width: '30%',
display: 'flex',
flexDirection: 'column',
alignItems: 'start',
fontWeight: 700,
fontFamily: 'Raleway',
fontSize: '20px',
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
</div>
</div>
);
}
export default Footer;

18
src/components/Main/Header.js
View File

@ -1,4 +1,6 @@
const Header = () => { const Header = () => {
return ( return (
<div style={{ <div style={{
height: '100%', height: '100%',
@ -35,11 +37,17 @@ const Header = () => {
fontSize: '20px', fontSize: '20px',
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span> }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
</div> </div>
<img src="./menu.png" alt="#" style={{ <button style={{
height: 20, backgroundColor: '#fff',
width: 32, border: 'none',
marginRight: 10 }}>
}}/> <img src="./menu.png" alt="#" style={{
height: 20,
width: 32,
marginRight: 10,
}}/>
</button>
</div> </div>
</div> </div>

122
src/components/Main/Main.js
View File

@ -2,26 +2,27 @@ import React, { useEffect, useState } from "react";
import axios from "axios"; import axios from "axios";
import Header from "./Header"; import Header from "./Header";
import Card from "./Card"; import Card from "./Card";
import Footer from "./Footer";
const Main = ({ userData }) => { const Main = ({ userData }) => {
const [films, setFilms] = useState([]); const [films, setFilms] = useState([]);
const [gits, setGits] = useState([]); const [attract, setAttract] = useState([]);
const [museum, setMuseum] = useState([]); const [hotel, setHotel] = useState([]);
const optionsFilms = { const optionsFilms = {
method: 'GET', method: 'GET',
url: `https://easytravel.zetcraft.ru/v1/GetAllFilmsInCity/${userData.selectedCity}`, url: `https://easytravel.zetcraft.ru/v1/GetAllFilmsInCity/${userData.selectedCity}`,
}; };
const optionsGis = { const optionsAttract = {
method: 'GET', method: 'GET',
url: `https://easytravel.zetcraft.ru/v1/GetAllGuides/${userData.selectedCity}`, url: `https://easytravel.zetcraft.ru/v1/GetAllAttractionsInCity/${userData.selectedCity}`,
}; };
const optionsMuseum = { const optionsHotel = {
method: 'GET', method: 'GET',
url: `https://easytravel.zetcraft.ru/v1/GetAllMuseum/${userData.selectedCity}`, url: `https://easytravel.zetcraft.ru/v1/GetAllHotelsInCity/${userData.selectedCity}`,
}; };
useEffect(() => { useEffect(() => {
@ -33,23 +34,21 @@ const Main = ({ userData }) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
axios.request(optionsGis).then(function (response) { axios.request(optionsAttract).then(function (response) {
setGits(response.data); setAttract(response.data);
}).catch(function (error) { }).catch(function (error) {
console.error(error); console.error(error);
}); });
}, []); }, []);
useEffect(() => { useEffect(() => {
axios.request(optionsMuseum).then(function (response) { axios.request(optionsHotel).then(function (response) {
setMuseum(response.data); setHotel(response.data);
}).catch(function (error) { }).catch(function (error) {
console.error(error); console.error(error);
}); });
}, []); }, []);
console.log(userData.unique);
return ( return (
<div> <div>
<Header /> <Header />
@ -59,6 +58,7 @@ const Main = ({ userData }) => {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
marginTop: 10
}}> }}>
<h2>Кино по пушкинской карте</h2> <h2>Кино по пушкинской карте</h2>
<div style={{ <div style={{
@ -66,6 +66,7 @@ const Main = ({ userData }) => {
overflowX: 'auto', overflowX: 'auto',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
marginTop: 20
}}> }}>
<ul style={{ <ul style={{
display: 'flex', display: 'flex',
@ -74,7 +75,8 @@ const Main = ({ userData }) => {
}}> }}>
{films.map((film, index) => ( {films.map((film, index) => (
<li key={index} style={{ <li key={index} style={{
marginRight: '10px', padding: '10px',
marginRight: '30px',
}}> }}>
<div key={index} style={{ <div key={index} style={{
height: 200, height: 200,
@ -82,6 +84,8 @@ const Main = ({ userData }) => {
display: 'flex', display: 'flex',
alignContent: 'center', alignContent: 'center',
flexDirection: 'column', flexDirection: 'column',
borderRadius: '10px',
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.5)'
}}> }}>
<div style={{ <div style={{
display: 'flex', display: 'flex',
@ -91,8 +95,16 @@ const Main = ({ userData }) => {
<img src={film.imageURL} alt="#" style={{ <img src={film.imageURL} alt="#" style={{
height: 110, height: 110,
width: 79, width: 79,
marginTop: 10,
borderRadius: 10
}}/> }}/>
{film.filmName} <div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: 80,
}}>{film.filmName}</div>
</div> </div>
</div> </div>
</li> </li>
@ -100,20 +112,86 @@ const Main = ({ userData }) => {
</ul> </ul>
</div> </div>
<h2>Тур. гиды г.{userData.selectedCity}</h2> <h2 style={{
<ul> marginTop: 20,
{gits.map((guide, index) => ( marginBottom: 20
<li key={index}>{guide.name}</li> }}>Достопримечательности</h2>
<ul style={{
display: 'flex',
flexDirection: 'column',
listStyle: 'none',
padding: 0,
marginTop: 20,
gap: 20,
}}>
{attract.map((attr, index) => (
<li key={index}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 20,
width: 400,
}}>
<img src={attr.imageURL} alt="#" style={{
height: '92px',
width: '107px',
borderRadius: '10px'
}}/>
<div style={{
width: 150
}}>{attr.name}</div>
<button style={{
height: 33,
width: 33,
backgroundColor: 'rgb(0,0,0,0)',
border: 'none'
}}><img src="./pngwing 7.png" alt="#" /></button>
</div>
</li>
))} ))}
</ul> </ul>
<h2>Музеи г.{userData.selectedCity}</h2> <h2 style={{
<ul> marginBottom: 20,
{museum.map((museumItem, index) => ( marginTop: 20,
<li key={index}>{museumItem.name}</li> }}>Отели</h2>
<ul style={{
display: 'flex',
flexDirection: 'column',
listStyle: 'none',
padding: 0,
marginTop: 20,
gap: 20,
}}>
{hotel.map((hotelItem, index) => (
<li key={index}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 20
}}>
<img src={hotelItem.imageURL} alt="#" style={{
height: 119,
width: 184,
borderRadius: 10,
}}/>
<div style={{
display: 'flex',
flexDirection: 'column',
height: 20,
width: 150,
alignItems: 'center',
}}>
<div>{hotelItem.name}</div>
<div>{hotelItem.price}</div>
</div>
</div>
</li>
))} ))}
</ul> </ul>
</div> </div>
<Footer />
</div> </div>
); );
} }