Merge pull request #9 from WhiteShark23/module5-task2

Author: keksobot

src/const.js

@@ -0,0 +1,5 @@
+export const SortType = {
+  DEFAULT: 'default',
+  PRICE: 'price',
+  TIME: 'time',
+};

src/presenter/board-presenter.js

@@ -1,17 +1,22 @@
-import FilterView from '../view/filter-view.js';
+import SortView from '../view/sort-view.js';
 import { render } from '../framework/render.js';
 import ListEventsView from '../view/list-events.js';
 import EventPresenter from './event-presenter.js';
 import { updateItem } from '../utils.js';
+import { SortType } from '../const.js';
+import { sortByPrice, sortByTime } from '../utils.js';
 
 import LackDataView from '../view/lack-data-view.js';
 export default class BoardPresenter {
   #boardContainer = null;
   #pointsModel = null;
   #boardPoints = [];
   #eventsPresenter = new Map();
+  #currentEventType = SortType.DEFAULT;
+  #sourcedBoardEvents = [];
 
   #listEventsComponent = new ListEventsView();
+  #sortComponent = null;
 
   constructor({boardContainer, pointsModel}) {
     this.#boardContainer = boardContainer;
@@ -20,10 +25,43 @@ export default class BoardPresenter {
 
   init() {
     this.#boardPoints = [...this.#pointsModel.getPoint()];
+    this.#sourcedBoardEvents = [...this.#pointsModel.getPoint()];
 
     this.#renderBoard();
   }
 
+  #handleSortTypeChange = (sortType) => {
+    if (this.#currentEventType === sortType) {
+      return;
+    }
+    this.#sortEvents(sortType);
+    this.#clearEventList();
+    this.#renderItemsEvent();
+  };
+
+  #renderSort() {
+    this.#sortComponent = new SortView({
+      onSortTypeChange: this.#handleSortTypeChange
+    });
+
+    render(this.#sortComponent, this.#boardContainer);
+  }
+
+  #sortEvents(sortType) {
+    switch (sortType) {
+      case SortType.PRICE:
+        this.#boardPoints.sort(sortByPrice);
+        break;
+      case SortType.TIME:
+        this.#boardPoints.sort(sortByTime);
+        break;
+      default:
+        this.#boardPoints = [...this.#sourcedBoardEvents];
+    }
+
+    this.#currentEventType = sortType;
+  }
+
   #renderNoEvent() {
     render(new LackDataView(), this.#boardContainer);
   }
@@ -50,8 +88,14 @@ export default class BoardPresenter {
     }
   }
 
+  #clearEventList() {
+    this.#eventsPresenter.forEach((presenter) => presenter.destroy());
+    this.#eventsPresenter.clear();
+  }
+
   #handleEventChange = (updatedEvent) => {
     this.#boardPoints = updateItem(this.#boardPoints, updatedEvent);
+    this.#sourcedBoardEvents = updateItem(this.#sourcedBoardEvents, updatedEvent);
     this.#eventsPresenter.get(updatedEvent.id).init(this.#pointsModel, updatedEvent);
   };
 
@@ -61,7 +105,7 @@ export default class BoardPresenter {
       return;
     }
 
-    render(new FilterView(), this.#boardContainer);
+    this.#renderSort();
     this.#renderItemsEvent();
   }
 }

src/utils.js

@@ -46,3 +46,11 @@ export function getTimePeriod(start, end) {
 export function updateItem(items, update) {
   return items.map((item) => item.id === update.id ? update : item);
 }
+
+export function sortByPrice(eventA, eventB) {
+  return eventB.basePrice - eventA.basePrice;
+}
+
+export function sortByTime(event1, event2) {
+  return dayjs(event2.dateTo).diff(dayjs(event2.dateFrom)) - dayjs(event1.dateTo).diff(dayjs(event1.dateFrom));
+}

src/view/filter-view.js src/view/sort-view.jssrc/view/filter-view.js renamed to src/view/sort-view.js

@@ -1,9 +1,10 @@
 import AbstractView from '../framework/view/abstract-view.js';
+import { SortType } from '../const.js';
 
-function createFilterTemplate() {
+function createSortTemplate() {
   return `<form class="trip-events__trip-sort  trip-sort" action="#" method="get">
             <div class="trip-sort__item  trip-sort__item--day">
-              <input id="sort-day" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-day" checked>
+              <input id="sort-day" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-day" data-sort-type="${SortType.DEFAULT}" checked>
               <label class="trip-sort__btn" for="sort-day">Day</label>
             </div>
 
@@ -13,12 +14,12 @@ function createFilterTemplate() {
             </div>
 
             <div class="trip-sort__item  trip-sort__item--time">
-              <input id="sort-time" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-time">
+              <input id="sort-time" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-time" data-sort-type="${SortType.TIME}">
               <label class="trip-sort__btn" for="sort-time">Time</label>
             </div>
 
             <div class="trip-sort__item  trip-sort__item--price">
-              <input id="sort-price" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-price">
+              <input id="sort-price" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-price" data-sort-type="${SortType.PRICE}">
               <label class="trip-sort__btn" for="sort-price">Price</label>
             </div>
 
@@ -29,8 +30,24 @@ function createFilterTemplate() {
           </form>`;
 }
 
-export default class FilterView extends AbstractView {
+export default class SortView extends AbstractView {
+  #handleSortTypeChange = null;
+
+  constructor({onSortTypeChange}) {
+    super();
+    this.#handleSortTypeChange = onSortTypeChange;
+
+    this.element.addEventListener('click', this.#sortTypeChangeHandler);
+  }
+
   get template() {
-    return createFilterTemplate();
+    return createSortTemplate();
   }
+
+  #sortTypeChangeHandler = (evt) => {
+    if (evt.target.tagName !== 'INPUT') {
+      return;
+    }
+    this.#handleSortTypeChange(evt.target.dataset.sortType);
+  };
 }