нажимаю звездочку - рисует новую кнопку в хэдере

public/index.html

@@ -22,7 +22,6 @@ <h2 class="visually-hidden">Filter events</h2>
             </div>
           </div>
 
-          <button class="trip-main__event-add-btn  btn  btn--big  btn--yellow" type="button">New event</button>
         </div>
       </div>
     </header>

src/main.js

@@ -1,6 +1,7 @@
 import TripEventsPresenter from './presenter/trip-events-presenter.js';
 import PointsModel from './model/points-model.js';
 import FilterModel from './model/filters-model.js';
+import ClickModel from './model/click-mode-model.js';
 import HeaderMainPresenter from './presenter/header-main-presenter.js';
 
 const siteHeaderContainer = document.querySelector('.page-header');
@@ -10,11 +11,12 @@ const siteBodyContainer = document.querySelector('.page-main');
 const siteEventsElement = siteBodyContainer.querySelector('.trip-events');
 const pointsModel = new PointsModel;
 const filterModel = new FilterModel;
-const tripEventsPresenter = new TripEventsPresenter({tripEventsContainer: siteEventsElement, pointsModel, filterModel});
+const clickModel = new ClickModel;
+const tripEventsPresenter = new TripEventsPresenter({tripEventsContainer: siteEventsElement, pointsModel, filterModel, clickModel});
 
 
 const headerMainPresenter = new HeaderMainPresenter({tripInfoContainer: siteTripInfo,
-  tripFilterContainer: siteFilterControls, filterModel, pointsModel});
+  tripFilterContainer: siteFilterControls, filterModel, pointsModel, clickModel});
 
 headerMainPresenter.init();
 

src/model/click-mode-model.js

@@ -1,15 +1,18 @@
 import Observable from '../framework/observable.js';
-
 export default class ClickModel extends Observable {
-  #currentState = null;
+  #currentState = {
+    isCreating: false
+  };
 
   get clickState() {
     return this.#currentState;
   }
 
-  setclickState(updateType, state) {
-    this.#currentState = state;
-    this._notify('clickStateChanged', updateType, state);
+  setClickState(updateType, state) {
+    this.#currentState = {
+      ...this.#currentState,
+      isCreating: state === 'creating'
+    };
+    this._notify('clickStateChanged', updateType, this.#currentState);
   }
-
 }

src/presenter/header-main-presenter.js

@@ -47,15 +47,15 @@ export default class HeaderMainPresenter {
 
   #renderNewButton() {
     this.#newPointButtonComponent = new NewPointButtonView({
-      onClick: this.#handleNewPointButtonClick()
+      onClick: this.#handleNewPointButtonClick
     });
-    render(this.#newPointButtonComponent, this.#tripInfoContainer, RenderPosition.AFTERBEGIN);
+    render(this.#newPointButtonComponent, this.#tripInfoContainer, RenderPosition.BEFOREEND);
 
   }
 
-  #handleNewPointButtonClick () {
+  #handleNewPointButtonClick = () => {
     this.#clickModel.setClickState (UpdateType.MINOR, 'creating');
-  }
+  };
 
 
   #renderTripInfo () {

src/presenter/new-point-presenter.js

@@ -0,0 +1,75 @@
+import EditPointView from '../view/edit-point-view.js';
+import { render,remove, RenderPosition } from '../framework/render.js';
+import { UpdateType, UserAction, Mode, generateID } from '../utils/utiles.js';
+
+export default class NewPointPresenter {
+  #pointListContainer = null;
+  #allOffers = null;
+  #allDestinations = null;
+
+  #handleDataChange = null;
+  #handleDestroy = null;
+
+  #pointEditComponent = null;
+
+  constructor({pointListContainer, allOffers, allDestinations, onDataChange, onDestroy}) {
+    this.#pointListContainer = pointListContainer;
+    this.#allOffers = allOffers;
+    this.#allDestinations = allDestinations;
+    this.#handleDataChange = onDataChange;
+    this.#handleDestroy = onDestroy;
+  }
+
+  init() {
+
+    if (this.#pointEditComponent !== null) {
+      return;
+    }
+
+    this.#pointEditComponent = new EditPointView({
+      allOffers: this.#allOffers,
+      allDestinations: this.#allDestinations,
+      onFormSubmit: this.#handleFormSubmit,
+      onDeleteEditFormButton: this.#handleDeleteEditFormButton,
+      type: Mode.CREATING
+    });
+
+    render(this.#pointEditComponent, this.#pointListContainer, RenderPosition.AFTERBEGIN);
+
+    document.addEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  destroy(){
+    if(this.#pointEditComponent === null){
+      return;
+    }
+
+    this.#handleDestroy();
+
+    remove(this.#pointEditComponent);
+    this.#pointEditComponent = null;
+
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  #handleFormSubmit = (event) => {
+    this.#handleDataChange(
+      UserAction.ADD_EVENT,
+      UpdateType.MINOR,
+      {id: generateID(), ...event}
+    );
+
+    this.destroy();
+  };
+
+  #handleDeleteEditFormButton = () => {
+    this.destroy();
+  };
+
+  #escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape' || evt.key === 'Esc') {
+      evt.preventDefault();
+      this.destroy();
+    }
+  };
+}

src/presenter/point-presenter.js

@@ -1,12 +1,7 @@
 import PointView from '../view/point-view.js';
 import EditPointView from '../view/edit-point-view.js';
 import { replace, render,remove } from '../framework/render.js';
-import { UpdateType, UserAction, isSameDates, isSamePrices } from '../utils/utiles.js';
-
-const Mode = {
-  DEFAULT: 'DEFAULT',
-  EDITING: 'EDITING',
-};
+import { UpdateType, UserAction, Mode, isSameDates, isSamePrices } from '../utils/utiles.js';
 export default class PointPresenter {
   #pointListContainer = null;
   #point = null;

src/presenter/trip-events-presenter.js

@@ -3,27 +3,40 @@ import ListView from '../view/list-view.js';
 import NoPointView from '../view/no-point-view.js';
 import { render, remove, replace, RenderPosition } from '../framework/render.js';
 import PointPresenter from './point-presenter.js';
+import NewPointPresenter from './new-point-presenter.js';
 import { sort } from '../utils/sort.js';
 import { SortType, UpdateType, UserAction, filter, FilterType } from '../utils/utiles.js';
 
 export default class TripEventsPresenter {
   #tripEventsContainer = null;
   #pointsModel = null;
   #filterModel = null;
+  #clickModel = null;
 
   #tripSortComponent = null;
   #tripListComponent = new ListView();
   #noPointComponent = null;
 
+  #newPointPresenter = null;
   #pointPresenters = new Map();
   #currentSortType = SortType.DAY;
   #filterType = FilterType.EVERYTHING;
 
-  constructor ({tripEventsContainer, pointsModel, filterModel}) {
+  constructor ({tripEventsContainer, pointsModel, filterModel, clickModel}) {
     this.#tripEventsContainer = tripEventsContainer;
     this.#pointsModel = pointsModel;
     this.#filterModel = filterModel;
+    this.#clickModel = clickModel;
+
+    this.#newPointPresenter = new NewPointPresenter({
+      pointListContainer: this.#tripEventsContainer,
+      allOffers: this.#pointsModel.offers,
+      allDestinations: this.#pointsModel.destinations,
+      onDataChange: this.#handleViewAction,
+      onDestroy: this.#handleNewPointDestroy,
+    });
 
+    this.#clickModel.addObserver(this.#handleClickStateChanged);
     this.#pointsModel.addObserver(this.#handleModelEvent);
     this.#filterModel.addObserver(this.#handleModelEvent);
   }
@@ -73,9 +86,23 @@ export default class TripEventsPresenter {
   };
 
   #handleModeChange = () => {
+    this.#newPointPresenter.destroy();
     this.#pointPresenters.forEach((presenter) => presenter.resetView());
   };
 
+  #handleClickStateChanged = (updateType, state) => {
+    if (state === 'creating') {
+      this.#handleNewPointFormOpen();
+    }
+  };
+
+  #handleNewPointFormOpen() {
+    this.#currentSortType = SortType.DAY;
+    this.#filterModel.setFilter(UpdateType.MAJOR, FilterType.EVERYTHING);
+
+    this.#newPointPresenter.init();
+  }
+
 
   #handleSortTypeChange = (sortType) => {
     if (this.#currentSortType === sortType) {
@@ -88,8 +115,18 @@ export default class TripEventsPresenter {
     this.#renderTripEvents();
   };
 
+  #handleNewPointDestroy = () => {
+
+    if(!this.points.length){
+      remove(this.#tripSortComponent);
+      this.#tripSortComponent = null;
+      this.#renderNoPoints();
+    }
+  };
+
 
   #clearPointList() {
+    this.#newPointPresenter.destroy();
     this.#pointPresenters.forEach((presenter) => presenter.destroy());
     this.#pointPresenters.clear();
   }

src/utils/utiles.js

@@ -9,6 +9,12 @@ dayjs.extend(isSameOrAfter);
 dayjs.extend(duration);
 dayjs.extend(utc);
 
+const Mode = {
+  DEFAULT: 'DEFAULT',
+  EDITING: 'EDITING',
+  CREATING: 'CREATING',
+};
+
 const UserAction = {
   UPDATE_EVENT: 'UPDATE_EVENT',
   ADD_EVENT: 'ADD_EVENT',
@@ -102,5 +108,5 @@ function isSamePrices(priceA, priceB) {
 }
 
 export {getRandomInteger, getRandomArrayElement, generateID, formatDate, isSameDates, isSamePrices,
-  formatDuration, getPointsByDate, getPointsByDuration, getEPointsByPrice,
+  formatDuration, getPointsByDate, getPointsByDuration, getEPointsByPrice, Mode,
   SortType, FormatsDate, filter, UserAction, EditType, UpdateType, FilterType};