feat: 2.10. Шаблонизируй это fix

src/mock/const.js

@@ -1,5 +1,6 @@
 export const DATE_FORMAT = 'MMM D';
 export const TIME_FORMAT = 'HH:mm';
+export const DAY_FOMAT = 'D';
 export const FULL_TIME_FOMAT = 'YYYY-MM-DDTHH:mm';
 export const SLASH_TIME_FOMAT = 'DD/MM/YY HH:mm';
 export const MILLISECONDS_IN_DAY = 86400000;

src/mock/point.js

@@ -1,11 +1,12 @@
-import {getRandomInt, getRandomBulValue} from '../utils.js';
+import {getRandomInt, getRandomBulValue, getDate} from '../utils.js';
 export const generatePoint = (offerType, destinationId, offerIds) => ({
   id: crypto.randomUUID(),
   basePrice: getRandomInt(),
-  dateFrom: '2019-01-10T20:55:56.845Z',
-  dateTo: '2019-01-12T22:55:56.845Z',
+  dateFrom: getDate(false),
+  dateTo: getDate(true),
   destination: destinationId,
   isFavorite: getRandomBulValue(),
   offers: offerIds,
   type: offerType
-});
+}
+);

src/presenter/board-presenter.js

@@ -4,6 +4,7 @@ import SortView from '../view/sort-view.js';
 import NewPointView from '../view/new-point-view.js';
 import EventPointView from '../view/event-point-view.js';
 import EventListView from '../view/event-list-view.js';
+import TripInfoView from '../view/trip-info-view.js';
 
 export default class BoardPresenter {
   constructor({boardContainer, destinationsModel, offersModel, pointsModel}) {
@@ -19,23 +20,28 @@ export default class BoardPresenter {
 
   init(){
     const tripControlFiltersElement = this.boardContainer.querySelector('.trip-controls__filters');
+    const tripInfoElement = this.boardContainer.querySelector('.trip-main');
     const tripEventsElement = this.boardContainer.querySelector('.trip-events');
 
+    render(new TripInfoView({
+      point: this.points,
+      pointDestination: this.destinationsModel.get().map((destination) => destination.name),
+    }), tripInfoElement, 'afterbegin');
     render(new FilterView(), tripControlFiltersElement);
     render(new SortView(), tripEventsElement);
     render(this.eventList, tripEventsElement);
 
     render(new NewPointView({
       point: this.points[0],
-      pointDestination: this.destinationsModel.get(),
-      pointOffers: this.offersModel.get()
+      pointDestination: this.destinationsModel.getById(this.points[0].destination),
+      pointOffers: this.offersModel.getByType(this.points[0].type)
     }),
     this.eventList.getElement());
 
     this.points.slice(1, this.points.length).forEach((point) => {
       render(new EventPointView({
         point: point,
-        pointDestination: this.destinationsModel.getById(point.id),
+        pointDestination: this.destinationsModel.getById(point.destination),
         pointOffers: this.offersModel.getByType(point.type)
       }), this.eventList.getElement());
     }

src/service/mock-service.js

@@ -45,10 +45,10 @@ export default class MockService {
       const hasOffers = getRandomBulValue();
       const offersByType = this.offers.find((offerByType) => offerByType.type === type);
       const offerIds = (hasOffers)
-        ? offersByType.offers.slice(getRandomIntFromRange(0, offersByType.offers.length))
+        ? offersByType.offers.map((offer) => offer.offers.id)
         : [];
 
-      return generatePoint(type, destination, offerIds);
+      return generatePoint(type, destination.id, offerIds);
     });
   }
 }

src/utils.js

@@ -1,12 +1,14 @@
 import dayjs from 'dayjs';
-import {DATE_FORMAT, TIME_FORMAT, FULL_TIME_FOMAT, MILLISECONDS_IN_DAY, MILLISECONDS_IN_HOUR, BooleanValues, SLASH_TIME_FOMAT} from './mock/const';
+import {DAY_FOMAT, DATE_FORMAT, TIME_FORMAT, FULL_TIME_FOMAT, MILLISECONDS_IN_DAY, MILLISECONDS_IN_HOUR, BooleanValues, SLASH_TIME_FOMAT} from './mock/const';
 
 // eslint-disable-next-line no-undef
 const duration = require('dayjs/plugin/duration');
 dayjs.extend(duration);
 
 export const formatToDate = (dueDate) => dueDate ? dayjs(dueDate).format(FULL_TIME_FOMAT) : '';
 
+export const formatToDay = (dueDate) => dueDate ? dayjs(dueDate).format(DAY_FOMAT) : '';
+
 export const formatToTime = (dueDate) => dueDate ? dayjs(dueDate).format(TIME_FORMAT) : '';
 
 export const formatToShortDate = (time) => time ? dayjs(time).format(DATE_FORMAT) : '';
@@ -40,4 +42,28 @@ export const getRandomPictureElement = (city) => ({
   description: `${city} description`
 });
 
+export const Duration = {
+  MIN: 60,
+  HOUR: 10,
+  DAY: 3
+};
+
+export const getDate = (add) => {
+  let date = dayjs().subtract(getRandomIntFromRange(0, Duration.DAY), 'day').toDate();
+
+  const mins = getRandomIntFromRange(0, Duration.MIN);
+  const hours = getRandomIntFromRange(0, Duration.HOUR);
+  const days = getRandomIntFromRange(0, Duration.DAY);
+
+  if (add) {
+    date = dayjs(date)
+      .add(mins, 'minute')
+      .add(hours, 'hour')
+      .add(days, 'days')
+      .toDate();
+  }
+
+  return date;
+};
+
 export const getPicturesArray = (city) => Array.from({length: getRandomIntFromRange(0, 5)}, () => getRandomPictureElement(city));

src/view/event-point-view.js

@@ -2,10 +2,6 @@ import {createElement} from '../render.js';
 import {formatToTime, formatToDate, formatToShortDate, getPointDuration} from '../utils.js';
 import {POINT_EMPTY} from '../mock/const.js';
 
-const isFavoriteShow = (isFavorite) => (isFavorite)
-  ? 'event__favorite-btn--active'
-  : '';
-
 const offerShow = (offersArray) => {
   if (offersArray.length !== 0) {
     let offerElements = '';
@@ -23,16 +19,16 @@ const offerShow = (offersArray) => {
   return '';
 };
 
-const createEventPointTemplate = ({point, pointOffers}) => {
-  const {basePrice, dateFrom, dateTo, isFavorite, type, destination} = point;
+const createEventPointTemplate = ({point, pointDestination, pointOffers}) => {
+  const {basePrice, dateFrom, dateTo, isFavorite, type} = point;
 
   return (`<li class="trip-events__item">
   <div class="event">
     <time class="event__date" datetime="${formatToDate(dateFrom)}">${formatToShortDate(dateFrom)}</time>
     <div class="event__type">
       <img class="event__type-icon" width="42" height="42" src="img/icons/${type}.png" alt="${type} icon">
     </div>
-    <h3 class="event__title">${type} ${destination.name}</h3>
+    <h3 class="event__title">${type} ${pointDestination.name}</h3>
     <div class="event__schedule">
       <p class="event__time">
         <time class="event__start-time" datetime=${formatToDate(dateFrom)}">${formatToTime(dateFrom)}</time>
@@ -48,7 +44,7 @@ const createEventPointTemplate = ({point, pointOffers}) => {
     <ul class="event__selected-offers">
       ${offerShow(pointOffers)}
     </ul>
-    <button class="event__favorite-btn ${isFavoriteShow(isFavorite)}" type="button">
+    <button class="event__favorite-btn ${isFavorite ? 'event__favorite-btn--active' : ''}" 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"></path>
@@ -60,6 +56,7 @@ const createEventPointTemplate = ({point, pointOffers}) => {
   </div>
 </li>`);
 };
+
 export default class EventPointView {
   constructor({point = POINT_EMPTY, pointDestination, pointOffers}) {
     this.point = point;

src/view/new-point-view.js

@@ -1,6 +1,6 @@
 import {createElement} from '../render.js';
 import {formatToSlashDate} from '../utils.js';
-import {POINT_EMPTY} from '../mock/const.js';
+import {POINT_EMPTY, ROUTE_TYPE} from '../mock/const.js';
 
 const getPicrtureArrayElement = (picturesArray) => {
   let tapeElements = '';
@@ -43,16 +43,16 @@ const getEventTypeElements = (typeArray) => {
 
   typeArray.forEach((type) => {
     typeElements += `<div class="event__type-item">
-    <input id="event-type-${type.type.toLowerCase()}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type.type.toLowerCase()}">
-    <label class="event__type-label  event__type-label--${type.type.toLowerCase()}" for="event-type-${type.type.toLowerCase()}-1">${type.type}</label>
+    <input id="event-type-${type.toLowerCase()}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type.toLowerCase()}">
+    <label class="event__type-label  event__type-label--${type.toLowerCase()}" for="event-type-${type.toLowerCase()}-1">${type}</label>
   </div>`;
   });
 
   return typeElements;
 };
 
-const createNewPointTemplate = ({point, pointOffers}) => {
-  const {basePrice, dateFrom, dateTo, offers, type} = point;
+const createNewPointTemplate = ({point, pointDestination, pointOffers}) => {
+  const {basePrice, dateFrom, dateTo, type} = point;
 
   return `<li class="trip-events__item">
   <form class="event event--edit" action="#" method="post">
@@ -67,7 +67,7 @@ const createNewPointTemplate = ({point, pointOffers}) => {
         <div class="event__type-list">
           <fieldset class="event__type-group">
             <legend class="visually-hidden">Event type</legend>
-            ${getEventTypeElements(pointOffers)}
+              ${getEventTypeElements(ROUTE_TYPE)}
           </fieldset>
         </div>
       </div>
@@ -76,7 +76,7 @@ const createNewPointTemplate = ({point, pointOffers}) => {
         <label class="event__label  event__type-output" for="event-destination-1">
           ${type}
         </label>
-        <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${point.destination.name}" list="destination-list-1">
+        <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${pointDestination.name}" list="destination-list-1">
         <datalist id="destination-list-1">
           <option value="Amsterdam"></option>
           <option value="Geneva"></option>
@@ -104,14 +104,14 @@ const createNewPointTemplate = ({point, pointOffers}) => {
       <button class="event__reset-btn" type="reset">Cancel</button>
     </header>
     <section class="event__details">
-          ${getOffersArrayElement(offers)}
+          ${getOffersArrayElement(pointOffers)}
       <section class="event__section  event__section--destination">
         <h3 class="event__section-title  event__section-title--destination">Destination</h3>
-        <p class="event__destination-description">${point.destination.description}</p>
+        <p class="event__destination-description">${pointDestination.description}</p>
 
         <div class="event__photos-container">
           <div class="event__photos-tape">
-            ${getPicrtureArrayElement(point.destination.pictures)}
+            ${getPicrtureArrayElement(pointDestination.pictures)}
           </div>
         </div>
       </section>

src/view/trip-info-view.js

@@ -0,0 +1,51 @@
+import {createElement} from '../render.js';
+import {POINT_EMPTY} from '../mock/const.js';
+import {formatToShortDate, formatToDay} from '../utils.js';
+
+const createDestinationElement = (pointDestination) => {
+  let destinationElements = '';
+
+  pointDestination.forEach((destination) => {
+    destinationElements += `${destination} - `;
+  });
+
+  return destinationElements.slice(0, -2);
+};
+
+const createTripInfoTemplate = ({point, pointDestination}) => (`<section class="trip-main__trip-info  trip-info">
+    <div class="trip-info__main">
+      <h1 class="trip-info__title">${createDestinationElement(pointDestination)}</h1>
+
+      <p class="trip-info__dates">${formatToShortDate(point[0].dateFrom)}&nbsp;—&nbsp;${formatToDay(point[point.length - 1].dateTo)}</p>
+    </div>
+
+    <p class="trip-info__cost">
+      Total: €&nbsp;<span class="trip-info__cost-value">1230</span>
+    </p>
+    </section>`);
+
+export default class TripInfoView {
+  constructor({point = POINT_EMPTY, pointDestination}) {
+    this.point = point;
+    this.pointDestination = pointDestination;
+  }
+
+  getTemplate() {
+    return createTripInfoTemplate({
+      point: this.point,
+      pointDestination: this.pointDestination,
+    });
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}