Разделяй и властвуй

htmlacademy-univer-js2 · Apr 14, 2024 · 1385812 · 1385812
1 parent 569bbd6
commit 1385812
Show file tree

Hide file tree

Showing 14 changed files with 829 additions and 448 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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"

diff --git a/src/const.js b/src/const.js
@@ -18,56 +18,56 @@ const CITIES = [
 ];
 
 const OFFERS = [
-  'Order Uber',
-  'Add luggage',
-  'Switch to comfort',
-  'Rent a car',
-  'Add breakfast',
-  'Book tickets',
-  'Lunch in city',
-  'Upgrade to a business class'
+    'Order Uber',
+    'Add luggage',
+    'Switch to comfort',
+    'Rent a car',
+    'Add breakfast',
+    'Book tickets',
+    'Lunch in city',
+    'Upgrade to a business class'
 ];
 
 const DESCRIPTION = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet varius magna, non porta ligula feugiat eget. Fusce tristique felis at fermentum pharetra. Aliquam id orci ut lectus varius viverra.';
 
 const Price = {
-  MIN: 1,
-  MAX: 1000
+    MIN: 1,
+    MAX: 1000
 };
 
 const TYPES = [
-  'taxi',
-  'bus',
-  'train',
-  'ship',
-  'drive',
-  'flight',
-  'check-in',
-  'sightseeing',
-  'restaurant'
+    'taxi',
+    'bus',
+    'train',
+    'ship',
+    'drive',
+    'flight',
+    'check-in',
+    'sightseeing',
+    'restaurant'
 ];
 
 const DEFAULT_TYPE = 'flight';
 
 const POINT_EMPTY = {
-  basePrice: 0,
-  dateFrom: null,
-  dateTo: null,
-  destination: null,
-  isFavorite: false,
-  offers: [],
-  type: DEFAULT_TYPE
+    basePrice: 0,
+    dateFrom: null,
+    dateTo: null,
+    destination: null,
+    isFavorite: false,
+    offers: [],
+    type: DEFAULT_TYPE
 };
 
 export {
-  OFFER_COUNT,
-  DESTINATION_COUNT,
-  POINT_COUNT,
-  CITIES,
-  OFFERS,
-  DESCRIPTION,
-  Price,
-  TYPES,
-  DEFAULT_TYPE,
-  POINT_EMPTY
-};
+    OFFER_COUNT,
+    DESTINATION_COUNT,
+    POINT_COUNT,
+    CITIES,
+    OFFERS,
+    DESCRIPTION,
+    Price,
+    TYPES,
+    DEFAULT_TYPE,
+    POINT_EMPTY
+}
diff --git a/src/main.js b/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');

diff --git a/src/model/offers-model.js b/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;
   }
 }
diff --git a/src/presenter/trip-presenter.js b/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()];
-  }
-
-  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()
-      );
+    #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(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);
     }
-  }
 }
diff --git a/src/utils.js b/src/utils.js
@@ -5,87 +5,89 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 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,
-  DAY: 5,
-  MIN: 59
+    HOUR: 5,
+    DAY: 5,
+    MIN: 59
 };
 
 let date = dayjs().subtract(getRandomInteger(0, Duration.DAY), 'day').toDate();
 
-function getDate({ next }) {
-  const minsGap = getRandomInteger(0, Duration.MIN);
-  const hoursGap = getRandomInteger(1, Duration.HOUR);
-  const daysGap = getRandomInteger(0, Duration.DAY);
+function getDate({next}) {
+    const minsGap = getRandomInteger(0, Duration.MIN);
+    const hoursGap = getRandomInteger(1, Duration.HOUR);
+    const daysGap = getRandomInteger(0, Duration.DAY);
 
-  if (next) {
-    date = dayjs(date)
-      .add(minsGap, 'minute')
-      .add(hoursGap, 'hour')
-      .add(daysGap, 'day')
-      .toDate();
-  }
+    if (next) {
+        date = dayjs(date)
+            .add(minsGap, 'minute')
+            .add(hoursGap, 'hour')
+            .add(daysGap, 'day')
+            .toDate();
+    }
 
-  return date;
+    return date;
 }
 
 function getRandomInteger(a = 0, b = 1) {
-  const lower = Math.ceil(Math.min(a, b));
-  const upper = Math.floor(Math.max(a, b));
+    const lower = Math.ceil(Math.min(a,b));
+    const upper = Math.floor(Math.max(a,b));
 
-  return Math.floor(lower + Math.random() * (upper - lower + 1));
+    return Math.floor(lower + Math.random() * (upper - lower + 1));
 }
 
 function getRandomValue(items) {
-  return items[getRandomInteger(0, items.length - 1)];
+    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) {
-  const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom));
-
-  let pointDuration = 0;
-
-  switch (true) {
-    case (timeDiff >= MSEC_IN_DAY):
-      pointDuration = dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]');
-      break;
-    case (timeDiff >= MSEC_IN_HOUR):
-      pointDuration = dayjs.duration(timeDiff).format('HH[H] mm[M]');
-      break;
-    case (timeDiff < MSEC_IN_HOUR):
-      pointDuration = dayjs.duration(timeDiff).format('mm[M]');
-      break;
-  }
-
-  return pointDuration;
+    const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom));
+
+    let pointDuration = 0;
+
+    switch (true) {
+        case (timeDiff >= MSEC_IN_DAY):
+            pointDuration = dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]');
+            break;
+        case (timeDiff >= MSEC_IN_HOUR):
+            pointDuration = dayjs.duration(timeDiff).format('HH[H] mm[M]');
+            break;
+        case (timeDiff < MSEC_IN_HOUR):
+            pointDuration = dayjs.duration(timeDiff).format('mm[M]');
+            break;
+    }
+
+    return pointDuration;
 }
 
 export {
-  getDate,
-  getRandomInteger,
-  getRandomValue,
-  formatStringToDateTime,
-  formatStringToShortDate,
-  formatStringToTime,
-  getPointDuration
-};
+    getDate,
+    getRandomInteger,
+    getRandomValue,
+    formatStringToDateTime,
+    formatStringToShortDate,
+    formatStringToTime,
+    getPointDuration
+}