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

package.json

@@ -16,20 +16,21 @@
     "start": "webpack serve --mode development --open"
   },
   "devDependencies": {
-    "eslint": "8.28.0",
-    "eslint-config-htmlacademy": "8.0.0"
-  },
-  "engines": {
-    "node": "18"
-  },
-  "dependencies": {
     "@babel/core": "7.20.5",
     "@babel/preset-env": "7.20.2",
     "babel-loader": "9.1.0",
     "copy-webpack-plugin": "11.0.0",
+    "eslint": "8.28.0",
+    "eslint-config-htmlacademy": "8.0.0",
     "html-webpack-plugin": "5.6.0",
     "webpack": "5.75.0",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1"
+  },
+  "engines": {
+    "node": "18"
+  },
+  "dependencies": {
+    "dayjs": "1.11.10"
   }
 }

src/const.js

@@ -0,0 +1,14 @@
+const POINT_TYPE = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant'];
+const CITIES = ['Amsterdam', 'Geneva', 'Chamonix', ];
+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.'
+];
+const MIN_PRICE = 100;
+const MAX_PRICE = 5000;
+
+export {POINT_TYPE, CITIES, DESCRIPTIONS, MAX_PRICE, MIN_PRICE};

src/generate-points.js

@@ -0,0 +1,17 @@
+import { createPoint } from './mock/p.js';
+import { createOffer } from './mock/o.js';
+import { createDestination } from './mock/d.js';
+import { POINT_TYPE } from './const';
+import { getRandomArrayElement } from './util.js';
+
+function generatePoint() {
+  const pointType = getRandomArrayElement(POINT_TYPE);
+  const offer = createOffer(pointType);
+  const destination = createDestination();
+  const offersId = Array.from(offer.offers, (x) => x.id);
+  const point = createPoint(pointType, offersId, destination.id);
+  const pointInformation = {point, offer, destination};
+  return pointInformation;
+}
+
+export {generatePoint};

src/main.js

@@ -1,11 +1,16 @@
 import { render } from './render.js';
 import FilterView from './view/filter-view.js';
 import TripEventsPresenter from './presenter/trip-events-presenter.js';
-
+import PointsModel from './model/points-model.js';
+import OffersModel from './model/offers-model.js';
+import DestinationsModel from './model/destinations-model.js';
 
 const tripControlsFilters = document.querySelector('.trip-controls__filters');
 const tripEvents = document.querySelector('.trip-events');
-const tripEventsPresenter = new TripEventsPresenter({tpipEventsContainer : tripEvents});
+const pointsModel = new PointsModel();
+const offersModel = new OffersModel();
+const destinationsModel = new DestinationsModel();
+const tripEventsPresenter = new TripEventsPresenter({tpipEventsContainer : tripEvents, pointsModel, offersModel, destinationsModel});
 
 render(new FilterView(), tripControlsFilters);
 

src/mock/destination.js

@@ -0,0 +1,44 @@
+import { CITIES, DESCRIPTIONS } from '../const.js';
+import { getRandomArrayElement, getRandomInteger } from '../util.js';
+
+const MAX_INT = 1000;
+const MIN_INT = 10;
+
+const destinations = [
+  {
+    id: 'dest1',
+    description: getRandomArrayElement(DESCRIPTIONS),
+    name: getRandomArrayElement(CITIES),
+    pictures: [
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(MIN_INT, MAX_INT)}`,
+        description: 'city description'
+      },
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(MIN_INT, MAX_INT)}`,
+        description: 'city description'
+      }]
+  },
+  {
+    id: 'dest2',
+    description: getRandomArrayElement(DESCRIPTIONS),
+    name: getRandomArrayElement(CITIES),
+    pictures: [
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(MIN_INT, MAX_INT)}`,
+        description: 'city description'
+      }]
+  },
+  {
+    id: 'dest3',
+    description: getRandomArrayElement(DESCRIPTIONS),
+    name: getRandomArrayElement(CITIES),
+    pictures: [
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(MIN_INT, MAX_INT)}`,
+        description: 'city description'
+      }]
+  }
+];
+
+export {destinations};

src/mock/offers.js

@@ -0,0 +1,34 @@
+import { MAX_PRICE, MIN_PRICE } from '../const.js';
+import { getRandomInteger } from '../util.js';
+
+const offers = [
+  {
+    type: 'taxi',
+    offers: [
+      {
+        id: 'of1',
+        title: 'Upgrade',
+        price: getRandomInteger(MIN_PRICE, MAX_PRICE)
+      }]
+  },
+  {
+    type: 'bus',
+    offers: []
+  },
+  {
+    type: 'flight',
+    offers: [
+      {
+        id: 'of2',
+        title: 'Baggage',
+        price: getRandomInteger(MIN_PRICE, MAX_PRICE)
+      },
+      {
+        id: 'of3',
+        title: 'First Class',
+        price: getRandomInteger(MIN_PRICE, MAX_PRICE)
+      }]
+  }
+];
+
+export {offers};

src/mock/points.js

@@ -0,0 +1,46 @@
+import { createId, getRandomInteger, getRandomArrayElement } from '../util.js';
+import { MAX_PRICE, MIN_PRICE } from '../const.js';
+
+const isFavoriteValues = [true, false];
+
+const getPointId = createId();
+
+const points = [
+  {
+    id: getPointId(),
+    basePrice: getRandomInteger(MIN_PRICE, MAX_PRICE),
+    dateFrom: '2019-07-10T11:55:56',
+    dateTo: '2019-07-11T12:22:13',
+    destination: 'dest1',
+    isFavorite: getRandomArrayElement(isFavoriteValues),
+    offers: [
+      'of1'
+    ],
+    type: 'taxi'
+  },
+  {
+    id: getPointId(),
+    basePrice: getRandomInteger(MIN_PRICE, MAX_PRICE),
+    dateFrom: '2019-07-10T22:55:56',
+    dateTo: '2019-07-11T11:22:13',
+    destination: 'dest2',
+    isFavorite: getRandomArrayElement(isFavoriteValues),
+    offers: [],
+    type: 'bus'
+  },
+  {
+    id: getPointId(),
+    basePrice: getRandomInteger(MIN_PRICE, MAX_PRICE),
+    dateFrom: '2019-07-10T22:55:56',
+    dateTo: '2019-07-11T11:22:13',
+    destination: 'dest3',
+    isFavorite: getRandomArrayElement(isFavoriteValues),
+    offers: [
+      'of2',
+      'of3'
+    ],
+    type: 'flight'
+  }
+];
+
+export {points};

src/model/destinations-model.js

@@ -0,0 +1,13 @@
+import { destinations } from '../mock/destination.js';
+
+export default class DestinationsModel {
+  destinations = destinations;
+
+  getDestinations(){
+    return this.destinations;
+  }
+
+  getDestinationById(id){
+    return this.destinations.find((destination) => destination.id === id);
+  }
+}

src/model/offers-model.js

@@ -0,0 +1,13 @@
+import { offers } from '../mock/offers.js';
+
+export default class OffersModel {
+  offers = offers;
+
+  getOffers(){
+    return this.offers;
+  }
+
+  getOfferByType(type){
+    return this.offers.find((offer) => offer.type === type);
+  }
+}

src/model/points-model.js

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

src/presenter/trip-events-presenter.js

@@ -1,6 +1,6 @@
 import SortView from '../view/sort-view.js';
 import ListView from '../view/list-view.js';
-import NewPointView from '../view/new-point-view.js';
+//import NewPointView from '../view/new-point-view.js';
 import EditablePointView from '../view/editable-point-view.js';
 import PointView from '../view/point-view.js';
 
@@ -9,18 +9,31 @@ import {render} from '../render.js';
 export default class TripEventsPresenter {
   listComponent = new ListView();
 
-  constructor({tpipEventsContainer}) {
+  constructor({tpipEventsContainer, pointsModel, offersModel, destinationsModel}) {
     this.tpipEventsContainer = tpipEventsContainer;
+    this.pointsModel = pointsModel;
+    this.offersModel = offersModel;
+    this.destinationsModel = destinationsModel;
   }
 
   init() {
+    this.points = [...this.pointsModel.getPoints()];
+    this.offers = [...this.offersModel.getOffers()];
+    this.destinations = [...this.destinationsModel.getDestinations()];
+
     render(new SortView(), this.tpipEventsContainer);
     render(this.listComponent, this.tpipEventsContainer);
-    render(new EditablePointView, this.listComponent.getElement());
-    render(new NewPointView(), this.listComponent.getElement());
+    const of = this.offersModel.getOfferByType(this.points[0].type);
+    render(new EditablePointView(this.points[0],
+      this.destinationsModel.getDestinationById(this.points[0].destination),
+      of), this.listComponent.getElement());
+    //render(new NewPointView(), this.listComponent.getElement());
 
-    for (let i = 0; i < 3; i++) {
-      render(new PointView(), this.listComponent.getElement());
+    for (let i = 0; i < this.points.length; i++) {
+      const point = this.points[i];
+      const destination = this.destinationsModel.getDestinationById(point.destination);
+      const offer = this.offersModel.getOfferByType(point.type);
+      render(new PointView({point, city: destination.name, offer}), this.listComponent.getElement());
     }
   }
 }

src/util.js

@@ -0,0 +1,26 @@
+import dayjs from 'dayjs';
+
+function formatEventDate(dueDate, dateFormat) {
+  return dueDate ? dayjs(dueDate).format(dateFormat) : '';
+}
+
+function createId() {
+  let lastGeneratedId = 0;
+  return function () {
+    lastGeneratedId += 1;
+    return lastGeneratedId;
+  };
+}
+
+function getRandomInteger(a, b) {
+  const lower = Math.ceil(Math.min(a, b));
+  const upper = Math.floor(Math.max(a, b));
+  const result = Math.random() * (upper - lower + 1) + lower;
+  return Math.floor(result);
+}
+
+const isElementHas = (element) => element.length > 0;
+
+const getRandomArrayElement = (arr) => arr[getRandomInteger(0, arr.length - 1)];
+
+export {createId, getRandomInteger, getRandomArrayElement, formatEventDate, isElementHas};