Merge pull request #10 from DashaKukartseva/module5-task1

src/const.js

@@ -28,6 +28,11 @@ const FilterType = {
   PAST: 'past',
 };
 
+const Mode = {
+  DEFAULT: 'DEFAULT',
+  EDITING: 'EDITING',
+};
+
 const MSEC_IN_SEC = 1000;
 const SEC_IN_MIN = 60;
 const MIN_IN_HOUR = 60;
@@ -40,4 +45,4 @@ const Duration = {
   DAY: 5,
   MIN: 59
 };
-export { FilterType, CITIES, DESCRIPTION, OFFERS_NAMES, POINT_TYPES,EVENT_COUNT, Price, POINT_EMPTY, DESTINATION_COUNT, Duration, MSEC_IN_HOUR, MSEC_IN_DAY};
+export { Mode,FilterType, CITIES, DESCRIPTION, OFFERS_NAMES, POINT_TYPES,EVENT_COUNT, Price, POINT_EMPTY, DESTINATION_COUNT, Duration, MSEC_IN_HOUR, MSEC_IN_DAY};

src/main.js

@@ -16,7 +16,7 @@ const filterContainer = document.querySelector('.trip-controls__filters');
 const tripEventsContainer = document.querySelector('.trip-events');
 
 const tripEventsPresenter = new TripEventsPresenter({
-  container: tripEventsContainer,
+  tripContainer: tripEventsContainer,
   destinationsModel,
   offersModel,
   pointsModel

src/presenters/pointpresenter.js

@@ -0,0 +1,103 @@
+import { render, replace, remove } from '../framework/render.js';
+import { Mode } from '../const.js';
+import PointView from '../view/point.js';
+import EditablePointView  from '../view/modpoint.js';
+
+export default class PointPresenter {
+  #eventListContainer = null;
+  #destinationsModel = null;
+  #offersModel = null;
+  #onDataChange = null;
+  #event = null;
+  #eventComponent = null;
+  #eventEditComponent = null;
+  #onModeChange = null;
+  #mode = Mode.DEFAULT;
+
+  constructor({eventListContainer, destinationsModel, offersModel, onDataChange, onModeChange}) {
+    this.#eventListContainer = eventListContainer;
+    this.#destinationsModel = destinationsModel;
+    this.#offersModel = offersModel;
+    this.#onDataChange = onDataChange;
+    this.#onModeChange = onModeChange;
+  }
+
+  init(event) {
+    this.#event = event;
+    const prevEventComponent = this.#eventComponent;
+    const prevEventEditComponent = this.#eventEditComponent;
+    this.#eventComponent = new PointView({
+      event: this.#event,
+      eventDestination: this.#destinationsModel.getById(event.destination),
+      eventOffers: this.#offersModel.getByType(event.type),
+      onRollupClick: this.#eventRollupClickHandler,
+      onFavoriteClick: this.#favoriteClickHandler,
+    });
+
+    this.#eventEditComponent = new EditablePointView ({
+      event: this.#event,
+      eventDestination: this.#destinationsModel.getById(event.destination),
+      eventOffers: this.#offersModel.getByType(event.type),
+      onEditSubmit: this.#editSubmitHandler,
+      onRollupClick: this.#editorRollupClickHandler,
+    });
+
+    if (prevEventComponent === null || prevEventEditComponent === null) {
+      render(this.#eventComponent, this.#eventListContainer.element);
+      return;
+    }
+
+    if (this.#mode === Mode.DEFAULT) {
+      replace(this.#eventComponent, prevEventComponent);
+    }
+
+    if (this.#mode === Mode.EDITING) {
+      replace(this.#eventEditComponent, prevEventEditComponent);
+    }
+
+    remove(prevEventComponent);
+    remove(prevEventEditComponent);
+  }
+  resetView() {
+    if (this.#mode !== Mode.DEFAULT) {
+      this.#replaceEditorToEvent();
+    }
+  }
+
+  #replaceEventToEditor() {
+    replace(this.#eventEditComponent, this.#eventComponent);
+    document.addEventListener('keydown', this.#escKeyDownHandler);
+    this.#onModeChange();
+    this.#mode = Mode.EDITING;
+  }
+
+  #replaceEditorToEvent() {
+    replace(this.#eventComponent, this.#eventEditComponent);
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+    this.#mode = Mode.DEFAULT;
+  }
+
+  #eventRollupClickHandler = () => {
+    this.#replaceEventToEditor();
+  };
+
+  #favoriteClickHandler = () => {
+    this.#onDataChange({...this.#event, isFavorite: !this.#event.isFavorite});
+  };
+
+  #editorRollupClickHandler = () => {
+    this.#replaceEditorToEvent();
+  };
+
+  #editSubmitHandler = (event) => {
+    this.#replaceEditorToEvent();
+    this.#onDataChange(event);
+  };
+
+  #escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape') {
+      evt.preventDefault();
+      this.#replaceEditorToEvent();
+    }
+  };
+}

src/presenters/trippresenter.js

@@ -1,23 +1,27 @@
 import SortView from '../view/sort.js';
 import ListView from '../view/list.js';
-import EditablePointView from '../view/modpoint.js';
-import PointView from '../view/point.js';
+import PointPresenter from './pointpresenter.js';
 import NoPointView from '../view/nopoint.js';
-import {render, replace} from '../framework/render.js';
+import { updateItem } from '../utils.js';
+import { render, RenderPosition } from '../framework/render.js';;
 
-export default class TripEventsPresenter {
+export default class TripPointsPresenter {
   #listComponent = new ListView();
+  #sortComponent = new SortView();
+  #noPointComponent = new NoPointView();
+  #tripContainer = null;
   #points = null;
   #destinationsModel = null;
   #offersModel = null;
   #pointsModel = null;
-  #container = null;
+  #pointPresenters = new Map();
 
-  constructor({ destinationsModel, offersModel, pointsModel, container }) {
+  constructor({tripContainer, destinationsModel, offersModel, pointsModel}) {
+    this.#tripContainer = tripContainer;
     this.#destinationsModel = destinationsModel;
     this.#offersModel = offersModel;
     this.#pointsModel = pointsModel;
-    this.#container = container;
+    this.#tripContainer = tripContainer;
   }
 
   init() {
@@ -27,59 +31,52 @@ export default class TripEventsPresenter {
 
   #renderTrip() {
     if (this.#points.length === 0) {
-      render(new NoPointView(), this.#container);
+      this.#renderNoPoints();
       return;
     }
 
-    render(new SortView(), this.#container);
-    render(this.#listComponent, this.#container);
+    this.#renderSort();
+    this.#renderPointContainer();
+    this.#renderPoints();
+  }
 
-    for (let i = 0; i < this.#points.length; i++) {
-      this.#renderPoint(this.#points[i]);
-    }
+  #renderPointContainer() {
+    render(this.#listComponent, this.#tripContainer);
   }
 
-  #renderPoint(point) {
-    const escKeyDownHandler = (evt) => {
-      if (evt.key === 'Escape') {
-        evt.preventDefault();
-        replaceEditorToEvent();
-        document.removeEventListener('keydown', escKeyDownHandler);
-      }
-    };
+  #renderSort() {
+    render(this.#sortComponent, this.#tripContainer, RenderPosition.AFTERBEGIN);
+  }
 
-    const pointComponent = new PointView({
-      point,
-      destination: this.#destinationsModel.getById(point.destination),
-      offers: this.#pointsModel.getByType(point.type),
-      onRollupClick: () => {
-        replaceEventToEditor();
-        document.addEventListener('keydown', escKeyDownHandler);
-      }
-    });
+  #renderNoPoints() {
+    render(this.#noPointComponent, this.#tripContainer, RenderPosition.AFTERBEGIN);
+  }
 
-    const modPointComponent = new EditablePointView({
-      point,
-      destination: this.#destinationsModel.getById(point.destination),
-      offers: this.#offersModel.getByType(point.type),
-      onEditSubmit: () => {
-        replaceEditorToEvent();
-        document.removeEventListener('keydown', escKeyDownHandler);
-      },
-      onResetClick: () => {
-        replaceEditorToEvent();
-        document.removeEventListener('keydown', escKeyDownHandler);
-      }
-    });
+  #handleModeChange = () => {
+    this.#pointPresenters.forEach((presenter) => presenter.resetView());
+  };
 
-    function replaceEventToEditor() {
-      replace(modPointComponent, pointComponent);
+  #renderPoints() {
+    for (let i = 0; i < this.#points.length; i++) {
+      this.#renderPoint(this.#points[i]);
     }
+  }
 
-    function replaceEditorToEvent() {
-      replace(pointComponent, modPointComponent);
-    }
+  #handleEventChange = (updatedEvent) => {
+    this.#points = updateItem(this.#points, updatedEvent);
+    this.#pointPresenters.get(updatedEvent.id).init(updatedEvent);
+  };
+
+  #renderPoint(point) {
+    const pointPresenter = new PointPresenter({
+      eventListContainer: this.#listComponent,
+      destinationsModel: this.#destinationsModel,
+      offersModel: this.#offersModel,
+      onDataChange: this.#handleEventChange,
+      onModeChange: this.#handleModeChange,
+    });
 
-    render(pointComponent, this.#listComponent.element);
+    pointPresenter.init(point);
+    this.#pointPresenters.set(point.id, pointPresenter);
   }
-}
+}

src/presenters/utils.js

@@ -47,7 +47,6 @@ function getDate({ next }) {
 const formatStringToDateTime = (dateF) => dayjs(dateF).format('DD/MM/YY HH:mm');
 const formatStringToShortDate = (dateF) => dayjs(dateF).format('MMM DD');
 const formatStringToTime = (dateF) => dayjs(dateF).format('HH:mm');
-
 const getPointDuration = (dateFrom, dateTo) => {
   const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom));
 
@@ -71,6 +70,9 @@ function isEventPast(event) {
   return dayjs().isAfter(event.dateTo);
 }
 
+function updateItem(items, update) {
+  return items.map((item) => item.id === update.id ? update : item);
+}
 
 export {
   isEventPast,
@@ -84,4 +86,4 @@ export {
   formatStringToTime,
   getPointDuration,
   firstLetterToUpperCase,
-  firstLetterToLowerCase};
+  firstLetterToLowerCase,updateItem};

src/view/modpoint.js

@@ -101,15 +101,15 @@ export default class EditablePointView extends AbstractView {
   #point = null;
   #pointDestination = null;
   #pointOffers = null;
-  #handleEditSubmit = null;
-  #handleResetClick = null;
+  #onEditSubmit = null;
+  #onRollupClick = null;
   constructor({point = POINT_EMPTY, pointDestination, pointOffers, onEditSubmit, onResetClick}) {
     super();
     this.#point = point;
     this.#pointDestination = pointDestination;
     this.#pointOffers = pointOffers;
-    this.#handleEditSubmit = onEditSubmit;
-    this.#handleResetClick = onResetClick;
+    this.#onEditSubmit = onEditSubmit;
+    this.#onRollupClick = onResetClick;
 
     this.element.querySelector('.event--edit')
       .addEventListener('submit', this.#editSubmitHandler);
@@ -127,11 +127,11 @@ export default class EditablePointView extends AbstractView {
 
   #editSubmitHandler = (evt) => {
     evt.preventDefault();
-    this.#handleEditSubmit();
+    this.#onEditSubmit(this.#point);
   };
 
   #resetClickHandler = (evt) => {
     evt.preventDefault();
-    this.#handleResetClick();
+    this.#onRollupClick();
   };
 }

src/view/point.js

@@ -57,16 +57,20 @@ export default class PointView extends AbstractView {
   #point = null;
   #destination = null;
   #offers = null;
-  #handleRollupClick = null;
-  constructor({ point, pointDestination, pointOffers, onRollupClick }) {
+  #onRollupClick = null;
+  #onFavoriteClick = null;
+  constructor({ point, pointDestination, pointOffers, onRollupClick,onFavoriteClick }) {
     super();
     this.#point = point;
     this.#destination = pointDestination;
     this.#offers = pointOffers.offers;
-    this.#handleRollupClick = onRollupClick;
+    this.#onRollupClick = onRollupClick;
+    this.#onFavoriteClick = onFavoriteClick;
 
     this.element.querySelector('.event__rollup-btn')
       .addEventListener('click', this.#rollupClickHandler);
+    this.element.querySelector('.event__favorite-btn')
+      .addEventListener('click', this.#favoriteClickHandler);
   }
 
   getTemplate() {
@@ -79,6 +83,11 @@ export default class PointView extends AbstractView {
 
   #rollupClickHandler = (evt) => {
     evt.preventDefault();
-    this.#handleRollupClick();
+    this.#onRollupClick();
+  };
+
+  #favoriteClickHandler = (evt) => {
+    evt.preventDefault();
+    this.#onFavoriteClick();
   };
 }