Дополнительная функциональность

src/const.js

@@ -1,54 +1,3 @@
-const OFFER_COUNT = 5;
-
-const POINT_COUNT = 5;
-
-const CITIES = [
-  'Chamonix',
-  'Geneva',
-  'Amsterdam',
-  'Helsinki',
-  'Oslo',
-  'Kopenhagen',
-  'Den Haag',
-  'Rotterdam',
-  'Saint Petersburg',
-  'Moscow',
-  'Sochi',
-  'Tokyo',
-];
-
-const DESTINATION_COUNT = CITIES.length;
-
-const OFFERS = [
-  '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
-};
-
-const TYPES = [
-  'taxi',
-  'bus',
-  'train',
-  'ship',
-  'drive',
-  'flight',
-  'check-in',
-  'sightseeing',
-  'restaurant'
-];
-
 const DEFAULT_TYPE = 'flight';
 
 const POINT_EMPTY = {
@@ -66,7 +15,7 @@ const FilterType = {
   FUTURE: 'future',
   PRESENT: 'present',
   PAST: 'past'
-}
+};
 
 const Mode = {
   DEFAULT: 'default',
@@ -119,15 +68,9 @@ const TimeLimit = {
   UPPER_LIMIT: 1000,
 };
 
+const DESTINATION_ITEMS_LENGTH = 3;
+
 export {
-  OFFER_COUNT,
-  DESTINATION_COUNT,
-  POINT_COUNT,
-  CITIES,
-  OFFERS,
-  DESCRIPTION,
-  Price,
-  TYPES,
   DEFAULT_TYPE,
   POINT_EMPTY,
   FilterType,
@@ -138,5 +81,6 @@ export {
   UpdateType,
   EditType,
   Method,
-  TimeLimit
-}
+  TimeLimit,
+  DESTINATION_ITEMS_LENGTH
+};

src/main.js

@@ -1,4 +1,4 @@
-import TripInfoView from './view/trip-info-view.js';
+import TripInfoPresenter from './presenter/trip-info-presenter.js';
 import TripPresenter from './presenter/trip-presenter.js';
 import FilterPresenter from './presenter/filter-presenter.js';
 import NewPointButtonPresenter from './presenter/new-point-button-presenter.js';
@@ -7,7 +7,6 @@ import DestinationsModel from './model/destinations-model.js';
 import OffersModel from './model/offers-model.js';
 import PointsModel from './model/points-model.js';
 import FilterModel from './model/filter-model.js';
-import { render, RenderPosition } from './framework/render.js';
 
 const AUTHORIZATION = 'Basic YWxpbmE6b3N0aW4xNzg=';
 const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip';
@@ -29,6 +28,13 @@ const pointsModel = new PointsModel({
 });
 const filterModel = new FilterModel();
 
+const tripInfoPresenter = new TripInfoPresenter({
+  container: tripInfoElement,
+  pointsModel,
+  destinationsModel,
+  offersModel
+});
+
 const newPointButtonPresenter = new NewPointButtonPresenter({
   container: tripInfoElement
 });
@@ -48,12 +54,13 @@ const tripPresenter = new TripPresenter({
   newPointButtonPresenter: newPointButtonPresenter
 });
 
-render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
+tripInfoPresenter.init();
 
 newPointButtonPresenter.init({
   onButtonClick: tripPresenter.newPointButtonClickHandler
 });
 
 filterPresenter.init();
 tripPresenter.init();
+
 pointsModel.init();

src/model/destinations-model.js

@@ -11,7 +11,7 @@ export default class DestinationsModel extends Observable {
 
   async init() {
     this.#destinations = await this.#service.getDestinations();
-    return this.#destinations
+    return this.#destinations;
   }
 
   get() {

src/model/filter-model.js

@@ -10,6 +10,6 @@ export default class FilterModel extends Observable {
 
   set(updateType, update) {
     this.#filter = update;
-    this._notify(updateType, update)
+    this._notify(updateType, update);
   }
 }

src/model/points-model.js

@@ -1,6 +1,6 @@
 import Observable from '../framework/observable.js';
 
-import { updateItem } from '../utils.js';
+import { updateItem } from '../utils/common.js';
 import { UpdateType } from '../const.js';
 import { adaptToClient, adaptToServer } from '../utils/point.js';
 

src/presenter/filter-presenter.js

@@ -1,7 +1,7 @@
-import FilterView from "../view/filter-view.js";
-import { render, replace, remove } from "../framework/render.js";
-import { UpdateType } from "../const.js";
-import { filter } from "../utils/filter.js";
+import FilterView from '../view/filter-view.js';
+import { render, replace, remove } from '../framework/render.js';
+import { UpdateType } from '../const.js';
+import { filter } from '../utils/filter.js';
 
 export default class FilterPresenter {
   #container = null;
@@ -44,7 +44,7 @@ export default class FilterPresenter {
       onItemChange: this.#filterTypeChangeHandler
     });
 
-    if (prevFilterComponent === null) {
+    if (!prevFilterComponent) {
       render(this.#filterComponent, this.#container);
       return;
     }

src/presenter/new-point-button-presenter.js

@@ -26,6 +26,10 @@ export default class NewPointButtonPresenter {
   }
 
   #buttonClickHandler = () => {
-    this.#handleButtonClick();
+    const disabledResetButton = document.querySelector('.event__reset-btn[disabled]');
+
+    if (!disabledResetButton) {
+      this.#handleButtonClick();
+    }
   };
 }

src/presenter/new-point-presenter.js

@@ -1,7 +1,7 @@
-import EditPointView from "../view/edit-point-view.js";
+import EditPointView from '../view/edit-point-view.js';
 
 import { remove, render, RenderPosition } from '../framework/render.js';
-import { UserAction, UpdateType, EditType } from "../const.js";
+import { UserAction, UpdateType, EditType } from '../const.js';
 
 export default class NewPointPresenter {
   #container = null;
@@ -20,10 +20,10 @@ export default class NewPointPresenter {
     this.#offersModel = offersModel;
     this.#handleDataChange = onDataChange;
     this.#handleDestroy = onDestroy;
-  };
+  }
 
   init() {
-    if (this.#pointNewComponent !== null) {
+    if (this.#pointNewComponent) {
       return;
     }
 
@@ -40,7 +40,7 @@ export default class NewPointPresenter {
   }
 
   destroy = ({ isCanceled = true } = {}) => {
-    if (this.#pointNewComponent === null) {
+    if (!this.#pointNewComponent) {
       return;
     }
 
@@ -56,7 +56,7 @@ export default class NewPointPresenter {
       isDisabled: true,
       isSaving: true,
     });
-  }
+  };
 
   setAborting = () => {
     const resetFormState = () => {
@@ -68,7 +68,7 @@ export default class NewPointPresenter {
     };
 
     this.#pointNewComponent.shake(resetFormState);
-  }
+  };
 
   #formSubmitHandler = (point) => {
     this.#handleDataChange(

src/presenter/point-presenter.js

@@ -2,7 +2,7 @@ import PointView from '../view/point-view.js';
 import EditPointView from '../view/edit-point-view.js';
 import { remove, render, replace } from '../framework/render.js';
 import { Mode, UserAction, UpdateType } from '../const.js';
-import { isBigDifference } from '../utils.js';
+import { isBigDifference } from '../utils/point.js';
 
 export default class PointPresenter {
   #container = null;
@@ -47,7 +47,7 @@ export default class PointPresenter {
       onSubmitClick: this.#formSubmitHandler,
       onResetClick: this.#resetButtonClickHandler,
       onDeleteClick: this.#deleteButtonClickHandler
-    })
+    });
 
     if (!prevPointComponent || !prevEditPointComponent) {
       render(this.#pointComponent, this.#container);
@@ -114,10 +114,12 @@ export default class PointPresenter {
   };
 
   #replacePointToForm = () => {
-    replace(this.#editPointComponent, this.#pointComponent);
-    document.addEventListener('keydown', this.#escKeyDownHandler);
-    this.#handleModeChange();
-    this.#mode = Mode.EDITING;
+    if (!this.#editPointComponent._state.isSaving) {
+      replace(this.#editPointComponent, this.#pointComponent);
+      document.addEventListener('keydown', this.#escKeyDownHandler);
+      this.#handleModeChange();
+      this.#mode = Mode.EDITING;
+    }
   };
 
   #replaceFormToPoint = () => {
@@ -135,7 +137,7 @@ export default class PointPresenter {
   };
 
   #escKeyDownHandler = (evt) => {
-    if (evt.key === 'Escape') {
+    if (evt.key === 'Escape' && !this.#editPointComponent._state.isDisabled) {
       evt.preventDefault();
       this.#editPointComponent.reset(this.#point);
       this.#replaceFormToPoint();
@@ -157,20 +159,24 @@ export default class PointPresenter {
     );
   };
 
-  #formSubmitHandler = (updatedPoint) => {
+  #formSubmitHandler = async (updatedPoint) => {
     const isMinor = isBigDifference(updatedPoint, this.#point);
 
-    this.#handleDataChange(
+    await this.#handleDataChange(
       UserAction.UPDATE_POINT,
       isMinor ? UpdateType.MINOR : UpdateType.PATCH,
       updatedPoint
     );
 
-    this.#replaceFormToPoint();
+    if (!this.#editPointComponent._state.isDisabled) {
+      this.#replaceFormToPoint();
+    }
   };
 
   #resetButtonClickHandler = () => {
-    this.#editPointComponent.reset(this.#point);
-    this.#replaceFormToPoint();
-  }
+    if (!this.#editPointComponent._state.isDisabled || this.#editPointComponent._state.isSavingCompleted) {
+      this.#editPointComponent.reset(this.#point);
+      this.#replaceFormToPoint();
+    }
+  };
 }

src/presenter/trip-info-presenter.js

@@ -0,0 +1,59 @@
+import TripInfoView from '../view/trip-info-view.js';
+import { render, replace, remove, RenderPosition } from '../framework/render.js';
+
+export default class TripInfoPresenter {
+  #container = null;
+  #tripInfoComponent = null;
+  #pointsModel = null;
+  #destinationsModel = null;
+  #offersModel = null;
+
+  constructor({ container, pointsModel, destinationsModel, offersModel }) {
+    this.#container = container;
+    this.#pointsModel = pointsModel;
+    this.#destinationsModel = destinationsModel;
+    this.#offersModel = offersModel;
+  }
+
+  get points() {
+    return this.#pointsModel.get();
+  }
+
+  get destinations() {
+    return this.#destinationsModel.get();
+  }
+
+  get offers() {
+    return this.#offersModel.get();
+  }
+
+  init() {
+    this.#renderTripInfo();
+    this.#pointsModel.addObserver(this.#modelEventHandler);
+  }
+
+  #renderTripInfo = () => {
+    const prevTripInfoComponent = this.#tripInfoComponent;
+    const destinations = this.destinations;
+    const offers = this.offers;
+    const points = this.points;
+
+    this.#tripInfoComponent = new TripInfoView({
+      destinations,
+      offers,
+      points
+    });
+
+    if (!prevTripInfoComponent) {
+      render(this.#tripInfoComponent, this.#container, RenderPosition.AFTERBEGIN);
+      return;
+    }
+
+    replace(this.#tripInfoComponent, prevTripInfoComponent);
+    remove(prevTripInfoComponent);
+  };
+
+  #modelEventHandler = () => {
+    this.#renderTripInfo();
+  };
+}