Add map and delete button

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

Hide file tree

Showing 4 changed files with 82 additions and 27 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -165,7 +165,11 @@ router.addRoute('/profile', async () => {
 });
 
 router.addRoute('/map', async () => {
-    await renderMapPage();
+    renderMapPage();
+});
+
+router.addRoute('/favorites', async () => {
+    renderFavoritesPage();
 });
 
 router.addRoute('/ads/', async (params: URLSearchParams) => {

diff --git a/src/pages/FavouritePage/FavouritePage.hbs b/src/pages/FavouritePage/FavouritePage.hbs
@@ -6,17 +6,17 @@
             <img src="{{images.[0].path}}" alt="{{address}}">
         </div>
         <div class="favourite-card__details">
-            <span class="favourite-card__title js-favourite-card-link">
-                {{cityName}}, {{address}}
-            </span>
+            <span class="favourite-card__title js-favourite-card-link">{{cityName}}, {{address}}</span>
             <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>
-                <button class="favourite-card__actions__map js-favourite-card-map">
-                    <img src="/earth.svg" height="20" width="20">
-                </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__remove js-favourite-card-remove">
                     <img src="/delete-basket.svg" height="20" width="20">
                 </button>

diff --git a/src/pages/FavouritePage/FavouritePage.ts b/src/pages/FavouritePage/FavouritePage.ts
@@ -2,11 +2,13 @@
 
 import { AdvertData } from "../../modules/Types";
 import ApiClient from "../../modules/ApiClient";
+import MapPage from "../MapPage/MapPage";
 
 import router from "../../modules/Router";
 
 class FavouritePage {
     #favourites: AdvertData;
+    #parent?: HTMLDivElement;
 
     constructor(){}
 
@@ -27,15 +29,28 @@ class FavouritePage {
             link.onclick = () => {
                 router.navigateTo(`/ads/?id=${card.id}`);
             }
+
+            const mapButton: HTMLButtonElement = card.querySelector('.js-favourite-card-map')!;
+            mapButton.onclick = () => {
+                const mapPage = new MapPage(link.innerHTML);
+                mapPage.render(this.#parent);
+            }
+
+            const deleteButton: HTMLButtonElement = card.querySelector('.js-favourite-card-remove')!;
+            deleteButton.onclick = async () => {
+                await ApiClient.removeFromFavourites(card.id);
+                this.render();
+            }
         }
     }
 
-    async render(parent: HTMLElement): Promise<void> {
+    async render(parent?: HTMLDivElement): Promise<void> {
         await this.#getFavourites();
+        if (parent) this.#parent = parent;
 
         const template = Handlebars.templates['FavouritePage.hbs'];
-        parent.replaceChildren();
-        parent.insertAdjacentHTML('afterbegin', template(this.#favourites));
+        this.#parent!.replaceChildren();
+        this.#parent!.insertAdjacentHTML('afterbegin', template(this.#favourites));
 
         await this.#addEventListeners();
     }

diff --git a/src/pages/MapPage/MapPage.ts b/src/pages/MapPage/MapPage.ts
@@ -12,17 +12,20 @@ interface Limit {
 
 class MapPage {
     #map;
-    // #placemarks;
     #TOTAL_ZOOM: number;
     #CITY_ZOOM: number;
     #PLACE_ZOOM: number;
 
-    constructor() {
+    #currentAddress?: string;
+    #isCertainPoint: boolean;
+
+    constructor(address?: string) {
         this.#TOTAL_ZOOM = 4;
         this.#CITY_ZOOM = 11;
         this.#PLACE_ZOOM = 13;
 
-        // this.#placemarks = new Map();
+        this.#currentAddress = address;
+        this.#isCertainPoint = (address) ? true : false;
     }
 
     #getLocation() {
@@ -127,22 +130,55 @@ class MapPage {
                     });
                     // carouselContainer.innerHTML = template({ id: d.id, images: mockImages });
 
-                    const placemark = new ymaps.GeoObject(
-                        {
-                            geometry: {
-                                type: 'Point',
-                                coordinates: coordinates,
+                    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) {
+                        // Смотрим определенную точку, например, перешли по кнопке Показать на карте
+                        placemark = new ymaps.GeoObject(
+                            {
+                                geometry: {
+                                    type: 'Point',
+                                    coordinates: coordinates,
+                                },
+                                properties: {
+                                    hintContent: d.address,
+                                    balloonContentHeader: d.address,
+                                    balloonContentBody: carouselContainer.innerHTML,
+                                },
                             },
-                            properties: {
-                                hintContent: d.address,
-                                balloonContentHeader: d.address,
-                                balloonContentBody: carouselContainer.innerHTML,
+                            {
+                                balloonMinWidth: 250,
+                                preset: "islands#redDotIcon",
+                            }
+                        );
+
+                        this.#map.setCenter(
+                            placemark.geometry._coordinates,
+                            this.#PLACE_ZOOM
+                        );
+
+                    } else {
+                        // Просто добавление точки в кластер
+                        placemark = new ymaps.GeoObject(
+                            {
+                                geometry: {
+                                    type: 'Point',
+                                    coordinates: coordinates,
+                                },
+                                properties: {
+                                    hintContent: d.address,
+                                    balloonContentHeader: d.address,
+                                    balloonContentBody: carouselContainer.innerHTML,
+                                },
                             },
-                        },
-                        {
-                            balloonMinWidth: 250,
-                        }
-                    );
+                            {
+                                balloonMinWidth: 250,
+                            }
+                        );
+                    }
 
                     placemark.events.add('click', () => {
                         this.#map.setCenter(