Merge pull request #7 from MaxSiryatov/module5-task1

src/const.js

@@ -50,4 +50,9 @@ for (let i = 0; i < IMAGE_COUNT; i++) {
   IMAGES.push(`${IMAGE_URL}${getRandomValue()}`);
 }
 
-export {POINTS_COUNT, CITIES_COUNT, OFFERS_COUNT, IMAGE_COUNT, POINTS_TYPE, DESTINATIONS, OFFERS, DESCRIPTION, IMAGE_URL, IMAGES, FilterType};
+const Mode = {
+  DEFAULT: 'DEFAULT',
+  EDITING: 'EDITING'
+};
+
+export { POINTS_COUNT, CITIES_COUNT, OFFERS_COUNT, IMAGE_COUNT, POINTS_TYPE, DESTINATIONS, OFFERS, DESCRIPTION, IMAGE_URL, IMAGES, FilterType, Mode };

src/filter.js

@@ -8,4 +8,4 @@ const filter = {
   [FilterType.PRESENT] : (point) => dayjs().isAfter(dayjs(point.dateFrom)) && dayjs().isBefore(dayjs(point.dateTo))
 };
 
-export { filter };
+export { filter };

src/framework/ui-blocker/ui-blocker.js

@@ -72,3 +72,4 @@ export default class UiBlocker {
     this.#element.classList.remove('ui-blocker--on');
   };
 }
+

src/main.js

@@ -9,4 +9,4 @@ const tripPresenter = new TripPresenter({
   container: tripInfoContainer,
   pointModel
 });
-tripPresenter.init();
+tripPresenter.init();

src/mock/destination.js

@@ -10,4 +10,4 @@ function getRandomDestination() {
   });
 }
 
-export {getRandomDestination};
+export {getRandomDestination};

src/mock/offer.js

@@ -10,4 +10,4 @@ function getRandomOffer() {
   });
 }
 
-export {getRandomOffer};
+export {getRandomOffer};

src/mock/point.js

@@ -14,4 +14,4 @@ function getRandomPoint(destinationID, offersID) {
   });
 }
 
-export {getRandomPoint};
+export {getRandomPoint};

src/model/destination-model.js

@@ -27,4 +27,4 @@ export default class DestinationModel {
     });
     return temp;
   }
-}
+}

src/model/offer-model.js

@@ -23,4 +23,4 @@ export default class OfferModel {
     this.offersIds = offersArr.map((offer) => offer.id);
     return this.offersIds;
   }
-}
+}

src/model/point-model.js

@@ -33,4 +33,4 @@ export default class PointModel {
   getPoint() {
     return this.points[0];
   }
-}
+}

src/presenter/point-presenter.js

@@ -0,0 +1,116 @@
+import PointEditView from '../view/point-edit-view.js';
+import PointView from '../view/point-view.js';
+import OpenFormBtnView from '../view/open-form-button-view.js';
+import CloseFormBtnView from '../view/close-form-button-view.js';
+import SaveFormBtnView from '../view/save-form-button-view.js';
+import { RenderPosition, remove, render, replace } from '../framework/render.js';
+import { Mode } from '../const.js';
+
+export default class PointPresenter {
+
+  #pointsListView;
+  #handlePointChange;
+  #handleModeChange;
+
+  #point;
+  #mode = Mode.DEFAULT;
+
+  #pointComponent;
+  #pointEditComponent;
+
+  constructor ({pointListContainer, onDataChange, onModeChange}) {
+    this.#pointsListView = pointListContainer;
+    this.#handlePointChange = onDataChange;
+    this.#handleModeChange = onModeChange;
+  }
+
+  init(point) {
+    this.#point = point;
+
+    const prevPointComponent = this.#pointComponent;
+    const prevEditFormComponent = this.#pointEditComponent;
+
+    const escKeyDownHandler = (evt) => {
+      if (evt.key === 'Escape') {
+        this.#replacePointToEditForm();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    };
+
+    this.#pointComponent = new PointView({
+      data: this.#point,
+      onFavouriteClick: this.#onFavouriteClick,
+    });
+
+    this.#pointEditComponent = new PointEditView({
+      data: this.#point,
+      onSubmit: () => {
+        this.#replaceEditFormToPoint();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    });
+
+    const deleteBtn = this.#pointEditComponent.element.querySelector('.event__reset-btn');
+
+    const openBtn = new OpenFormBtnView({
+      onClick: () => {
+        this.#replacePointToEditForm();
+        document.addEventListener('keydown', escKeyDownHandler);
+      }});
+
+    const closeBtn = new CloseFormBtnView({
+      onClick: () => {
+        this.#replaceEditFormToPoint();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }});
+
+    const saveBtn = new SaveFormBtnView();
+
+    render(openBtn, this.#pointComponent.element, RenderPosition.BEFOREEND);
+    render(saveBtn, deleteBtn, RenderPosition.BEFOREBEGIN);
+    render(closeBtn, deleteBtn, RenderPosition.AFTEREND);
+
+    if (!prevPointComponent || !prevEditFormComponent) {
+      render(this.#pointComponent, this.#pointsListView);
+      return;
+    }
+
+    if (this.#mode === Mode.DEFAULT) {
+      replace(this.#pointComponent, prevPointComponent);
+    }
+
+    if (this.#mode === Mode.EDITING) {
+      replace(this.#pointEditComponent, prevEditFormComponent);
+    }
+
+    remove(prevEditFormComponent);
+    remove(prevPointComponent);
+  }
+
+  resetView() {
+    if (this.#mode === Mode.EDITING) {
+      this.#replaceEditFormToPoint();
+    }
+  }
+
+  destroy() {
+    remove(this.#pointComponent);
+    remove(this.#pointEditComponent);
+  }
+
+  #replaceEditFormToPoint() {
+    replace(this.#pointComponent, this.#pointEditComponent);
+    this.#mode = Mode.DEFAULT;
+  }
+
+  #replacePointToEditForm() {
+    replace(this.#pointEditComponent, this.#pointComponent);
+    this.#handleModeChange();
+    this.#mode = Mode.EDITING;
+  }
+
+  #onFavouriteClick = () => {
+    this.#handlePointChange({...this.#point, isFavorite: !this.#point.isFavorite});
+  };
+
+}

src/presenter/trip-presenter.js

@@ -1,25 +1,23 @@
 import EventListView from '../view/event-list-view.js';
-import PointEditView from '../view/point-edit-view.js';
 import SortView from '../view/sort-view.js';
-import PointView from '../view/point-view.js';
 import FilterFormView from '../view/filter-form-view.js';
 import FilterItemView from '../view/filter-item-view.js';
-import OpenFormBtnView from '../view/open-form-button-view.js';
-import CloseFormBtnView from '../view/close-form-button-view.js';
-import SaveFormBtnView from '../view/save-form-button-view.js';
 import TripInfoView from '../view/trip-info-view.js';
 import EmptyPointListView from '../view/empty-point-list-view.js';
-import { RenderPosition, render, replace } from '../framework/render.js';
 import { generateFilter } from '../mock/filters.js';
+import PointPresenter from './point-presenter.js';
+import { updateItem } from '../utils.js';
+import { RenderPosition, render } from '../framework/render.js';
 
 export default class TripPresenter {
   #eventListView = new EventListView();
   #emptyPointListView = new EmptyPointListView();
   #tripInfoView = new TripInfoView();
   #filterFormView = new FilterFormView();
   #sortView = new SortView();
-  #container = null;
-  #pointModel = null;
+  #pointPresenters = new Map();
+  #container;
+  #pointModel;
   #tripPoint = [];
 
   constructor ({container, pointModel}) {
@@ -29,10 +27,13 @@ export default class TripPresenter {
 
   init() {
     this.#tripPoint = [...this.#pointModel.getPoints()];
+
     const tripControls = document.querySelector('.trip-main__trip-controls');
     const filterFormContainer = document.querySelector('.trip-controls__filters');
     const filters = generateFilter(this.#tripPoint);
+
     render(this.#filterFormView, filterFormContainer);
+
     for (let i = 0; i < filters.length; i++) {
       render(new FilterItemView(filters[i]), this.#filterFormView.element);
     }
@@ -41,53 +42,34 @@ export default class TripPresenter {
       render(this.#tripInfoView, tripControls, RenderPosition.BEFOREBEGIN);
       render(this.#sortView, this.#container);
       render(this.#eventListView, this.#container);
+
       for (let i = 0; i < this.#tripPoint.length; i++) {
         this.#renderPoint(this.#tripPoint[i]);
       }
     }
+
     else {
       render(this.#emptyPointListView, this.#container);
     }
   }
 
   #renderPoint (point) {
-    const pointComponent = new PointView({data: point});
-    const escKeyDownBtnHandler = (evt) => {
-      if (evt.key === 'Escape') {
-        replacePointToForm();
-        document.removeEventListener('keydown', escKeyDownBtnHandler);
-      }
-    };
-    const formComponent = new PointEditView({
-      data: point,
-      onSubmit: () => {
-        replacePointToForm();
-        document.removeEventListener('keydown', escKeyDownBtnHandler);
-      }});
-    const deleteBtn = formComponent.element.querySelector('.event__reset-btn');
-    const openBtn = new OpenFormBtnView({
-      onClick: () => {
-        replaceFormToPoint();
-        document.addEventListener('keydown', escKeyDownBtnHandler);
-      }});
-    const closeBtn = new CloseFormBtnView({
-      onClick: () => {
-        replacePointToForm();
-        document.removeEventListener('keydown', escKeyDownBtnHandler);
-      }});
-    const saveBtn = new SaveFormBtnView();
+    const pointPresenter = new PointPresenter({
+      pointListContainer: this.#eventListView.element,
+      onDataChange: this.#handlePointChange,
+      onModeChange: this.#handleModeChange
+    });
 
-    render(pointComponent, this.#eventListView.element);
-    render(openBtn, pointComponent.element, RenderPosition.BEFOREEND);
-    render(saveBtn, deleteBtn, RenderPosition.BEFOREBEGIN);
-    render(closeBtn, deleteBtn, RenderPosition.AFTEREND);
+    pointPresenter.init(point);
+    this.#pointPresenters.set(point.id, pointPresenter);
+  }
 
-    function replacePointToForm() {
-      replace(pointComponent, formComponent);
-    }
+  #handlePointChange = (updatedPoint) => {
+    this.#tripPoint = updateItem(this.#tripPoint, updatedPoint);
+    this.#pointPresenters.get(updatedPoint.id).init(updatedPoint);
+  };
 
-    function replaceFormToPoint() {
-      replace(formComponent, pointComponent);
-    }
-  }
-}
+  #handleModeChange = () => {
+    this.#pointPresenters.forEach((presenter) => presenter.resetView());
+  };
+}

src/templates/close-form-button-template.js

@@ -0,0 +1,6 @@
+export function createCloseFormBtn() {
+    return `<button class="event__rollup-btn" type="button">
+    <span class="visually-hidden">Open event</span>
+    </button>`;
+  }
+

src/templates/empty-point-list-template.js

@@ -0,0 +1,3 @@
+export function createEmptyPointsListTemplate() {
+    return '<p class="trip-events__msg">Click New Event to create your first point</p>';
+  }

src/templates/event-list-template.js

@@ -2,4 +2,5 @@ function createEventListTemplate () {
     return '<ul class="trip-events__list"></ul>';
   }
 
-  export { createEventListTemplate };
+  export { createEventListTemplate };
+

src/templates/filter-form-template.js

@@ -4,4 +4,4 @@ function createFilterFormTemplate () {
   </form>`;
   }
 
-export {createFilterFormTemplate};
+export {createFilterFormTemplate};

src/templates/filter-item-template.js

@@ -9,4 +9,4 @@ function isAvailible(filter) {
     return filter.exists ? '' : 'disabled';
 }
 
-export {createFilterItemTemplate};
+export {createFilterItemTemplate};

src/templates/open-form-button-template.js

@@ -0,0 +1,5 @@
+export function createOpenFormBtn() {
+    return `<button class="event__rollup-btn" type="button">
+    <span class="visually-hidden">Open event</span>
+    </button>`;
+}

src/templates/point-edit-template.js

@@ -82,4 +82,4 @@ function isChecked(offers, title) {
   });
   return check ? 'checked' : '';
 }
-export {createPointEditTemplate};
+export {createPointEditTemplate};

src/templates/point-template.js

@@ -39,4 +39,4 @@ function isFavorite(check) {
   return check ? 'event__favorite-btn--active' : '';
 }
 
-export {createPointTemplate};
+export {createPointTemplate};

src/templates/save-form-button-template.js

@@ -0,0 +1,3 @@
+export function createSaveFormBtn() {
+    return '<button class="event__save-btn  btn  btn--blue" type="submit">Save</button>';
+}

src/templates/sort-template.js

@@ -23,4 +23,4 @@ const createSortTemplate = () => `
   </form>
 `;
 
-export {createSortTemplate};
+export {createSortTemplate};

src/templates/trip-info-template.js

@@ -10,4 +10,5 @@ function createTripInfoTemplate () {
   </section>`;
   }
 
-  export {createTripInfoTemplate};
+  export {createTripInfoTemplate};
+

src/utils.js

@@ -55,4 +55,8 @@ function getDate({next}) {
   return date;
 }
 
-export { getDateDiff, getTime, getMonthAndDay, getFullDate, getRandomArrayElement, getDate, getRandomValue };
+function updateItem (items, update) {
+  return items.map((item) => item.id === update.id ? update : item);
+}
+
+export { getDateDiff, getTime, getMonthAndDay, getFullDate, getRandomArrayElement, getDate, getRandomValue, updateItem };