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

src/main.js

@@ -1,12 +1,23 @@
 import { render } from './render.js';
-import FilterView from './view/filters-view.js';
+import FilterView from './view/filter.js';
 import TripEventsPresenter from './presenter/trippresenter.js';
+import DestinationsModel from './model/destinations-model';
+import OffersModel from './model/offers';
+import PointsModel from './model/points';
 
 
 const tripControlsFilters = document.querySelector('.trip-controls__filters');
-const tripEvents = document.querySelector('.trip-events');
-const tripEventsPresenter = new TripEventsPresenter({tpipEventsContainer : tripEvents});
+const destinationsModel = new DestinationsModel();
+const offersModel = new OffersModel();
+const pointsModel = new PointsModel(destinationsModel, offersModel);
+const tripEventsPresenter = new TripEventsPresenter({
+    container: boardContainer,
+    destinationsModel,
+    offersModel,
+    pointsModel
+  });
 
 render(new FilterView(), tripControlsFilters);
 
 tripEventsPresenter.init();
+filterPresenter.init();

src/mock/const.js

@@ -0,0 +1,38 @@
+const CITIES = [
+    'Moscow',
+    'Saint Petersburg',
+    'Novosibirsk',
+    'Yekaterinburg',
+    'Kazan',
+    'Nizhny Novgorod',
+    'Chelyabinsk',
+    'Krasnoyarsk',
+    'Samara',
+    'Ufa',
+  ];
+
+  const DESCRIPTION = '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 OFFERS_NAMES = [
+    'Upgrade to a business class',
+    'Add luggage',
+    'Switch to comfort class',
+    'Add meal',
+    'Choose seats',
+    'Travel by train'
+  ];
+
+  const POINT_TYPES = [
+    'taxi',
+    'bus',
+    'train',
+    'ship',
+    'drive',
+    'flight',
+    'check-in',
+    'sightseeing',
+    'restaurant',
+  ];
+
+  export { CITIES, DESCRIPTION, OFFERS_NAMES, POINT_TYPES };
+

src/mock/directions.js

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

src/mock/offer.js

@@ -0,0 +1,22 @@
+import { getRandomInteger, getRandomValue } from '../utils';
+import { OFFERS_NAMES } from './const';
+
+function generateOffersByType(type) {
+
+  const maxPrice = 150;
+
+  return {
+    type: type,
+    offers: Array.from({ length: getRandomInteger(1, 5) }, generateOffer)
+  };
+
+  function generateOffer() {
+    return {
+      id: crypto.randomUUID(),
+      title: getRandomValue(OFFERS_NAMES),
+      price: getRandomInteger(5, maxPrice)
+    };
+  }
+}
+
+export { generateOffersByType };

src/mock/point.js

@@ -0,0 +1,37 @@
+import { getRandomInteger } from '../utils';
+import dayjs from 'dayjs';
+
+function generatePoint(destinationId, type, offerIds) {
+  const maxBasePrice = 100;
+  const dateFrom = getRandomInteger() ? generateDate(new Date()) : generateDate();
+  const dateTo = generateDate(dateFrom);
+
+  return {
+    id: crypto.randomUUID(),
+    basePrice: getRandomInteger(10, maxBasePrice),
+    dateFrom: dateFrom,
+    dateTo: dateTo,
+    destination: destinationId,
+    isFavorite: Boolean(getRandomInteger()),
+    offers: offerIds,
+    type: type
+  };
+}
+
+function generateDate(after) {
+  const minsGap = getRandomInteger(0, 30);
+  const hoursGap = getRandomInteger(0, 6);
+  const dayGap = getRandomInteger(0, 5);
+
+  if (!after) {
+    return dayjs().subtract(getRandomInteger(0, 10), 'day').toDate();
+  }
+
+  return dayjs(after)
+    .add(minsGap, 'minute')
+    .add(hoursGap, 'hour')
+    .add(dayGap, 'day')
+    .toDate();
+}
+
+export { generatePoint };

src/models/directions.js

@@ -0,0 +1,19 @@
+import { generateDestination } from '../mock/directions';
+
+const DESTINATION_COUNT = 5;
+
+export default class DestinationsModel {
+
+  constructor() {
+    this.destinations = Array.from({ length: DESTINATION_COUNT }, generateDestination);
+  }
+
+  get() {
+    return this.destinations;
+  }
+
+  getById(id) {
+    return this.destinations.find((destination) => destination.id === id);
+  }
+
+}

src/models/offers.js

@@ -0,0 +1,22 @@
+import { POINT_TYPES } from '../mock/const';
+import { generateOffersByType } from '../mock/offer';
+
+export default class OffersModel {
+
+  constructor() {
+    this.offers = POINT_TYPES.map((type) => generateOffersByType(type));
+  }
+
+  get() {
+    return this.offers;
+  }
+
+  getByType(type) {
+    return this.offers.find((offersList) => offersList.type === type);
+  }
+
+  getById(type, id) {
+    return this.getByType(type).offers.find((offer) => offer.if === id);
+  }
+
+}

src/models/points.js

@@ -0,0 +1,25 @@
+import { POINT_TYPES } from '../mock/const';
+import { generatePoint } from '../mock/point';
+import { getRandomInteger, getRandomValue } from '../utils';
+
+export default class PointsModel {
+
+  constructor(destinationsModel, offersModel) {
+    const pointCount = 10;
+
+    this.points = Array.from({ length: pointCount }, () => {
+      const destination = getRandomValue(destinationsModel.get());
+      const type = getRandomValue(POINT_TYPES);
+      const offers = offersModel.getByType(type).offers.slice(0, getRandomInteger(0, 3));
+      return generatePoint(destination.id, type, offers.map((offer) => offer.id));
+    });
+  }
+
+  get() {
+    return this.points;
+  }
+
+  getById(id) {
+    return this.points.find((point) => point.id === id);
+  }
+}

src/presenters/trippresenter.js

@@ -1,24 +1,36 @@
 import SortView from '../view/sort.js';
 import ListView from '../view/list.js';
-import NewPointView from '../view/newpoint.js';
 import EditablePointView from '../view/modpoint.js';
 import PointView from '../view/point.js';
 import {render} from '../render.js';
 
 export default class TripEventsPresenter {
   listComponent = new ListView();
-  constructor({tpipEventsContainer}) {
-    this.tpipEventsContainer = tpipEventsContainer;
+  constructor({container, destinationsModel, offersModel, pointsModel }) {
+    this.container = container;
+    this.destinationsModel = destinationsModel;
+    this.offersModel = offersModel;
+    this.pointsModel = pointsModel;
   }
 
   init() {
-    render(new SortView(), this.tpipEventsContainer);
-    render(this.listComponent, this.tpipEventsContainer);
-    render(new EditablePointView, this.listComponent.getElement());
-    render(new NewPointView(), this.listComponent.getElement());
+    render(new SortView(), this.container);
+    const eventList = new ListView();
+    render(eventList, this.container);
+    const points = [...this.pointsModel.get()];
 
-    for (let i = 0; i < 3; i++) {
-      render(new PointView(), this.listComponent.getElement());
-    }
+    render(new EditablePointView({
+      point: points[0],
+      pointDestination: this.destinationsModel.getById(points[0].destination),
+      pointOffers: this.offersModel.getByType(points[0].type)
+    }), eventList.getElement());
+
+    for (let i = 1; i < points.length; i++) {
+      const point = points[i];
+      const pointDestination = this.destinationsModel.getById(point.destination);
+      const pointOffers = this.offersModel.getByType(point.type);
+      const pointView = new PointView({ point, pointDestination, pointOffers });
+      render(pointView, eventList.getElement());
+   }
   }
 }

src/presenters/utils.js

@@ -0,0 +1,34 @@
+import dayjs from 'dayjs';
+
+function getRandomInteger(a = 0, b = 1) {
+  const lower = Math.ceil(Math.min(a, b));
+  const upper = Math.floor(Math.max(a, b));
+  return Math.floor(lower + Math.random() * (upper - lower + 1));
+}
+
+function getRandomValue(array) {
+  return array[0, getRandomInteger(0, array.length - 1)];
+}
+
+function formatDateToShortDate(date){
+  return dayjs(date).format('MMM DD');
+}
+
+function formatDateToDateTime(date) {
+  return dayjs(date).format('DD/MM/YY HH:mm');
+}
+
+function formatDateToDateTimeHTML(date) {
+  return dayjs(date).format('YYYY-MM-DDTHH:mm');
+}
+
+function formatDateToTime(date) {
+  return dayjs(date).format('HH:mm');
+}
+
+function formatDuration(date1, date2){
+  const duration = dayjs(date2).subtract(dayjs(date1));
+  return `${duration.minute()}M`;
+}
+
+export { getRandomInteger, getRandomValue, formatDateToShortDate, formatDateToDateTimeHTML, formatDateToDateTime, formatDateToTime, formatDuration };

src/view/const.js

@@ -0,0 +1,14 @@
+import { POINT_TYPES } from '../mock/const';
+
+const POINT_EMPTY = {
+  id: crypto.randomUUID(),
+  basePrice: 0,
+  dateFrom: Date.now(),
+  dateTo: Date.now(),
+  destination: '',
+  isFavorite: false,
+  offers: [],
+  type: POINT_TYPES[0]
+};
+
+export { POINT_EMPTY };

src/view/list.js

@@ -1,12 +1,8 @@
-import { createElement } from '../render.js';
+import { createElement } from '../render';
 
-function createListTemplate() {
-  return('<ul class="trip-events__list"></ul>');
-}
-
-export default class ListView {
+export default class PointListView {
   getTemplate() {
-    return createListTemplate();
+    return createEventListViewTemplate();
   }
 
   getElement() {
@@ -21,3 +17,8 @@ export default class ListView {
     this.element = null;
   }
 }
+function createEventListViewTemplate() {
+  return /* html */ `
+    <ul class="trip-events__list"></ul>
+  `;
+}