From 559efd97fa11d7db0f47b68cbeecb49ca8262af8 Mon Sep 17 00:00:00 2001 From: FireSpirit171 Date: Sat, 14 Dec 2024 22:44:13 +0300 Subject: [PATCH] Add favourite page --- public/delete-basket.svg | 7 ++ public/earth.svg | 7 ++ src/pages/FavouritePage/FavouritePage.hbs | 27 +++++++ src/pages/FavouritePage/FavouritePage.sass | 88 ++++++++++++++++++++++ src/pages/FavouritePage/FavouritePage.ts | 30 ++++++-- src/styles/styles.sass | 1 + 6 files changed, 153 insertions(+), 7 deletions(-) create mode 100644 public/delete-basket.svg create mode 100644 public/earth.svg create mode 100644 src/pages/FavouritePage/FavouritePage.hbs diff --git a/public/delete-basket.svg b/public/delete-basket.svg new file mode 100644 index 00000000..370419d2 --- /dev/null +++ b/public/delete-basket.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/earth.svg b/public/earth.svg new file mode 100644 index 00000000..869321d0 --- /dev/null +++ b/public/earth.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/pages/FavouritePage/FavouritePage.hbs b/src/pages/FavouritePage/FavouritePage.hbs new file mode 100644 index 00000000..0bb1dd4c --- /dev/null +++ b/src/pages/FavouritePage/FavouritePage.hbs @@ -0,0 +1,27 @@ +
+

Избранное

+ {{#each housing}} +
+
+ {{address}} +
+
+ + {{cityName}}, {{address}} + +
+ {{description}} +
+
+ + + +
+
+
+ {{/each}} +
diff --git a/src/pages/FavouritePage/FavouritePage.sass b/src/pages/FavouritePage/FavouritePage.sass index e69de29b..4e29b765 100644 --- a/src/pages/FavouritePage/FavouritePage.sass +++ b/src/pages/FavouritePage/FavouritePage.sass @@ -0,0 +1,88 @@ +@use '../../styles/mixins' + +.favourite + padding: 20px + margin: 0 auto + width: 70% + + &__title + font-size: 24px + margin-bottom: 20px + font-weight: bold + + &-card + display: flex + flex-direction: row + background: #fff + border: 1px solid #e5e5e5 + border-radius: 8px + padding: 16px + margin-bottom: 16px + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) + transition: transform 0.2s ease-in-out + + &:hover + transform: scale(1.02) + + &__image + width: 200px + height: 120px + border-radius: 8px + overflow: hidden + margin-right: 16px + + img + width: 100% + height: 100% + object-fit: cover + + &__details + flex: 1 + display: flex + flex-direction: column + justify-content: space-between + + &__title + font-size: 18px + font-weight: bold + margin-bottom: 8px + cursor: pointer + width: max-content + + &__info + font-size: 14px + color: #666 + margin-bottom: 12px + + span + display: block + + &__actions + display: flex + flex-direction: row + gap: 8px + + button + @include mixins.button + + min-height: 30px !important + height: 30px !important + display: flex + align-items: center + justify-content: center + + &__chat + width: 180px + + &__map + background-color: #E6F0FF !important + min-width: 50px !important + width: 50px !important + + &__remove + background: #f5c6cb !important + min-width: 50px !important + width: 50px !important + + &:hover + background: #f1b0b7 \ No newline at end of file diff --git a/src/pages/FavouritePage/FavouritePage.ts b/src/pages/FavouritePage/FavouritePage.ts index d8515abf..5b57ac2f 100644 --- a/src/pages/FavouritePage/FavouritePage.ts +++ b/src/pages/FavouritePage/FavouritePage.ts @@ -2,26 +2,42 @@ import { AdvertData } from "../../modules/Types"; import ApiClient from "../../modules/ApiClient"; -import { getCookie } from "../../modules/Utils"; + +import router from "../../modules/Router"; class FavouritePage { #favourites: AdvertData; constructor(){} - async #getFavourites() { + async #getFavourites(): Promise { const userData = await ApiClient.getSessionData(); const response = await ApiClient.getFavourites(userData.id as string); const data = await response.json(); - console.log(data); + this.#favourites = data; } - render(parent: HTMLElement) { - this.#getFavourites(); + async #addEventListeners(): Promise { + const cards = document + .querySelectorAll('.favourite-card'); + + for (const card of cards) { + //Обработчик на клик по названию + const link: HTMLSpanElement = card.querySelector('.js-favourite-card-link')!; + link.onclick = () => { + router.navigateTo(`/ads/?id=${card.id}`); + } + } + } - const favouritesContainer = document.createElement('div'); + async render(parent: HTMLElement): Promise { + await this.#getFavourites(); + + const template = Handlebars.templates['FavouritePage.hbs']; parent.replaceChildren(); - parent.appendChild(favouritesContainer); + parent.insertAdjacentHTML('afterbegin', template(this.#favourites)); + + await this.#addEventListeners(); } } diff --git a/src/styles/styles.sass b/src/styles/styles.sass index a66dce5c..be21c554 100644 --- a/src/styles/styles.sass +++ b/src/styles/styles.sass @@ -25,6 +25,7 @@ @use "../src/pages/MapPage/MapPage" @use "../src/pages/CityPage/CityPage" @use '../src/pages/AdPage/AdPage' +@use '../src/pages/FavouritePage/FavouritePage' @font-face