From f35e73cdcc7d0078f93947c64f4ff7fd4f6009b0 Mon Sep 17 00:00:00 2001
From: Rudovsky Egor <rudovskiy45@mail.ru>
Date: Mon, 15 Apr 2024 20:49:21 +0500
Subject: [PATCH] =?UTF-8?q?5.9.=20=D0=91=D0=BE=D0=BB=D1=8C=D1=88=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D1=8B=20(?=
 =?UTF-8?q?=D1=87=D0=B0=D1=81=D1=82=D1=8C=202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/presenter/trip-events-presenter.js |  9 ++++++---
 src/util.js                            | 16 +++++++++++++++-
 src/view/point-view.js                 | 18 +++++++++++-------
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/presenter/trip-events-presenter.js b/src/presenter/trip-events-presenter.js
index c368880..b47c537 100644
--- 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
index ea75fec..a0e958f 100644
--- 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
index 9da73b3..47c9392 100644
--- 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>