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

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "dayjs": "1.11.10",
     "flatpickr": "^4.6.13",
+    "he": "^1.2.0",
     "nanoid": "^5.0.7"
   }
 }

src/const.js

@@ -57,12 +57,12 @@ const OFFERS = [
   'Travel by train',
 ];
 
-const FilterType = [{
+const FilterType = {
   EVERYTHING: 'everything',
   FUTURE: 'future',
   PRESENT: 'present',
   PAST: 'past'
-}];
+};
 
 const Mode = {
   DEFAULT: 'DEFAULT',
@@ -75,6 +75,18 @@ const SortType = [{
   PRICE: 'price'
 }];
 
+const UserAction = {
+  UPDATE_POINT: 'UPDATE_POINT',
+  ADD_POINT: 'ADD_POINT',
+  DELETE_POINT: 'DELETE_POINT',
+};
+
+const UpdateType = {
+  PATCH: 'PATCH',
+  MINOR: 'MINOR',
+  MAJOR: 'MAJOR',
+};
+
 export {POINT_EMPTY,
   POINT_TYPE,
   DESTINATION,
@@ -85,4 +97,6 @@ export {POINT_EMPTY,
   POINTS_COUNT,
   FilterType,
   Mode,
-  SortType};
+  SortType,
+  UserAction,
+  UpdateType};

src/main.js

@@ -1,34 +1,67 @@
-import FilterPointsView from './view/filter-points-view.js';
+//import FilterPointsView from './view/filter-points-view.js';
 import TripInfoView from './view/trip-info-view.js';
 import TripPresenter from './presenter/trip-presenter.js';
+import FilterPresenter from './presenter/filter-presenter.js';
+import NewPointButtonView from './view/new-point-button-view.js';
 
 import { render, RenderPosition } from './framework/render.js';
 
 import PointsModel from './model/point-model.js';
 import DestinationModel from './model/destination-model.js';
 import OffersModel from './model/offer-model.js';
+import FilterModel from './model/filter-model.js';
 
-import { generateFilters } from './mock/filter.js';
+//import { generateFilters } from './mock/filter.js';
 
-const filterHeaderElement = document.querySelector('.trip-controls');
-const siteFilterElement = filterHeaderElement.querySelector('.trip-controls__filters');
+/* const filters = [
+  {
+    type: 'everything',
+    name: 'EVERYTHING',
+    count: 0,
+  }
+] */
+
+//const filterHeaderElement = document.querySelector('.trip-controls');
+//const siteFilterElement = filterHeaderElement.querySelector('.trip-controls__filters');
 const siteMainElement = document.querySelector('.page-main');
 const tripInfoElement = document.querySelector('.trip-main');
 
 const pointsModel = new PointsModel();
 const destinationModel = new DestinationModel();
 const offersModel = new OffersModel();
+const filterModel = new FilterModel();
 
 const tripPresenter = new TripPresenter({
   listContainer: siteMainElement,
   pointsModel,
   destinationsModel: destinationModel,
-  offersModel
+  offersModel,
+  filterModel,
+  onNewPointDestroy: handleNewPointFormClose
+});
+
+//const filters = generateFilters(pointsModel.points);
+const filterPresenter = new FilterPresenter({
+  filterContainer: siteMainElement,
+  filterModel,
+  pointsModel
 });
 
-const filters = generateFilters(pointsModel.points);
+const newPointButtonComponent = new NewPointButtonView({
+  onClick: handleNewPointButtonClick
+});
+
+function handleNewPointFormClose() {
+  newPointButtonComponent.element.disabled = false;
+}
+
+function handleNewPointButtonClick() {
+  tripPresenter.createPoint();
+  newPointButtonComponent.element.disabled = true;
+}
 
-render(new FilterPointsView({ filters }), siteFilterElement);
 render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
+render(newPointButtonComponent, tripInfoElement);
 
+filterPresenter.init();
 tripPresenter.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/point-model.js

@@ -1,10 +1,51 @@
+import Observable from '../framework/observable';
 import { getRandomPoint } from '../mock/point';
 import { POINTS_COUNT } from '../const';
 
-export default class PointsModel {
+export default class PointsModel extends Observable {
   #points = Array.from({length: POINTS_COUNT }, () => getRandomPoint());
 
   get points() {
     return this.#points;
   }
+
+  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 delete 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,58 @@
+import {render, replace, remove} from '../framework/render.js';
+import FilterPointsView from '../view/filter-points-view.js';
+//import {filter} from '../utils/filter.js';
+import {FilterType, UpdateType} from '../const.js';
+
+export default class FilterPresenter {
+  #filterContainer = null;
+  #filterModel = null;
+  #pointsModel = null;
+
+  #filterComponent = 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() {
+    return Object.values(FilterType).map((type) => ({
+      type
+    }));
+  }
+
+  init() {
+    const filters = this.filters;
+    const prevFilterComponent = this.#filterComponent;
+
+    this.#filterComponent = new FilterPointsView({
+      filters,
+      currentFilterType: this.#filterModel.filter,
+      onFilterTypeChange: this.#handleFilterTypeChange
+    });
+
+    if (prevFilterComponent === null) {
+      render(this.#filterComponent, this.#filterContainer);
+      return;
+    }
+
+    replace(this.#filterComponent, prevFilterComponent);
+    remove(prevFilterComponent);
+  }
+
+  #handleModelEvent = () => {
+    this.init();
+  };
+
+  #handleFilterTypeChange = (filterType) => {
+    if (this.#filterModel.filter === filterType) {
+      return;
+    }
+
+    this.#filterModel.setFilter(UpdateType.MAJOR, filterType);
+  };
+}

src/presenter/new-point-presenter.js

@@ -0,0 +1,66 @@
+import {remove, render, RenderPosition} from '../framework/render.js';
+import EditPointView from '../view/editing-form-view.js';
+import {nanoid} from 'nanoid';
+import {UserAction, UpdateType} from '../const.js';
+
+export default class NewPointPresenter {
+  #pointListContainer = null;
+  #handleDataChange = null;
+  #handleDestroy = null;
+
+  #pointEditComponent = null;
+
+  constructor({pointListContainer, onDataChange, onDestroy}) {
+    this.#pointListContainer = pointListContainer;
+    this.#handleDataChange = onDataChange;
+    this.#handleDestroy = onDestroy;
+  }
+
+  init() {
+    if (this.#pointEditComponent !== null) {
+      return;
+    }
+
+    this.#pointEditComponent = new EditPointView({
+      onFormSubmit: this.#handleFormSubmit,
+      onDeleteClick: this.#handleDeleteClick
+    });
+
+    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 = (point) => {
+    this.#handleDataChange(
+      UserAction.ADD_POINT,
+      UpdateType.MINOR,
+      {id: nanoid(), ...point},
+    );
+    this.destroy();
+  };
+
+  #handleDeleteClick = () => {
+    this.destroy();
+  };
+
+  #escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape' || evt.key === 'Esc') {
+      evt.preventDefault();
+      this.destroy();
+    }
+  };
+}