diff --git a/src/index.ts b/src/index.ts
index 8abc60f6..57cae170 100644
--- 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
index 0bb1dd4c..b6d0086c 100644
--- a/src/pages/FavouritePage/FavouritePage.hbs
+++ b/src/pages/FavouritePage/FavouritePage.hbs
@@ -6,17 +6,17 @@
-
- {{cityName}}, {{address}}
-
+
{{cityName}}, {{address}}
{{description}}
-
+
+
+
diff --git a/src/pages/FavouritePage/FavouritePage.ts b/src/pages/FavouritePage/FavouritePage.ts
index 5b57ac2f..e648f704 100644
--- 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
{
+ async render(parent?: HTMLDivElement): Promise {
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
index b984de0f..757b4338 100644
--- 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(