Меняй-удаляй

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "dayjs": "1.11.7",
-    "flatpickr": "4.6.13"
+    "flatpickr": "4.6.13",
+    "he": "1.2.0"
   }
 }

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/const.js

@@ -2,6 +2,17 @@ const POINT_COUNT = 5;
 
 const POINT_TYPES = ['taxi','bus','train','ship','drive','flight','check-in','sightseeing','restaurant'];
 
+const NEW_EVENT = {
+  'id': '01',
+  'basePrice': 0,
+  'dateFrom': null,
+  'dateTo': null,
+  'destination': null,
+  'isFavorite': false,
+  'offers': [],
+  'type': 'flight'
+};
+
 const FilterType = {
   EVERYTHING: 'everything',
   FUTURE: 'future',
@@ -15,4 +26,16 @@ const SortType = {
   PRICE: 'price',
 };
 
-export {POINT_COUNT, POINT_TYPES, FilterType, SortType};
+const UserAction = {
+  UPDATE_POINT: 'UPDATE_POINT',
+  ADD_POINT: 'ADD_POINT',
+  DELETE_POINT: 'DELETE_POINT',
+};
+
+const UpdateType = {
+  PATCH: 'PATCH',
+  MINOR: 'MINOR',
+  MAJOR: 'MAJOR',
+};
+
+export {POINT_COUNT, POINT_TYPES, FilterType, SortType, UserAction, UpdateType, NEW_EVENT};

src/main.js

@@ -1,23 +1,46 @@
-import FilterView from './view/filter-view.js';
 import HeaderInfoView from './view/header-info-view.js';
-import {render} from './framework/render.js';
+import NewEventButtonView from './view/new-event-button-view.js';
+import {render, RenderPosition} from './framework/render.js';
 import TripPresenter from './presenter/trip-presenter.js';
+import FilterPresenter from './presenter/filter-presenter.js';
 import PointsModel from './model/points-model.js';
-import {generateFilter} from './mock/filter.js';
+import FilterModel from './model/filter-model.js';
 
 const headerContainer = document.querySelector('.trip-main');
-const filterContainer = headerContainer.querySelector('.trip-controls__filters');
+const filtersContainer = headerContainer.querySelector('.trip-controls__filters');
 const tripEventsContainer = document.querySelector('.trip-events');
 
 const pointsModel = new PointsModel();
+const filterModel = new FilterModel();
+
 const tripPresenter = new TripPresenter({
   container: tripEventsContainer,
   pointsModel,
+  filterModel,
+  onNewEventDestroy: handleNewEventFormClose
+});
+
+const filterPresenter = new FilterPresenter({
+  filterContainer: filtersContainer,
+  filterModel,
+  pointsModel
 });
 
-const filters = generateFilter(pointsModel.points);
+const newEventButtonElement = new NewEventButtonView({
+  onClick: handleNewEventButtonClick
+});
+
+function handleNewEventFormClose() {
+  newEventButtonElement.element.disabled = false;
+}
+
+function handleNewEventButtonClick() {
+  tripPresenter.createEvent();
+  newEventButtonElement.element.disabled = true;
+}
 
-render (new FilterView({filters}), filterContainer);
-render (new HeaderInfoView(), headerContainer, 'afterbegin');
+render(newEventButtonElement, headerContainer);
+render (new HeaderInfoView(), headerContainer, RenderPosition.AFTERBEGIN);
 
 tripPresenter.init();
+filterPresenter.init();

src/model/filter-model.js

@@ -0,0 +1,15 @@
+import Observable from '../framework/observable.js';
+import {FilterType} from '../const.js';
+
+export default class FilterModel extends Observable {
+  #filter = FilterType.EVERYTHING;
+
+  get filter() {
+    return this.#filter;
+  }
+
+  setFilter(updateType, filter) {
+    this.#filter = filter;
+    this._notify(updateType, filter);
+  }
+}

src/model/points-model.js

@@ -1,9 +1,10 @@
+import Observable from '../framework/observable.js';
 import {mockDestinations} from '../mock/destinations.js';
 import {mockOffers} from '../mock/offers.js';
 import {getRandomPoints} from '../mock/points.js';
 import {POINT_COUNT} from '../const.js';
 
-export default class PointsModel {
+export default class PointsModel extends Observable {
   #points = Array.from({length: POINT_COUNT}, getRandomPoints);
   #offers = mockOffers;
   #destinations = mockDestinations;
@@ -19,4 +20,44 @@ export default class PointsModel {
   get destinations() {
     return this.#destinations;
   }
+
+  updatePoint(updateType, update) {
+    const index = this.#points.findIndex((point) => point.id === update.id);
+
+    if (index === -1) {
+      throw new Error('Can\'t update unexisting point');
+    }
+
+    this.#points = [
+      ...this.#points.slice(0, index),
+      update,
+      ...this.#points.slice(index + 1),
+    ];
+
+    this._notify(updateType, update);
+  }
+
+  addPoint(updateType, update) {
+    this.#points = [
+      update,
+      ...this.#points,
+    ];
+
+    this._notify(updateType, update);
+  }
+
+  deletePoint(updateType, update) {
+    const index = this.#points.findIndex((point) => point.id === update.id);
+
+    if (index === -1) {
+      throw new Error('Can\'t update unexisting point');
+    }
+
+    this.#points = [
+      ...this.#points.slice(0, index),
+      ...this.#points.slice(index + 1),
+    ];
+
+    this._notify(updateType);
+  }
 }

src/presenter/filter-presenter.js

@@ -0,0 +1,60 @@
+import {render, replace, remove} from '../framework/render.js';
+import FilterView from '../view/filter-view.js';
+import {filter} from '../utils/filter.js';
+import {FilterType, UpdateType} from '../const.js';
+
+export default class FilterPresenter {
+  #filterContainer = null;
+  #filterModel = null;
+  #pointsModel = null;
+  #filterElement = null;
+
+  constructor({filterContainer, filterModel, pointsModel}) {
+    this.#filterContainer = filterContainer;
+    this.#filterModel = filterModel;
+    this.#pointsModel = pointsModel;
+
+    this.#pointsModel.addObserver(this.#handleModelEvent);
+    this.#filterModel.addObserver(this.#handleModelEvent);
+  }
+
+  get filters() {
+    const points = this.#pointsModel.points;
+
+    return Object.values(FilterType).map((type) => ({
+      type,
+      count: filter[type](points).length
+    }));
+  }
+
+  init() {
+    const filters = this.filters;
+    const prevFilterElement = this.#filterElement;
+
+    this.#filterElement = new FilterView({
+      filters,
+      currentFilterType: this.#filterModel.filter,
+      onFilterTypeChange: this.#handleFilterTypeChange
+    });
+
+    if (prevFilterElement === null) {
+      render(this.#filterElement, this.#filterContainer);
+      return;
+    }
+
+    replace(this.#filterElement, prevFilterElement);
+    remove(prevFilterElement);
+  }
+
+  #handleModelEvent = () => {
+    this.init();
+  };
+
+  #handleFilterTypeChange = (filterType) => {
+    if (this.#filterModel.filter === filterType) {
+      return;
+    }
+
+    this.#filterModel.setFilter(UpdateType.MAJOR, filterType);
+  };
+}

src/presenter/new-event-presenter.js

@@ -0,0 +1,68 @@
+import {render, remove, RenderPosition} from '../framework/render.js';
+import {UserAction, UpdateType} from '../const.js';
+import EditFormView from '../view/edit-form-view.js';
+
+export default class NewEventPresenter {
+  #pointListContainer = null;
+  #handleDataChange = null;
+  #handleDestroy = null;
+  #editFormElement = null;
+
+  constructor({pointListContainer, onDataChange, onDestroy}) {
+    this.#pointListContainer = pointListContainer;
+    this.#handleDataChange = onDataChange;
+    this.#handleDestroy = onDestroy;
+  }
+
+  init(pointsModel) {
+    if (this.#editFormElement !== null) {
+      return;
+    }
+
+    this.#editFormElement = new EditFormView({
+      newEvent: true,
+      offers: pointsModel.offers,
+      destinations: pointsModel.destinations,
+      onFormSubmit: this.#handleFormSubmit,
+      onDeleteClick: this.#handleDeleteClick
+    });
+
+    render(this.#editFormElement, this.#pointListContainer, RenderPosition.AFTERBEGIN);
+
+    document.addEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  destroy() {
+    if (this.#editFormElement === null) {
+      return;
+    }
+
+    this.#handleDestroy();
+
+    remove(this.#editFormElement);
+    this.#editFormElement = null;
+
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  #handleFormSubmit = (point) => {
+    this.#handleDataChange(
+      UserAction.ADD_POINT,
+      UpdateType.MINOR,
+      point
+    );
+
+    this.destroy();
+  };
+
+  #handleDeleteClick = () => {
+    this.destroy();
+  };
+
+  #escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape' || evt.key === 'Esc') {
+      evt.preventDefault();
+      this.destroy();
+    }
+  };
+}

src/presenter/route-point-presenter.js

@@ -1,6 +1,7 @@
 import EditFormView from '../view/edit-form-view.js';
 import RoutePointView from '../view/route-point-view.js';
 import {render, replace, remove} from '../framework/render.js';
+import {UserAction, UpdateType} from '../const.js';
 
 const Mode = {
   DEFAULT: 'DEFAULT',
@@ -41,11 +42,13 @@ export default class RoutePointPresenter {
     });
 
     this.#editFormElement = new EditFormView({
+      newEvent: false,
       point: this.#point,
       offers: this.#offers,
       destinations: this.#destinations,
       onRollupBtnClick: this.#rollupBtnClick,
       onFormSubmit: this.#handleFormSubmit,
+      onDeleteClick: this.#handleDeleteClick
     });
 
     if (prevRoutePointElement === null || prevEditFormElement === null) {
@@ -108,11 +111,27 @@ export default class RoutePointPresenter {
   };
 
   #handleFavoriteClick = () => {
-    this.#handleDataChange({...this.#point, isFavorite: !this.#point.isFavorite});
+    this.#handleDataChange(
+      UserAction.UPDATE_POINT,
+      UpdateType.MINOR,
+      {...this.#point, isFavorite: !this.#point.isFavorite},
+    );
   };
 
   #handleFormSubmit = (point) => {
-    this.#handleDataChange(point);
+    this.#handleDataChange(
+      UserAction.UPDATE_POINT,
+      UpdateType.MINOR,
+      point,
+    );
     this.#replaceEditFormToRoutePoint();
   };
+
+  #handleDeleteClick = (point) => {
+    this.#handleDataChange(
+      UserAction.DELETE_POINT,
+      UpdateType.MINOR,
+      point,
+    );
+  };
 }