Merge pull request #5 from NikitaBystritsky/module2-task1

package.json

@@ -27,6 +27,7 @@
     "@babel/preset-env": "^7.26.0",
     "babel-loader": "^9.2.1",
     "copy-webpack-plugin": "^12.0.2",
+    "dayjs": "^1.11.13",
     "html-webpack-plugin": "^5.6.3",
     "webpack": "^5.79.0",
     "webpack-cli": "^5.0.1",

src/main.js

@@ -1,6 +1,19 @@
-import BoardPresenter from './presenter/board-presenter';
+import BoardPresenter from './presenter/board-presenter.js';
+import DestinationModel from './model/destination-model.js';
+import OfferModel from './model/offers-model.js';
+import PointModel from './model/point-model.js';
+import MockService from './service/mock-service.js';
 
 const bodyElement = document.querySelector('body');
-const boardPresenterElement = new BoardPresenter({boardContainer: bodyElement});
+const mockService = new MockService();
+const destinationsModel = new DestinationModel(mockService);
+const pointsModel = new PointModel(mockService);
+const offersModel = new OfferModel(mockService);
+const boardPresenterElement = new BoardPresenter({
+  boardContainer: bodyElement,
+  destinationsModel,
+  offersModel,
+  pointsModel
+});
 
 boardPresenterElement.init();

src/mock/const.js

@@ -0,0 +1,78 @@
+export const DATE_FORMAT = 'MMM D';
+export const TIME_FORMAT = 'HH:mm';
+export const FULL_TIME_FOMAT = 'YYYY-MM-DDTHH:mm';
+export const SLASH_TIME_FOMAT = 'DD/MM/YY HH:mm';
+export const MILLISECONDS_IN_DAY = 86400000;
+export const MILLISECONDS_IN_HOUR = 3600000;
+export const DESTINATION_COUNT = 4;
+export const POINT_COUNT = 4;
+export const OFFER_COUNT = 7;
+export const BooleanValues = [
+  true,
+  false
+];
+export const POINT_EMPTY = {
+  basePrice: 0,
+  dateFrom: null,
+  dateTo: null,
+  destination: null,
+  ifFavorite: false,
+  offers: [],
+  type: 'flight',
+};
+export const DESCRIPTION = [
+  'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.',
+  'Aenean commodo ligula eget dolor. Aenean mass',
+  'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+  'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.',
+  'Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.',
+  'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. '
+];
+export const OFFERS = [
+  'Close But No Cigar',
+  'On the Same Page',
+  'Jaws of Death',
+  'Every Cloud Has a Silver Lining',
+  'Jig Is Up',
+  'In a Pickle',
+  'What Goes Up Must Come Down',
+  'Break The Ice',
+  'In the Red',
+];
+export const ROUTE_TYPE = [
+  'Taxi',
+  'Bus',
+  'Train',
+  'Ship',
+  'Drive',
+  'Flight',
+  'Check-in',
+  'Sightseeing',
+  'Restaurant'
+];
+export const CITIES = [
+  'Salisbury',
+  'Kingston upon Hull',
+  'Ripon',
+  'Liverpool',
+  'Carlisle',
+  'Oxford',
+  'Manchester',
+  'Chelmsford',
+  'Carlisle'
+];
+export const DATES = [
+  '2019-07-10T22:55:56.845Z',
+  '2019-07-11T22:55:56.845Z',
+  '2019-07-12T22:55:56.845Z',
+  '2019-07-13T22:55:56.845Z',
+  '2019-07-14T22:55:56.845Z'
+];
+export const id = [
+  'zpJruf3vmWw-8MUyZPWx',
+  'stg9-c9zrK0pu2n99OUe',
+  'YT-SMjFHc7S_uEnU61Th',
+  '-gDk1GeiUafeZJJQ-dpE',
+  'QqbAXKJ_Couc3bhn-ba8',
+  'bcpicZLm9rLOUZ85Y4M_'
+];

src/mock/destination.js

@@ -0,0 +1,11 @@
+import {getRandomArrayElement, getPicturesArray} from '../utils.js';
+import {CITIES, DESCRIPTION} from './const.js';
+export const generateDestination = () => {
+  const city = getRandomArrayElement(CITIES);
+  return {
+    id: crypto.randomUUID(),
+    description: getRandomArrayElement(DESCRIPTION),
+    name: city,
+    pictures: getPicturesArray(city)
+  };
+};

src/mock/offer.js

@@ -0,0 +1,10 @@
+import {getRandomArrayElement, getRandomInt} from '../utils.js';
+import {OFFERS} from './const.js';
+export const generateOffer = () => ({
+  offers:
+    {
+      id: crypto.randomUUID(),
+      title: getRandomArrayElement(OFFERS),
+      price: getRandomInt()
+    }
+});

src/mock/point.js

@@ -0,0 +1,11 @@
+import {getRandomInt, getRandomBulValue} from '../utils.js';
+export const generatePoint = (offerType, destinationId, offerIds) => ({
+  id: crypto.randomUUID(),
+  basePrice: getRandomInt(),
+  dateFrom: '2019-01-10T20:55:56.845Z',
+  dateTo: '2019-01-12T22:55:56.845Z',
+  destination: destinationId,
+  isFavorite: getRandomBulValue(),
+  offers: offerIds,
+  type: offerType
+});

src/model/destination-model.js

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

src/model/offers-model.js

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

src/model/point-model.js

@@ -0,0 +1,13 @@
+export default class PointModel {
+  constructor(service) {
+    this.points = service.getPoints();
+  }
+
+  get() {
+    return this.points;
+  }
+
+  getById(id) {
+    return this.points.find((points) => points.id === id);
+  }
+}

src/presenter/board-presenter.js

@@ -1,15 +1,18 @@
-import {render} from '../render';
-import FilterView from '../view/filter-view';
-import SortView from '../view/sort-view';
-import NewPointView from '../view/new-point-view';
-import PointListView from '../view/event-point-view';
-import EventListView from '../view/event-list-view';
-
-const POINT_COUNT = 3;
+import {render} from '../render.js';
+import FilterView from '../view/filter-view.js';
+import SortView from '../view/sort-view.js';
+import NewPointView from '../view/new-point-view.js';
+import EventPointView from '../view/event-point-view.js';
+import EventListView from '../view/event-list-view.js';
 
 export default class BoardPresenter {
-  constructor({boardContainer}) {
+  constructor({boardContainer, destinationsModel, offersModel, pointsModel}) {
     this.boardContainer = boardContainer;
+    this.destinationsModel = destinationsModel;
+    this.offersModel = offersModel;
+    this.pointsModel = pointsModel;
+
+    this.points = [...pointsModel.get()];
   }
 
   eventList = new EventListView();
@@ -21,10 +24,21 @@ export default class BoardPresenter {
     render(new FilterView(), tripControlFiltersElement);
     render(new SortView(), tripEventsElement);
     render(this.eventList, tripEventsElement);
-    render(new NewPointView(), this.eventList.getElement());
 
-    for (let i = 0; i < POINT_COUNT; i++) {
-      render(new PointListView(), this.eventList.getElement());
+    render(new NewPointView({
+      point: this.points[0],
+      pointDestination: this.destinationsModel.get(),
+      pointOffers: this.offersModel.get()
+    }),
+    this.eventList.getElement());
+
+    this.points.slice(1, this.points.length).forEach((point) => {
+      render(new EventPointView({
+        point: point,
+        pointDestination: this.destinationsModel.getById(point.id),
+        pointOffers: this.offersModel.getByType(point.type)
+      }), this.eventList.getElement());
     }
+    );
   }
 }

src/service/mock-service.js

@@ -0,0 +1,54 @@
+import {generateDestination} from '../mock/destination.js';
+import {generateOffer} from '../mock/offer.js';
+import {generatePoint} from '../mock/point.js';
+import {getRandomIntFromRange, getRandomArrayElement, getRandomBulValue} from '../utils.js';
+import {DESTINATION_COUNT, ROUTE_TYPE, OFFER_COUNT, POINT_COUNT} from '../mock/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;
+  }
+
+  getOffers() {
+    return this.offers;
+  }
+
+  getPoints() {
+    return this.points;
+  }
+
+  generateDestinations() {
+    return Array.from({length: DESTINATION_COUNT}, () => generateDestination());
+  }
+
+  generateOffers() {
+    return ROUTE_TYPE.map((type) => ({
+      type,
+      offers: Array.from({length: getRandomIntFromRange(0, OFFER_COUNT)}, () => generateOffer())
+    }));
+  }
+
+  generatePoints() {
+    return Array.from({length: POINT_COUNT}, () => {
+      const type = getRandomArrayElement(ROUTE_TYPE);
+      const destination = getRandomArrayElement(this.destinations);
+      const hasOffers = getRandomBulValue();
+      const offersByType = this.offers.find((offerByType) => offerByType.type === type);
+      const offerIds = (hasOffers)
+        ? offersByType.offers.slice(getRandomIntFromRange(0, offersByType.offers.length))
+        : [];
+
+      return generatePoint(type, destination, offerIds);
+    });
+  }
+}

src/utils.js

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs';
+import {DATE_FORMAT, TIME_FORMAT, FULL_TIME_FOMAT, MILLISECONDS_IN_DAY, MILLISECONDS_IN_HOUR, BooleanValues, SLASH_TIME_FOMAT} from './mock/const';
+
+// eslint-disable-next-line no-undef
+const duration = require('dayjs/plugin/duration');
+dayjs.extend(duration);
+
+export const formatToDate = (dueDate) => dueDate ? dayjs(dueDate).format(FULL_TIME_FOMAT) : '';
+
+export const formatToTime = (dueDate) => dueDate ? dayjs(dueDate).format(TIME_FORMAT) : '';
+
+export const formatToShortDate = (time) => time ? dayjs(time).format(DATE_FORMAT) : '';
+
+export const formatToSlashDate = (time) => time ? dayjs(time).format(SLASH_TIME_FOMAT) : '';
+
+export const ispointExpired = (dueDate) => dueDate && dayjs().isAfter(dueDate, 'D');
+
+export const getRandomArrayElement = (items) => items[Math.floor(Math.random() * items.length)];
+
+export const getRandomInt = () => Math.floor(Math.random() * 1000);
+
+export const getRandomIntFromRange = (min, max) => Math.floor(Math.random() * (max - min) + min);
+
+export const getRandomBulValue = () => getRandomArrayElement(BooleanValues);
+
+export const getPointDuration = (dateFrom, dateTo) => {
+  const timeDifference = dayjs(dateTo).diff(dayjs(dateFrom));
+
+  if (timeDifference >= MILLISECONDS_IN_DAY) {
+    return dayjs.duration(timeDifference).format('DD[D] HH[H] mm[M]');
+  } else if (timeDifference >= MILLISECONDS_IN_HOUR) {
+    return dayjs.duration(timeDifference).format('HH[H] mm[M]');
+  } else if (timeDifference < MILLISECONDS_IN_HOUR) {
+    return dayjs.duration(timeDifference).format('mm[M]');
+  }
+};
+
+export const getRandomPictureElement = (city) => ({
+  src: `https://loremflickr.com/248/152?random=${getRandomInt()}`,
+  description: `${city} description`
+});
+
+export const getPicturesArray = (city) => Array.from({length: getRandomIntFromRange(0, 5)}, () => getRandomPictureElement(city));