Merge pull request #5 from vvoyage/module2-task1

package.json

@@ -15,9 +15,7 @@
     "copy-webpack-plugin": "11.0.0",
     "eslint": "8.38.0",
     "eslint-config-htmlacademy": "9.0.0",
-    "find-cache-dir": "^5.0.0",
     "html-webpack-plugin": "5.5.1",
-    "pkg-dir": "^8.0.0",
     "webpack": "5.79.0",
     "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.13.3"
@@ -31,5 +29,8 @@
     "not ie <= 11",
     "not op_mini all",
     "not < 0.25%"
-  ]
+  ],
+  "dependencies": {
+    "dayjs": "1.11.9"
+  }
 }

src/const.js

@@ -0,0 +1,39 @@
+const POINTS_COUNT = 5;
+const MSEC_IN_SEC = 1000;
+const SEC_IN_MIN = 60;
+const MIN_IN_HOUR = 60;
+const HOUR_IN_DAY = 24;
+const MAX_PRICE_VALUE = 200;
+const EVENT_TYPES = ['Taxi', 'Bus', 'Train', 'Ship', 'Drive', 'Flight', 'Check-in', 'Sightseeing', 'Restaurant'];
+const CITIES = ['Paris', 'London', 'Chicago', 'Tokio', 'New York', 'Moscow', 'Amsterdam', 'San-Francisco'];
+const DESCCRIPTIONS = [
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt architecto labore atque!',
+  'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem exercitationem culpa, molestias qui eveniet corrupti?',
+  'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, dolorem.',
+  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ad eaque cupiditate praesentium maxime.',
+];
+const DATE_FORMATS = {
+  time: 'HH:mm',
+  shortDate: 'MMM DD',
+  formDateTime: 'DD/MM/YY HH:mm'
+};
+const DURATION_FORMATS = {
+  days: 'DD[D] HH[H] mm[M]',
+  hours: 'HH[H] mm[M]',
+  mins: 'mm[M]'
+};
+
+const MSEC_IN_HOUR = MSEC_IN_SEC * SEC_IN_MIN * MIN_IN_HOUR;
+const MSEC_IN_DAY = MSEC_IN_HOUR * HOUR_IN_DAY;
+
+export {
+  POINTS_COUNT,
+  EVENT_TYPES,
+  MAX_PRICE_VALUE,
+  CITIES,
+  DESCCRIPTIONS,
+  DATE_FORMATS,
+  MSEC_IN_HOUR,
+  MSEC_IN_DAY,
+  DURATION_FORMATS
+};

src/main.js

@@ -5,12 +5,20 @@ import {
 import TripInfoView from './view/trip.js';
 import FiltersView from './view/filter.js';
 import PointsPresenter from './presenter/board-presenter.js';
-
+import PointsModel from './model/event-points-model.js';
+import OffersModel from './model/offers-model.js';
+import DestinationsModel from './model/destinations-model.js';
 const tripMainContainer = document.querySelector('.trip-main');
 const tripEventsContainer = document.querySelector('.trip-events');
 const filtersContainer = tripMainContainer.querySelector('.trip-controls__filters');
+const pointsModel = new PointsModel();
+const offersModel = new OffersModel();
+const destinationsModel = new DestinationsModel();
 const pointsPresenter = new PointsPresenter({
-  tripEventsContainer
+  tripEventsContainer,
+  pointsModel,
+  offersModel,
+  destinationsModel
 });
 
 render(new TripInfoView(), tripMainContainer, RenderPosition.AFTERBEGIN);

src/mock/destinations.js

@@ -0,0 +1,36 @@
+import {
+  DESCCRIPTIONS,
+  CITIES,
+} from '../const.js';
+
+import {
+  incrementCounter,
+  getRandomArrayElement,
+  getRandomPositiveNumber
+} from '../utils.js';
+const MAX_IMAGES_COUNT = 5;
+const START_ID_COUNTER = 1;
+const getCityID = incrementCounter(START_ID_COUNTER);
+
+const setupDestination = () => {
+  const ID = getCityID();
+  return ({
+    id: (ID).toString(),
+    description: getRandomArrayElement(DESCCRIPTIONS),
+    name: CITIES[ID - 1],
+    pictures: Array.from({
+      length: getRandomPositiveNumber(MAX_IMAGES_COUNT)
+    }, () => ({
+      src: `https://loremflickr.com/248/152?${ID}`,
+      description: getRandomArrayElement(DESCCRIPTIONS)
+    }))
+  });
+};
+
+const getDestinations = () => Array.from({
+  length: CITIES.length
+}, setupDestination);
+
+export {
+  getDestinations
+};

src/mock/event-points.js

@@ -0,0 +1,58 @@
+import {
+  EVENT_TYPES,
+  MAX_PRICE_VALUE,
+  CITIES
+} from '../const.js';
+
+import {
+  getRandomArrayElement,
+  getRandomPositiveNumber,
+} from '../utils.js';
+
+const mockEventPoints = [{
+  basePrice: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  dateFrom: '2023-07-10T22:55:56.845Z',
+  dateTo: '2023-07-11T11:22:13.375Z',
+  destination: getRandomPositiveNumber(CITIES.length).toString(),
+  isFavorite: false,
+  offers: ['1', '2'],
+  type: getRandomArrayElement(EVENT_TYPES)
+}, {
+  basePrice: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  dateFrom: '2023-08-03T23:20:56.845Z',
+  dateTo: '2023-08-04T00:50:13.375Z',
+  destination: getRandomPositiveNumber(CITIES.length).toString(),
+  isFavorite: true,
+  offers: ['1'],
+  type: getRandomArrayElement(EVENT_TYPES)
+}, {
+  basePrice: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  dateFrom: '2023-08-06T09:23:56.845Z',
+  dateTo: '2023-08-08T10:42:13.375Z',
+  destination: getRandomPositiveNumber(CITIES.length).toString(),
+  isFavorite: false,
+  offers: [],
+  type: getRandomArrayElement(EVENT_TYPES)
+}, {
+  basePrice: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  dateFrom: '2023-09-10T10:55:56.845Z',
+  dateTo: '2023-09-10T12:22:13.375Z',
+  destination: getRandomPositiveNumber(CITIES.length).toString(),
+  isFavorite: false,
+  offers: ['1', '2'],
+  type: getRandomArrayElement(EVENT_TYPES)
+}, {
+  basePrice: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  dateFrom: '2019-07-13T22:55:56.845Z',
+  dateTo: '2019-07-14T11:22:13.375Z',
+  destination: getRandomPositiveNumber(CITIES.length).toString(),
+  isFavorite: false,
+  offers: ['2'],
+  type: getRandomArrayElement(EVENT_TYPES)
+}];
+
+const getRandomEventPoint = () => getRandomArrayElement(mockEventPoints);
+
+export {
+  getRandomEventPoint
+};

src/mock/offers.js

@@ -0,0 +1,106 @@
+import {
+  MAX_PRICE_VALUE
+} from '../const.js';
+
+import {
+  getRandomPositiveNumber,
+} from '../utils.js';
+
+const mockOffers = [{
+  type: 'taxi',
+  offers: [{
+    id: '1',
+    title: 'Upgrade to a business class',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }, {
+    id: '2',
+    title: 'Drive slowly',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }]
+}, {
+  type: 'bus',
+  offers: [{
+    id: '1',
+    title: 'Order meal',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }, {
+    id: '2',
+    title: 'Choose seats',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }]
+}, {
+  type: 'train',
+  offers: [{
+    id: '1',
+    title: 'Book a taxi at the arrival point',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }, {
+    id: '2',
+    title: 'Choose seats',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }]
+}, {
+  type: 'flight',
+  offers: [{
+    id: '1',
+    title: 'Choose meal',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }, {
+    id: '2',
+    title: 'Choose seats',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }]
+}, {
+  type: 'check-in',
+  offers: [{
+    id: '1',
+    title: 'Choose the time of check-in',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }, {
+    id: '2',
+    title: 'Choose the time of check-out',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }]
+}, {
+  type: 'sightseeing',
+  offers: []
+}, {
+  type: 'ship',
+  offers: [{
+    id: '1',
+    title: 'Upgrade to comfort class',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }, {
+    id: '2',
+    title: 'Upgrade to business class',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }]
+}, {
+  type: 'drive',
+  offers: [{
+    id: '1',
+    title: 'With automatic transmission',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }, {
+    id: '2',
+    title: 'With air conditioning',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }]
+}, {
+  type: 'restaurant',
+  offers: [{
+    id: '1',
+    title: 'Choose live music',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }, {
+    id: '2',
+    title: 'Choose VIP area',
+    price: getRandomPositiveNumber(MAX_PRICE_VALUE),
+  }]
+}];
+
+const getOffers = () => mockOffers;
+
+export {
+  getOffers
+};

src/model/destinations-model.js

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

src/model/event-points-model.js

@@ -0,0 +1,17 @@
+import {
+  getRandomEventPoint,
+} from '../mock/event-points.js';
+
+import {
+  POINTS_COUNT,
+} from '../const.js';
+
+export default class PointsModel {
+  points = Array.from({
+    length: POINTS_COUNT
+  }, getRandomEventPoint);
+
+  getEventPoints() {
+    return this.points;
+  }
+}

src/model/offers-model.js

@@ -0,0 +1,17 @@
+import {
+  getOffers,
+} from '../mock/offers.js';
+
+export default class OffersModel {
+  constructor() {
+    this.offers = getOffers();
+  }
+
+  get() {
+    return this.offers;
+  }
+
+  getByType(type) {
+    return this.offers.find((offers) => offers.type === type.toLowerCase()).offers;
+  }
+}

src/presenter/board-presenter.js

@@ -6,25 +6,37 @@ import EventItemView from '../view/item.js';
 import PointEditorView from '../view/editor-view.js';
 import SortingView from '../view/sort.js';
 
-const POINTS_COUNT = 3;
-
 export default class PointsPresenter {
   listComponent = new EventListView();
   sortingComponent = new SortingView();
 
   constructor({
-    tripEventsContainer
+    tripEventsContainer,
+    pointsModel,
+    offersModel,
+    destinationsModel
   }) {
     this.tripEventsContainer = tripEventsContainer;
+    this.pointsModel = pointsModel;
+    this.offersModel = offersModel;
+    this.destinationsModel = destinationsModel;
   }
 
   init() {
+    this.eventPoints = [...this.pointsModel.getEventPoints()];
+
     render(this.sortingComponent, this.tripEventsContainer);
     render(this.listComponent, this.tripEventsContainer);
     render(new PointEditorView(), this.listComponent.getElement());
 
-    for (let i = 0; i < POINTS_COUNT; i++) {
-      render(new EventItemView(), this.listComponent.getElement());
+    for (let i = 0; i < this.eventPoints.length; i++) {
+      const offers = this.offersModel.getByType(this.eventPoints[i].type);
+      const destination = this.destinationsModel.getById(this.eventPoints[i].destination);
+      render(new EventItemView({
+        eventPoint: this.eventPoints[i],
+        offers,
+        destination
+      }), this.listComponent.getElement());
     }
   }
 }