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

package.json

@@ -16,12 +16,12 @@
     "start": "webpack serve --mode development --open"
   },
   "devDependencies": {
-    "eslint": "8.28.0",
-    "eslint-config-htmlacademy": "8.0.0",
     "@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",
@@ -31,6 +31,6 @@
     "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/d.js

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

src/mock/destination.js

@@ -0,0 +1,60 @@
+import { CITIES, DESCRIPTIONS } from '../const.js';
+import { getRandomArrayElement, getRandomInteger } from '../util.js';
+
+const MAX_INT = 1000;
+const MIN_INT = 10;
+
+// const createDestinationId = createId();
+
+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};
+
+// function createDestinations() {
+//   return {
+//     id: createDestinationId(),
+//     description: getRandomArrayElement(DESCRIPTIONS),
+//     name: getRandomArrayElement(CITIES),
+//     pictures: [
+//       {
+//         src: `https://loremflickr.com/248/152?random=${getRandomInteger(MIN_INT, MAX_INT)}`,
+//         description: getRandomArrayElement(DESCRIPTIONS)
+//       }]
+//   };
+// }
+

src/mock/o.js

@@ -0,0 +1,35 @@
+import { getRandomInteger, createId } from '../util.js';
+import { MAX_PRICE, MIN_PRICE } from '../const.js';
+
+const MAX_OFFER_COUNT = 4;
+const MIN_OFFER_COUNT = 0;
+
+const createOfferId = createId();
+
+function createOffer(type) {
+  return {
+    type,
+    offers:
+      Array.from({length: getRandomInteger(MIN_OFFER_COUNT, MAX_OFFER_COUNT)}, () => ({
+        id: createOfferId(),
+        title: 'Upgrade',
+        price: getRandomInteger(MIN_PRICE, MAX_PRICE)
+      }))
+  };
+}
+
+// function createArrayFromOffersId(offers) {
+//   //const offer = offers.find((elem) => elem.type === type);
+//   const arr = Array.from(offers, (x) => x.id);
+//   return arr;
+// }
+
+// function createOffer() {
+//   return {
+//     id: createOfferId(),
+//     title: 'Upgrade',
+//     price: getRandomInteger(MIN_PRICE, MAX_PRICE)
+//   };
+// }
+
+export {createOffer};

src/mock/offers.js

@@ -0,0 +1,49 @@
+import { MAX_PRICE, MIN_PRICE } from '../const.js';
+import { getRandomInteger } from '../util.js';
+
+// const createOfferId = createId();
+
+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};
+
+// function createDestinations() {
+//   return {
+//     type: getRandomArrayElement(POINT_TYPE),
+//     offers: [
+//       {
+//         id: createOfferId(),
+//         title: 'Upgrade',
+//         price: getRandomInteger(MIN_PRICE, MAX_PRICE)
+//       }]
+//   };
+// }
+

src/mock/p.js

@@ -0,0 +1,21 @@
+import { createId, getRandomInteger, getRandomArrayElement } from '../util.js';
+import { MAX_PRICE, MIN_PRICE } from '../const.js';
+
+const isFavoriteValues = [true, false];
+
+const getPointId = createId();
+
+function createPoint(type, offersId, destinationId) {
+  return {
+    id: getPointId(),
+    basePrice: getRandomInteger(MIN_PRICE, MAX_PRICE),
+    dateFrom: '2019-07-10T22:55:56.845Z',
+    dateTo: '2019-07-11T11:22:13.375Z',
+    destination: destinationId,
+    isFavorite: getRandomArrayElement(isFavoriteValues),
+    offers: offersId,
+    type
+  };
+}
+
+export {createPoint};

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;
+  }
+}