Merge pull request #11 from KseniaTry/module7-task1

package.json

@@ -36,6 +36,7 @@
     "@babel/core": "7.21.4",
     "dayjs": "1.11.13",
     "flatpickr": "4.6.13",
+    "he": "1.2.0",
     "webpack-dev-server": "4.13.3"
   }
 }

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

@@ -19,4 +19,33 @@ const SortType = {
   OFFER: 'offer'
 };
 
-export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType };
+const UserAction = {
+  UPDATE_POINT: 'UPDATE_POINT',
+  ADD_POINT: 'ADD_POINT',
+  DELETE_POINT: 'DELETE_POINT',
+};
+
+const UpdateType = {
+  PATCH: 'PATCH',
+  MINOR: 'MINOR',
+  MAJOR: 'MAJOR',
+};
+
+const ListEmptyText = {
+  [FilterType.EVERYTHING]: 'Click New Event to create your first point',
+  [FilterType.PAST]: 'There are no past events now',
+  [FilterType.PRESENT]: 'There are no present events now',
+  [FilterType.FUTURE]: 'There are no future events now',
+};
+
+const BLANK_POINT = {
+  type: TYPES[5],
+  destination: null,
+  dateFrom: null,
+  dateTo: null,
+  basePrice: 0,
+  offers: [],
+  isFavorite: false,
+};
+
+export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType, ListEmptyText, BLANK_POINT };

src/main.js

@@ -1,21 +1,46 @@
-import NewFilters from './view/filters-view';
 import NewTripInfo from './view/trip-info-view';
 import { RenderPosition, render } from './framework/render';
 import MainPresenter from './presenter/main-presenter';
 import PointModel from './model/point-model';
-import { generateFilter } from './mock/filter-mock';
+import FiltersModel from './model/filters-model';
+import FiltersPresenter from './presenter/filters-presenter';
+import AddNewPointButtonView from './view/add-new-point-button-view';
 
 const mainContainer = document.querySelector('.trip-main');
 const filtersContainer = document.querySelector('.trip-controls__filters');
 const pointsContainer = document.querySelector('.trip-events');
+
 const pointModel = new PointModel();
+const filtersModel = new FiltersModel();
+
+const addNewPointButton = new AddNewPointButtonView({
+  onClick: onNewPointButtonClick,
+});
+
 const mainPresenter = new MainPresenter({
   pointsContainer: pointsContainer,
   pointModel,
+  filtersModel,
+  onNewPointCancel: cancelNewPoint,
+});
+
+const filtersPresenter = new FiltersPresenter({
+  filtersContainer: filtersContainer,
+  pointModel,
+  filtersModel,
 });
-const filters = generateFilter(pointModel.points);
 
 render(new NewTripInfo(), mainContainer, RenderPosition.AFTERBEGIN);
-render(new NewFilters({filters}), filtersContainer);
+render(addNewPointButton, mainContainer);
+
+function onNewPointButtonClick() {
+  mainPresenter.createPoint();
+  addNewPointButton.element.disabled = true;
+}
+
+function cancelNewPoint() {
+  addNewPointButton.element.disabled = false;
+}
 
+filtersPresenter.init();
 mainPresenter.init();

src/mock/destinations-mock.js

@@ -1,5 +1,5 @@
 import { CITIES, PICTURES, DESCRIPTION_TEXT } from './const-mock';
-import { getRandomDescriptionPoint } from '../utils/common-utils';
+import { getRandomDescriptionPoint, getRandomInteger } from '../utils/common-utils';
 
 let destinationId = 0;
 
@@ -10,23 +10,23 @@ const getDestinationsMock = (city) => {
     description: getRandomDescriptionPoint(DESCRIPTION_TEXT),
     pictures: [
       {
-        src: PICTURES[0],
+        src: PICTURES[getRandomInteger(0, 4)],
         description: `${city} parliament building`
       },
       {
-        src: PICTURES[1],
+        src: PICTURES[getRandomInteger(0, 4)],
         description: `${city} main square`
       },
       {
-        src: PICTURES[2],
+        src: PICTURES[getRandomInteger(0, 4)],
         description: `${city} best view`
       },
       {
-        src: PICTURES[3],
+        src: PICTURES[getRandomInteger(0, 4)],
         description: `${city} landscape`
       },
       {
-        src: PICTURES[4],
+        src: PICTURES[getRandomInteger(0, 4)],
         description: `${city} church`
       }
     ],

src/mock/point-mock.js

@@ -1,12 +1,12 @@
-import { getRandomArrayElement, getRandomInteger, createIdGenerator } from '../utils/common-utils';
+import { getRandomArrayElement, getRandomInteger } from '../utils/common-utils';
 import { CITIES, DATES } from './const-mock';
 import { TYPES } from '../const';
 import { getOffers } from './offers-mock';
+import { nanoid } from 'nanoid';
 
 const POINTS_COUNT = 10;
 const offersData = getOffers();
 
-const generateRandomPointId = createIdGenerator();
 
 const createPointMock = () => {
   const pointDate = getRandomArrayElement(DATES);
@@ -32,7 +32,7 @@ const createPointMock = () => {
   };
 
   const pointMock = {
-    id: generateRandomPointId(),
+    id: nanoid(),
     type: pointType,
     destination: getRandomInteger(1, CITIES.length),
     dateFrom: pointDate.dateFrom,

src/model/filters-model.js

@@ -0,0 +1,15 @@
+import Observable from '../framework/observable';
+import { FilterType } from '../const';
+
+export default class FiltersModel 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,21 +1,52 @@
 import { getPoints } from '../mock/point-mock';
 import { getDestinations } from '../mock/destinations-mock';
 import { getOffers } from '../mock/offers-mock';
+import Observable from '../framework/observable';
+import { nanoid } from 'nanoid';
 
-export default class PointModel {
+export default class PointModel extends Observable {
   #points = getPoints();
-  #destinations = getDestinations();
-  #offers = getOffers();
+  #allDestinations = getDestinations();
+  #allOffers = getOffers();
 
   get points() {
     return this.#points;
   }
 
+  updatePoint(updateType, updatedPoint) {
+    const pointIndex = this.#points.findIndex((point) => point.id === updatedPoint.id);
+
+    this.#points = [
+      ...this.#points.slice(0, pointIndex),
+      updatedPoint,
+      ...this.#points.slice(pointIndex + 1),
+    ];
+
+    this._notify(updateType, updatedPoint);
+  }
+
+  addPoint(updateType, updatedPoint) {
+    this.#points = [{id: nanoid(), ...updatedPoint}, ...this.#points];
+
+    this._notify(updateType, updatedPoint);
+  }
+
+  deletePoint(updateType, updatedPoint) {
+    const pointIndex = this.#points.findIndex((point) => point.id === updatedPoint.id);
+
+    this.#points = [
+      ...this.#points.slice(0, pointIndex),
+      ...this.#points.slice(pointIndex + 1),
+    ];
+
+    this._notify(updateType, updatedPoint);
+  }
+
   get destinations() {
-    return this.#destinations;
+    return this.#allDestinations;
   }
 
   get offers() {
-    return this.#offers;
+    return this.#allOffers;
   }
 }

src/presenter/filters-presenter.js

@@ -0,0 +1,60 @@
+import { render, replace, remove } from '../framework/render';
+import FiltersView from '../view/filters-view';
+import { UpdateType } from '../const';
+import { filter } from '../utils/filter-utils';
+
+export default class FiltersPresenter {
+  #filtersModel = null;
+  #filtersComponent = null;
+  #filtersContainer = null;
+  #pointModel = null;
+
+  constructor({ filtersContainer, pointModel, filtersModel }) {
+    this.#filtersContainer = filtersContainer;
+    this.#pointModel = pointModel;
+    this.#filtersModel = filtersModel;
+
+    this.#pointModel.addObserver(this.#handleModelEvent);
+    this.#filtersModel.addObserver(this.#handleModelEvent);
+  }
+
+  get filters() {
+    const points = this.#pointModel.points;
+
+    return Object.entries(filter).map(
+      ([filterType, filterPoints]) => ({
+        type: filterType,
+        count: filterPoints(points).length,
+      }),
+    );
+  }
+
+  init() {
+    const prevFiltersComponent = this.#filtersComponent;
+
+    this.#filtersComponent = new FiltersView({
+      filters: this.filters,
+      onFiltersChange: this.#handleFiltersChange
+    });
+
+    if(prevFiltersComponent === null){
+      render(this.#filtersComponent, this.#filtersContainer);
+      return;
+    }
+
+    replace(this.#filtersComponent, prevFiltersComponent);
+    remove(prevFiltersComponent);
+  }
+
+  #handleModelEvent = () => {
+    this.init();
+  };
+
+  #handleFiltersChange = (filterType) => {
+    if (this.#filtersModel.filter === filterType) {
+      return;
+    }
+
+    this.#filtersModel.setFilter(UpdateType.MAJOR, filterType);
+  };
+}