Merge branch 'master' into module8-task1

src/const.js

@@ -1,6 +1,6 @@
 import { isPointFuture, isPointPresent, isPointPast } from './utils.js';
 
-const DEFAULT_TYPE = 'flight';
+const DEFAULT_TYPE = 'Flight';
 
 const EMPTY_POINT = {
   basePrice: 0,

src/main.js

@@ -9,6 +9,7 @@ import FilterPresenter from './presenter/filter-presenter.js';
 import FiltersModel from './model/filter-model.js';
 import PointsApiService from './service/points-api-service.js';
 
+
 const bodyElement = document.querySelector('body');
 const headerElement = bodyElement.querySelector('.page-header');
 const tripInfoElement = headerElement.querySelector('.trip-main');
@@ -36,7 +37,8 @@ const boardPresenter = new BoardPresenter({
   destinationsModel,
   offersModel,
   pointsModel,
-  filtersModel
+  filtersModel,
+  onNewPointDestroy: newPointFormCloseHandler
 });
 
 const filterPresenter = new FilterPresenter({
@@ -45,8 +47,25 @@ const filterPresenter = new FilterPresenter({
   pointModel: pointsModel
 });
 
+const newPointComponent = new NewPointButtonView({
+  onClick: newPointClickHandler
+});
+
+function newPointFormCloseHandler() {
+  newPointComponent.element.disabled = false;
+}
+
+function newPointClickHandler() {
+  boardPresenter.createPoint();
+  newPointComponent.element.disabled = true;
+}
+
+render(newPointComponent, tripInfoElement, RenderPosition.BEFOREEND);
+
+
 render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
 
+
 filterPresenter.init();
 boardPresenter.init();
 pointsModel.init();

src/presenter/board-presenter.js

@@ -10,6 +10,7 @@ import { UpdateType, UserAction } from '../const.js';
 import { FilterOptions } from '../const.js';
 import { RenderPosition } from '../render.js';
 
+
 export default class BoardPresenter{
   #sortComponent = null;
   #eventListComponent = new EventListView();
@@ -19,19 +20,28 @@ export default class BoardPresenter{
   #offersModel = null;
   #pointsModel = null;
   #filtersModel = null;
+  #newPointPresenter = null;
   #pointPresenters = new Map();
   #currentSortType = SortType.DAY;
   #filterType = FilterOptions.EVERYTHING;
 
   #isLoading = true;
   #isLoadingError = false;
 
-  constructor({container, destinationsModel, offersModel, pointsModel, filtersModel}){
+
+  constructor({container, destinationsModel, offersModel, pointsModel, filtersModel, onNewPointDestroy}){
     this.#container = container;
     this.#destinationModel = destinationsModel;
     this.#offersModel = offersModel;
     this.#pointsModel = pointsModel;
     this.#filtersModel = filtersModel;
+    this.#newPointPresenter = new NewPointPresenter({
+      container: this.#eventListComponent,
+      destinationsModel: this.#destinationModel,
+      offersModel: this.#offersModel,
+      onDataChange: this.#userActionHandler,
+      onDestroy: onNewPointDestroy
+    });
 
     this.#pointsModel.addObserver(this.#modelEventHandler);
     this.#filtersModel.addObserver(this.#modelEventHandler);
@@ -56,6 +66,12 @@ export default class BoardPresenter{
     return sortedPoints;
   }
 
+  createPoint() {
+    this.#currentSortType = SortType.DAY;
+    this.#filtersModel.setFilter(UpdateType.MAJOR, FilterTypes.EVERYTHING);
+    this.#newPointPresenter.init();
+  }
+
   init(){
     this.#renderBoard();
   }
@@ -106,6 +122,7 @@ export default class BoardPresenter{
   };
 
   #clearPoints = ({resetSortType = false} = {}) => {
+    this.#newPointPresenter.destroy();
     this.#pointPresenters.forEach((presenter) => presenter.destroy());
     this.#pointPresenters.clear();
 

src/presenter/new-point-presenter.js

@@ -0,0 +1,65 @@
+import {remove, render, RenderPosition } from '../framework/render';
+import { UpdateType, UserAction } from '../const';
+import FormEditView from '../view/form-edit-view';
+export default class NewPointPresenter {
+  #container = null;
+  #destinationsModel = null;
+  #offersModel = null;
+  #editFormComponent = null;
+  #handleDataChange = null;
+  #handleDestroy = null;
+
+  constructor({ container, destinationsModel, offersModel, onDataChange, onDestroy }) {
+    this.#container = container;
+    this.#destinationsModel = destinationsModel;
+    this.#offersModel = offersModel;
+    this.#handleDataChange = onDataChange;
+    this.#handleDestroy = onDestroy;
+  }
+
+  init() {
+    if (this.#editFormComponent !== null) {
+      return;
+    }
+    this.#editFormComponent = new FormEditView({
+      pointDestination: this.#destinationsModel.getDestination(),
+      pointOffers: this.#offersModel.getOffers(),
+      isCreating: true,
+      onRollUpClick: this.#cancelClickHandler,
+      onSubmitClick: this.#formSubmitHandler,
+      onResetClick: this.#cancelClickHandler
+    });
+    render(this.#editFormComponent, this.#container.element, RenderPosition.AFTERBEGIN);
+    document.addEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  destroy() {
+    if (this.#editFormComponent === null) {
+      return;
+    }
+    remove(this.#editFormComponent);
+    this.#editFormComponent = null;
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+    this.#handleDestroy();
+  }
+
+
+  #formSubmitHandler = (point) => {
+    this.#handleDataChange(
+      UserAction.CREATE_POINT,
+      UpdateType.MINOR,
+      point
+    );
+  };
+
+  #cancelClickHandler = () => {
+    this.destroy();
+  };
+
+  #escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape' || evt.key === 'Esc') {
+      evt.preventDefault();
+      this.destroy();
+    }
+  };
+}

src/template/form-edit-markup.js

@@ -1,3 +1,4 @@
+
 import { TYPES } from '../const.js';
 import { formatStringToDateTime } from '../utils.js';
 
@@ -13,11 +14,11 @@ function createPointDestinationListElement(destinations) {
   return ( `${destinations.map((destination) => `<option value="${destination.name}"></option>`).join('')} `);
 }
 
-function createOffersTemplate(offers, selectedOffers) {
+function createOffersTemplate(offers, selectedOffers, isDisabled) {
   const offerItems = offers.offers.map((offer) => {
     const offerName = offer.title.replace(' ', '').toLowerCase();
     return (`<div class="event__offer-selector">
-                <input class="event__offer-checkbox  visually-hidden" id="${offer.id}" type="checkbox" name="event-offer-${offerName}" ${selectedOffers?.offers?.map((of) => of.id).includes(offer.id) ? 'checked' : ''}>
+                <input class="event__offer-checkbox  visually-hidden" id="${offer.id}" type="checkbox" name="event-offer-${offerName}" ${selectedOffers?.offers?.map((of) => of.id).includes(offer.id) ? 'checked' : ''} ${isDisabled ? '' : 'disabled'}>
                 <label class="event__offer-label" for="${offer.id}">
                     <span class="event__offer-title">${offer.title}</span>
                     &plus;&euro;&nbsp;
@@ -107,7 +108,7 @@ function CreateFormEditMarkup({state, pointDestination, pointOffers}){
           <section class="event__section  event__section--offers">
             <h3 class="event__section-title  event__section-title--offers">Offers</h3>
             <div class="event__available-offers">
-              ${createOffersTemplate(currentOffers, offers)}
+              ${createOffersTemplate(currentOffers, offers, isDisabled)}
             </div>
           </section>