Merge pull request #7 from egorarud/module5-task1

src/mock/points.js

@@ -1,8 +1,6 @@
-import { createId, getRandomInteger, getRandomArrayElement } from '../util.js';
+import { createId, getRandomInteger } from '../util.js';
 import { MAX_PRICE, MIN_PRICE } from '../const.js';
 
-const isFavoriteValues = [true, false];
-
 const getPointId = createId();
 
 const points = [
@@ -12,7 +10,7 @@ const points = [
     dateFrom: '2019-07-10T11:55:56',
     dateTo: '2019-07-11T12:22:13',
     destination: 'dest1',
-    isFavorite: getRandomArrayElement(isFavoriteValues),
+    isFavorite: false,
     offers: [
       'of1'
     ],
@@ -24,7 +22,7 @@ const points = [
     dateFrom: '2019-07-10T22:55:56',
     dateTo: '2019-07-11T11:22:13',
     destination: 'dest2',
-    isFavorite: getRandomArrayElement(isFavoriteValues),
+    isFavorite: false,
     offers: [],
     type: 'bus'
   },
@@ -34,7 +32,7 @@ const points = [
     dateFrom: '2019-07-10T22:55:56',
     dateTo: '2019-07-11T11:22:13',
     destination: 'dest3',
-    isFavorite: getRandomArrayElement(isFavoriteValues),
+    isFavorite: false,
     offers: [
       'of2',
       'of3'

src/presenter/trip-events-presenter.js

@@ -1,9 +1,8 @@
 import SortView from '../view/sort-view.js';
 import ListView from '../view/list-view.js';
-import EditablePointView from '../view/editable-point-view.js';
-import PointView from '../view/point-view.js';
-import { render, replace } from '../framework/render.js';
-import { isEscapeKey } from '../util.js';
+import TripPointPresenter from './trip-point-presenter.js';
+import { render} from '../framework/render.js';
+
 
 export default class TripEventsPresenter {
   #listComponent = new ListView();
@@ -13,6 +12,8 @@ export default class TripEventsPresenter {
   #offersModel = null;
   #destinationsModel = null;
 
+  #pointPresenters = new Map();
+
   #points = [];
 
   constructor({tpipEventsContainer, pointsModel, offersModel, destinationsModel}) {
@@ -25,68 +26,61 @@ export default class TripEventsPresenter {
   init() {
     this.#points = [...this.#pointsModel.points];
 
-    render(new SortView(), this.#tpipEventsContainer);
-    render(this.#listComponent, this.#tpipEventsContainer);
-    for (let i = 0; i < this.#points.length; i++) {
-      const point = this.#points[i];
-      const destination = this.#destinationsModel.getDestinationById(point.destination);
-      const offer = this.#offersModel.getOfferByType(point.type);
-      this.#renderPoint(point, destination, offer);
-    }
+    this.#renderSort();
+    this.#renderList();
+    this.#renderPoints(this.#points);
   }
 
-  #renderPoint = (point, destination, offer) => {
-    const pointComponent = new PointView({
-      point,
-      city: destination.name,
-      offer,
-      onRollupButtonClick: pointRollupButtonClikHandler
-    });
-
-    const editPointComponent = new EditablePointView({
-      point,
-      destination,
-      offer,
-      onDeleteButtonClick: deleteButtonClikHandler,
-      onSubmitForm: submitFormHandler,
-      onRollupButtonClick: formRollupButtonClikHandler
-    });
-
-    function replacePointToForm() {
-      replace(editPointComponent, pointComponent);
-    }
+  #changePointFavorite = (point) => {
+    this.#points = this.#points.map((element) => element.id === point.id ? point : element);
 
-    function replaceFormToPoint() {
-      replace(pointComponent, editPointComponent);
-    }
+    const destination = this.#destinationsModel.getDestinationById(point.destination);
+    const offer = this.#offersModel.getOfferByType(point.type);
+    this.#pointPresenters.get(point.id).init(point, destination, offer);
+  };
 
-    function onFormKeydown(evt) {
-      if (isEscapeKey(evt)) {
-        evt.preventDefault();
-        replaceFormToPoint();
-      }
+  #changeSortType = (type) => {
+    this.#clearPoints();
+    switch (type) {
+      case 'day':
+        this.#points.sort((a, b) => new Date(a.dateFrom) - new Date(b.dateFrom));
+        this.#renderPoints(this.#points);
+        break;
+      case 'time':
+        // code block
+        break;
+      case 'price':
+        this.#points.sort((a, b) => a.basePrice - b.basePrice);
+        this.#renderPoints(this.#points);
+        break;
     }
+  };
 
-    function pointRollupButtonClikHandler() {
-      replacePointToForm();
-      document.addEventListener('keydown', onFormKeydown);
-    }
+  #changeViewHandler = () => {
+    this.#pointPresenters.forEach((presenter) => presenter.resetView());
+  };
 
-    function formRollupButtonClikHandler() {
-      replaceFormToPoint();
-      document.removeEventListener('keydown', onFormKeydown);
-    }
+  #renderSort = () => {
+    render(new SortView(this.#changeSortType), this.#tpipEventsContainer);
+  };
 
-    function submitFormHandler() {
-      replaceFormToPoint();
-      document.removeEventListener('keydown', onFormKeydown);
-    }
+  #renderList = () => {
+    render(this.#listComponent, this.#tpipEventsContainer);
+  };
 
-    function deleteButtonClikHandler() {
-      replaceFormToPoint();
-      document.removeEventListener('keydown', onFormKeydown);
+  #renderPoints = (points) => {
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i];
+      const destination = this.#destinationsModel.getDestinationById(point.destination);
+      const offer = this.#offersModel.getOfferByType(point.type);
+      const pointPresenter = new TripPointPresenter(this.#listComponent.element, this.#changePointFavorite, this.#changeViewHandler);
+      pointPresenter.init(point, destination, offer);
+      this.#pointPresenters.set(point.id, pointPresenter);
     }
+  };
 
-    render(pointComponent, this.#listComponent.element);
+  #clearPoints = () => {
+    this.#pointPresenters.forEach((presenter) => presenter.remove());
+    this.#pointPresenters.clear();
   };
 }

src/presenter/trip-point-presenter.js

@@ -0,0 +1,112 @@
+import EditablePointView from '../view/editable-point-view.js';
+import PointView from '../view/point-view.js';
+import { render, replace, remove } from '../framework/render.js';
+import { isEscapeKey } from '../util.js';
+
+
+const VIEW = {
+  DEFAULT: 'DEFAULT',
+  EDIT: 'EDIT'
+};
+
+export default class TripPointPresenter {
+  #pointContainer = null;
+  #onFavoriteChange = null;
+  #onViewChange = null;
+
+  #pointComponent = null;
+  #editPointComponent = null;
+
+  #point = null;
+
+  #view = VIEW.DEFAULT;
+
+  constructor(pointContainer, onFavoriteChange, onViewChange) {
+    this.#pointContainer = pointContainer;
+    this.#onFavoriteChange = onFavoriteChange;
+    this.#onViewChange = onViewChange;
+  }
+
+  init(point, destination, offer) {
+    this.#point = point;
+
+    const prevPointComponent = this.#pointComponent;
+
+    this.#pointComponent = new PointView({
+      point,
+      city: destination.name,
+      offer,
+      onRollupButtonClick: this.#pointRollupButtonClikHandler,
+      onFavoriteButtonClick: this.#favoriteButtonClickHandler
+    });
+
+    this.#editPointComponent = new EditablePointView({
+      point,
+      destination,
+      offer,
+      onDeleteButtonClick: this.#deleteButtonClikHandler,
+      onSubmitForm: this.#submitFormHandler,
+      onRollupButtonClick: this.#formRollupButtonClikHandler
+    });
+
+    if (prevPointComponent !== null && this.#pointContainer.contains(prevPointComponent.element)) {
+      replace(this.#pointComponent, prevPointComponent);
+    }
+    else {
+      render(this.#pointComponent, this.#pointContainer);
+    }
+  }
+
+  #favoriteButtonClickHandler = () => {
+    this.#onFavoriteChange({...this.#point, isFavorite: !this.#point.isFavorite});
+  };
+
+  #replacePointToForm() {
+    this.#onViewChange();
+    replace(this.#editPointComponent, this.#pointComponent);
+    this.#view = VIEW.EDIT;
+  }
+
+  #replaceFormToPoint() {
+    replace(this.#pointComponent, this.#editPointComponent);
+    this.#view = VIEW.DEFAULT;
+  }
+
+  resetView = () => {
+    if (this.#view === VIEW.EDIT){
+      this.#replaceFormToPoint();
+    }
+  };
+
+  remove = () => {
+    remove(this.#pointComponent);
+    remove(this.#editPointComponent);
+  };
+
+  #pointRollupButtonClikHandler = () => {
+    this.#replacePointToForm();
+    document.addEventListener('keydown', this.#onFormKeydown);
+  };
+
+  #formRollupButtonClikHandler = () => {
+    this.#replaceFormToPoint();
+    document.removeEventListener('keydown', this.#onFormKeydown);
+  };
+
+  #submitFormHandler = () => {
+    this.#replaceFormToPoint();
+    document.removeEventListener('keydown', this.#onFormKeydown);
+  };
+
+  #deleteButtonClikHandler = () => {
+    this.#replaceFormToPoint();
+    document.removeEventListener('keydown', this.#onFormKeydown);
+  };
+
+  #onFormKeydown = (evt) => {
+    if (isEscapeKey(evt)) {
+      evt.preventDefault();
+      this.#replaceFormToPoint();
+    }
+  };
+}

src/view/point-view.js

@@ -28,7 +28,7 @@ function createPointTemplate(point, city, offer) {
           <ul class="event__selected-offers">
             ${createOffersTemplate(offer)}
         </ul>` : ''}
-        <button class="event__favorite-btn event__favorite-btn--active" type="button">
+        <button class="event__favorite-btn ${point.isFavorite ? 'event__favorite-btn--active' : ''}" type="button">
           <span class="visually-hidden">Add to favorite</span>
           <svg class="event__favorite-icon" width="28" height="28" viewBox="0 0 28 28">
             <path d="M14 21l-8.22899 4.3262 1.57159-9.1631L.685209 9.67376 9.8855 8.33688 14 0l4.1145 8.33688 9.2003 1.33688-6.6574 6.48934 1.5716 9.1631L14 21z"/>
@@ -56,16 +56,21 @@ export default class PointView extends AbstractView{
   #city = null;
   #offer = null;
   #onRollupButtonClick = null;
+  #onFavoriteButtonClick = null;
 
-  constructor({point, city, offer, onRollupButtonClick}){
+  constructor({point, city, offer, onRollupButtonClick, onFavoriteButtonClick}){
     super();
     this.#point = point;
     this.#city = city;
     this.#offer = offer;
     this.#onRollupButtonClick = onRollupButtonClick;
+    this.#onFavoriteButtonClick = onFavoriteButtonClick;
 
     this.element.querySelector('.event__rollup-btn')
       .addEventListener('click', this.#rollupButtonClickHandler);
+
+    this.element.querySelector('.event__favorite-btn')
+      .addEventListener('click', this.#favoriteButtonClickHandler);
   }
 
   get template() {
@@ -76,4 +81,9 @@ export default class PointView extends AbstractView{
     evt.preventDefault();
     this.#onRollupButtonClick();
   };
+
+  #favoriteButtonClickHandler = (evt) => {
+    evt.preventDefault();
+    this.#onFavoriteButtonClick();
+  };
 }