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

htmlacademy-univer-js2 · May 28, 2024 · bad25e7 · bad25e7
1 parent eb027a7
commit bad25e7
Show file tree

Hide file tree

Showing 23 changed files with 633 additions and 167 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -1,41 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <title>Big Trip</title>
-
-    <link rel="stylesheet" href="./css/style.css">
-  </head>
-
-  <body class="page-body">
-    <header class="page-header">
-      <div class="page-body__container  page-header__container">
-        <img class="page-header__logo" src="img/logo.png" width="42" height="42" alt="Trip logo">
-
-        <div class="trip-main">
-          <div class="trip-main__trip-controls  trip-controls">
-            <div class="trip-controls__filters">
-              <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>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Big Trip</title>
+
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body class="page-body">
+  <header class="page-header">
+    <div class="page-body__container  page-header__container">
+      <img class="page-header__logo" src="img/logo.png" width="42" height="42" alt="Trip logo">
+
+      <div class="trip-main">
+        <div class="trip-main__trip-controls  trip-controls">
+          <div class="trip-controls__filters">
+            <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>
-    </header>
-    <main class="page-body__page-main  page-main">
-      <div class="page-body__container">
-          <section class="trip-events">
-            <h2 class="visually-hidden">Trip events</h2>
+    </div>
+  </header>
+  <main class="page-body__page-main  page-main">
+    <div class="page-body__container">
+      <section class="trip-events">
+        <h2 class="visually-hidden">Trip events</h2>
 
-            <!-- Сортировка -->
+        <!-- Сортировка -->
+
+        <!-- Контент -->
+      </section>
+    </div>
+  </main>
+</body>
 
-            <!-- Контент -->
-          </section>
-      </div>
-    </main>
-  </body>
 </html>
diff --git a/src/const.js b/src/const.js
@@ -89,6 +89,23 @@ const EnabledSortType = {
   [SortType.OFFERS]: false
 };
 
+const UserAction = {
+  UPDATE_POINT: 'UPDATE_POINT',
+  ADD_POINT: 'ADD_POINT',
+  DELETE_POINT: 'DELETE_POINT',
+};
+
+const UpdateType = {
+  PATCH: 'PATCH',
+  MINOR: 'MINOR',
+  MAJOR: 'MAJOR'
+};
+
+const EditType = {
+  EDITING: 'EDITING',
+  CREATING: 'CREATING'
+}
+
 export {
   OFFER_COUNT,
   DESTINATION_COUNT,
@@ -103,5 +120,8 @@ export {
   FilterType,
   Mode,
   SortType,
-  EnabledSortType
+  EnabledSortType,
+  UserAction,
+  UpdateType,
+  EditType
 }
diff --git a/src/main.js b/src/main.js
@@ -1,26 +1,51 @@
 import TripInfoView from './view/trip-info-view.js';
 import TripPresenter from './presenter/trip-presenter.js';
 import FilterPresenter from './presenter/filter-presenter.js';
+import NewPointButtonPresenter from './presenter/new-point-button-presenter.js';
 import MockService from './service/mock-service.js';
 import DestinationsModel from './model/destinations-model.js';
 import OffersModel from './model/offers-model.js';
 import PointsModel from './model/points-model.js';
+import FilterModel from './model/filter-model.js';
 import { render, RenderPosition } from './framework/render.js';
 
-const tripInfoElement = document.querySelector('.trip-main');
-const siteMainElement = document.querySelector('.page-main');
+const bodyElement = document.querySelector('body');
+const headerElement = bodyElement.querySelector('.page-header');
+const tripInfoElement = headerElement.querySelector('.trip-main');
+const siteMainElement = bodyElement.querySelector('.page-main');
 const eventListElement = siteMainElement.querySelector('.trip-events');
 const filterElement = tripInfoElement.querySelector('.trip-controls__filters');
 
 const mockService = new MockService();
 const destinationsModel = new DestinationsModel(mockService);
 const offersModel = new OffersModel(mockService);
 const pointsModel = new PointsModel(mockService);
+const filterModel = new FilterModel();
 
-const tripPresenter = new TripPresenter({ tripContainer: eventListElement, destinationsModel, offersModel, pointsModel });
-const filterPresenter = new FilterPresenter({ container: filterElement, pointsModel });
+const newPointButtonPresenter = new NewPointButtonPresenter({
+  container: tripInfoElement
+});
+
+const filterPresenter = new FilterPresenter({
+  container: filterElement,
+  pointsModel,
+  filterModel
+});
+
+const tripPresenter = new TripPresenter({
+  tripContainer: eventListElement,
+  destinationsModel,
+  offersModel,
+  pointsModel,
+  filterModel,
+  newPointButtonPresenter: newPointButtonPresenter
+});
 
 render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
 
-tripPresenter.init();
+newPointButtonPresenter.init({
+  onButtonClick: tripPresenter.newPointButtonClickHandler
+});
+
 filterPresenter.init();
+tripPresenter.init();
diff --git a/src/model/destinations-model.js b/src/model/destinations-model.js
@@ -1,14 +1,21 @@
-export default class DestinationsModel {
+import Observable from '../framework/observable.js';
+
+export default class DestinationsModel extends Observable {
+  #service = null;
+  #destinations = [];
+
   constructor(service) {
-    this.service = service;
-    this.destinations = this.service.getDestinations();
+    super();
+    this.#service = service;
+    this.#destinations = this.#service.getDestinations();
   }
 
   get() {
-    return this.destinations;
+    return this.#destinations;
   }
 
   getById(id) {
-    return this.destinations.find((destination) => destination.id === id);
+    return this.#destinations
+      .find((destination) => destination.id === id);
   }
 }
diff --git a/src/model/filter-model.js b/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() {
+    return this.#filter;
+  }
+
+  set(updateType, update) {
+    this.#filter = update;
+    this._notify(updateType, update)
+  }
+}
diff --git a/src/model/offers-model.js b/src/model/offers-model.js
@@ -1,14 +1,21 @@
-export default class OffersModel {
+import Observable from '../framework/observable.js';
+
+export default class OffersModel extends Observable {
+  #service = null;
+  #offers = [];
+
   constructor(service) {
-    this.service = service;
-    this.offers = this.service.getOffers();
+    super();
+    this.#service = service;
+    this.#offers = this.#service.getOffers();
   }
 
   get() {
-    return this.offers;
+    return this.#offers;
   }
 
   getByType(type) {
-    return this.offers.find((offer) => offer.type === type).offers;
+    return this.#offers
+      .find((offer) => offer.type === type).offers;
   }
 }
diff --git a/src/model/points-model.js b/src/model/points-model.js
@@ -1,10 +1,40 @@
-export default class PointsModel {
+import Observable from '../framework/observable.js';
+
+import { updateItem } from '../utils.js';
+
+export default class PointsModel extends Observable {
+  #points = [];
+  #service = null;
+
   constructor(service) {
-    this.service = service;
-    this.points = this.service.getPoints();
+    super();
+    this.#service = service;
+    this.#points = this.#service.getPoints();
   }
 
   get() {
-    return this.points;
+    return this.#points;
+  }
+
+  getById(id) {
+    return this.#points.find((point) => point.id === id);
+  }
+
+  update(updateType, point) {
+    const updatedPoint = this.#service.updatePoint(point);
+    this.#points = updateItem(this.#points, updatedPoint);
+    this._notify(updateType, updatedPoint);
+  }
+
+  add(updateType, point) {
+    const addedPoint = this.#service.addPoint(point);
+    this.#points.push(addedPoint);
+    this._notify(updateType, addedPoint);
+  }
+
+  delete(updateType, point) {
+    this.#service.deletePoint(point);
+    this.#points = this.#points.filter((pointItem) => pointItem.id !== point.id);
+    this._notify(updateType);
   }
 }
diff --git a/src/presenter/filter-presenter.js b/src/presenter/filter-presenter.js
@@ -1,19 +1,63 @@
-import FilterView from '../view/filter-view.js';
-import { render } from '../framework/render.js';
-import { generateFilters } from '../mock/filter.js';
+import FilterView from "../view/filter-view.js";
+import { render, replace, remove } from "../framework/render.js";
+import { UpdateType } from "../const.js";
+import { filter } from "../utils/filter.js";
 
 export default class FilterPresenter {
   #container = null;
+  #filterComponent = null;
+
   #pointsModel = null;
-  #filters = [];
+  #filterModel = null;
+
+  #currentFilter = null;
 
-  constructor({ container, pointsModel }) {
+  constructor({ container, pointsModel, filterModel }) {
     this.#container = container;
     this.#pointsModel = pointsModel;
-    this.#filters = generateFilters(this.#pointsModel.get());
+    this.#filterModel = filterModel;
+
+    this.#pointsModel.addObserver(this.#modelEventHandler);
+    this.#filterModel.addObserver(this.#modelEventHandler);
+  }
+
+  get filters() {
+    const points = this.#pointsModel.get();
+
+    return Object.entries(filter)
+      .map(([filterType, filterPoints]) => ({
+        type: filterType,
+        isChecked: filterType === this.#currentFilter,
+        isDisabled: filterPoints(points).length === 0
+      }));
   }
 
   init() {
-    render(new FilterView(this.#filters), this.#container);
+    this.#currentFilter = this.#filterModel.get();
+
+    const filters = this.filters;
+
+    const prevFilterComponent = this.#filterComponent;
+
+    this.#filterComponent = new FilterView({
+      items: filters,
+      onItemChange: this.#filterTypeChangeHandler
+    });
+
+    if (prevFilterComponent === null) {
+      render(this.#filterComponent, this.#container);
+      return;
+    }
+
+    replace(this.#filterComponent, prevFilterComponent);
+    remove(prevFilterComponent);
   }
+
+  #filterTypeChangeHandler = (filterType) => {
+    this.#filterModel.set(UpdateType.MAJOR, filterType);
+  };
+
+  #modelEventHandler = () => {
+    this.init();
+  };
 }