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

package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@babel/core": "7.21.4",
+    "dayjs": "1.11.13",
     "webpack-dev-server": "4.13.3"
   }
 }

src/const.js

@@ -0,0 +1,84 @@
+import { getRandomInteger } from './util';
+
+const CITIES = ['Amsterdam', 'Geneva', 'Chamonix', 'Basel', 'Düsseldorf', 'Strasbourg'];
+const TYPES = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant'];
+const DESCRIPTION_TEXT = '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. Sed blandit, eros vel aliquam faucibus, purus ex euismod diam, eu luctus nunc ante ut dui. Sed sed nisi sed augue convallis suscipit in sed felis. Aliquam erat volutpat. Nunc fermentum tortor ac porta dapibus. In rutrum ac purus sit amet tempus.';
+
+const PICTURES = [
+  `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`,
+  `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`,
+  `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`,
+  `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`,
+  `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`
+];
+
+const DATES = [
+  {
+    dateFrom: '2024-07-10T10:00:00',
+    dateTo: '2024-07-11T11:00:00',
+  },
+  {
+    dateFrom: '2024-07-15T18:00:00',
+    dateTo: '2024-07-16T20:30:00',
+  },
+  {
+    dateFrom: '2024-07-16T21:00:00',
+    dateTo: '2024-07-16T23:45:00',
+  },
+  {
+    dateFrom: '2024-08-01T09:55:00',
+    dateTo: '2024-08-02T11:22:00',
+  },
+  {
+    dateFrom: '2024-08-10T14:00:00',
+    dateTo: '2024-08-10T17:00:00',
+  },
+  {
+    dateFrom: '2024-08-12T13:56:00',
+    dateTo: '2024-08-12T14:06:00',
+  },
+];
+
+const OFFERS = [
+  {
+    id: 1,
+    title: 'Add luggage',
+    price: getRandomInteger(5, 200)
+  },
+  {
+    id: 2,
+    title: 'Switch to comfort',
+    price: getRandomInteger(5, 200)
+  },
+  {
+    id: 3,
+    title: 'Add meal',
+    price: getRandomInteger(5, 200)
+  },
+  {
+    id: 4,
+    title: 'Choose seats',
+    price: getRandomInteger(5, 200)
+  },
+  {
+    id: 5,
+    title: 'Order Uber',
+    price: getRandomInteger(5, 200)
+  },
+  {
+    id: 6,
+    title: 'Add breakfast',
+    price: getRandomInteger(5, 200)
+  },
+  {
+    id: 7,
+    title: 'Rent a car',
+    price: getRandomInteger(5, 200)
+  },
+];
+
+const DATE_FORMAT = 'D MMM';
+const TIME_FORMAT = 'HH:mm';
+const DATE_WITH_TIME_FORMAT = 'DD/MM/YY HH:MM';
+
+export { CITIES, TYPES, DESCRIPTION_TEXT, OFFERS, PICTURES, DATES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT };

src/main.js

@@ -2,11 +2,17 @@ import NewFilters from './view/filters-view';
 import NewTripInfo from './view/trip-info-view';
 import { RenderPosition, render } from './render';
 import MainPresenter from './presenter/main-presenter';
+import PointModel from './model/point-model';
 
 const mainContainer = document.querySelector('.trip-main');
 const filtersContainer = document.querySelector('.trip-controls__filters');
 const pointsContainer = document.querySelector('.trip-events');
-const mainPresenter = new MainPresenter({pointsContainer: pointsContainer});
+const pointModel = new PointModel();
+const mainPresenter = new MainPresenter({
+  pointsContainer: pointsContainer,
+  pointModel,
+});
+
 
 render(new NewTripInfo(), mainContainer, RenderPosition.AFTERBEGIN);
 render(new NewFilters(), filtersContainer);

src/mock/destinations-mock.js

@@ -0,0 +1,51 @@
+import { CITIES, PICTURES } from '../const';
+
+let destinationId = 0;
+
+const getDestinationsMock = (city) => {
+  const destinationsMock = {
+    id: destinationId,
+    name: city,
+    description: `${city}, is a beautiful city, a true asian pearl, with crowded streets.`,
+    pictures: [
+      {
+        src: PICTURES[0],
+        description: `${city} parliament building`
+      },
+      {
+        src: PICTURES[1],
+        description: `${city} main square`
+      },
+      {
+        src: PICTURES[2],
+        description: `${city} best view`
+      },
+      {
+        src: PICTURES[3],
+        description: `${city} landscape`
+      },
+      {
+        src: PICTURES[4],
+        description: `${city} church`
+      }
+    ],
+  };
+  return destinationsMock;
+};
+
+const getDestinationsMockArray = () => {
+  const destinationsMockArray = [];
+
+  CITIES.forEach((city) => {
+    destinationId++;
+    destinationsMockArray.push(getDestinationsMock(city));
+  });
+
+  return destinationsMockArray;
+};
+
+const destinations = getDestinationsMockArray();
+
+const getDestinations = () => destinations;
+
+export { getDestinations };

src/mock/offers-mock.js

@@ -0,0 +1,41 @@
+import { OFFERS, TYPES } from '../const';
+import { getRandomInteger, getRandomIntegerArray } from '../util';
+
+const getOffersArrayFromPoints = (offersIdArray) => {
+  const offersArray = [];
+
+  offersIdArray.forEach((offerId) => {
+    const offerElement = OFFERS.find((offer) => offer.id === offerId);
+    offersArray.push(offerElement);
+  });
+
+  return offersArray;
+};
+
+const getOfferMock = (type, offersIdArray) => {
+  const offerMock = {
+    type: type,
+    offers: getOffersArrayFromPoints(offersIdArray)
+  };
+
+  return offerMock;
+};
+
+const getOfferMocks = () => {
+  const offers = [];
+
+  TYPES.forEach((type) => {
+    const randomIntegerArray = getRandomIntegerArray(1, getRandomInteger(1, OFFERS.length));
+    const offer = getOfferMock(type, randomIntegerArray);
+    offers.push(offer);
+  });
+
+  return offers;
+};
+
+const offerMocks = getOfferMocks();
+
+const getOffers = () => offerMocks;
+
+export { getOffers };
+

src/mock/point-mock.js

@@ -0,0 +1,56 @@
+import { getRandomArrayElement, getRandomInteger, createIdGenerator } from '../util';
+import { TYPES, CITIES, DESCRIPTION_TEXT, DATES } from '../const';
+import { getOffers } from './offers-mock';
+
+const POINTS_COUNT = 10;
+const offersData = getOffers();
+
+const getRandomDescriptionPoint = (text) => {
+  const descriptionsArray = text.split('.');
+  const randomDescriptionText = Array.from({ length: 5 }, () => getRandomArrayElement(descriptionsArray).trim()).join('.');
+  return randomDescriptionText;
+};
+
+const generateRandomPointId = createIdGenerator();
+
+const createPointMock = () => {
+  const pointDate = getRandomArrayElement(DATES);
+  const pointType = getRandomArrayElement(TYPES);
+
+  const getRandomOffers = () => {
+    const typeOffers = offersData.find((offer) => offer.type === pointType).offers;
+
+    const typeOffersKeys = [];
+
+    typeOffers.forEach((offer) => {
+      typeOffersKeys.push(offer.id);
+    });
+
+    const pointOffers = typeOffersKeys.slice(0, getRandomInteger(1, typeOffersKeys.length));
+
+    return pointOffers;
+  };
+
+  const pointMock = {
+    id: generateRandomPointId(),
+    type: pointType,
+    destination: getRandomInteger(1, CITIES.length),
+    description: getRandomDescriptionPoint(DESCRIPTION_TEXT),
+    dateFrom: pointDate.dateFrom,
+    dateTo: pointDate.dateTo,
+    basePrice: getRandomInteger(20, 5000),
+    offers: getRandomOffers(),
+    isFavorite: true
+  };
+
+  return pointMock;
+};
+
+const getPointMocks = () => Array.from({ length: POINTS_COUNT }, () => createPointMock());
+
+const points = getPointMocks();
+
+const getPoints = () => points;
+
+export { getPoints };
+

src/model/point-model.js

@@ -0,0 +1,21 @@
+import { getPoints } from '../mock/point-mock';
+import { getDestinations } from '../mock/destinations-mock';
+import { getOffers } from '../mock/offers-mock';
+
+export default class PointModel {
+  points = getPoints();
+  destinations = getDestinations();
+  offers = getOffers();
+
+  getPoints() {
+    return this.points;
+  }
+
+  getDestinations() {
+    return this.destinations;
+  }
+
+  getOffers() {
+    return this.offers;
+  }
+}

src/presenter/main-presenter.js

@@ -8,18 +8,23 @@ import { render } from '../render';
 export default class MainPresenter {
   pointsListComponent = new PointListView();
 
-  constructor({pointsContainer}) {
+  constructor({pointsContainer, pointModel}) {
     this.pointsContainer = pointsContainer;
+    this.pointModel = pointModel;
   }
 
   init() {
+    this.points = [...this.pointModel.getPoints()];
+    this.destinations = [...this.pointModel.getDestinations()];
+    this.offers = [...this.pointModel.getOffers()];
+
     render(new SortingView(), this.pointsContainer);
     render(this.pointsListComponent, this.pointsContainer);
-    render(new EditPoint(), this.pointsListComponent.getElement());
+    render(new EditPoint({point: this.points[0], offers: this.offers, destinations: this.destinations}), this.pointsListComponent.getElement());
     render(new CreatePoint(), this.pointsListComponent.getElement());
 
-    for (let i = 0; i < 3; i++) {
-      render(new PointItemView(), this.pointsListComponent.getElement());
+    for (let i = 0; i < this.points.length; i++) {
+      render(new PointItemView({point: this.points[i], offers: this.offers, destinations: this.destinations}), this.pointsListComponent.getElement());
     }
   }
 }

src/util.js

@@ -1,3 +1,61 @@
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+
+dayjs.extend(duration);
+
 const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
 
-export { capitalize };
+function getRandomArrayElement(items) {
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+const getRandomInteger = (a, b) => {
+  const lower = Math.ceil(Math.min(a, b));
+  const upper = Math.floor(Math.max(a, b));
+  const result = Math.random() * (upper - lower + 1) + lower;
+  return Math.floor(result);
+};
+
+const getRandomIntegerArray = (min, max) => {
+  const randomIntegerArray = [];
+
+  while (randomIntegerArray.length !== max) {
+    let newElement = getRandomInteger(min, max);
+    const result = randomIntegerArray.every((element) => element !== newElement);
+
+    if (result) {
+      randomIntegerArray.push(newElement);
+    } else {
+      newElement = getRandomInteger(min, max);
+    }
+  }
+  return randomIntegerArray;
+};
+
+const createIdGenerator = () => {
+  let numberId = 0;
+
+  return () => {
+    numberId += 1;
+    return numberId;
+  };
+};
+
+const humanizePointDate = (pointDate, dateFormat) => pointDate ? dayjs(pointDate).format(dateFormat) : '';
+
+const getPointDuration = (pointDateFrom, pointDateTo) => {
+  const humatizedDateFrom = dayjs(pointDateFrom);
+  const humatizedDateTo = dayjs(pointDateTo);
+
+  const pointDuration = dayjs.duration(humatizedDateTo.diff(humatizedDateFrom));
+
+  if (pointDuration.days() > 0) {
+    return pointDuration.format('DD[D] HH[H] mm[M]');
+  } else if (pointDuration.hours() > 0) {
+    return pointDuration.format('HH[H] mm[M]');
+  } else {
+    return pointDuration.format('mm[M]');
+  }
+};
+
+export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator, humanizePointDate, getPointDuration, getRandomIntegerArray };