Merge pull request #8 from InsomniaRolodex/module5-task2

src/const.js

@@ -0,0 +1,8 @@
+const SortingType = {
+  DAY: 'day',
+  EVENT: 'event',
+  TIME: 'time',
+  PRICE: 'price',
+  OFFERS: 'offers'};
+
+export {SortingType};

src/mock/points.js

@@ -1,18 +1,6 @@
 import { toCamelCase } from '../util.js'
 
 export const points = [
-  {
-    id: 'f4b62099-293f-4c3d-a702-94eec4a2808c',
-    basePrice: 11300,
-    dateFrom: '2025-07-10T00:55:56.845Z',
-    dateTo: '2025-07-11T11:01:13.375Z',
-    destination: 'bfa5cb75-a1fe-4b77-a83c-0e528e910e04',
-    isFavorite: false,
-    offers: [
-      'b4c3e4e6-9053-42ce-b747-e281314baa31'
-    ],
-    type: 'taxi'
-  },
   {
     id: 'f4b62099-293f-4c3d-a702-94eec4a2808d',
     basePrice: 11200,
@@ -37,6 +25,18 @@ export const points = [
     offers: [],
     type: 'ship'
   },
+  {
+    id: 'f4b62099-293f-4c3d-a702-94eec4a2808c',
+    basePrice: 11300,
+    dateFrom: '2025-07-10T00:55:56.845Z',
+    dateTo: '2025-07-11T11:01:13.375Z',
+    destination: 'bfa5cb75-a1fe-4b77-a83c-0e528e910e04',
+    isFavorite: false,
+    offers: [
+      'b4c3e4e6-9053-42ce-b747-e281314baa31'
+    ],
+    type: 'taxi'
+  },
   {
     id: 'f4b62099-293f-4c3d-a702-94eec4a2808f',
     basePrice: 11100,

src/presenter/point-presenter.js

@@ -30,18 +30,15 @@ export default class PointPresenter {
         onEditClick: () => {
           this.#replacePointToForm();
           document.addEventListener('keydown', this.#escKeyDownHanlder);
-        }
-      },
-      { onFavoriteClick: this.#handleFavoriteClick }
+        },
+        onFavoriteClick: this.#handleFavoriteClick }
     );
 
     this.#editTripForm = new EditFormView(point, destination, offer,
       {
         onEditClick: () => {
           this.#replaceFormToPoint();
-        }
-      },
-      {
+        },
         onFormSubmit: () => {
           this.#replaceFormToPoint();
         }

src/presenter/trip-presenter.js

@@ -5,7 +5,9 @@ import TripListView from '../view/trip-list-view.js';
 import ListEmptyView from '../view/list-empty-view.js';
 import PointModel from '../model/point-model.js';
 import PointPresenter from './point-presenter.js';
-import { updateItem } from '../util.js';
+import { updateItem, sortPointsByDay, findSortingDuration } from '../util.js';
+import { SortingType } from '../const.js';
+
 
 export default class TripPresenter {
   #tripList = new TripListView();
@@ -15,6 +17,9 @@ export default class TripPresenter {
   #points;
   #destinations;
   #offers;
+  #sortingComponent;
+  #currentSortingType = SortingType.PRICE;
+  #sourcedPointsOrder = [];
 
   constructor ({ container, pointModel = new PointModel }) {
     this.#container = container;
@@ -26,9 +31,11 @@ export default class TripPresenter {
     this.#points = this.#pointModel.points;
     this.#destinations = this.#pointModel.destinations;
     this.#offers = this.#pointModel.offers;
+    this.#sourcedPointsOrder = this.#pointModel.points;
     // const defaultPoint = this.#pointModel.defaultPoint;
 
-    render(new SortingView, this.#container);
+    this.#renderSorting();
+
     render(this.#tripList, this.#container);
     if (this.#points.length === 0) {
       render(new ListEmptyView, this.#container);
@@ -46,10 +53,47 @@ export default class TripPresenter {
 
   #handleFavStatusChange = (updatedPoint, destination = this.#destinations, offer = this.#offers) => {
     this.#points = updateItem(this.#points, updatedPoint.points);
+    this.#sourcedPointsOrder = updateItem(this.#sourcedPointsOrder, updatedPoint.points);
     this.#pointPresenters.get(updatedPoint.points.id).init(updatedPoint.points, destination, offer);
 
   };
 
+  #sortPoints(sortingType) {
+    switch (sortingType) {
+      case SortingType.DAY:
+        this.#points.sort(sortPointsByDay);
+        break;
+      case SortingType.PRICE:
+        this.#points.sort((pointA, pointB) => pointA.basePrice - pointB.basePrice);
+        break;
+      case SortingType.TIME:
+
+        this.#points.sort((pointA, pointB) => findSortingDuration(pointA) - findSortingDuration(pointB));
+        break;
+      default:
+        this.#points = [...this.#sourcedPointsOrder];
+    }
+    this.#currentSortingType = sortingType;
+  }
+
+  #handleSortingTypeChange(sortingType) {
+    if (this.#currentSortingType === sortingType) {
+      return;
+    }
+    this.#sortPoints(sortingType);
+    this.#clearPointList();
+
+    this.#points.forEach((point) => this.#renderPoint(point, this.#destinations, this.#offers));
+  }
+
+  #renderSorting() {
+    this.#sortingComponent = new SortingView({
+      onSortTypeChange: (sortingType) => this.#handleSortingTypeChange(sortingType),
+    });
+
+    render(this.#sortingComponent, this.#container);
+  }
+
   #renderPoint(point, destination, offer) {
     const pointPresenter = new PointPresenter({
       tripList: this.#tripList,
@@ -59,4 +103,9 @@ export default class TripPresenter {
     pointPresenter.init(point, destination, offer);
     this.#pointPresenters.set(point.id, pointPresenter);
   }
+
+  #clearPointList() {
+    this.#pointPresenters.forEach((presenter) => presenter.destroy());
+    this.#pointPresenters.clear();
+  }
 }

src/util.js

@@ -5,8 +5,10 @@ const humanizeDueDate = (dueDate, dateFormat) => dueDate ? dayjs(dueDate).format
 
 const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
 
-const findDuration = (date1, date2) => {
-  let minutesDuration = dayjs(date1).diff(dayjs(date2), 'm');
+const findSortingDuration = (point) => dayjs(point.dateTo).diff(dayjs(point.dateFrom), 'm');
+
+const findDuration = (point) => {
+  let minutesDuration = findSortingDuration(point);
   const minutesAfterHours = minutesDuration % 60;
 
   if (minutesDuration >= 60 && minutesAfterHours !== 0) {
@@ -40,5 +42,26 @@ const toCamelCase = (str) => lodash.camelCase(str);
 
 const updateItem = (items, update) => items.map((item) => item.id === update.id ? update : item);
 
+const getWeightForDate = (dateA, dateB) => {
+  if (dateA === null && dateB === 0) {
+    return 0;
+  }
+
+  if (dateA === null) {
+    return 1;
+  }
+
+  if (dateB === null) {
+    return -1;
+  }
+
+  return null;
+};
+
+const sortPointsByDay = (pointA, pointB) => {
+  const weight = getWeightForDate(pointA.dateFrom, pointB.dateFrom);
+
+  return weight ?? dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom));
+};
 
-export { humanizeDueDate, capitalize, findDuration, toCamelCase, checkPastPoints, checkPresentPoints, updateItem };
+export { humanizeDueDate, capitalize, findDuration, toCamelCase, checkPastPoints, checkPresentPoints, updateItem, sortPointsByDay, findSortingDuration };

src/view/edit-form-view.js

@@ -135,7 +135,7 @@ export default class EditFormView extends AbstractView {
   #handleFormSubmit;
   #handleClick;
 
-  constructor(points, destionations, offers, { onEditClick }, { onFormSubmit }) {
+  constructor(points, destionations, offers, { onEditClick, onFormSubmit }) {
     super();
     this.points = points;
     this.destionations = destionations;

src/view/sorting-view.js

@@ -1,22 +1,35 @@
+import { SortingType } from '../const.js';
 import AbstractView from '../framework/view/abstract-view.js';
-
-const sortingTypes = ['Day', 'Event', 'Time', 'Price', 'Offers'];
-
-const findCheckedElement = (element) => element === 'Price' ? 'checked' : '';
+import { capitalize } from '../util.js';
 
 const createSortingElement = (sortingType) => `
   <div class="trip-sort__item  trip-sort__item--${sortingType}">
-    <input id="sort-day" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-${sortingType}" ${findCheckedElement(sortingType)}>
-    <label class="trip-sort__btn" for="sort-day">${sortingType}</label>
+    <input id="sort-${sortingType}" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-${sortingType}"
+      data-sort-type="${sortingType}"
+    ${sortingType === 'event' ? 'disabled' : ''}
+    ${sortingType === 'offers' ? 'disabled' : ''}>
+    <label class="trip-sort__btn" for="sort-${sortingType}">${capitalize(sortingType)}</label>
   </div>`;
 
 const createSortingTemplate = () => `
   <form class="trip-events__trip-sort  trip-sort" action="#" method="get">
-    ${sortingTypes.map((sortingType) => createSortingElement(sortingType)).join('')}
+    ${Object.values(SortingType).map((sortingType) => createSortingElement(sortingType)).join('')}
   </form>`;
 
 export default class SortingView extends AbstractView{
+  #handleSortTypeChange;
+
+  constructor ({onSortTypeChange}) {
+    super();
+    this.#handleSortTypeChange = onSortTypeChange;
+    this.element.addEventListener('change', this.#sortTypeChangeHandler);
+  }
+
   get template () {
     return createSortingTemplate();
   }
+
+  #sortTypeChangeHandler = (evt) => {
+    this.#handleSortTypeChange(evt.target.dataset.sortType);
+  };
 }

src/view/trip-point-view.js

@@ -34,7 +34,7 @@ const createScheduleTemplate = (point) => {
       —
       <time class="event__end-time" datetime="${dateTo}">${humanizeDueDate(dateTo, dateFormat.HMM)}</time>
     </p>
-    <p class="event__duration">${findDuration(dateTo, dateFrom)}</p>
+    <p class="event__duration">${findDuration(point)}</p>
     </div>
     <p class="event__price">
       &euro;&nbsp;<span class="event__price-value">${basePrice}</span>
@@ -82,7 +82,7 @@ export default class TripPointView extends AbstractView {
   #onEditClick;
   #handleFavoriteClick;
 
-  constructor(points, destinations, offers, {onEditClick}, {onFavoriteClick}) {
+  constructor(points, destinations, offers, {onEditClick, onFavoriteClick}) {
     super();
     this.points = points;
     this.destinations = destinations;