Большие перемены (часть 2)

src/const.js

@@ -64,7 +64,7 @@
   FUTURE: 'future',
   PRESENT: 'present',
   PAST: 'past'
 }
 
 const Mode = {
   DEFAULT: 'default',
@@ -79,6 +79,14 @@
   OFFERS: 'offers'
 };
 
+const EnabledSortType = {
+  [SortType.DAY]: true,
+  [SortType.EVENT]: false,
+  [SortType.TIME]: true,
+  [SortType.PRICE]: true,
+  [SortType.OFFERS]: false
+};
+
 export {
   OFFER_COUNT,
   DESTINATION_COUNT,
@@ -92,5 +100,6 @@
   POINT_EMPTY,
   FilterType,
   Mode,
-  SortType
+  SortType,
+  EnabledSortType
 }

src/presenter/trip-presenter.js

@@ -2,8 +2,10 @@
 import TripView from '../view/point-list-view.js';
 import EmptyListView from '../view/empty-list-view.js';
 import PointPresenter from './point-presenter.js';
-import { render, replace } from '../framework/render.js';
+import { render, replace, remove } from '../framework/render.js';
 import { updateItem } from '../utils.js';
+import { SortType, EnabledSortType } from '../const.js';
+import { sort } from '../utils/sort.js';
 import PointListView from '../view/point-list-view.js';
 
 export default class TripPresenter {
@@ -12,18 +14,21 @@
   #offersModel = null;
   #pointsModel = null;
   #pointListComponent = new TripView();
-  #sortComponent = new SortView();
+  #sortComponent = null;
 
   #points = [];
 
+  #currentSortType = SortType.DAY;
+
   #pointPresenters = new Map();
 
   constructor({ tripContainer, destinationsModel, offersModel, pointsModel }) {
     this.#tripContainer = tripContainer;
     this.#destinationsModel = destinationsModel;
     this.#offersModel = offersModel;
     this.#pointsModel = pointsModel;
-    this.#points = [...this.#pointsModel.get()];
+
+    this.#points = sort[SortType.DAY]([...this.#pointsModel.get()]);
   }
 
   init() {
@@ -42,8 +47,13 @@
     pointPresenter.init(point);
 
     this.#pointPresenters.set(point.id, pointPresenter);
   }
 
+  #sortPoints = (sortType) => {
+    this.#currentSortType = sortType;
+    this.#points = sort[this.#currentSortType](this.#points);
+  }
+
   #renderPoints = () => {
     this.#points.forEach((point) => {
       this.#renderPoint(point);
@@ -55,6 +65,22 @@
     this.#pointPresenters.clear();
   }
 
+  #renderSort = () => {
+    const prevSortComponent = this.#sortComponent;
+
+    this.#sortComponent = new SortView({
+      sortType: this.#currentSortType,
+      onItemChange: this.#sortTypeChangeHandler
+    });
+
+    if (prevSortComponent) {
+      replace(this.#sortComponent, prevSortComponent);
+      remove(prevSortComponent);
+    } else {
+      render(this.#sortComponent, this.#tripContainer);
+    }
+  }
+
   #renderPointContainer = () => {
     this.#pointListComponent = new PointListView();
     render(this.#pointListComponent, this.#tripContainer);
@@ -66,6 +92,7 @@
       return;
     }
 
+    this.#renderSort();
     this.#renderPointContainer();
     this.#renderPoints();
   };
@@ -78,4 +105,11 @@
   #modeChangeHandler = () => {
     this.#pointPresenters.forEach((presenter) => presenter.resetView());
   };
+
+  #sortTypeChangeHandler = (sortType) => {
+    this.#sortPoints(sortType);
+    this.#clearPoints();
+    this.#renderSort();
+    this.#renderPoints();
+  };
 }

src/utils.js

@@ -102,6 +102,21 @@ function updateItem(items, update) {
   return items.map((item) => item.id === update.id ? update : item);
 }
 
+function getPointsDateDifference(pointA, pointB) {
+  return new Date(pointA.dateFrom) - new Date(pointB.dateFrom);
+}
+
+function getPointsPriceDifference(pointA, pointB) {
+  return pointB.basePrice - pointA.basePrice;
+}
+
+function getPointsDurationDifference(pointA, pointB) {
+  const durationA = new Date(pointA.dateTo) - new Date(pointA.dateFrom);
+  const durationB = new Date(pointB.dateTo) - new Date(pointB.dateFrom);
+
+  return durationB - durationA;
+}
+
 export {
   getDate,
   getRandomInteger,
@@ -114,5 +129,8 @@ export {
   isPointFuture,
   isPointPast,
   isPointPresent,
-  updateItem
+  updateItem,
+  getPointsDateDifference,
+  getPointsPriceDifference,
+  getPointsDurationDifference
 }

src/utils/sort.js

@@ -0,0 +1,16 @@
+import { SortType } from '../const.js';
+import { getPointsDateDifference, getPointsDurationDifference, getPointsPriceDifference } from '../utils.js';
+
+const sort = {
+  [SortType.DAY]: (points) => points.sort(getPointsDateDifference),
+  [SortType.PRICE]: (points) => points.sort(getPointsPriceDifference),
+  [SortType.TIME]: (points) => points.sort(getPointsDurationDifference),
+  [SortType.EVENT]: () => {
+    throw new Error(`Sort by ${SortType.EVENT} is not implemented`);
+  },
+  [SortType.OFFERS]: () => {
+    throw new Error(`Sort by ${SortType.OFFERS} is not implemented`);
+  }
+};
+
+export { sort };

src/view/sort-view.js

@@ -1,35 +1,64 @@
 import AbstractView from '../framework/view/abstract-view.js';
+import { EnabledSortType, SortType } from '../const.js';
 
-const createSortTemplate = () => {
+const createSortItemsTemplate = ({ items }) => {
+  const sortItems = items.map(sortItem => {
+    return (
+      `<div class="trip-sort__item  trip-sort__item--${sortItem.type}">
+            <input
+              id="sort-${sortItem.type}"
+              class="trip-sort__input  visually-hidden"
+              type="radio"
+              name="trip-sort"
+              value="sort-${sortItem.type}"
+              data-sort-type="${sortItem.type}"
+              ${(sortItem.isChecked) ? 'checked' : ''}
+              ${(sortItem.isDisabled) ? 'disabled' : ''}
+            >
+            <label
+              class="trip-sort__btn"
+              for="sort-${sortItem.type}">${sortItem.type}</label>
+          </div>`
+    )
+  }).join('');
+
+  return sortItems;
+}
+
+const createSortTemplate = ({ items }) => {
   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>
-            </div>
-
-            <div class="trip-sort__item  trip-sort__item--event">
-                <input id="sort-event" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-event" disabled>
-                <label class="trip-sort__btn" for="sort-event">Event</label>
-            </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">
-                <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" checked>
-                <label class="trip-sort__btn" for="sort-price">Price</label>
-            </div>
-            <div class="trip-sort__item  trip-sort__item--offer">
-                <input id="sort-offer" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-offer" disabled>
-                <label class="trip-sort__btn" for="sort-offer">Offers</label>
-            </div>
-      </form>`
+            ${createSortItemsTemplate({ items })}
+        </form>`
   );
-};
+}
 
 export default class SortView extends AbstractView {
+  #items = null;
+  #onItemChange = null;
+
+  constructor({ sortType, onItemChange }) {
+    super();
+
+    this.#items = Object.values(SortType).map((type) => ({
+      type,
+      isChecked: (type === sortType),
+      isDisabled: !EnabledSortType[type]
+    }));
+
+    this.#onItemChange = onItemChange;
+
+    this.element.addEventListener('change', this.#itemChangeHandler);
+  }
+
   get template() {
-    return createSortTemplate();
+    return createSortTemplate({
+      items: this.#items
+    });
   }
+
+  #itemChangeHandler = (evt) => {
+    evt.preventDefault();
+    this.#onItemChange(evt.target.dataset.sortType);
+  };
 }