Merge pull request #8 from dashuulka/module5-task2

src/const.js

@@ -64,4 +64,24 @@ const FilterType = [{
   PAST: 'past'
 }];
 
-export {POINT_EMPTY, POINT_TYPE, DESTINATION, DESCRIPTION, OFFERS, DESTINATION_COUNT, OFFERS_COUNT, POINTS_COUNT, FilterType};
+const Mode = {
+  DEFAULT: 'DEFAULT',
+  EDITING: 'EDITING',
+};
+
+const SortType = [{
+  DAY: 'day',
+  TIME: 'time',
+  PRICE: 'price'
+}];
+
+export {POINT_EMPTY,
+  POINT_TYPE, DESTINATION,
+  DESCRIPTION,
+  OFFERS,
+  DESTINATION_COUNT,
+  OFFERS_COUNT,
+  POINTS_COUNT,
+  FilterType,
+  Mode,
+  SortType};

src/main.js

@@ -1,6 +1,5 @@
 import FilterPointsView from './view/filter-points-view.js';
 import TripInfoView from './view/trip-info-view.js';
-import SortPointsView from './view/sort-points-view.js';
 import TripPresenter from './presenter/trip-presenter.js';
 
 import { render, RenderPosition } from './framework/render.js';
@@ -14,23 +13,21 @@ import { generateFilters } from './mock/filter.js';
 const filterHeaderElement = document.querySelector('.trip-controls');
 const siteFilterElement = filterHeaderElement.querySelector('.trip-controls__filters');
 const siteMainElement = document.querySelector('.page-main');
-const siteSortElement = siteMainElement.querySelector('.trip-events');
 const tripInfoElement = document.querySelector('.trip-main');
 
 const pointsModel = new PointsModel();
 const destinationModel = new DestinationModel();
 const offersModel = new OffersModel();
 
 const tripPresenter = new TripPresenter({
-  listContainer: siteSortElement,
+  listContainer: siteMainElement,
   pointsModel,
   destinationsModel: destinationModel,
   offersModel
 });
 
 const filters = generateFilters(pointsModel.points);
 
-render(new SortPointsView(), siteSortElement);
 render(new FilterPointsView({ filters }), siteFilterElement);
 render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
 

src/presenter/point-presenter.js

@@ -1,11 +1,9 @@
 import { remove, render, replace } from '../framework/render';
+
 import ListPointsView from '../view/list-points-view';
 import EditPointView from '../view/editing-form-view';
 
-const Mode = {
-  DEFAULT: 'DEFAULT',
-  EDITING: 'EDITING',
-};
+import { Mode } from '../const';
 
 export default class PointPresenter {
   #pointListContainer = null;

src/presenter/trip-presenter.js

@@ -1,18 +1,27 @@
 import ListView from '../view/list-view.js';
 import EventListEmptyView from '../view/event-list-empty-view.js';
-import { render } from '../framework/render.js';
+import SortPointsView from '../view/sort-points-view.js';
+
+import { render, RenderPosition } from '../framework/render.js';
+
 import PointPresenter from './point-presenter.js';
+
 import { updateItem } from '../utils/common.js';
+import { sortPointsByTime, sortPointsByPrice } from '../utils/sort-points.js';
+import { SortType } from '../const.js';
 
 export default class TripPresenter {
   #listComponent = new ListView();
+  #sortComponent = null;
 
   #listContainer;
   #pointsModel;
   #destinationsModel;
   #offersModel;
 
   #tripPoint = [];
+  #currentSortType = SortType.DAY;
+  #sourcedTripPoints = [];
 
   #pointPresenters = new Map();
 
@@ -26,6 +35,8 @@ export default class TripPresenter {
   }
 
   init() {
+    this.#sourcedTripPoints = [...this.#pointsModel.points];
+
     this.#renderBoard();
   }
 
@@ -56,13 +67,22 @@ export default class TripPresenter {
     render(this.#listComponent, this.#listContainer);
   };
 
+  #renderSort() {
+    this.#sortComponent = new SortPointsView({
+      onSortTypeChange: this.#handleSortTypeChange
+    });
+
+    render(this.#sortComponent, this.#listComponent.element, RenderPosition.AFTERBEGIN);
+  }
+
   #renderBoard = () => {
     /* console.log('Rendering board'); */
     if (this.#tripPoint.length === 0) {
       render(new EventListEmptyView(), this.#listContainer);
       return;
     }
 
+    this.#renderSort();
     this.#renderPointContainer();
     this.#renderPoints();
   };
@@ -80,4 +100,29 @@ export default class TripPresenter {
     this.#tripPoint = updateItem(this.#tripPoint, updatePoint);
     this.#pointPresenters.get(updatePoint.id).init(updatePoint);
   };
+
+  #sortPoints(sortType) {
+    switch(sortType) {
+      case SortType.TIME:
+        this.#tripPoint.sort(sortPointsByTime);
+        break;
+      case SortType.PRICE:
+        this.#tripPoint.sort(sortPointsByPrice);
+        break;
+      default:
+        this.#tripPoint = [...this.#sourcedTripPoints];
+    }
+
+    this.#currentSortType = sortType;
+  }
+
+  #handleSortTypeChange = (sortType) => {
+    if (this.#currentSortType === sortType) {
+      return;
+    }
+
+    this.#sortPoints(sortType);
+    this.#clearPointsList();
+    this.#renderPoints();
+  };
 }

src/template/sort-template.js

@@ -1,8 +1,10 @@
+import { SortType } from '../const';
+
 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">
-              <label class="trip-sort__btn" for="sort-day">Day</label>
+              <label class="trip-sort__btn" data-sort-type="${SortType.DAY}">Day</label>
             </div>
 
             <div class="trip-sort__item  trip-sort__item--event">
@@ -12,12 +14,12 @@ function createSortTemplate() {
 
             <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">
-              <label class="trip-sort__btn" for="sort-time">Time</label>
+              <label class="trip-sort__btn" data-sort-type="${SortType.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" checked>
-              <label class="trip-sort__btn" for="sort-price">Price</label>
+              <label class="trip-sort__btn" data-sort-type="${SortType.PRICE}">Price</label>
             </div>
 
             <div class="trip-sort__item  trip-sort__item--offer">

src/utils/sort-points.js

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs';
+
+function sortPointsByDay(pointA, pointB) {
+  return dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom));
+}
+
+function sortPointsByTime(pointA, pointB) {
+  const durationA = dayjs.duration(dayjs(pointA.dateTo).diff(dayjs(pointA.dateFrom), 'minute'));
+  const durationB = dayjs.duration(dayjs(pointB.dateTo).diff(dayjs(pointB.dateFrom), 'minute'));
+
+  if (durationA.asMilliseconds() > durationB.asMilliseconds()) {
+    return -1;
+  } else if (durationA.asMilliseconds() < durationB.asMilliseconds()) {
+    return 1;
+  } else {
+    return 0;
+  }
+}
+
+function sortPointsByPrice(pointA, pointB){
+  const diff = pointA.basePrice - pointB.basePrice;
+
+  if (diff > 0) {
+    return -1;
+  } else if (diff < 0) {
+    return 1;
+  } else {
+    return 0;
+  }
+}
+
+export {sortPointsByPrice, sortPointsByTime, sortPointsByDay};

src/view/sort-points-view.js

@@ -2,7 +2,24 @@ import AbstractView from '../framework/view/abstract-view.js';
 import { createSortTemplate } from '../template/sort-template.js';
 
 export default class SortPointsView extends AbstractView {
+  #handleSortTypeChange = null;
+
+  constructor({onSortTypeChange}) {
+    super();
+    this.#handleSortTypeChange = onSortTypeChange;
+
+    this.element.addEventListener('click', this.#sortTypeChangeHandler);
+  }
+
   get template() {
     return createSortTemplate();
   }
+
+  #sortTypeChangeHandler = (evt) => {
+    if (evt.target.tagName !== 'LABEL') {
+      return;
+    }
+
+    this.#handleSortTypeChange(evt.target.dataset.sortType);
+  };
 }