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

package.json

@@ -29,6 +29,7 @@
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
     "babel-loader": "^9.1.2",
+    "dayjs": "1.11.13",
     "html-webpack-plugin": "^5.5.1",
     "webpack-dev-server": "^4.13.3"
   }

src/const.js

@@ -0,0 +1,24 @@
+const TIME_FORMAT = 'HH:mm';
+const DATE_FORMAT = 'MMM D';
+const DATE_TIME_FORMAT = 'DD/MM/YY HH:mm';
+
+const POINT_TYPES =
+  [
+    'Taxi',
+    'Bus',
+    'Train',
+    'Ship',
+    'Drive',
+    'Flight',
+    'Check-in',
+    'Sightseeing',
+    'Restaurant'
+  ];
+
+const DESTINATIONS = [
+  'Amsterdam',
+  'Geneva',
+  'Chamonix',
+];
+
+export { TIME_FORMAT, DATE_FORMAT, DATE_TIME_FORMAT, POINT_TYPES, DESTINATIONS };

src/main.js

@@ -1,16 +1,23 @@
 import FiltersView from './view/filters-view.js';
 import SortingView from './view/sorting-view.js';
-import Presenter from './presenter/presenter.js';
+import EventsListPresenter from './presenter/presenter.js';
 import { render } from './render.js';
+import EventsModel from './model/events-model.js';
 
 const bodyElement = document.body;
 
 const filtersContainerElement = bodyElement.querySelector('.trip-controls__filters');
 const sortingContainerElement = bodyElement.querySelector('.trip-events');
 
-const presenter = new Presenter({ container: sortingContainerElement });
+//Создаем экземпляр класса модели точек
+const pointsModel = new EventsModel();
+//Передадим презентеру кроме контейнера модель точек через конструктор
+const presenter = new EventsListPresenter({
+  container: sortingContainerElement,
+  pointsModel
+});
 
-//render вставляет в конейнер
+//render компонентов в контейнеры
 render(new FiltersView(), filtersContainerElement);
 render(new SortingView(), sortingContainerElement);
 

src/mock/destinations.js

@@ -0,0 +1,54 @@
+import { getRandomInteger } from '../util.js';
+
+const maxNumber = 100;
+//Данные для пунктов назначения
+export const destinations = [
+  {
+    id: '1',
+    description: 'Chamonix, is a beautiful city, a true asian pearl, with crowded streets.',
+    name: 'Chamonix',
+    pictures: []
+  },
+  {
+    id: '2',
+    description: 'Amsterdam, is a beautiful city.',
+    name: 'Amsterdam',
+    pictures: [
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(maxNumber)}`,
+        description: 'Amsterdam building'
+      },
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(maxNumber)}`,
+        description: 'Amsterdam building'
+      },
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(maxNumber)}`,
+        description: 'Amsterdam building'
+      },
+    ]
+  },
+  {
+    id: '3',
+    description: 'Geneva is a city in Switzerland that lies at the southern tip of expansive Lac Léman (Lake Geneva).',
+    name: 'Geneva',
+    pictures: [
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(maxNumber)}`,
+        description: 'Geneva photo 1'
+      },
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(maxNumber)}`,
+        description: 'Geneva photo 2'
+      },
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(maxNumber)}`,
+        description: 'Geneva photo 3'
+      },
+      {
+        src: `https://loremflickr.com/248/152?random=${getRandomInteger(maxNumber)}`,
+        description: 'Geneva photo 4'
+      }
+    ]
+  }
+];

src/mock/offers.js

@@ -0,0 +1,212 @@
+export const offers = [
+  {
+    type: 'taxi',
+    offers: [
+      {
+        id: '1',
+        title: 'taxi offer 0',
+        price: 120
+      },
+      {
+        id: '2',
+        title: 'taxi offer 1',
+        price: 20
+      },
+      {
+        id: '3',
+        title: 'taxi offer 2',
+        price: 35
+      },
+      {
+        id: '4',
+        title: 'taxi offer 3',
+        price: 70
+      }
+    ]
+  },
+  {
+    type: 'bus',
+    offers: [
+      {
+        id: '5',
+        title: 'bus offer 0',
+        price: 10
+      },
+      {
+        id: '6',
+        title: 'bus offer 1',
+        price: 25
+      },
+      {
+        id: '7',
+        title: 'bus offer 2',
+        price: 30
+      },
+    ]
+  },
+  {
+    type: 'ship',
+    offers: [
+      {
+        id: '8',
+        title: 'ship offer 0',
+        price: 110
+      },
+      {
+        id: '9',
+        title: 'ship offer 1',
+        price: 205
+      },
+      {
+        id: '10',
+        title: 'ship offer 2',
+        price: 80
+      },
+    ]
+  },
+  {
+    type: 'drive',
+    offers: [
+      {
+        id: '11',
+        title: 'drive offer 0',
+        price: 10
+      },
+      {
+        id: '12',
+        title: 'drive offer 1',
+        price: 20
+      },
+      {
+        id: '13',
+        title: 'drive offer 2',
+        price: 40
+      },
+      {
+        id: '14',
+        title: 'drive offer 3',
+        price: 24
+      },
+      {
+        id: '15',
+        title: 'drive offer 4',
+        price: 9
+      },
+    ]
+  },
+  {
+    type: 'flight',
+    offers: [
+      {
+        id: '16',
+        title: 'flight offer 0',
+        price: 105
+      },
+      {
+        id: '17',
+        title: 'flight offer 1',
+        price: 28
+      },
+      {
+        id: '18',
+        title: 'flight offer 2',
+        price: 30
+      },
+      {
+        id: '19',
+        title: 'flight offer 3',
+        price: 70
+      },
+      {
+        id: '20',
+        title: 'flight offer 4',
+        price: 90
+      },
+    ]
+  },
+  {
+    type: 'check-in',
+    offers: [
+      {
+        id: '21',
+        title: 'check-in offer 0',
+        price: 10
+      },
+      {
+        id: '22',
+        title: 'check-in offer 1',
+        price: 12
+      },
+      {
+        id: '23',
+        title: 'check-in offer 2',
+        price: 40
+      },
+      {
+        id: '24',
+        title: 'check-in offer 3',
+        price: 30
+      },
+      {
+        id: '25',
+        title: 'check-in offer 4',
+        price: 5
+      },
+      {
+        id: '26',
+        title: 'check-in offer 5',
+        price: 43
+      },
+    ]
+  },
+  {
+    type: 'sightseeing',
+    offers: [
+      {
+        id: '27',
+        title: 'sightseeing offer 0',
+        price: 19
+      },
+      {
+        id: '28',
+        title: 'sightseeing offer 1',
+        price: 6
+      },
+      {
+        id: '29',
+        title: 'sightseeing offer 2',
+        price: 47
+      },
+    ]
+  },
+  {
+    type: 'restaurant',
+    offers: [
+      {
+        id: '30',
+        title: 'restaurant 0',
+        price: 4
+      },
+      {
+        id: '31',
+        title: 'restaurant 1',
+        price: 40
+      },
+      {
+        id: '32',
+        title: 'restaurant 2',
+        price: 12
+      },
+      {
+        id: '33',
+        title: 'restaurant 3',
+        price: 3
+      },
+      {
+        id: '34',
+        title: 'restaurant 4',
+        price: 11
+      },
+    ]
+  },
+];

src/mock/points.js

@@ -0,0 +1,41 @@
+import { getRandomArrayElement } from '../util.js';
+
+export const points = [
+  {
+    id: '1',
+    basePrice: 1100,
+    dateFrom: '2025-07-10T22:55:56.845Z',
+    dateTo: '2025-07-11T11:22:13.375Z',
+    destination: '2',
+    isFavorite: false,
+    offers: ['3', '4'],
+    type: 'taxi'
+  },
+  {
+    id: '2',
+    basePrice: 1200,
+    dateFrom: '2025-08-11T20:58:55.845Z',
+    dateTo: '2025-08-12T12:24:14.375Z',
+    destination: '1',
+    isFavorite: true,
+    offers: [],
+    type: 'bus'
+  },
+  {
+    id: '3',
+    basePrice: 1300,
+    dateFrom: '2025-09-13T23:53:50.845Z',
+    dateTo: '2025-09-14T18:24:15.375Z',
+    destination: '3',
+    isFavorite: false,
+    offers: ['17'],
+    type: 'flight'
+  },
+];
+
+//Функция для получения рандомных точек
+function getRandomPoint() {
+  return getRandomArrayElement(points);
+}
+
+export { getRandomPoint };