Merge pull request #8 from n3wstar/module5-task2

htmlacademy-univer-js2 · May 21, 2024 · 2a62b67 · 2a62b67
2 parents c923ef9 + 117c9fb
commit 2a62b67
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 30 deletions.
diff --git a/src/const.js b/src/const.js
@@ -16,6 +16,22 @@ const Mode = {
   EDITING: 'EDITING',
 };
 
+const SortType = {
+  DAY: 'day',
+  EVENT: 'event',
+  TIME: 'time',
+  PRICE: 'price',
+  OFFER: 'offer'
+};
+
+const EnabledSortType = {
+  [SortType.DAY]: true,
+  [SortType.EVENT]: false,
+  [SortType.TIME]: true,
+  [SortType.PRICE]: true,
+  [SortType.OFFER]: false
+};
+
 const MSEC_IN_SEC = 1000;
 const SEC_IN_MIN = 60;
 const MIN_IN_HOUR = 60;
@@ -24,4 +40,4 @@ const HOUR_IN_DAY = 24;
 const MSEC_IN_HOUR = MIN_IN_HOUR * SEC_IN_MIN * MSEC_IN_SEC;
 const MSEC_IN_DAY = HOUR_IN_DAY * MSEC_IN_HOUR;
 
-export {EMPTY_POINT, MSEC_IN_DAY, MSEC_IN_HOUR, Mode};
+export {EMPTY_POINT, MSEC_IN_DAY, MSEC_IN_HOUR, Mode, SortType, EnabledSortType};
diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js
@@ -1,13 +1,15 @@
 
-import {render} from '../render.js';
+import { remove, render } from '../framework/render.js';
 import EventListView from '../view/event-list-view.js';
 import SortView from '../view/sort-view.js';
 import WithoutPointsView from '../view/without-point-view.js';
 import PointPresenter from './point-presenter.js';
 import { updateItem } from '../utils.js';
+import { SortType } from '../const.js';
+import { sortByDay, sortByPrice, sortByTime } from '../utils.js';
 
 export default class BoardPresenter{
-  #sortComponent = new SortView();
+  #sortComponent = null;
   #eventListComponent = new EventListView();
   #withoutPointsComponent = new WithoutPointsView();
   #container = null;
@@ -16,6 +18,7 @@ export default class BoardPresenter{
   #pointsModel = null;
   #points = null;
   #pointPresenters = new Map();
+  #currentSortType = SortType.DAY;
 
   constructor({container, destinationsModel, offersModel, pointsModel}){
     this.#container = container;
@@ -27,16 +30,32 @@ export default class BoardPresenter{
   }
 
   init(){
+    this.#renderBoard();
+  }
 
+  #renderBoard = () => {
     if (this.#points.length === 0){
       render(this.#withoutPointsComponent, this.#container);
       return;
     }
-    render(this.#sortComponent, this.#container);
+
+    this.#renderSort();
     render(this.#eventListComponent, this.#container);
     this.#renderPoints();
+  };
 
-  }
+  #renderSort = () => {
+    if (this.#sortComponent !== null) {
+      remove(this.#sortComponent);
+    }
+
+    this.#sortComponent = new SortView(
+      this.#currentSortType,
+      this.#handleSortTypeChange
+    );
+
+    render(this.#sortComponent, this.#container);
+  };
 
   #renderPoints = () => {
     this.#points.forEach((point) => {
@@ -70,5 +89,32 @@ export default class BoardPresenter{
   #modeChangeHandler = () => {
     this.#pointPresenters.forEach((presenter) => presenter.resetView());
   };
+
+  #handleSortTypeChange = (sortType) => {
+    if (this.#currentSortType === sortType) {
+      return;
+    }
+
+    this.#currentSortType = sortType;
+    this.#sortPoints();
+    this.#clearPoints();
+    this.#renderPoints();
+  };
+
+  #sortPoints = () => {
+    switch (this.#currentSortType) {
+      case SortType.DAY:
+        this.#points.sort(sortByDay);
+        break;
+      case SortType.TIME:
+        this.#points.sort(sortByTime);
+        break;
+      case SortType.PRICE:
+        this.#points.sort(sortByPrice);
+        break;
+      default:
+        this.#points = [...this.#pointsModel.getPoints()];
+    }
+  };
 }
 
diff --git a/src/template/sort-markup.js b/src/template/sort-markup.js
@@ -1,30 +1,39 @@
-function CreateSortMarkup(){
-  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>
+import { SortType } from '../const';
 
-  <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>
+function CreateSortMarkup(currentSortType) {
+  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" data-sort-type="${SortType.DAY}" ${currentSortType === SortType.DAY ? 'checked' : ''}>
+        <label class="trip-sort__btn" for="sort-day">Day</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--event">
+        <input id="sort-event" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-event" data-sort-type="${SortType.EVENT}" disabled>
+        <label class="trip-sort__btn" for="sort-event">Event</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--time">
+        <input id="sort-time" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort"
+        value="sort-time" data-sort-type="${SortType.TIME}" ${currentSortType === SortType.TIME ? 'checked' : ''}>
+        <label class="trip-sort__btn" for="sort-time">Time</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>`;
+      <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" data-sort-type="${SortType.PRICE}" ${currentSortType === SortType.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" data-sort-type="${SortType.OFFER}" disabled>
+        <label class="trip-sort__btn" for="sort-offer">Offers</label>
+      </div>
+    </form>
+    `
+  );
 }
 
 export {CreateSortMarkup};
diff --git a/src/utils.js b/src/utils.js
@@ -57,6 +57,24 @@ function updateItem(items, update) {
   return items.map((item) => item.id === update.id ? update : item);
 }
 
+function sortByTime(firstPoint, secondPoint) {
+  const timeFrom = dayjs(firstPoint.dateTo).diff(dayjs(firstPoint.dateFrom));
+  const timeTo = dayjs(secondPoint.dateTo).diff(dayjs(secondPoint.dateFrom));
+
+  return timeFrom - timeTo;
+}
+
+function sortByPrice(firstPoint, secondPoint) {
+  return firstPoint.basePrice - secondPoint.basePrice;
+}
+
+function sortByDay(firstPoint, secondPoint) {
+  const timeA = dayjs(firstPoint.dateFrom);
+  const timeB = dayjs(secondPoint.dateFrom);
+
+  return timeA - timeB;
+}
+
 export {getRandomNumber, getRandomValue, getDate, formatStringToDateTime, formatStringToShortDate,
-  formatStringToTime, getDuration, updateItem
+  formatStringToTime, getDuration, updateItem, sortByDay, sortByPrice, sortByTime
 };
diff --git a/src/view/sort-view.js b/src/view/sort-view.js
@@ -3,7 +3,26 @@ import AbstractView from '../framework/view/abstract-view.js';
 
 
 export default class SortView extends AbstractView {
+  #currentSortType = null;
+  #handleSortTypeChange = null;
+
+  constructor(currentSortType, handleSortTypeChange) {
+    super();
+    this.#currentSortType = currentSortType;
+    this.#handleSortTypeChange = handleSortTypeChange;
+
+    this.element.addEventListener('click', this.#sortTypeChangeHandler);
+  }
+
   get template() {
-    return CreateSortMarkup();
+    return CreateSortMarkup(this.#currentSortType);
   }
+
+  #sortTypeChangeHandler = (evt) => {
+    if (evt.target.tagName !== 'INPUT') {
+      return;
+    }
+
+    this.#handleSortTypeChange(evt.target.dataset.sortType);
+  };
 }