начинаю поставлять данные

Readme.md

@@ -1,7 +1,7 @@
 # Проект «Большое путешествие»
 
 * Студент: [Марина Торунова](https://up.htmlacademy.ru/ecmascript/21/user/368613).
-* Наставник: `Евгений Лепёшкин`.
+* Наставник: `Анастасия Гущина`.
 
 ---
 

src/data-mocks.js

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { getRandomArrayElement, generateID, getRandomInteger, formatDate } from './utiles';
+import { getRandomArrayElement, generateID, getRandomInteger } from './utiles';
 import { POINT_TYPES, OFFER_TITLES, CITY_DESCRIPTIONS } from './const.js';
 
 const OFFERS = Object.keys(OFFER_TITLES).reduce((acc, type) => {
@@ -32,22 +32,22 @@ const generateDestination = () => {
 
 const generatePoint = () => {
   const type = getRandomArrayElement(POINT_TYPES);
-  const dateFrom = dayjs().add(getRandomInteger(1, 10), 'day');
-  const dateTo = dateFrom.add(getRandomInteger(1, 10), 'day');
   return {
     id: generateID(),
     basePrice: getRandomInteger(500, 2000),
-    dateFrom: formatDate(dateFrom),
-    dateTo: formatDate(dateTo),
-    destination: generateDestination().id,
+    dateFrom: dayjs().add(getRandomInteger(5, 290), 'minutes'),
+    dateTo: dayjs().add(getRandomInteger(300, 5900), 'minutes'),
+    destination: generateDestination().name,
     isFavorite: Boolean(getRandomInteger(0, 1)),
     offers: OFFERS[type].map((offer) => offer.id),
     type
   };
 };
 
-const points = new Array(10).fill().map(generatePoint);
-const destinations = new Array(10).fill().map(generateDestination);
-const offers = POINT_TYPES.map((type) => ({ type, offers: OFFERS[type] }));
+const pointsMock = new Array(10).fill().map(generatePoint);
+const destinationsMock = new Array(10).fill().map(generateDestination);
+const offersMock = POINT_TYPES.map((type) => ({ type, offers: OFFERS[type] }));
 
-export { points, destinations, offers };
+export {pointsMock, destinationsMock, offersMock};
+
+//export { generatePoint, generateDestination, OFFERS};

src/main.js

@@ -1,13 +1,15 @@
 import HeaderMainPresenter from './presenter/header-main-presenter.js';
 import TripEventsPresenter from './presenter/trip-events-presenter.js';
+import PointsModel from './model/points-model.js';
 
 const siteHeaderContainer = document.querySelector('.page-header');
 const siteTripInfo = siteHeaderContainer.querySelector('.trip-main');
 const siteFilterControls = siteHeaderContainer.querySelector('.trip-controls__filters');
 const headerMainPresenter = new HeaderMainPresenter({tripInfoContainer: siteTripInfo, tripFilterContainer: siteFilterControls});
 const siteBodyContainer = document.querySelector('.page-main');
 const siteEventsElement = siteBodyContainer.querySelector('.trip-events');
-const tripEventsPresenter = new TripEventsPresenter({tripEventsContainer: siteEventsElement});
+const pointsModel = new PointsModel;
+const tripEventsPresenter = new TripEventsPresenter({tripEventsContainer: siteEventsElement, pointsModel});
 
 
 headerMainPresenter.init();

src/model/points-model.js

@@ -0,0 +1,11 @@
+import { pointsMock } from '../data-mocks.js';
+
+const POINT_COUNT = 3;
+
+export default class PointsModel {
+  points = pointsMock.slice(0, POINT_COUNT);//Array.from({length: POINT_COUNT}, generatePoint);
+
+  getPoints() {
+    return this.points;
+  }
+}

src/presenter/header-main-presenter.js

@@ -1,6 +1,6 @@
 import FilterView from '../view/filter-view';
 import TripInfoView from '../view/trip-info-view';
-import { render } from '../render.js';
+import { render, RenderPosition } from '../render.js';
 
 export default class HeaderMainPresenter {
   tripFilterComponent = new FilterView();
@@ -12,7 +12,7 @@ export default class HeaderMainPresenter {
   }
 
   init() {
-    render(this.tripInfoComponent, this.tripInfoContainer, 'afterbegin');
-    render(this.tripFilterComponent, this.tripFilterContainer, 'afterbegin');
+    render(this.tripInfoComponent, this.tripInfoContainer, RenderPosition.AFTERBEGIN);
+    render(this.tripFilterComponent, this.tripFilterContainer, RenderPosition.AFTERBEGIN);
   }
 }

src/presenter/trip-events-presenter.js

@@ -9,17 +9,20 @@ export default class TripEventsPresenter {
   tripSortComponent = new SortView();
   tripEventsComponent = new ListView();
 
-  constructor ({tripEventsContainer}) {
+  constructor ({tripEventsContainer, pointsModel}) {
     this.tripEventsContainer = tripEventsContainer;
+    this.pointsModel = pointsModel;
   }
 
   init() {
+    this.tripEventsPoints = [...this.pointsModel.getPoints()];
+
     render(this.tripSortComponent, this.tripEventsContainer);
     render(this.tripEventsComponent, this.tripEventsContainer);
     render(new EditPointView(),this.tripEventsComponent.getElement());
 
-    for (let i = 0; i < 3; i++) {
-      render(new PointView(), this.tripEventsComponent.getElement());
+    for (let i = 0; i < this.tripEventsPoints.length; i++) {
+      render(new PointView({point: this.tripEventsPoints[i]}), this.tripEventsComponent.getElement());
     }
 
     render(new NewPointView(), this.tripEventsComponent.getElement());

src/utiles.js

@@ -1,4 +1,12 @@
 import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+dayjs.extend(duration);
+
+const FormatsDate = {
+  MONTHDAY: 'MMM DD',
+  HOURMIN: 'HH:mm',
+  DMYHM: 'DD/MM/YY HH:mm'
+};
 
 const getRandomInteger = (a = 0, b = 1) => {
   const lower = Math.ceil(Math.min(a, b));
@@ -10,6 +18,17 @@ const getRandomArrayElement = (arr) => arr[getRandomInteger(0, arr.length - 1)];
 
 const generateID = () => Math.random().toString(36).substring(2, 10);
 
-const formatDate = (date) => dayjs(date).format('DD/MM/YY HH:mm');
+const formatDate = (date, neededFormat) => dayjs(date).format(neededFormat);
+
+function formatDuration(startDate, endDate) {
+  const diff = endDate.diff(startDate);
+  const durationObj = dayjs.duration(diff);
+
+  const days = durationObj.days() > 0 ? `${durationObj.format('DD')}D ` : '';
+  const hours = (durationObj.hours() > 0 || days) ? `${durationObj.format('HH')}H ` : '';
+  const minutes = `${durationObj.format('mm')}M`;
+
+  return `${days}${hours}${minutes}`.trim();
+}
 
-export {getRandomInteger, getRandomArrayElement, generateID, formatDate};
+export {getRandomInteger, getRandomArrayElement, generateID, formatDate, formatDuration, FormatsDate};

src/view/point-view.js

@@ -1,24 +1,41 @@
 import {createElement} from '../render.js';
+import { formatDate, FormatsDate } from '../utiles.js';
+import { formatDuration } from '../utiles.js';
+
+function createPointTemplate(point) {
+
+  const {type, destination, basePrice, dateFrom, dateTo, isFavorite} = point;
+
+  const humanizedDateForPoint = formatDate(dateFrom, FormatsDate.MONTHDAY);
+
+  const humanizedTimeFrom = formatDate(dateFrom, FormatsDate.HOURMIN);
+
+  const humanizedTimeTo = formatDate(dateTo, FormatsDate.HOURMIN);
+
+  const humanizedDuration = formatDuration(dateFrom,dateTo);
+
+  const favoriteClassName = isFavorite
+    ? 'event__favorite-btn--active'
+    : '';
 
-function createPointTemplate() {
   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="2019-03-18">${humanizedDateForPoint}</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="img/icons/${type}.png" alt="Event type icon">
       </div>
-      <h3 class="event__title">Taxi Amsterdam</h3>
+      <h3 class="event__title">${type} ${destination}</h3>
       <div class="event__schedule">
         <p class="event__time">
-          <time class="event__start-time" datetime="2019-03-18T10:30">10:30</time>
+          <time class="event__start-time" datetime="2019-03-18T10:30">${humanizedTimeFrom}</time>
           &mdash;
-          <time class="event__end-time" datetime="2019-03-18T11:00">11:00</time>
+          <time class="event__end-time" datetime="2019-03-18T11:00">${humanizedTimeTo}</time>
         </p>
-        <p class="event__duration">30M</p>
+        <p class="event__duration">${humanizedDuration}</p>
       </div>
       <p class="event__price">
-        &euro;&nbsp;<span class="event__price-value">20</span>
+        &euro;&nbsp;<span class="event__price-value">${basePrice}</span>
       </p>
       <h4 class="visually-hidden">Offers:</h4>
       <ul class="event__selected-offers">
@@ -28,7 +45,7 @@ function createPointTemplate() {
           <span class="event__offer-price">20</span>
         </li>
       </ul>
-      <button class="event__favorite-btn event__favorite-btn--active" type="button">
+      <button class="event__favorite-btn ${favoriteClassName}" type="button">
         <span class="visually-hidden">Add to favorite</span>
         <svg class="event__favorite-icon" width="28" height="28" viewBox="0 0 28 28">
           <path d="M14 21l-8.22899 4.3262 1.57159-9.1631L.685209 9.67376 9.8855 8.33688 14 0l4.1145 8.33688 9.2003 1.33688-6.6574 6.48934 1.5716 9.1631L14 21z"/>
@@ -43,8 +60,12 @@ function createPointTemplate() {
 }
 
 export default class PointView {
+  constructor({point}) {
+    this.point = point;
+  }
+
   getTemplate() {
-    return createPointTemplate();
+    return createPointTemplate(this.point);
   }
 
   getElement() {