Реализует замену точки маршрута на форму редактирования, добавляет об…

…ратчик нажатия Ecsape
htmlacademy-ecmascript · Jan 19, 2025 · 22970d9 · 22970d9
1 parent ae560ed
commit 22970d9
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 16 deletions.
diff --git a/src/presenter/trip-events-presenter.js b/src/presenter/trip-events-presenter.js
@@ -1,7 +1,7 @@
-import { render } from '../framework/render.js';
+import { render, replace } from '../framework/render.js';
 import PointsView from '../view/points-view.js';
 import SortView from '../view/sort-view.js';
-// import PointEditView from '../view/point-edit-view.js';
+import PointEditView from '../view/point-edit-view.js';
 import PointView from '../view/point-view.js';
 
 
@@ -10,7 +10,6 @@ export default class TripEventsPresenter {
   #pointsModel = null;
   #destinationsModel = null;
   #offersModel = null;
-  #point = null;
 
   #pointsComponent = new PointsView();
 
@@ -24,17 +23,9 @@ export default class TripEventsPresenter {
   }
 
   init() {
+    this.#renderPoints();
+
     this.#points = [...this.#pointsModel.points];
-    this.#point = this.#points[0];
-    render(new SortView(), this.#pointsContainer);
-    render(this.#pointsComponent, this.#pointsContainer);
-    // render(new PointEditView({
-    //   point: this.#point,
-    //   types: this.#offersModel.getTypes(),
-    //   destination: this.#destinationsModel.getDestinationById(this.#point.destination),
-    //   offers: this.#offersModel.getOffersByType(this.#point.type),
-    //   checkedList: this.#offersModel.getOffersSelected(this.#point),
-    // }), this.#pointsComponent.element);
 
     for (let i = 0; i < this.#points.length; i++) {
       const point = this.#points[i];
@@ -46,8 +37,49 @@ export default class TripEventsPresenter {
   }
 
   #renderPoint(point, destination, offers) {
-    const pointComponent = new PointView({ point, destination, offers });
+    const escKeyDownHandler = (evt) => {
+      if (evt.key === 'Escape') {
+        evt.preventDefault();
+        replaceFormToPoint();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    };
+
+    const pointComponent = new PointView({
+      point,
+      destination,
+      offers,
+      onEditClick: () => {
+        replacePointToForm();
+        document.addEventListener('keydown', escKeyDownHandler);
+      }
+    });
+
+    const pointEditView = new PointEditView({
+      point,
+      types: this.#offersModel.getTypes(),
+      destination,
+      offers,
+      checkedList: this.#offersModel.getOffersSelected(point),
+      onFormSubmit: () => {
+        replaceFormToPoint();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    });
+
+    function replacePointToForm() {
+      replace(pointEditView, pointComponent);
+    }
+
+    function replaceFormToPoint() {
+      replace(pointComponent, pointEditView);
+    }
 
     render(pointComponent, this.#pointsComponent.element);
   }
+
+  #renderPoints() {
+    render(new SortView(), this.#pointsContainer);
+    render(this.#pointsComponent, this.#pointsContainer);
+  }
 }
diff --git a/src/view/point-edit-view.js b/src/view/point-edit-view.js
@@ -212,17 +212,27 @@ export default class PointEditView extends AbstractView {
   #destination = null;
   #offers = null;
   #checkedList = null;
+  #handleFormSubmit = null;
 
-  constructor({ point, types, destination, offers, checkedList }) {
+  constructor({ point, types, destination, offers, checkedList, onFormSubmit }) {
     super();
     this.#point = point;
     this.#types = types;
     this.#destination = destination;
     this.#offers = offers;
     this.#checkedList = checkedList;
+    this.#handleFormSubmit = onFormSubmit;
+
+    this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler);
+    this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#formSubmitHandler);
   }
 
   get template() {
     return createPointEditTemplate(this.#point, this.#types, this.#destination, this.#offers, this.#checkedList);
   }
+
+  #formSubmitHandler = (evt) => {
+    evt.preventDefault();
+    this.#handleFormSubmit();
+  };
 }
diff --git a/src/view/point-view.js b/src/view/point-view.js
@@ -71,15 +71,25 @@ export default class PointView extends AbstractView {
   #point = null;
   #destination = null;
   #offers = null;
+  #handleEditClick = null;
 
-  constructor({ point, destination, offers }) {
+  constructor({ point, destination, offers, onEditClick }) {
     super();
     this.#point = point;
     this.#destination = destination;
     this.#offers = offers;
+    this.#handleEditClick = onEditClick;
+
+    this.element.querySelector('.event__rollup-btn')
+      .addEventListener('click', this.#editClickHandler);
   }
 
   get template() {
     return createPointTemplate(this.#point, this.#destination, this.#offers);
   }
+
+  #editClickHandler = (evt) => {
+    evt.preventDefault();
+    this.#handleEditClick();
+  };
 }