Шаблонизируй это

package.json

@@ -22,5 +22,8 @@
   },
   "engines": {
     "node": "20"
+  },
+  "dependencies": {
+    "dayjs": "1.11.7"
   }
 }

src/main.js

@@ -1,8 +1,9 @@
 import {RenderPosition, render} from './render.js';
+import ListPresenter from './presenter/list-presenter.js';
+import EventModel from './model/event-model.js';
 import SectionTripInfoView from './view/section-trip-info-view.js';
 import NewEventButtonView from './view/new-event-button-view.js';
 import TripFiltersFormView from './view/trip-filters-form-view.js';
-import ListPresenter from './presenter/list-presenter.js';
 
 
 const tripMain = document.querySelector('.trip-main');
@@ -13,9 +14,10 @@ render(new SectionTripInfoView(), tripMain, RenderPosition.AFTERBEGIN); // За
 render(new NewEventButtonView(), tripMain); // Заголовок, кнопка добавить событие
 render (new TripFiltersFormView(), tripControlsFilters); // Кнопки сортировки
 
-
+const eventModel = new EventModel();
 const listPresenter = new ListPresenter({
-  listContainer: tripEventsElement
+  listContainer: tripEventsElement,
+  eventModel,
 });
 
 listPresenter.init();

src/mock/event.js

@@ -0,0 +1,149 @@
+import { getRandomArrayElement } from '../utils';
+
+const offers = [
+  {
+    title: 'Order Uber',
+    price: 20,
+  },
+  {
+    title: 'Add luggage',
+    price: 50,
+  },
+  {
+    title: 'Switch to comfort',
+    price: 80,
+  },
+  {
+    title: 'Rent a car',
+    price: 200,
+  },
+  {
+    title: 'Add breakfast',
+    price: 50,
+  },
+  {
+    title: 'Book tickets',
+    price: 40,
+  },
+  {
+    title: 'Lunch in city',
+    price: 30,
+  },
+];
+
+const typePoint = [
+  {
+    type: 'Taxi',
+    img: './img/icons/taxi.png',
+    price: 20,
+  },
+  {
+    type: 'Bus',
+    img: './img/icons/bus.png',
+    price: 10,
+  },
+  {
+    type: 'Train',
+    img: './img/icons/train.png',
+    price: 15,
+  },
+  {
+    type: 'Ship',
+    img: './img/icons/ship.png',
+    price: 120,
+  },
+  {
+    type: 'Drive',
+    img: './img/icons/drive.png',
+    price: 160,
+  },
+  {
+    type: 'Flight',
+    img: './img/icons/flight.png',
+    price: 160,
+  },
+  {
+    type: 'Check-in',
+    img: './img/icons/check-in.png',
+    price: 600,
+  },
+  {
+    type: 'Sightseeing',
+    img: './img/icons/sightseeing.png',
+    price: 50,
+  },
+  {
+    type: 'Restaurant',
+    img: './img/icons/restaurant.png',
+    price: 200,
+  },
+];
+
+const destination = [
+  {
+    title: 'Chamonix',
+    description: 'Chamonix-Mont-Blanc (usually shortened to Chamonix) is a resort area near the junction of France, Switzerland and Italy. At the base of Mont Blanc, the highest summit in the Alps, it\'s renowned for its skiing.',
+    photo: [],
+  },
+  {
+    title: 'Amsterdam',
+    description: 'Amsterdam fans out south from the Amsterdam Centraal station and Damrak, the main street off the station. The oldest area of the town is known as De Wallen (English: "The Quays"). It lies to the east of Damrak and contains the city\'s famous red-light district. To the south of De Wallen is the old Jewish quarter of Waterlooplein.',
+    photo: [],
+  },
+  {
+    title: 'Geneva',
+    description: 'Geneva is a city in Switzerland that lies at the southern tip of expansive Lac Léman (Lake Geneva). Surrounded by the Alps and Jura mountains, the city has views of dramatic Mont Blanc.',
+    photo: ['img/photos/1.jpg', 'img/photos/2.jpg', 'img/photos/3.jpg', 'img/photos/4.jpg', 'img/photos/5.jpg',],
+  },
+];
+
+
+const mockEvents = [
+  {
+    title: `${typePoint[0].type}  ${destination[1].title}`,
+    icon: `${typePoint[0].img}`,
+    price: typePoint[0].price,
+    eventStartTime: new Date('2019-03-18T10:30'),
+    eventEndtTime: new Date('2019-03-18T11:00'),
+    offers: [offers[0],],
+    isFavorite: true,
+  },
+  {
+    title: `${typePoint[5].type} ${destination[0].title}`,
+    icon: `${typePoint[5].img}`,
+    price: typePoint[5].price,
+    eventStartTime: new Date('2019-03-18T12:25'),
+    eventEndtTime: new Date('2019-03-18T13:35'),
+    offers: [offers[1], offers[2],],
+    isFavorite: false,
+  },
+  {
+    title: `${typePoint[4].type} ${destination[0].title}`,
+    icon: `${typePoint[4].img}`,
+    price: typePoint[4].price,
+    eventStartTime: new Date('2019-03-18T14:30'),
+    eventEndtTime: new Date('2019-03-18T16:05'),
+    offers: [offers[3],],
+    isFavorite: true,
+  },
+  {
+    title: `${typePoint[6].type} ${destination[0].title}`,
+    icon: `${typePoint[6].img}`,
+    price: typePoint[6].price,
+    eventStartTime: new Date('2019-03-18T10:30'),
+    eventEndtTime: new Date('2019-03-18T11:00'),
+    offers: [offers[0],],
+    isFavorite: true,
+  },
+];
+
+/**
+ * Returns a random event from mockEvents array.
+ * @returns {Object} - Random event.
+ */
+function getRandomEvent() {
+  return getRandomArrayElement(mockEvents);
+}
+
+
+export {getRandomEvent};

src/model/event-model.js

@@ -0,0 +1,11 @@
+import {getRandomEvent} from '../mock/event.js';
+
+const EVENT_COUNT = 4;
+
+export default class EventModel {
+  event = Array.from({length: EVENT_COUNT}, getRandomEvent);
+
+  getEvents() {
+    return this.event;
+  }
+}

src/presenter/list-presenter.js

@@ -2,28 +2,29 @@ import { render } from '../render.js';
 
 import SortButtonView from '../view/sort-view.js';
 import TripEventListView from '../view/trip-events-list-view.js';
-import TripEventItemView from '../view/trip-events-item-view.js';
+import EventItemView from '../view/event-item-view.js';
 import AddNewPointView from '../view/add-new-point-view.js';
 import EditPointView from '../view/edit-poit-view.js';
 import TripEventsMessage from '../view/trip-events-message-view.js';
 
 export default class ListPresenter {
-
   listComponent = new TripEventListView();
 
-  constructor({ listContainer }) {
+  constructor({ listContainer, eventModel }) {
     this.listContainer = listContainer;
+    this.eventModel = eventModel;
   }
 
   init() {
+    this.listEvents = [...this.eventModel.getEvents()];
+
     render(new SortButtonView(), this.listContainer);
-    render(new TripEventItemView(), this.listContainer);
     render(new AddNewPointView(), this.listContainer);
     render(new EditPointView(), this.listContainer);
     render(this.listComponent, this.listContainer);
 
-    for (let i = 0; i < 3; i++) { // Создание элементов в списке
-      render (new TripEventItemView(), this.listComponent.getElement());
+    for (let i = 0; i < this.listEvents.length; i++) { // Создание элементов в списке
+      render (new EventItemView({event: this.listEvents[i]}), this.listComponent.getElement());
     }
 
     render(new TripEventsMessage(), this.listContainer);

src/render.js

@@ -5,13 +5,27 @@ const RenderPosition = {
   AFTEREND: 'afterend',
 };
 
+/**
+ * Creates an HTML-element based on given template-string.
+ *
+ * @param {string} template - Template-string for new element.
+ * @returns {HTMLElement} - Created element.
+ */
 function createElement(template) {
   const newElement = document.createElement('div');
   newElement.innerHTML = template;
 
   return newElement.firstElementChild;
 }
 
+/**
+ * Render component in container on given position.
+ *
+ * @param {Object} component - Component to be rendered.
+ * @param {HTMLElement} container - Container where component will be rendered.
+ * @param {string} [place=RenderPosition.BEFOREEND] - Place where component will be rendered.
+ * @return {void}
+ */
 function render(component, container, place = RenderPosition.BEFOREEND) {
   container.insertAdjacentElement(place, component.getElement());
 }

src/utils.js

@@ -0,0 +1,35 @@
+import dayjs from 'dayjs';
+
+/**
+ * Returns a random element from the given array.
+ * @param {Array} items - Array of any type of elements.
+ * @returns {any} - Random element from the array.
+ */
+function getRandomArrayElement(items) {
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+const DATE_FORMAT = 'MMM DD';
+const TIME_FORMAT = 'HH:mm';
+
+/**
+ * Returns a humanized representation of a given due date.
+ * @param {string} dueDate - Due date in ISO format.
+ * @returns {string} - Humanized representation of given due date, or empty string if due date is not given.
+ */
+function humanizeEventDate(eventDate, format) {
+  if (format === 'date') {
+    return eventDate ? dayjs(eventDate).format(DATE_FORMAT).toUpperCase() : '';
+  }
+  return eventDate ? dayjs(eventDate).format(TIME_FORMAT).toUpperCase() : '';
+}
+
+function diffTime(startTime, endTime) {
+  let time = dayjs(endTime).diff(startTime, 'm');
+  if (time > 60) {
+    time = `${Math.floor(time / 60)}H ${time % 60}M`;
+  }
+  return time;
+}
+
+export {getRandomArrayElement, humanizeEventDate, diffTime};

src/view/trip-events-item-view.js → src/view/event-item-view.js

@@ -1,30 +1,38 @@
 import {createElement} from '../render.js';
+import {humanizeEventDate, diffTime} from '../utils.js';
 
-function createTripEventItemTemplate() {
-  return `<li class="trip-events__item">
+function createEventItemTemplate(event) {
+  const {title, icon, price, eventStartTime, eventEndtTime, offers} = event;
+
+  const date = humanizeEventDate(eventStartTime, 'date');
+  const startTime = humanizeEventDate(eventStartTime);
+  const endTime = humanizeEventDate(eventEndtTime);
+
+  return (
+    `<li class="trip-events__item">
               <div class="event">
-                <time class="event__date" datetime="2019-03-18">MAR 18</time>
+                <time class="event__date" datetime="${eventStartTime}">${date}</time>
                 <div class="event__type">
-                  <img class="event__type-icon" width="42" height="42" src="img/icons/taxi.png" alt="Event type icon">
+                  <img class="event__type-icon" width="42" height="42" src="${icon}" alt="Event type icon">
                 </div>
-                <h3 class="event__title">Taxi Amsterdam</h3>
+                <h3 class="event__title">${title}</h3>
                 <div class="event__schedule">
                   <p class="event__time">
-                    <time class="event__start-time" datetime="2019-03-18T10:30">10:30</time>
+                    <ime class="event__start-time" datetime="${eventStartTime}">${startTime}</time>
                     —
-                    <time class="event__end-time" datetime="2019-03-18T11:00">11:00</time>
+                    <time class="event__end-time" datetime="${eventEndtTime}">${endTime}</time>
                   </p>
-                  <p class="event__duration">30M</p>
+                  <p class="event__duration">${diffTime(eventStartTime, eventEndtTime)}</p>
                 </div>
                 <p class="event__price">
-                  €&nbsp;<span class="event__price-value">20</span>
+                  €&nbsp;<span class="event__price-value">${price}</span>
                 </p>
                 <h4 class="visually-hidden">Offers:</h4>
                 <ul class="event__selected-offers">
                   <li class="event__offer">
-                    <span class="event__offer-title">Order Uber</span>
+                    <span class="event__offer-title">${offers.map((element) => element.title)}</span>
                     +€&nbsp;
-                    <span class="event__offer-price">20</span>
+                    <span class="event__offer-price">${offers.map((element) => element.price)}</span>
                   </li>
                 </ul>
                 <button class="event__favorite-btn event__favorite-btn--active" type="button">
@@ -37,12 +45,17 @@ function createTripEventItemTemplate() {
                   <span class="visually-hidden">Open event</span>
                 </button>
               </div>
-            </li>`;
+            </li>`
+  );
 }
 
-export default class TripEventItemView {
+export default class EventItemView {
+  constructor({event}) {
+    this.event = event;
+  }
+
   getTemplate() {
-    return createTripEventItemTemplate();
+    return createEventItemTemplate(this.event);
   }
 
   getElement() {