Module2 task1

package.json

@@ -16,13 +16,13 @@
     "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",
-    "html-webpack-plugin": "^5.6.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"
@@ -31,5 +31,6 @@
     "node": "18"
   },
   "dependencies": {
+    "dayjs": "1.11.6"
   }
-}
+}

src/const.js

@@ -0,0 +1,73 @@
+const OFFER_COUNT = 5;
+const DESTINATION_COUNT = 5;
+const POINT_COUNT = 5;
+
+const CITIES = [
+  'Chamonix',
+  'Geneva',
+  'Amsterdam',
+  'Helsinki',
+  'Oslo',
+  'Kopenhagen',
+  'Den Haag',
+  'Rotterdam',
+  'Saint Petersburg',
+  'Moscow',
+  'Sochi',
+  'Tokio',
+];
+
+const OFFERS = [
+  'Order Uber',
+  'Add luggage',
+  'Switch to comfort',
+  'Rent a car',
+  'Add breakfast',
+  'Book tickets',
+  'Lunch in city',
+  'Upgrade to a business class'
+];
+
+const DESCRIPTION = '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.';
+
+const Price = {
+  MIN: 1,
+  MAX: 1000
+};
+
+const TYPES = [
+  'taxi',
+  'bus',
+  'train',
+  'ship',
+  'drive',
+  'flight',
+  'check-in',
+  'sightseeing',
+  'restaurant'
+];
+
+const DEFAULT_TYPE = 'flight';
+
+const POINT_EMPTY = {
+  basePrice: 0,
+  dateFrom: null,
+  dateTo: null,
+  destination: null,
+  isFavorite: false,
+  offers: [],
+  type: DEFAULT_TYPE
+};
+
+export {
+  OFFER_COUNT,
+  DESTINATION_COUNT,
+  POINT_COUNT,
+  CITIES,
+  OFFERS,
+  DESCRIPTION,
+  Price,
+  TYPES,
+  DEFAULT_TYPE,
+  POINT_EMPTY
+}

src/main.js

@@ -2,12 +2,23 @@ import TripInfoView from './view/trip-info-view.js';
 import FilterView from './view/filter-view.js';
 import { render, RenderPosition } from './render.js';
 import TripPresenter from './presenter/trip-presenter.js';
+import MockService from './service/mock-service.js';
+import DestinationsModel from './model/destinations-model.js';
+import OffersModel from './model/offers-model.js';
+import PointsModel from './model/points-model.js';
 
 const tripInfoElement = document.querySelector('.trip-main');
 const siteMainElement = document.querySelector('.page-main');
-const tripPresenter = new TripPresenter(siteMainElement.querySelector('.trip-events'));
+const eventListElement = siteMainElement.querySelector('.trip-events');
+
+const mockService = new MockService();
+const destinationsModel = new DestinationsModel(mockService);
+const offersModel = new OffersModel(mockService);
+const pointsModel = new PointsModel(mockService);
+
+const tripPresenter = new TripPresenter({tripContainer: eventListElement, destinationsModel, offersModel, pointsModel});
 
 render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
 render(new FilterView(), tripInfoElement.querySelector('.trip-controls__filters'));
 
-tripPresenter.init();
+tripPresenter.init();

src/mock/destination.js

@@ -0,0 +1,18 @@
+import { getRandomValue, getRandomInteger } from '../utils.js';
+import { CITIES, DESCRIPTION } from '../const.js';
+
+function generateDestination () {
+  const city = getRandomValue(CITIES);
+
+  return {
+    id: crypto.randomUUID(),
+    description: DESCRIPTION,
+    name: city,
+    pictures: Array.from({ length: getRandomInteger(1, 5) }, () => ({
+      'src': `https://loremflickr.com/248/152?random=${crypto.randomUUID()}`,
+      'description': `${city} description`
+    }))
+  };
+}
+
+export { generateDestination };

src/mock/offer.js

@@ -0,0 +1,14 @@
+import { OFFERS, Price } from '../const.js';
+import { getRandomInteger, getRandomValue } from '../utils.js';
+
+function generateOffer() {
+  const offer = getRandomValue(OFFERS);
+
+  return {
+    id: crypto.randomUUID(),
+    title: offer,
+    price: getRandomInteger(Price.MIN, (Price.MAX / 10))
+  };
+}
+
+export { generateOffer };

src/mock/point.js

@@ -0,0 +1,17 @@
+import { Price } from '../const.js';
+import { getRandomInteger, getDate } from '../utils.js';
+
+function generatePoint (type, destinationId, offerIds) {
+  return {
+    id: crypto.randomUUID(),
+    basePrice: getRandomInteger(Price.MIN, Price.MAX),
+    dateFrom: getDate({ next: false }),
+    dateTo: getDate({ next: true }),
+    destination: destinationId,
+    isFavorite: getRandomInteger(0, 1),
+    offers: offerIds,
+    type
+  };
+}
+
+export { generatePoint };

src/model/destinations-model.js

@@ -0,0 +1,14 @@
+export default class DestinationsModel {
+  constructor(service) {
+    this.service = service;
+    this.destinations = this.service.getDestinations();
+  }
+
+  get() {
+    return this.destinations;
+  }
+
+  getById(id) {
+    return this.destinations.find((destination) => destination.id === id);
+  }
+}

src/model/offers-model.js

@@ -0,0 +1,14 @@
+export default class OffersModel {
+  constructor(service) {
+    this.service = service;
+    this.offers = this.service.getOffers();
+  }
+
+  get() {
+    return this.offers;
+  }
+
+  getByType(type) {
+    return this.offers.find((offer) => offer.type === type);
+  }
+}

src/model/points-model.js

@@ -0,0 +1,10 @@
+export default class PointsModel {
+  constructor(service) {
+    this.service = service;
+    this.points = this.service.getPoints();
+  }
+
+  get() {
+    return this.points;
+  }
+}

src/presenter/trip-presenter.js

@@ -5,18 +5,37 @@ import TripView from '../view/point-list-view.js';
 import { render } from '../render.js';
 
 export default class TripPresenter {
-    constructor(tripContainer) {
-        this.tripContainer = tripContainer;
-        this.pointList = new TripView();
-    }
+  constructor({tripContainer, destinationsModel, offersModel, pointsModel}) {
+    this.tripContainer = tripContainer;
+    this.pointList = new TripView();
+    this.destinationsModel = destinationsModel;
+    this.offersModel = offersModel;
+    this.pointsModel = pointsModel;
+    this.points = [...pointsModel.get()];
+  }
 
-    init() {
-        render(new SortView(), this.tripContainer);
-        render(this.pointList, this.tripContainer);
-        render(new EditPointView(), this.pointList.getElement());
+  init() {
+    render(new SortView(), this.tripContainer);
+    render(this.pointList, this.tripContainer);
+    render(
+      new EditPointView({
+        point: this.points[0],
+        pointDestination: this.destinationsModel.getById(this.points[0].destination),
+        pointOffers: this.offersModel.getByType(this.points[0].type),
+      }),
+      this.pointList.getElement()
+    );
 
-        for (let i = 0; i < 3; i++) {
-            render(new PointView(), this.pointList.getElement());
-        }
+    for (let i = 1; i < this.points.length; i++) {
+      const point = this.points[i];
+      render(
+        new PointView({
+          point,
+          pointDestination: this.destinationsModel.getById(point.destination),
+          pointOffers: this.offersModel.getByType(point.type)
+        }),
+        this.pointList.getElement()
+      );
     }
-}
+  }
+}

src/service/mock-service.js

@@ -0,0 +1,60 @@
+import { generateDestination } from '../mock/destination.js';
+import { generateOffer } from '../mock/offer.js';
+import { generatePoint } from '../mock/point.js';
+
+import { getRandomInteger, getRandomValue } from '../utils.js';
+import { DESTINATION_COUNT, OFFER_COUNT, POINT_COUNT, TYPES } from '../const.js';
+
+export default class MockService {
+  destinations = [];
+  offers = [];
+  points = [];
+
+  constructor() {
+    this.destinations = this.generateDestinations();
+    this.offers = this.generateOffers();
+    this.points = this.generatePoints();
+  }
+
+  getDestinations() {
+    return this.destinations;
+  }
+
+  generateOffers() {
+    return TYPES.map((type) => ({
+      type,
+      offers: Array.from({ length: getRandomInteger(0, OFFER_COUNT) }, () => generateOffer(type))
+    }));
+  }
+
+  generatePoints() {
+    return Array.from({ length: POINT_COUNT }, () => {
+      const type = getRandomValue(TYPES);
+      const destination = getRandomValue(this.destinations);
+      const hasOffers = getRandomInteger(0, 1);
+      const offersByType = this.offers.find((offerByType) => offerByType.type === type);
+      const offerIds = (hasOffers)
+        ? offersByType.offers
+          .slice(0, getRandomInteger(0, OFFER_COUNT))
+          .map((offer) => offer.id)
+        : [];
+
+      return generatePoint(type, destination.id, offerIds);
+    });
+  }
+
+  getOffers() {
+    return this.offers;
+  }
+
+  getPoints() {
+    return this.points;
+  }
+
+  generateDestinations() {
+    return Array.from(
+      { length: DESTINATION_COUNT },
+      () => generateDestination()
+    );
+  }
+}