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

htmlacademy-univer-js2 · Apr 15, 2024 · f35e73c · f35e73c
1 parent c7f2a52
commit f35e73c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/src/presenter/trip-events-presenter.js b/src/presenter/trip-events-presenter.js
@@ -3,8 +3,9 @@ import ListView from '../view/list-view.js';
 import FilterView from '../view/filter-view.js';
 import ListEmptyView from '../view/list-empty-view.js';
 import TripPointPresenter from './trip-point-presenter.js';
-import { render} from '../framework/render.js';
-import { LIST_EMPTY_TEXT } from '../const.js';
+import {render} from '../framework/render.js';
+import {LIST_EMPTY_TEXT} from '../const.js';
+import { calculateDateDifference } from '../util.js';
 
 
 export default class TripEventsPresenter {
@@ -62,7 +63,9 @@ export default class TripEventsPresenter {
         this.#renderPoints(this.#points);
         break;
       case 'time':
-        // code block
+        this.#points.sort((a, b) =>
+          calculateDateDifference(b.dateTo, b.dateFrom) - calculateDateDifference(a.dateTo, a.dateFrom));
+        this.#renderPoints(this.#points);
         break;
       case 'price':
         this.#points.sort((a, b) => a.basePrice - b.basePrice);

diff --git a/src/util.js b/src/util.js
@@ -4,6 +4,13 @@ function formatEventDate(dueDate, dateFormat) {
   return dueDate ? dayjs(dueDate).format(dateFormat) : '';
 }
 
+function formatEventDuration(diff) {
+  const hours = Math.floor(diff / 60);
+  const minutes = diff % 60;
+
+  return hours === 0 ? `${minutes}M` : `${hours}H ${minutes}M`;
+}
+
 function createId() {
   let lastGeneratedId = 0;
   return function () {
@@ -19,10 +26,17 @@ function getRandomInteger(a, b) {
   return Math.floor(result);
 }
 
+function calculateDateDifference(start, end) {
+  start = dayjs(start);
+  end = dayjs(end);
+
+  return end.diff(start, 'minute');
+}
+
 const isElementHas = (element) => element.length > 0;
 
 const getRandomArrayElement = (arr) => arr[getRandomInteger(0, arr.length - 1)];
 
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-export {createId, getRandomInteger, getRandomArrayElement, formatEventDate, isElementHas, isEscapeKey};
+export {createId, getRandomInteger, getRandomArrayElement, formatEventDate, isElementHas, isEscapeKey, calculateDateDifference, formatEventDuration};
diff --git a/src/view/point-view.js b/src/view/point-view.js
@@ -1,25 +1,29 @@
 import AbstractView from '../framework/view/abstract-view.js';
-import { formatEventDate, isElementHas } from '../util.js';
+import { formatEventDate, isElementHas, calculateDateDifference, formatEventDuration } from '../util.js';
 
 const DATE_FORMAT = 'MMM D';
 const TIME_FORMAT = 'HH:mm';
 
 function createPointTemplate(point, city, offer) {
+  const dateFrom = point.dateFrom;
+  const dateTo = point.dateTo;
+  const type = point.type;
+
   return(
     `<li class="trip-events__item">
       <div class="event">
-        <time class="event__date" datetime="${point.dateFrom}">${formatEventDate(point.dateFrom, DATE_FORMAT)}</time>
+        <time class="event__date" datetime="${dateFrom}">${formatEventDate(dateFrom, DATE_FORMAT)}</time>
         <div class="event__type">
-          <img class="event__type-icon" width="42" height="42" src="img/icons/${point.type}.png" alt="Event type icon">
+          <img class="event__type-icon" width="42" height="42" src="img/icons/${type}.png" alt="Event type icon">
         </div>
-        <h3 class="event__title">${point.type} ${city}</h3>
+        <h3 class="event__title">${type} ${city}</h3>
         <div class="event__schedule">
           <p class="event__time">
-            <time class="event__start-time" datetime="${point.dateFrom}">${formatEventDate(point.dateFrom, TIME_FORMAT)}</time>
+            <time class="event__start-time" datetime="${dateFrom}">${formatEventDate(dateFrom, TIME_FORMAT)}</time>
             &mdash;
-            <time class="event__end-time" datetime="${point.dateTo}">${formatEventDate(point.dateTo, TIME_FORMAT)}</time>
+            <time class="event__end-time" datetime="${dateTo}">${formatEventDate(dateTo, TIME_FORMAT)}</time>
           </p>
-          <p class="event__duration"></p>
+          <p class="event__duration">${formatEventDuration(calculateDateDifference(dateFrom, dateTo))}</p>
         </div>
         <p class="event__price">
           &euro;&nbsp;<span class="event__price-value">${point.basePrice}</span>