Finished favourites

frontend-park-mail-ru · Dec 14, 2024 · 739a8be · 739a8be
1 parent 1c6583b
commit 739a8be
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 27 deletions.
diff --git a/public/delete-basket.svg → public/svg/delete-basket.svg b/public/delete-basket.svg → public/svg/delete-basket.svg
diff --git a/public/earth.svg → public/svg/earth.svg b/public/earth.svg → public/svg/earth.svg
diff --git a/src/index.ts b/src/index.ts
@@ -33,8 +33,13 @@ const renderMainPage = async () => {
     mainPage.render();
 };
 
-function renderMapPage() {
-    const mapPage = new MapPage();
+function renderMapPage(adId?: string) {
+    let mapPage;
+    if (adId) {
+        mapPage = new MapPage(adId);
+    } else {
+        mapPage = new MapPage();
+    }
     mapPage.render(pageContainer);
 }
 
@@ -164,8 +169,9 @@ router.addRoute('/profile', async () => {
     await renderProfilePage();
 });
 
-router.addRoute('/map', async () => {
-    renderMapPage();
+router.addRoute('/map', async (params: URLSearchParams) => {
+    const adId = params.get('ad');
+    renderMapPage(adId as string);
 });
 
 router.addRoute('/favorites', async () => {

diff --git a/src/pages/FavouritePage/FavouritePage.hbs b/src/pages/FavouritePage/FavouritePage.hbs
@@ -7,18 +7,26 @@
         </div>
         <div class="favourite-card__details">
             <span class="favourite-card__title js-favourite-card-link">{{cityName}}, {{address}}</span>
+            <div class="favourite-card__options">
+                <span class="favourite-card__options__row">
+                    <img src="/svg/floor.svg" height="16" width="16">
+                    <p>{{floor}}&nbsp;этаж</p>
+                </span>
+                <span class="favourite-card__options__row">
+                    <img src="/svg/size.svg" height="16" width="16">
+                    <p>{{squareMeters}}&nbsp;м²</p>
+                </span>
+            </div>
             <div class="favourite-card__info">
                 {{description}}
             </div>
             <div class="favourite-card__actions">
                 <button class="favourite-card__actions__chat js-favourite-card-chat">Напишите {{adAuthor.name}}</button>
-                <a href="?={{id}}">
-                    <button class="favourite-card__actions__map js-favourite-card-map">
-                        <img src="/earth.svg" height="20" width="20">
-                    </button>
-                </a>
+                <button class="favourite-card__actions__map js-favourite-card-map">
+                    <img src="/svg/earth.svg" height="20" width="20">
+                </button>
                 <button class="favourite-card__actions__remove js-favourite-card-remove">
-                    <img src="/delete-basket.svg" height="20" width="20">
+                    <img src="/svg/delete-basket.svg" height="20" width="20">
                 </button>
             </div>
         </div>

diff --git a/src/pages/FavouritePage/FavouritePage.sass b/src/pages/FavouritePage/FavouritePage.sass
@@ -40,17 +40,27 @@
             flex: 1
             display: flex
             flex-direction: column
-            justify-content: space-between
+            gap: 10px
 
         &__title
             font-size: 18px
             font-weight: bold
             margin-bottom: 8px
             cursor: pointer
             width: max-content
+
+        &__options
+            display: flex
+            flex-direction: column
+            gap: 5px
+
+            &__row
+                display: flex
+                flex-direction: row
+                gap: 5px
 
         &__info
-            font-size: 14px
+            font-size: 16px
             color: #666
             margin-bottom: 12px
 
@@ -82,7 +92,4 @@
             &__remove
                 background: #f5c6cb !important
                 min-width: 50px !important
-                width: 50px !important
-
-                &:hover
-                    background: #f1b0b7
+                width: 50px !important
diff --git a/src/pages/FavouritePage/FavouritePage.ts b/src/pages/FavouritePage/FavouritePage.ts
@@ -32,8 +32,7 @@ class FavouritePage {
 
             const mapButton: HTMLButtonElement = card.querySelector('.js-favourite-card-map')!;
             mapButton.onclick = () => {
-                const mapPage = new MapPage(link.innerHTML);
-                mapPage.render(this.#parent);
+                router.navigateTo(`/map?ad=${card.id}`);
             }
 
             const deleteButton: HTMLButtonElement = card.querySelector('.js-favourite-card-remove')!;

diff --git a/src/pages/MapPage/MapPage.ts b/src/pages/MapPage/MapPage.ts
@@ -16,16 +16,16 @@ class MapPage {
     #CITY_ZOOM: number;
     #PLACE_ZOOM: number;
 
-    #currentAddress?: string;
+    #currentIdAdd?: string;
     #isCertainPoint: boolean;
 
-    constructor(address?: string) {
+    constructor(adId?: string) {
         this.#TOTAL_ZOOM = 4;
         this.#CITY_ZOOM = 11;
         this.#PLACE_ZOOM = 13;
 
-        this.#currentAddress = address;
-        this.#isCertainPoint = (address) ? true : false;
+        this.#currentIdAdd = adId;
+        this.#isCertainPoint = (adId) ? true : false;
     }
 
     #getLocation() {
@@ -131,11 +131,7 @@ class MapPage {
                     // carouselContainer.innerHTML = template({ id: d.id, images: mockImages });
 
                     let placemark;
-                    console.log(this.#isCertainPoint);
-                    console.log(this.#currentAddress);
-                    console.log(d.cityName + ', ' + d.address);
-                    console.log(this.#currentAddress === d.cityName + ', ' + d.address);
-                    if (this.#isCertainPoint && this.#currentAddress === d.cityName + ', ' + d.address) {
+                    if (this.#isCertainPoint && this.#currentIdAdd === d.id) {
                         // Смотрим определенную точку, например, перешли по кнопке Показать на карте
                         placemark = new ymaps.GeoObject(
                             {