Module4 task1

package.json

@@ -20,9 +20,11 @@
     "@babel/preset-env": "7.20.2",
     "babel-loader": "9.1.0",
     "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.2",
     "eslint": "8.28.0",
     "eslint-config-htmlacademy": "8.0.0",
     "html-webpack-plugin": "5.6.0",
+    "style-loader": "^3.3.1",
     "webpack": "5.75.0",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1"

src/const.js

@@ -70,4 +70,4 @@
   TYPES,
   DEFAULT_TYPE,
   POINT_EMPTY
-};
+}

src/main.js

@@ -1,11 +1,11 @@
 import TripInfoView from './view/trip-info-view.js';
 import FilterView from './view/filter-view.js';
-import { render, RenderPosition } from './render.js';
 import TripPresenter from './presenter/trip-presenter.js';
 import MockService from './service/mock-service.js';
 import DestinationsModel from './model/destinations-model.js';
 import OffersModel from './model/offers-model.js';
 import PointsModel from './model/points-model.js';
+import { render, RenderPosition } from './framework/render.js';
 
 const tripInfoElement = document.querySelector('.trip-main');
 const siteMainElement = document.querySelector('.page-main');
@@ -16,7 +16,7 @@ const destinationsModel = new DestinationsModel(mockService);
 const offersModel = new OffersModel(mockService);
 const pointsModel = new PointsModel(mockService);
 
-const tripPresenter = new TripPresenter({tripContainer: eventListElement, destinationsModel, offersModel, pointsModel});
+const tripPresenter = new TripPresenter({ tripContainer: eventListElement, destinationsModel, offersModel, pointsModel });
 
 render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
 render(new FilterView(), tripInfoElement.querySelector('.trip-controls__filters'));

src/model/offers-model.js

@@ -9,6 +9,6 @@ export default class OffersModel {
   }
 
   getByType(type) {
-    return this.offers.find((offer) => offer.type === type);
+    return this.offers.find((offer) => offer.type === type).offers;
   }
 }

src/presenter/trip-presenter.js

@@ -2,40 +2,82 @@ import SortView from '../view/sort-view.js';
 import EditPointView from '../view/edit-point-view.js';
 import PointView from '../view/point-view.js';
 import TripView from '../view/point-list-view.js';
-import { render } from '../render.js';
+import { render, replace } from '../framework/render.js';
 
 export default class TripPresenter {
-  constructor({tripContainer, destinationsModel, offersModel, pointsModel}) {
-    this.tripContainer = tripContainer;
-    this.pointList = new TripView();
-    this.destinationsModel = destinationsModel;
-    this.offersModel = offersModel;
-    this.pointsModel = pointsModel;
-    this.points = [...pointsModel.get()];
+  #tripContainer = null;
+  #destinationsModel = null;
+  #offersModel = null;
+  #pointsModel = null;
+  #pointListComponent = new TripView();
+  #sortComponent = new SortView();
+
+  #points = [];
+
+  constructor({ tripContainer, destinationsModel, offersModel, pointsModel }) {
+    this.#tripContainer = tripContainer;
+    this.#destinationsModel = destinationsModel;
+    this.#offersModel = offersModel;
+    this.#pointsModel = pointsModel;
+    this.#points = [...this.#pointsModel.get()];
   }
 
   init() {
-    render(new SortView(), this.tripContainer);
-    render(this.pointList, this.tripContainer);
-    render(
-      new EditPointView({
-        point: this.points[0],
-        pointDestination: this.destinationsModel.getById(this.points[0].destination),
-        pointOffers: this.offersModel.getByType(this.points[0].type),
-      }),
-      this.pointList.getElement()
-    );
-
-    for (let i = 1; i < this.points.length; i++) {
-      const point = this.points[i];
-      render(
-        new PointView({
-          point,
-          pointDestination: this.destinationsModel.getById(point.destination),
-          pointOffers: this.offersModel.getByType(point.type)
-        }),
-        this.pointList.getElement()
-      );
-    }
+    render(this.#sortComponent, this.#tripContainer);
+    render(this.#pointListComponent, this.#tripContainer);
+
+    this.#points.forEach((point) => {
+      this.#renderPoint(point);
+    });
   }
+
+  #renderPoint = (point) => {
+    const pointComponent = new PointView({
+      point,
+      pointDestination: this.#destinationsModel.getById(point.destination),
+      pointOffers: this.#offersModel.getByType(point.type),
+      onEditClick: pointEditClickHandler
+    });
+
+    const editPointComponent = new EditPointView({
+      point,
+      pointDestination: this.#destinationsModel.getById(point.destination),
+      pointOffers: this.#offersModel.getByType(point.type),
+      onSubmitClick: pointSubmitHandler,
+      onResetClick: resetButtonClickHandler
+    });
+
+    const replacePointToForm = () => {
+      replace(editPointComponent, pointComponent);
+    };
+
+    const replaceFormToPoint = () => {
+      replace(pointComponent, editPointComponent);
+    };
+
+    const escKeyDownHandler = (evt) => {
+      if (evt.key === 'Escape' || evt.key === 'Esc') {
+        evt.preventDefault();
+        replaceFormToPoint();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    };
+
+    function pointEditClickHandler() {
+      replacePointToForm();
+      document.addEventListener('keydown', escKeyDownHandler);
+    }
+
+    function resetButtonClickHandler() {
+      replaceFormToPoint();
+      document.removeEventListener('keydown', escKeyDownHandler);
+    }
+
+    function pointSubmitHandler() {
+      replaceFormToPoint();
+      document.removeEventListener('keydown', escKeyDownHandler);
+    }
+
+    render(pointComponent, this.#pointListComponent.element);
+  };
 }

src/render.js

@@ -16,4 +16,4 @@ function render(component, container, place = RenderPosition.BEFOREEND) {
   container.insertAdjacentElement(place, component.getElement());
 }
 
-export {RenderPosition, createElement, render};
+export { RenderPosition, createElement, render };

src/utils.js

@@ -5,13 +5,15 @@
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
 
-const MSEC_IN_SEC = 1000;
-const SEC_IN_MIN = 60;
-const MIN_IN_HOUR = 60;
-const HOUR_IN_DAY = 24;
+const TimePeriods = {
+  MSEC_IN_SEC: 1000,
+  SEC_IN_MIN: 60,
+  MIN_IN_HOUR: 60,
+  HOUR_IN_DAY: 24
+}
 
-const MSEC_IN_HOUR = MIN_IN_HOUR * SEC_IN_MIN * MSEC_IN_SEC;
-const MSEC_IN_DAY = HOUR_IN_DAY * MSEC_IN_HOUR;
+const MSEC_IN_HOUR = TimePeriods.MIN_IN_HOUR * TimePeriods.SEC_IN_MIN * TimePeriods.MSEC_IN_SEC;
+const MSEC_IN_DAY = TimePeriods.HOUR_IN_DAY * MSEC_IN_HOUR;
 
 const Duration = {
   HOUR: 5,
@@ -48,16 +50,16 @@
   return items[getRandomInteger(0, items.length - 1)];
 }
 
-function formatStringToDateTime(dateF) {
-  return dayjs(dateF).format('DD/MM/YY HH:mm');
+function formatStringToDateTime(date) {
+  return dayjs(date).format('DD/MM/YY HH:mm');
 }
 
-function formatStringToShortDate(dateF) {
-  return dayjs(dateF).format('MMM DD');
+function formatStringToShortDate(date) {
+  return dayjs(date).format('MMM DD');
 }
 
-function formatStringToTime(dateF) {
-  return dayjs(dateF).format('HH:mm');
+function formatStringToTime(date) {
+  return dayjs(date).format('HH:mm');
 }
 
 function getPointDuration(dateFrom, dateTo) {
@@ -88,4 +90,4 @@
   formatStringToShortDate,
   formatStringToTime,
   getPointDuration
-};
+}