From 8a2ffa72603dd529d66502e3106ec9f298526df3 Mon Sep 17 00:00:00 2001 From: xepaerz Date: Tue, 9 May 2023 12:26:41 +1000 Subject: [PATCH] add comparisons page react --- pairent_frontend/Comparison.html | 16 +- .../public/images/icons/left-arrow-light.svg | 1 + .../public/images/icons/left-arrow.svg | 1 + .../public/images/icons/right-arrow.svg | 1 + .../src/API/ApartamentService.js | 5 + .../src/components/BlockApartment/index.jsx | 81 ++++++++ .../components/CardSmallApartament/index.jsx | 8 +- .../ComparisonsApartamentsList/index.jsx | 188 ++++++++++++++++++ .../FavoritesApartamentsList/index.jsx | 2 +- .../src/components/Header/index.jsx | 36 +--- .../src/components/LastView/index.jsx | 2 +- .../components/UI/PaginatedTitle/index.jsx | 77 +++++++ .../src/components/UI/Pagination/index.jsx | 17 +- .../src/pages/Comparisons/index.jsx | 3 +- .../src/pages/Favorites/styles/Favorites.css | 51 ----- pairent_frontend_react/src/utils/Pages.js | 8 + 16 files changed, 404 insertions(+), 93 deletions(-) create mode 100644 pairent_frontend_react/public/images/icons/left-arrow-light.svg create mode 100644 pairent_frontend_react/public/images/icons/left-arrow.svg create mode 100644 pairent_frontend_react/public/images/icons/right-arrow.svg create mode 100644 pairent_frontend_react/src/components/BlockApartment/index.jsx create mode 100644 pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx create mode 100644 pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx diff --git a/pairent_frontend/Comparison.html b/pairent_frontend/Comparison.html index f5447c9..fde9209 100644 --- a/pairent_frontend/Comparison.html +++ b/pairent_frontend/Comparison.html @@ -114,7 +114,7 @@
- +

37 660 ₽ / мес.

@@ -143,7 +143,7 @@
- +

37 660 ₽ / мес.

@@ -170,7 +170,7 @@
- +

37 660 ₽ / мес.

@@ -197,7 +197,7 @@
- +

37 660 ₽ / мес.

@@ -742,7 +742,7 @@
- +

56 м², 2-х комнатная

36 тыс. / мес.

Владивосток, ул. Нейбута 15А

@@ -750,7 +750,7 @@
- +

56 м², 2-х комнатная

36 тыс. / мес.

Владивосток, ул. Нейбута 15А

@@ -758,7 +758,7 @@
- +

56 м², 2-х комнатная

36 тыс. / мес.

Владивосток, ул. Нейбута 15А

@@ -766,7 +766,7 @@
- +

56 м², 2-х комнатная

36 тыс. / мес.

Владивосток, ул. Нейбута 15А

diff --git a/pairent_frontend_react/public/images/icons/left-arrow-light.svg b/pairent_frontend_react/public/images/icons/left-arrow-light.svg new file mode 100644 index 0000000..14d02c9 --- /dev/null +++ b/pairent_frontend_react/public/images/icons/left-arrow-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pairent_frontend_react/public/images/icons/left-arrow.svg b/pairent_frontend_react/public/images/icons/left-arrow.svg new file mode 100644 index 0000000..5304319 --- /dev/null +++ b/pairent_frontend_react/public/images/icons/left-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pairent_frontend_react/public/images/icons/right-arrow.svg b/pairent_frontend_react/public/images/icons/right-arrow.svg new file mode 100644 index 0000000..8aa07fd --- /dev/null +++ b/pairent_frontend_react/public/images/icons/right-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pairent_frontend_react/src/API/ApartamentService.js b/pairent_frontend_react/src/API/ApartamentService.js index d3525f5..64b45e2 100644 --- a/pairent_frontend_react/src/API/ApartamentService.js +++ b/pairent_frontend_react/src/API/ApartamentService.js @@ -18,4 +18,9 @@ export default class ApartamentService { const response = await axios.get(API_ROOT + '/api/apartament/' + id) return response; } + + static async getComparisons() { + const response = await axios.get(API_ROOT + '/api/comparison/') + return response; + } } \ No newline at end of file diff --git a/pairent_frontend_react/src/components/BlockApartment/index.jsx b/pairent_frontend_react/src/components/BlockApartment/index.jsx new file mode 100644 index 0000000..928a7f8 --- /dev/null +++ b/pairent_frontend_react/src/components/BlockApartment/index.jsx @@ -0,0 +1,81 @@ +import React from 'react'; +import styled from 'styled-components'; +import SVGIcon from '../UI/Icon/SVGIcon'; + +const ApartmentBlock = styled.div` + width: 20%; + margin-top: 26px; +` +const ApartmentImage = styled.img` + width: 100%; +` + +const ApartmentPrice = styled.h3` + margin-top: 16px; + font-weight: 600; + font-size: 20px; + color: #222; +` + +const ApartmentAddress = styled.p` + margin-top: 16px; + font-size: 16px; + color: #0050A1; +` + +const TransportSection = styled.div` + display: flex; + margin-top: 9px; +` + +const TransportIcon = styled.div` + display: flex; + justify-content: space-around; + align-items: center; + width: 96px; + height: 32px; + border: 2px solid #A9A9A9; + border-radius: 20px; + + margin-left: 9px; +` + +const TransportTime = styled.p` + font-weight: 500; + font-size: 15px; + color: #A9A9A9; +` + +const ButtonContact = styled.button` + width: 180px; + height: 36px; + margin-top: 26px; + background: #175FA9; + border-radius: 12px; + font-weight: 500; + font-size: 16px; + color: #fff; +` + +const BlockApartment = function (props) { + return ( + + + {props.results.price} ₽ / мес. + {props.results.address} + + + + {props.results.timeToBus} мин + + + + {props.results.timeToTrain} мин + + + Показать контакты + + ); +} + +export default BlockApartment; \ No newline at end of file diff --git a/pairent_frontend_react/src/components/CardSmallApartament/index.jsx b/pairent_frontend_react/src/components/CardSmallApartament/index.jsx index d6aed4f..517980b 100644 --- a/pairent_frontend_react/src/components/CardSmallApartament/index.jsx +++ b/pairent_frontend_react/src/components/CardSmallApartament/index.jsx @@ -5,7 +5,13 @@ const CardSmallApartament = function (props) { return (
-

{props.results.perimetrs} м², {props.results.rooms}-х комнатная

+

{props.results.perimetrs} м², {props.results.rooms == 0 ? '' : props.results.rooms} + + {props.results.rooms == 0 ? 'Гостинка' : + (props.results.rooms > 1 ? "-х комнатная" : " комнатная") + } + +

{props.results.price}₽ / мес.

{props.results.address}

diff --git a/pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx b/pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx new file mode 100644 index 0000000..bc8c041 --- /dev/null +++ b/pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx @@ -0,0 +1,188 @@ +import React, { useEffect, useState } from 'react'; + +import PaginatedTitle from '../UI/PaginatedTitle'; +import BlockApartment from '../BlockApartment'; + +import ApartamentService from '../../API/ApartamentService'; +import { useFetching } from '../../hooks/useFetching'; +import { getPageCount } from '../../utils/Pages'; + +import styled from 'styled-components'; +import SVGIcon from '../UI/Icon/SVGIcon'; + +const ApartmentSection = styled.section` + display: flex; + justify-content: space-between; + padding-left: 3%; +` + +const ApartmentSectionTitle = styled.div` + width: 19%; +` + +const ApartmentSectionTitleText = styled.h3` + font-weight: 600; + font-size: 16px; + display: flex; + align-items: center; +` + +const Separation = styled.div` + margin-top: 50px; +` + +const SeparationText = styled.p` + margin-left: 3%; + font-weight: 500; + font-size: 16px; + color: rgba(0, 0, 0, 0.5); +` + +const SeparationLine = styled.div` + height: 2px; + margin-top: 8px; + width: 100%; + background-color: #CCC; +` + +const AboutSection = styled.section` + display: flex; + justify-content: space-between; + margin-left: 3%; +` + +const AboutTitle = styled.h3` + margin-top: 33px; + font-weight: 600; + font-size: 16px; +` + +const Indicator = styled.p` + color: rgba(0, 0, 0, 0.5); + margin-top: 33px; + font-weight: 600; + font-size: 16px; +` + +const ComparisonsApartmentsList = () => { + const [apartmentsComparisons, setApartmentsComparisons] = useState([]) + const [totalPages, setTotalPages] = useState(0); + const [page, setPage] = useState(1); + const limit = 4; + + const [fetchApartaments, isApartmentsLoading, apartmentsError] = useFetching(async (limit) => { + let offset = (page - 1) * limit; + const response = await ApartamentService.getAll(limit, offset); + setApartmentsComparisons(response.data.results) + let totalCount = response.data.count; + setTotalPages(getPageCount(totalCount, limit)) + }) + + useEffect(() => { + fetchApartaments(limit) + }, [page]) + + const changePage = (page) => { + setPage(page) + } + + return ( + <> + + + + Фото + Cтоимость + Адрес + + {apartmentsComparisons.map((apartament, index) => + <> + + + )} + + + + Характеристики + + + + +
+ Количество комнат + Этаж + Общая площадь + Санузел +
+ {apartmentsComparisons.map((apartament, index) => +
+ {apartament.rooms} + {apartament.floor} из {apartament.floorHouse} + {apartament.perimetrs} м² + {apartament.isBathroom ? '✓' : '—'} +
+ )} + + + + Удобства + + + + +
+ Мебель + Интернет + Телевизор + Стиральная машинка + Холодильник + Кондиционер + Можно с детьми + Можно с животными + Свежий ремонт +
+ {apartmentsComparisons.map((apartament, index) => +
+ {apartament.isFurniture ? '✓' : '—'} + {apartament.isInternet ? '✓' : '—'} + {apartament.isTelevision ? '✓' : '—'} + {apartament.isWasher ? '✓' : '—'} + {apartament.isRefrigerator ? '✓' : '—'} + {apartament.isAirConditioning ? '✓' : '—'} + {apartament.isChild ? '✓' : '—'} + {apartament.isAnimal ? '✓' : '—'} + {apartament.isFreshRepair ? '✓' : '—'} +
+ )} + + + + О здании + + + + +
+ Высота потолков + Количество этажей + Лифт + Мусоропровод + Закрытая парковка + Охрана или консьерж +
+ {apartmentsComparisons.map((apartament, index) => +
+ {apartament.ceilingHeight} м + {apartament.floorHouse} + {apartament.isElevator ? '✓' : '—'} + {apartament.isGarbageChute ? '✓' : '—'} + {apartament.isParking ? '✓' : '—'} + {apartament.isConcierge ? '✓' : '—'} +
+ )} + + + ); +}; + +export default ComparisonsApartmentsList; \ No newline at end of file diff --git a/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx b/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx index fa44cba..65eec6e 100644 --- a/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx +++ b/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx @@ -10,7 +10,7 @@ const FavoritesApartamentsList = () => { const [apartamentsFavorites, setApartamentsFavorites] = useState([]) const [totalPages, setTotalPages] = useState(0); const [page, setPage] = useState(1); - const [limit, setLimit] = useState(1); + const [limit, setLimit] = useState(5); const [fetchApartaments, isApartamentsLoading, apartamentsError] = useFetching(async (limit) => { let offset = (page - 1) * limit; diff --git a/pairent_frontend_react/src/components/Header/index.jsx b/pairent_frontend_react/src/components/Header/index.jsx index b4cceb3..7263386 100644 --- a/pairent_frontend_react/src/components/Header/index.jsx +++ b/pairent_frontend_react/src/components/Header/index.jsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Link } from "react-router-dom"; +import {Link} from "react-router-dom"; import styled from 'styled-components'; import SVGIcon from '../UI/Icon/SVGIcon'; -// import './styles/Header.css'; +import './styles/Header.css' const HeaderElement = styled.header` display: flex; @@ -38,21 +38,7 @@ const LocationButton = styled.button` const PairentLogo = styled.h1` user-select: none; -`; - -const NavButton = styled.div` - & a:hover { - color: #0050A1; - transition: 0.3s ease; - } -`; -const Navbar = styled.nav` - display: flex; - align-items: center; - & ${NavButton} { - margin-right: 55px - } -`; +` const Header = function () { return ( @@ -72,29 +58,29 @@ const Header = function () { - - + ); } diff --git a/pairent_frontend_react/src/components/LastView/index.jsx b/pairent_frontend_react/src/components/LastView/index.jsx index cb629db..520527d 100644 --- a/pairent_frontend_react/src/components/LastView/index.jsx +++ b/pairent_frontend_react/src/components/LastView/index.jsx @@ -11,7 +11,7 @@ const LastView = function () { const [apartamentsLastView, setApartamentsLastView] = useState([]) const [totalPages, setTotalPages] = useState(0); const [page, setPage] = useState(1); - const limit = 1; + const limit = 4; const [totalCount, setTotalCount] = useState(0); const [fetchApartaments, isApartamentsLoading, apartamentsError] = useFetching(async (limit) => { diff --git a/pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx b/pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx new file mode 100644 index 0000000..c7c6b4e --- /dev/null +++ b/pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { getPreviousAndNextPage } from '../../../utils/Pages'; +import { Link } from 'react-router-dom'; +import styled from 'styled-components'; +import SVGIcon from '../Icon/SVGIcon'; + +const TitleSection = styled.section` + display: flex; + justify-content: space-between; + margin-top: 24px; + padding: 0 3% 0 3%; +`; + +const TitleSectionLeftAndRight = styled.div` + display: flex; + align-items: center; +`; + +const ButtonBack = styled.button` + display: flex; + justify-content: space-evenly; + align-items: center; + width: 180px; + height: 36px; + color: #BABABA; + background: #fff; + border: 1px solid #ccc; + border-radius: 12px; + font-size: 15px; +`; + +const Title = styled.h2` + margin-left: 31px; + font-size: 24px; + color: #222; +`; + +const ButtonPreviousAndNext = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 20px; + background: #fff; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25); + margin-right: 10px; +`; + +const PaginatedTitle = function ({title, totalPages, page, changePage}) { + let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page); + + return( + + + + + + Вернуться назад + + + {title} + + + + changePage(previousPage)}> + + + changePage(nextPage)}> + + + + + ); +} + +export default PaginatedTitle; \ No newline at end of file diff --git a/pairent_frontend_react/src/components/UI/Pagination/index.jsx b/pairent_frontend_react/src/components/UI/Pagination/index.jsx index adb5ce7..c703c06 100644 --- a/pairent_frontend_react/src/components/UI/Pagination/index.jsx +++ b/pairent_frontend_react/src/components/UI/Pagination/index.jsx @@ -1,11 +1,18 @@ import React from 'react'; -import {getPagesArray} from "../../../utils/Pages"; +import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages"; const Pagination = ({totalPages, page, changePage, viewAll}) => { let pagesArray = getPagesArray(totalPages); - let previousPage = page !== 1 ? page - 1 : page - let nextPage = page < pagesArray.length ? page + 1 : page + let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page); + const getPagesShow = () => { + let pagesShow = []; + for (let index = page - 1, len = page + 14 > totalPages ? totalPages : page + 14; index < len; ++index) { + pagesShow.push(pagesArray[index]) + } + return pagesShow; + } + return (
@@ -15,9 +22,9 @@ const Pagination = ({totalPages, page, changePage, viewAll}) => { - {pagesArray.map(p => + {getPagesShow().map(p => - )} + )}