Merge pull request #7 from KseniiaPan/module5-task1

htmlacademy-ecmascript · Sep 30, 2024 · 95a794a · 95a794a
2 parents 027f1ae + 25524e9
commit 95a794a
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 67 deletions.
diff --git a/src/consts.js b/src/consts.js
@@ -25,7 +25,12 @@ const FilterType = {
   PAST: 'PAST',
 };
 
+const Mode = {
+  DEFAULT: 'DEFAULT',
+  EDITING: 'EDITING',
+};
+
 const HOURS = 24;
 const MINUTES = 60;
 
-export {TIME_FORMAT, HOURS, MINUTES, EVENT_TYPES, FilterType};
+export {TIME_FORMAT, HOURS, MINUTES, EVENT_TYPES, FilterType, Mode};
diff --git a/src/main.js b/src/main.js
@@ -2,16 +2,13 @@ import FiltersPresenter from './presenter/filters-presenter.js';
 import EventsPresenter from './presenter/events-presenter.js';
 
 import PointsModel from './model/points-model.js';
-import DestinationsModel from './model/destinations-model.js';
-import OffersModel from './model/offers-model.js';
 
 const tripFiltersElement = document.querySelector(
   '.trip-controls__filters');
 const tripEventsElement = document.querySelector('.trip-events');
 
 const pointsModel = new PointsModel();
-const destinationsModel = new DestinationsModel();
-const offersModel = new OffersModel();
+
 
 const filtersPresenter = new FiltersPresenter({
   filtersContainer: tripFiltersElement,
@@ -21,8 +18,6 @@ const filtersPresenter = new FiltersPresenter({
 const eventsPresenter = new EventsPresenter({
   eventsContainer: tripEventsElement,
   pointsModel,
-  destinationsModel,
-  offersModel,
 });
 
 filtersPresenter.init();

diff --git a/src/mock/filter.js b/src/mock/filter.js
@@ -1,10 +1,9 @@
 import {filter} from '../utils/filter.js';
 
-function generateFilter(points) {
+function generateFilter() {
   return Object.entries(filter).map(
-    ([filterType, filterPoints]) => ({
+    ([filterType]) => ({
       type: filterType,
-      count: filterPoints(points).length,
     }),
   );
 }

diff --git a/src/model/points-model.js b/src/model/points-model.js
@@ -1,6 +1,6 @@
 import {getRandomPoint} from '../mock/points';
 
-const POINTS_COUNT = 15;
+const POINTS_COUNT = 6;
 
 export default class PointsModel {
   points = Array.from({length: POINTS_COUNT}, getRandomPoint);

diff --git a/src/presenter/events-presenter.js b/src/presenter/events-presenter.js
@@ -1,85 +1,82 @@
 import SortView from '../view/sort-view.js';
 import EventsListView from '../view/events-list-view.js';
-import EventEditView from '../view/event-edit-view.js';
-import EventPointView from '../view/event-point-view.js';
 import NoEventView from '../view/no-event-view.js';
-import {isEscapeKey} from '../utils/utils.js';
+import PointPresenter from '../presenter/point-presenter.js';
+import DestinationsModel from '../model/destinations-model.js';
+import OffersModel from '../model/offers-model.js';
 
-
-import {render, replace,} from '../framework/render.js';
+import {render} from '../framework/render.js';
+import {updateItem} from '../utils/utils.js';
 
 export default class EventsPresenter {
   #eventsContainer = null;
   #pointsModel = null;
-  #destinationsModel = null;
-  #offersModel = null;
 
   #eventsListComponent = new EventsListView();
 
   #eventsPoints = [];
+  #pointPresenters = new Map ();
 
-  constructor({ eventsContainer, pointsModel, destinationsModel, offersModel }) {
+  constructor({ eventsContainer, pointsModel }) {
     this.#eventsContainer = eventsContainer;
     this.#pointsModel = pointsModel;
-    this.#destinationsModel = destinationsModel;
-    this.#offersModel = offersModel;
   }
 
   init() {
     this.#eventsPoints = [...this.#pointsModel.getPoints()];
 
     if (this.#eventsPoints.length === 0) {
-      render(new NoEventView(), this.#eventsContainer);
+      this.#renderEmptyList();
       return;
     }
-    render(new SortView(), this.#eventsContainer);
-    render(this.#eventsListComponent, this.#eventsContainer);
+    this.#renderSort();
+
+    this.#renderPointsList();
 
     this.#eventsPoints.forEach((point) => {
       this.#renderEventPoint(point);
     });
   }
 
+  #handlePointChange = (updatedPoint) => {
+    this.#eventsPoints = updateItem(this.#eventsPoints, updatedPoint);
+    this.#pointPresenters.get(updatedPoint.id).init(updatedPoint);
+  };
+
+  #handleModeChange = () => {
+    this.#pointPresenters.forEach((presenter) => presenter.resetView());
+  };
+
+  #renderSort() {
+    render(new SortView(), this.#eventsContainer);
+  }
+
+  #renderPointsList() {
+    render(this.#eventsListComponent, this.#eventsContainer);
+  }
+
+  #clearPointsList() {
+    this.#pointPresenters.forEach((presenter) => presenter.destroy());
+    this.#pointPresenters.clear();
+  }
+
+  #renderEmptyList() {
+    render(new NoEventView(), this.#eventsContainer);
+  }
+
   #renderEventPoint(point) {
-    const escKeyDownHandler = (evt) => {
-      if (isEscapeKey) {
-        evt.preventDefault();
-        replaceEditFormToPoint();
-        document.removeEventListener('keydown', escKeyDownHandler);
-      }
-    };
-    const onEditOpenButtonClick = () => {
-      replacePointToEditForm();
-      document.addEventListener('keydown', escKeyDownHandler);
-    };
-    const onEditCloseButtonClick = () => {
-      replaceEditFormToPoint();
-      document.removeEventListener('keydown', escKeyDownHandler);
-    };
-
-    const eventPointComponent = new EventPointView ({
-      point,
-      destination: this.#destinationsModel.getDestinationsById(point.destination),
-      offers: [...this.#offersModel.getOffersById(point.type, point.offers)],
-      onEditOpenButtonClick,
-    });
+    const destinationsModel = new DestinationsModel();
+    const offersModel = new OffersModel();
 
-    const eventPointEditingComponent = new EventEditView ({
-      point,
-      chosenDestination: this.#destinationsModel.getDestinationsById(point.destination),
-      chosenOffers: [...this.#offersModel.getOffersById(point.type, point.offers)],
-      allDestinations: this.#destinationsModel.getDestinations(),
-      allOffers: this.#offersModel.getOffersByType(point.type),
-      onEditCloseButtonClick,
+    const pointPresenter = new PointPresenter({
+      pointListContainer: this.#eventsListComponent.element,
+      onDataChange: this.#handlePointChange,
+      onModeChange: this.#handleModeChange,
+      destinationsModel,
+      offersModel,
     });
 
-    function replaceEditFormToPoint() {
-      replace(eventPointComponent, eventPointEditingComponent);
-    }
-    function replacePointToEditForm() {
-      replace(eventPointEditingComponent, eventPointComponent);
-    }
-
-    render(eventPointComponent, this.#eventsListComponent.element);
+    pointPresenter.init(point);
+    this.#pointPresenters.set(point.id, pointPresenter);
   }
 }
diff --git a/src/presenter/filters-presenter.js b/src/presenter/filters-presenter.js
@@ -1,4 +1,4 @@
-import FiltersView from '../view/filtes-view.js';
+import FiltersView from '../view/filters-view.js';
 import {generateFilter} from '../mock/filter.js';
 import { render } from '../framework/render.js';
 

diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js
@@ -0,0 +1,117 @@
+import EventEditView from '../view/event-edit-view.js';
+import EventPointView from '../view/event-point-view.js';
+import {isEscapeKey} from '../utils/utils.js';
+import {replace, render, remove} from '../framework/render.js';
+import {Mode} from '../consts.js';
+
+
+export default class PointPresenter {
+  #pointListContainer = null;
+  #handleDataChange = null;
+  #handleModeChange = null;
+
+  #pointComponent = null;
+  #pointEditComponent = null;
+  #destinationsModel = null;
+  #offersModel = null;
+  #point = null;
+  #mode = Mode.DEFAULT;
+
+  constructor({pointListContainer, onDataChange, destinationsModel, offersModel, onModeChange}) {
+    this.#pointListContainer = pointListContainer;
+    this.#handleDataChange = onDataChange;
+    this.#handleModeChange = onModeChange;
+    this.#destinationsModel = destinationsModel;
+    this.#offersModel = offersModel;
+  }
+
+  init(point) {
+    this.#point = point;
+
+    const prevPointComponent = this.#pointComponent;
+    const prevPointEditComponent = this.#pointEditComponent;
+
+    this.#pointComponent = new EventPointView ({
+      point: this.#point,
+      destination: this.#destinationsModel.getDestinationsById(point.destination),
+      offers: [...this.#offersModel.getOffersById(point.type, point.offers)],
+      onEditOpenButtonClick: this.#handleEditOpenClick,
+      onFavoriteClick: this.#handleFavoriteClick,
+    });
+
+    this.#pointEditComponent = new EventEditView ({
+      point: this.#point,
+      chosenDestination: this.#destinationsModel.getDestinationsById(point.destination),
+      chosenOffers: [...this.#offersModel.getOffersById(point.type, point.offers)],
+      allDestinations: this.#destinationsModel.getDestinations(),
+      allOffers: this.#offersModel.getOffersByType(point.type),
+      onEditCloseButtonClick: this.#handleEditCloseClick,
+    });
+
+    if (!prevPointComponent || !prevPointEditComponent) {
+      render(this.#pointComponent, this.#pointListContainer);
+      return;
+    }
+
+    if (this.#mode === Mode.DEFAULT) {
+      replace(this.#pointComponent, prevPointComponent);
+    }
+
+    if (this.#mode === Mode.EDITING) {
+      replace(this.#pointEditComponent, prevPointEditComponent);
+    }
+
+    remove(prevPointComponent);
+    remove(prevPointEditComponent);
+  }
+
+  destroy() {
+    remove(this.#pointComponent);
+    remove(this.#pointEditComponent);
+  }
+
+  resetView() {
+    if (this.#mode !== Mode.DEFAULT) {
+      this.#replaceEditFormToPoint();
+    }
+  }
+
+  #replaceEditFormToPoint() {
+    replace(this.#pointComponent, this.#pointEditComponent);
+    this.#mode = Mode.DEFAULT;
+  }
+
+  #replacePointToEditForm() {
+    replace(this.#pointEditComponent, this.#pointComponent);
+    this.#handleModeChange();
+    this.#mode = Mode.EDITING;
+  }
+
+  #escKeyDownHandler = (evt) => {
+    if (isEscapeKey) {
+      evt.preventDefault();
+      this.#replaceEditFormToPoint();
+      document.removeEventListener('keydown', this.#escKeyDownHandler);
+    }
+  };
+
+  #handleEditOpenClick = () => {
+    this.#replacePointToEditForm();
+    document.addEventListener('keydown', this.#escKeyDownHandler);
+  };
+
+  #handleEditCloseClick = () => {
+    this.#replaceEditFormToPoint();
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+  };
+
+  #handleFormSubmit = (point) => {
+    this.#handleDataChange(point);
+    this.#replaceEditFormToPoint();
+  };
+
+  #handleFavoriteClick = () => {
+    this.#handleDataChange({...this.#point, isFavorite: !this.#point.isFavorite});
+  };
+}
+
diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -10,4 +10,9 @@ function padToTwoDigits(number) {
   return number.toString().padStart(2, '0');
 }
 
-export {getRandomArrayElement, padToTwoDigits, capitalize, isEscapeKey};
+function updateItem(items, update) {
+  return items.map((item) => item.id === update.id ? update : item);
+}
+
+export {getRandomArrayElement, padToTwoDigits, capitalize, isEscapeKey, updateItem};
+
diff --git a/src/view/event-edit-view.js b/src/view/event-edit-view.js
@@ -5,7 +5,7 @@ import {createOffersTemplate, createTypeTemplate, humanizeEventDate} from '../ut
 
 function createEventEditingTemplate(event, chosenDestination, chosenOffers, allDestinations, allOffers) {
   const { basePrice, dateFrom, dateTo, type } = event;
-  const { name, description } = chosenDestination;
+  const { name, description, pictures } = chosenDestination;
 
   const typeTemplate = createTypeTemplate(EVENT_TYPES, type);
   const offersTemplate = createOffersTemplate(allOffers.offers, chosenOffers, type);
@@ -71,6 +71,13 @@ function createEventEditingTemplate(event, chosenDestination, chosenOffers, allD
                   <section class="event__section  event__section--destination">
                     <h3 class="event__section-title  event__section-title--destination">Destination</h3>
                     <p class="event__destination-description">${description}</p>
+                    <div class="event__photos-container">
+                      <div class="event__photos-tape">
+                        ${pictures.map((picture) => `
+                          <img class="event__photo" src = ${picture.src} alt=${picture.description}>
+                        `).join('')}
+                      </div>
+                    </div>
                   </section>
                 </section>
               </form>`;
@@ -83,6 +90,7 @@ export default class EventEditView extends AbstractView {
   #allDestinations = null;
   #allOffers = null;
   #handleEditCloseButton = null;
+  #handleFormSubmit;
 
   constructor({point, chosenDestination, chosenOffers, allDestinations, allOffers, onEditCloseButtonClick}) {
     super();
@@ -104,4 +112,10 @@ export default class EventEditView extends AbstractView {
     evt.preventDefault();
     this.#handleEditCloseButton();
   };
+
+  #formSubmitHandler = (evt) => {
+    evt.preventDefault();
+    this.#handleFormSubmit();
+    this.#handleFormSubmit(this.#point);
+  };
 }