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

package.json

@@ -29,5 +29,8 @@
   },
   "engines": {
     "node": "18"
+  },
+  "dependencies": {
+    "dayjs": "1.11.6"
   }
 }

src/const.js

@@ -0,0 +1,34 @@
+const POINT_COUNT = 4;
+
+const DESTINATIONS = ['Paris', 'London', 'New York', 'Shanghai', 'Moscow'];
+
+const DESCRIPTIONS = [
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet varius magna, non porta ligula feugiat eget.',
+  'Fusce tristique felis at fermentum pharetra. Aliquam id orci ut lectus varius viverra. Nullam nunc ex, convallis sed finibus eget, sollicitudin eget ante.',
+  'Phasellus eros mauris, condimentum sed nibh vitae, sodales efficitur ipsum.',
+  'Sed blandit, eros vel aliquam faucibus, purus ex euismod diam, eu luctus nunc ante ut dui. Sed sed nisi sed augue convallis suscipit in sed felis.',
+  'Aliquam erat volutpat. Nunc fermentum tortor ac porta dapibus. In rutrum ac purus sit amet tempus.'
+];
+
+const TYPES = ['Taxi', 'Bus', 'Train', 'Ship', 'Drive', 'Flight', 'Check-in', 'Sightseeing', 'Restaurant'];
+
+const DATE_FORMAT = 'MMM D';
+
+const TIME_FORMAT = 'HH:mm';
+
+const HOUR_IN_DAY = 24;
+
+const MINUTES_IN_HOUR = 60;
+
+const DEFAULT_POINT_DATA = {
+  id: null,
+  basePrice: 0,
+  dateFrom: null,
+  dateTo: null,
+  destination: null,
+  isFavorite: false,
+  offers: [],
+  type: 'Flight'
+};
+
+export {POINT_COUNT, DESTINATIONS, DESCRIPTIONS, DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR, TYPES, DEFAULT_POINT_DATA};

src/main.js

@@ -2,10 +2,22 @@ import FilterView from './view/filter-view.js';
 import SortView from './view/sort-view.js';
 import ListPresenter from './presenter/list-presenter.js';
 import {render} from './render.js';
+import PointsModel from './model/points-model.js';
+import DestinationsModel from './model/destinations-model.js';
+import OffersModel from './model/offers-model.js';
 
 const filterContainer = document.querySelector('.trip-controls__filters');
 const sortAndListContainer = document.querySelector('.trip-events');
-const listPresenter = new ListPresenter({container: sortAndListContainer});
+
+const pointsModel = new PointsModel();
+const destinationsModel = new DestinationsModel({pointsModel});
+const offersModel = new OffersModel({pointsModel});
+const listPresenter = new ListPresenter({
+  container: sortAndListContainer,
+  pointsModel: pointsModel,
+  destinationsModel: destinationsModel,
+  offersModel: offersModel
+});
 
 render(new FilterView(), filterContainer);
 render(new SortView(), sortAndListContainer);

src/mock/point.js

@@ -0,0 +1,136 @@
+import {getRandomArrayElement, getRandomArbitrary} from '../utils.js';
+import {DESTINATIONS, DESCRIPTIONS} from '../const.js';
+
+const mockPoints = [
+  {
+    id: 0,
+    basePrice: 1100,
+    dateFrom: '2019-07-10T22:10',
+    dateTo: '2019-07-11T23:00',
+    destination: 0,
+    isFavorite: false,
+    offers: [1, 2],
+    type: 'Train'
+  },
+  {
+    id: 1,
+    basePrice: 120,
+    dateFrom: '2019-07-13T12:00',
+    dateTo: '2019-07-13T12:45',
+    destination: 1,
+    isFavorite: false,
+    offers: [],
+    type: 'Taxi'
+  },
+  {
+    id: 2,
+    basePrice: 75,
+    dateFrom: '2019-07-15T7:55',
+    dateTo: '2019-07-15T14:20',
+    destination: 2,
+    isFavorite: true,
+    offers: [0],
+    type: 'Sightseeing'
+  }
+];
+
+const destinations = [
+  {
+    id: 0,
+    description: getRandomArrayElement(DESCRIPTIONS),
+    name: getRandomArrayElement(DESTINATIONS),
+    pictures: [
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomArbitrary(1, 15)}`,
+        description: 'Beautiful place'
+      },
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomArbitrary(1, 15)}`,
+        description: 'Picture description'
+      }
+    ]
+  },
+  {
+    id: 1,
+    description: getRandomArrayElement(DESCRIPTIONS),
+    name: getRandomArrayElement(DESTINATIONS),
+    pictures: [
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomArbitrary(1, 15)}`,
+        description: 'Some text'
+      },
+    ]
+  },
+  {
+    id: 2,
+    description: getRandomArrayElement(DESCRIPTIONS),
+    name: getRandomArrayElement(DESTINATIONS),
+    pictures: []
+  },
+];
+
+const offers = [
+  {
+    type: 'Taxi',
+    offers: [
+      {
+        id: 0,
+        name: 'Switch to comfort',
+        price: 35
+      }
+    ]
+  },
+  {
+    type: 'Train',
+    offers: [
+      {
+        id: 0,
+        name: 'Switch to comfort',
+        price: 500
+      },
+      {
+        id: 1,
+        name: 'Add luggage',
+        price: 20
+      },
+      {
+        id: 2,
+        name: 'Add breakfast',
+        price: 28
+      }
+    ]
+  },
+  {
+    type: 'Sightseeing',
+    offers: [
+      {
+        id: 0,
+        name: 'Rent a car',
+        price: 280
+      },
+      {
+        id: 1,
+        name: 'Order Uber',
+        price: 100
+      },
+    ]
+  }
+];
+
+function getRandomPoint() {
+  return getRandomArrayElement(mockPoints);
+}
+
+function getDestinationById(id) {
+  return destinations.find((destination) => destination.id === id);
+}
+
+function getOffersByType(type) {
+  return offers.find((offersByType) => offersByType.type === type).offers;
+}
+
+function getOfferById(offersByType, id) {
+  return offersByType.find((offer) => offer.id === id);
+}
+
+export {getRandomPoint, getDestinationById, getOffersByType, getOfferById};

src/model/destinations-model.js

@@ -0,0 +1,13 @@
+import {getDestinationById} from '../mock/point.js';
+
+export default class DestinationsModel {
+  destinations = [];
+
+  getDestinations(points) {
+    for (let i = 0; i < points.length; i++) {
+      this.destinations.push(getDestinationById(points[i].destination));
+    }
+
+    return this.destinations;
+  }
+}

src/model/offers-model.js

@@ -0,0 +1,26 @@
+import {getOffersByType, getOfferById} from '../mock/point.js';
+
+export default class OffersModel {
+  selectedOffersList = [];
+  typesOffersList = [];
+
+  getSelectedOffers(points) {
+    for (let i = 0; i < points.length; i++) {
+      const pointOffers = [];
+      const offersByType = getOffersByType(points[i].type);
+      const offersIdList = points[i].offers;
+      for (let j = 0; j < offersIdList.length; j++){
+        pointOffers.push(getOfferById(offersByType, offersIdList[j]));
+      }
+      this.selectedOffersList.push(pointOffers);
+    }
+    return this.selectedOffersList;
+  }
+
+  getTypesOffers(points) {
+    for (let i = 0; i < points.length; i++) {
+      this.typesOffersList.push(getOffersByType(points[i].type));
+    }
+    return this.typesOffersList;
+  }
+}

src/model/points-model.js

@@ -0,0 +1,10 @@
+import {getRandomPoint} from '../mock/point.js';
+import {POINT_COUNT} from '../const.js';
+
+export default class PointsModel {
+  points = Array.from({length: POINT_COUNT}, getRandomPoint);
+
+  getPoints() {
+    return this.points;
+  }
+}

src/presenter/list-presenter.js

@@ -1,4 +1,3 @@
-import {POINT_COUNT} from '../consts.js';
 import ListView from '../view/list-view.js';
 import EditPointView from '../view/edit-point-view.js';
 import ListPointView from '../view/list-point-view.js';
@@ -7,16 +6,25 @@ import {render} from '../render.js';
 export default class ListPresenter {
   listComponent = new ListView();
 
-  constructor({container}) {
+  constructor({container, pointsModel, destinationsModel, offersModel}) {
     this.container = container;
+    this.pointsModel = pointsModel;
+    this.destinationsModel = destinationsModel;
+    this.offersModel = offersModel;
   }
 
   init() {
+    this.points = [...this.pointsModel.getPoints()];
+    this.destinations = [...this.destinationsModel.getDestinations(this.points)];
+    this.selectedOffers = [...this.offersModel.getSelectedOffers(this.points)];
+    this.typesOffers = [...this.offersModel.getTypesOffers(this.points)];
     render(this.listComponent, this.container);
-    render(new EditPointView(), this.listComponent.getElement());
+    render(new EditPointView({pointData: this.points[0], destinationData: this.destinations[0], offersByType: this.typesOffers[0]}),
+      this.listComponent.getElement());
 
-    for (let i = 0; i < POINT_COUNT; i++) {
-      render(new ListPointView(), this.listComponent.getElement());
+    for (let i = 1; i < this.points.length; i++) {
+      render(new ListPointView({pointData: this.points[i], destinationData: this.destinations[i],
+        selectedOffersData: this.selectedOffers[i]}), this.listComponent.getElement());
     }
   }
 }

src/utils.js

@@ -0,0 +1,41 @@
+import dayjs from 'dayjs';
+import {DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR} from './const';
+
+function humanizeDueDate(dueDate) {
+  return dueDate ? dayjs(dueDate).format(DATE_FORMAT) : '';
+}
+
+function humanizeDueTime(dueDate) {
+  return dueDate ? dayjs(dueDate).format(TIME_FORMAT) : '';
+}
+
+function humanizeDuration(start, end) {
+  const duration = start && end ? dayjs(end).diff(start, 'minute') : '';
+  if (duration === '') {
+    return '';
+  }
+  const minutes = duration % MINUTES_IN_HOUR;
+  let hours = Math.floor(duration / MINUTES_IN_HOUR);
+  let days = 0;
+  if (hours >= HOUR_IN_DAY) {
+    days = Math.floor(hours / HOUR_IN_DAY);
+    hours = hours % HOUR_IN_DAY;
+  }
+  if (days > 0) {
+    return `${days}D ${hours}H ${minutes}M`;
+  } else if (hours > 0) {
+    return `${hours}H ${minutes}M`;
+  } else {
+    return `${minutes}M`;
+  }
+}
+
+function getRandomArrayElement(items) {
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+export {getRandomArrayElement, getRandomArbitrary, humanizeDueDate, humanizeDueTime, humanizeDuration};