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

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

@@ -21,8 +21,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

@@ -43,4 +43,16 @@ const SortType = {
   OFFERS: 'offers'
 };
 
-export { DESCRIPTIONS_DESTINATION, NAME_DESTINATION, MAX_COUNT, EVENT_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 { DESCRIPTIONS_DESTINATION, NAME_DESTINATION, MAX_COUNT, EVENT_TYPES, FilterType, SortType, UserAction, UpdateType };

src/main.js

@@ -1,19 +1,38 @@
-import { render } from './framework/render.js';
-import FiltersView from './view/filters-view.js';
+import FilterPresenter from './presenter/filter-presenter.js';
 import BoardPresenter from './presenter/board-presenter.js';
 import PointsModel from './model/points-model.js';
-import { generateFilter } from './mock/filter.js';
+import FilterModel from './model/filter-model.js';
+import AddNewPointButtonView from './view/add-new-point-button-view.js';
+import { render } from './framework/render.js';
+
+const initApp = () => {
+  const filtersContainer = document.querySelector('.trip-controls__filters');
+  const eventsContainer = document.querySelector('.trip-events');
+  const tripMainContainer = document.querySelector('.trip-main');
+  const pointsModel = new PointsModel();
+  const filterModel = new FilterModel();
+
+  const boardPresenter = new BoardPresenter({
+    boardContainer: eventsContainer,
+    pointsModel,
+    filterModel
+  });
+
+  const filterPresenter = new FilterPresenter({
+    filterContainer: filtersContainer,
+    filterModel,
+    pointsModel
+  });
 
-const filtersContainer = document.querySelector('.trip-controls__filters');
-const eventsContainer = document.querySelector('.trip-events');
-const pointsModel = new PointsModel();
-const boardPresenter = new BoardPresenter({
-  boardContainer: eventsContainer,
-  pointsModel,
-});
+  const addNewPointButtonComponent = new AddNewPointButtonView({
+    onClick: () => boardPresenter.createPoint()
+  });
 
-const filters = generateFilter(pointsModel.points);
+  boardPresenter.setAddNewPointButton(addNewPointButtonComponent);
 
-render(new FiltersView({ filters }), filtersContainer);
+  render(addNewPointButtonComponent, tripMainContainer);
+  filterPresenter.init();
+  boardPresenter.init();
+};
 
-boardPresenter.init();
+initApp();

src/mock/points.js

@@ -48,8 +48,8 @@ const mockPoints = [
   {
     id: 5,
     basePrice: 1500,
-    dateFrom: '2025-04-04T16:00:56.845Z',
-    dateTo: '2025-04-04T18:00:56.845Z',
+    dateFrom: '2025-04-29T16:00:56.845Z',
+    dateTo: '2025-04-29T18:00:56.845Z',
     destination: 555,
     isFavorite: true,
     offers: [51, 52, 53],

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,10 +1,11 @@
+import Observable from '../framework/observable.js';
 import { getRandomMockPoints } from '../mock/points.js';
 import { mockDestinations } from '../mock/destinations.js';
 import { mockOffers } from '../mock/offers.js';
 
 const POINTS_COUNT = 5;
 
-export default class PointsModel {
+export default class PointsModel extends Observable {
   #destinations = mockDestinations;
   #offers = mockOffers;
   #points = this.generateUniquePoints();
@@ -43,4 +44,44 @@ export default class PointsModel {
   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);
+  }
 }