Merge pull request #4 from n3wstar/module2-task1

package.json

@@ -27,5 +27,8 @@
   },
   "engines": {
     "node": "18"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.10"
   }
 }

src/const.js

@@ -0,0 +1,22 @@
+
+const DEFAULT_TYPE = 'flight';
+
+const EMPTY_POINT = {
+  basePrice: 0,
+  dateFrom: null,
+  dateTo: null,
+  destination: null,
+  isFavorite: false,
+  offers: [],
+  type: DEFAULT_TYPE
+};
+
+const MSEC_IN_SEC = 1000;
+const SEC_IN_MIN = 60;
+const MIN_IN_HOUR = 60;
+const HOUR_IN_DAY = 24;
+
+const MSEC_IN_HOUR = MIN_IN_HOUR * SEC_IN_MIN * MSEC_IN_SEC;
+const MSEC_IN_DAY = HOUR_IN_DAY * MSEC_IN_HOUR;
+
+export {EMPTY_POINT, MSEC_IN_DAY, MSEC_IN_HOUR};

src/main.js

@@ -2,15 +2,27 @@ import FilterView from './view/filter-view.js';
 import TripInfoView from './view/trip-info-view.js';
 import BoardPresenter from './presenter/board-presenter.js';
 import { render, RenderPosition } from './render.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 bodyElement = document.querySelector('body');
 const headerElement = bodyElement.querySelector('.page-header');
 const tripInfoElement = headerElement.querySelector('.trip-main');
 const filterElement = tripInfoElement.querySelector('.trip-controls__filters');
 const mainElement = bodyElement.querySelector('.page-main');
 const eventListElement = mainElement.querySelector('.trip-events');
 
+const mockService = new MockService();
+const destinationsModel = new DestinationsModel(mockService);
+const offersModel = new OffersModel(mockService);
+const pointsModel = new PointsModel(mockService);
+
 const boardPresenter = new BoardPresenter({
-  container: eventListElement
+  container: eventListElement,
+  destinationsModel,
+  offersModel,
+  pointsModel
 });
 
 render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);

src/mock/consts.js

@@ -0,0 +1,55 @@
+
+const CITIES = [
+  'Tokyo',
+  'Moscow',
+  'New York',
+  'Amsterdam',
+  'Saint Petersburg',
+  'Copenhagen'
+];
+
+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.'
+];
+
+const PRICE = {
+  MIN: 1,
+  MAX: 1000
+};
+
+const DURATION = {
+  DAY: 5,
+  HOUR: 23,
+  MINUTE: 59
+};
+
+const TYPES = [
+  'Check-in',
+  'Sightseeing',
+  'Restaurant',
+  'Taxi',
+  'Bus',
+  'Train',
+  'Ship',
+  'Drive',
+  'Flight'
+];
+
+const POINT_OFFERS = [
+  'Add luggage',
+  'Switch to comfort',
+  'Add meal',
+  'Choose seats',
+  'Travel by train',
+  'Order Uber',
+];
+
+const POINTS_COUNT = 5;
+const DESTINATIONS_COUNT = 5;
+const OFFERS_COUNT = 5;
+
+export{CITIES, DESCRIPTIONS, PRICE, DURATION, TYPES, POINTS_COUNT, POINT_OFFERS, DESTINATIONS_COUNT, OFFERS_COUNT};
+

src/mock/destination.js

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

src/mock/offer.js

@@ -0,0 +1,12 @@
+import { getRandomNumber, getRandomValue } from '../utils.js';
+import { PRICE, POINT_OFFERS} from './consts.js';
+
+function generateOffer() {
+  return{
+    id: crypto.randomUUID(),
+    title: getRandomValue(POINT_OFFERS),
+    price: getRandomNumber(PRICE.MIN, PRICE.MAX)
+  };
+}
+
+export{generateOffer};

src/mock/point.js

@@ -0,0 +1,19 @@
+import { getRandomNumber, getDate } from '../utils.js';
+import { PRICE } from './consts.js';
+
+function generatePoint(type, destID, offerIds){
+
+  return {
+    id: crypto.randomUUID(),
+    basePrice: getRandomNumber(PRICE.MIN, PRICE.MAX),
+    dateFrom: getDate({next: false}),
+    dateTo: getDate({next: true}),
+    destination: destID,
+    isFavorite: Boolean(getRandomNumber(0,1)),
+    offers: offerIds,
+    type
+  };
+}
+
+export {generatePoint};
+

src/model/destinations-model.js

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

src/model/offers-model.js

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

src/model/points-model.js

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

src/presenter/board-presenter.js

@@ -3,22 +3,37 @@ import EventListView from '../view/event-list-view.js';
 import FormEditView from '../view/form-edit-view.js';
 import PointView from '../view/point-view.js';
 import SortView from '../view/sort-view.js';
-const POINT_COUNT = 3;
 
 export default class BoardPresenter{
   sortComponent = new SortView();
   eventListComponent = new EventListView();
 
-  constructor({container}){
+  constructor({container, destinationsModel, offersModel, pointsModel}){
     this.container = container;
+    this.destinationsModel = destinationsModel;
+    this.offersModel = offersModel;
+    this.pointsModel = pointsModel;
   }
 
   init(){
     render(this.sortComponent, this.container);
     render(this.eventListComponent, this.container);
-    render (new FormEditView(), this.eventListComponent.getElement());
-    for(let i = 0; i < POINT_COUNT; i++){
-      render(new PointView(), this.eventListComponent.getElement());
-    }
+    render (new FormEditView({
+      point: this.pointsModel.getPoints()[0],
+      pointDestination: this.destinationsModel.getDestination(),
+      pointOffers: this.pointsModel.getPoints()
+    }),
+    this.eventListComponent.getElement()
+    );
+    this.pointsModel.getPoints().forEach((point) => {
+      render(
+        new PointView({
+          point,
+          pointDestination: this.destinationsModel.getById(point.destination),
+          pointOffers: this.offersModel.getOfferByType(point.type)
+        }),
+        this.eventListComponent.getElement()
+      );
+    });
   }
 }

src/service/mock-service.js

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