Skip to content

Commit

Permalink
Merge pull request #18 from frontend-park-mail-ru/84-api-client
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nikita-hub000
Nikita-hub000 authored Oct 25, 2024
2 parents 116e547 + 7d7d34b commit 9badf61
Show file tree
Hide file tree
Showing 13 changed files with 258 additions and 174 deletions.
101 changes: 70 additions & 31 deletions components/AdCard/AdCard.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,88 @@
<div class="ad-card" id="card-{{id}}">
<div class='ad-card' id='card-{{id}}'>
<!-- ID is used for js not styles -->
<img class="ad_card__img1" src="{{mainPicture}}" alt="Ad card image">
<div class="ad-card__image-pagination-div">
<img class='ad_card__img1' src='{{images.[0]}}' alt='Ad card image' />
<div class='ad-card__image-pagination-div'>
<!-- Здесь будут кружочки -->
<!-- <div class="circle-full"></div>-->
<!-- <div class="circle-empty"></div>-->
</div>

<button class="ad-card__button">
<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:multiply" filter="url(#filter0_d_181_2)">
<circle cx="21.5" cy="17.5" r="17.5" fill="#9D9999" />
<button class='ad-card__button'>
<svg
width='43'
height='43'
viewBox='0 0 43 43'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<g style='mix-blend-mode:multiply' filter='url(#filter0_d_181_2)'>
<circle cx='21.5' cy='17.5' r='17.5' fill='#9D9999' />
</g>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M22 13.0001C20.5005 11.2526 17.9948 10.7126 16.116 12.3128C14.2372 13.913 13.9727 16.5884 15.4481 18.481C16.6749 20.0545 20.3873 23.3732 21.6041 24.4474C21.7402 24.5676 21.8082 24.6276 21.8877 24.6512C21.9569 24.6718 22.0327 24.6718 22.1021 24.6512C22.1815 24.6276 22.2495 24.5676 22.3857 24.4474C23.6024 23.3732 27.3148 20.0545 28.5416 18.481C30.017 16.5884 29.7848 13.8961 27.8737 12.3128C25.9626 10.7294 23.4995 11.2526 22 13.0001Z"
stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path
fill-rule='evenodd'
clip-rule='evenodd'
d='M22 13.0001C20.5005 11.2526 17.9948 10.7126 16.116 12.3128C14.2372 13.913 13.9727 16.5884 15.4481 18.481C16.6749 20.0545 20.3873 23.3732 21.6041 24.4474C21.7402 24.5676 21.8082 24.6276 21.8877 24.6512C21.9569 24.6718 22.0327 24.6718 22.1021 24.6512C22.1815 24.6276 22.2495 24.5676 22.3857 24.4474C23.6024 23.3732 27.3148 20.0545 28.5416 18.481C30.017 16.5884 29.7848 13.8961 27.8737 12.3128C25.9626 10.7294 23.4995 11.2526 22 13.0001Z'
stroke='white'
stroke-width='2'
stroke-linecap='round'
stroke-linejoin='round'
/>
<defs>
<filter id="filter0_d_181_2" x="0" y="0" width="43" height="43" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="4" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_181_2" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_181_2" result="shape" />
<filter
id='filter0_d_181_2'
x='0'
y='0'
width='43'
height='43'
filterUnits='userSpaceOnUse'
color-interpolation-filters='sRGB'
>
<feFlood flood-opacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
result='hardAlpha'
/>
<feOffset dy='4' />
<feGaussianBlur stdDeviation='2' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'
/>
<feBlend
mode='normal'
in2='BackgroundImageFix'
result='effect1_dropShadow_181_2'
/>
<feBlend
mode='normal'
in='SourceGraphic'
in2='effect1_dropShadow_181_2'
result='shape'
/>
</filter>
</defs>
</svg>
</button>

<div class="ad-card__info">
<div class="ad-card__location">
<p class="ad-card__p1">{{locationMain}}</p>
<p class="ad-card__p2">{{locationStreet}}</p>
<a href="{{onMap}}" class="ad-card__href">Показать на карте</a>
<div class='ad-card__info'>
<div class='ad-card__location'>
<p class='ad-card__p1'>{{locationMain}}</p>
<p class='ad-card__p2'>{{locationStreet}}</p>
<a href='{{onMap}}' class='ad-card__href'>Показать на карте</a>
</div>
<div class="ad-card__author-info">
<img class="ad-card__img2" src="{{author.avatar}}" alt="User avatar">
<div class='ad-card__author-info'>
<img
class='ad-card__img2'
src='{{author.avatar}}'
alt='User avatar'
/>
<p>{{author.name}}</p>
<div class="ad-card__score-container">
<img class="ad-card__img3" src="images/star.png" alt="star">
<span class="ad-card__score">{{author.score}}</span>
<div class='ad-card__score-container'>
<img class='ad-card__img3' src='images/star.png' alt='star' />
<span class='ad-card__score'>{{author.score}}</span>
</div>
</div>
</div>
Expand Down
20 changes: 6 additions & 14 deletions components/AdCard/AdCard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,21 @@

const SCROLL_DELAY = 200;

interface CardData {
id: number;
mainPicture: string;
pictures: string[];
}
import { AdCardData } from '../../modules/Types';

/** Карточка объявления на главной странице */
class AdCard {
#data: CardData;
#data: AdCardData;
#currentImgIndex: number;
#circles: HTMLDivElement[];
private parent: HTMLDivElement | null | undefined;

/** @param {object} data - информация о карточке
@param {HTMLDivElement} parent - родитель, в чьем списке детей будет карточка */
constructor(
data: { pictures: string[]; id: number; mainPicture: string },
parent: HTMLDivElement | null | undefined
) {
constructor(data: AdCardData, parent: HTMLDivElement | null | undefined) {
this.#data = data;
this.parent = parent!;

this.#data.mainPicture = data.pictures[0];
this.#currentImgIndex = 0;
this.#circles = [];

Expand Down Expand Up @@ -62,7 +54,7 @@ class AdCard {
const imgElem: HTMLImageElement =
thisElement.querySelector('.ad_card__img1')!;

const imagesAmount = Math.min(this.#data.pictures.length, 7); // We must only show max amount of 7!
const imagesAmount = Math.min(this.#data.images.length, 7); // We must only show max amount of 7!
const areaFraction =
imgElem.getBoundingClientRect().width / imagesAmount;

Expand Down Expand Up @@ -97,7 +89,7 @@ class AdCard {
setTimeout(() => {
this.#makeCircleActive(toShowIndex);
this.#currentImgIndex = toShowIndex;
imgElem.src = this.#data.pictures[toShowIndex];
imgElem.src = this.#data.images[toShowIndex];
}, SCROLL_DELAY);
}

Expand All @@ -109,7 +101,7 @@ class AdCard {
setTimeout(() => {
this.#makeCircleActive(0);
this.#currentImgIndex = 0;
imgElem.src = this.#data.pictures[0];
imgElem.src = this.#data.images[0];
}, SCROLL_DELAY);
}

Expand Down
7 changes: 3 additions & 4 deletions components/AuthPopup/AuthPopup.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
'use strict';

import APIClient from '../../modules/ApiClient';
import Validation from '../../modules/Validation';

import { login, register } from '../../modules/Auth';

class AuthPopup {
#config;
#currentState;
Expand Down Expand Up @@ -235,7 +234,7 @@ class AuthPopup {

if (this.#currentState === 'signup') {
try {
const res = await register({
const res = await APIClient.register({
name: data['name'],
username: data['username'],
password: data['password'],
Expand All @@ -252,7 +251,7 @@ class AuthPopup {
return;
}

login({
APIClient.login({
username: data['username'],
password: data['password'],
})
Expand Down
2 changes: 0 additions & 2 deletions components/Filter/Filter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
}

.filter {
pointer-events: none;
opacity: 0.5;
grid-area: aside;
padding-inline-start: 5%;
padding-inline-end: 5%;
Expand Down
42 changes: 30 additions & 12 deletions components/MainPage/MainPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,32 @@

import Filter from '../Filter/Filter';
import AdCard from '../AdCard/AdCard';
import { AdCardData } from '../../modules/Types';
import MainPhoto from '../MainPhoto/MainPhoto';
import { BACKEND_URL } from '../../modules/Consts';
import APIClient from '../../modules/ApiClient';

/** Главная страница с витриной объявлений, поиском и фильтрами */
class MainPage {
#root;
#mainPhotoContainer;
#pageContent;
#adsContainer;
#adsData: any;

constructor(root: HTMLDivElement) {
this.#root = root;
this.#adsData = [];

this.#mainPhotoContainer = new MainPhoto();
this.#mainPhotoContainer = new MainPhoto(
async (locationMain: string) => {
const filters = {
locationMain: locationMain,
};
const data = await APIClient.getAds(filters);
this.#adsData = data;
this.render();
}
);

this.#pageContent = document.createElement('div');
this.#pageContent.id = 'main-content';
Expand All @@ -27,22 +39,28 @@ class MainPage {
// Здесь будет витрина
this.#adsContainer = document.createElement('div');
this.#adsContainer.classList.add('advert');

APIClient.getAds().then((data) => {
this.#adsData = data;
this.render();
});
}

/**
* @public
*/
async render() {
try {
const response = await fetch(BACKEND_URL + '/ads');
let data = await response.json();
data = data['places'];
for (const [_, d] of Object.entries(data)) {
const card = new AdCard(d, this.#adsContainer);
card.render();
}
} catch (error) {
console.error(error);
this.#adsContainer.replaceChildren();
for (const fetchedCardData of this.#adsData) {
const cardData: AdCardData = {
id: fetchedCardData.id,
images: fetchedCardData.Images,
locationMain: fetchedCardData.location_main,
locationStreet: fetchedCardData.location_street,
author: fetchedCardData.author,
};
const card = new AdCard(cardData, this.#adsContainer);
card.render();
}

this.#pageContent.appendChild(this.#adsContainer);
Expand Down
10 changes: 8 additions & 2 deletions components/MainPhoto/MainPhoto.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@

class MainPhoto {
#mainPhotoContainer;
#onSearchButtonClick;

constructor() {
constructor(onSearch: any) {
this.#onSearchButtonClick = onSearch;
this.#mainPhotoContainer = document.createElement('div');
this.#mainPhotoContainer.classList.add('photo-container');

Expand All @@ -26,7 +28,6 @@ class MainPhoto {
beHost.text = 'Стать хостом';
findHost.href = '#';
beHost.href = '#';
searchCityForm.action = '#';
search.placeholder = 'Поиск по городам';

searchButtonDiv.classList.add('custom-search');
Expand All @@ -37,6 +38,11 @@ class MainPhoto {
hostsHrefs.appendChild(beHost);
this.#mainPhotoContainer.appendChild(hostsHrefs);

searchCityForm.onsubmit = (e) => {
e.preventDefault();
this.#onSearchButtonClick(search.value);
};

searchButtonDiv.appendChild(search);
searchButtonDiv.appendChild(findButton);
searchCityForm.appendChild(searchButtonDiv);
Expand Down
Loading

0 comments on commit 9badf61

Please sign in to comment.