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

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "dayjs": "1.11.7",
+    "dayjs-random": "1.0.1",
     "flatpickr": "4.6.13",
     "he": "1.2.0"
   }

src/consts.js

@@ -0,0 +1,19 @@
+const TYPES = [
+  'Check-in',
+  'Sightseeing',
+  'Restaurant',
+  'Taxi',
+  'Bus',
+  'Train',
+  'Ship',
+  'Drive',
+  'Flight'
+];
+const CITIES = [
+  'Tokyo',
+  'Moscow',
+  'New York',
+  'Amsterdam',
+  'Saint Petersburg',
+  'Copenhagen'
+];

src/main.js

@@ -1,15 +1,26 @@
+import { DestinationModel } from "./model/destination_model"
+import { OfferModel } from "./model/offer_model"
+import { PointModel } from "./model/point_model"
 import BoardPresenter from "./presenter/board-presenter"
 import { render, RenderPosition } from "./render"
 import FilterView from "./view/filters-view"
-import MainHeaderView from "./view/main-header-view"
+import MainTripView from "./view/main-header-view"
 
 let body = document.querySelector("body")
 let header = body.querySelector(".page-header__container")
 let filter = header.querySelector(".trip-controls__filters")
 let mainTrip = header.querySelector(".trip-main")
 console.log(filter)
 let events = body.querySelector(".trip-events")
-let boardPresenter = new BoardPresenter({container:events})
-render(new MainHeaderView(), mainTrip, RenderPosition.AFTERBEGIN)
+let destinationModel = new DestinationModel()
+let destinations = destinationModel.getDestination()
+//console.log(destinations)
+let offersModel = new OfferModel()
+let offers = offersModel.getOffers()
+//console.log("Оферы")
+//console.log(offers)
+let pointsModel = new PointModel(destinations, offers)
+let boardPresenter = new BoardPresenter({container:events, destinationsModel: destinationModel, pointsModel: pointsModel, offersModel: offersModel})
+render(new MainTripView(), mainTrip, RenderPosition.AFTERBEGIN)
 render(new FilterView(), filter)
 boardPresenter.init()

src/mocks/consts.js

@@ -0,0 +1,53 @@
+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/mocks/destination.js

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

src/mocks/offer.js

@@ -0,0 +1,12 @@
+import { getRandomNumber, getRandomValue } from '../utils.js';
+import { DESCRIPTIONS } from './consts.js';
+import { TYPES } from './consts.js';
+export function generateOffer()
+{
+  return {
+    id: crypto.randomUUID(),
+    title: getRandomValue(DESCRIPTIONS),
+    price: getRandomNumber(1000, 5000),
+    type: getRandomValue(TYPES)
+  }
+}

src/mocks/point.js

@@ -0,0 +1,16 @@
+import { getRandomNumber, getRandomValue, getRandomDate, getRandomDateAfter } from '../utils.js';
+import { TYPES } from './consts.js';
+export function generatePoint(destinations, offers)
+{
+  let dateFrom = getRandomDate()
+  return {
+    id: crypto.randomUUID(),
+    basePrice: getRandomNumber(1000, 7000),
+    dateFrom,
+    dateTo: getRandomDateAfter(dateFrom),
+    destinationId: getRandomValue(destinations).id,
+    isFavorite: getRandomValue([true, false]),
+    offerIds: offers.map(offer=>offer.id),
+    type: getRandomValue(TYPES)
+  }
+}

src/model/destination_model.js

@@ -0,0 +1,15 @@
+import { DESTINATIONS_COUNT } from "../mocks/consts"
+import { generateDestination } from "../mocks/destination"
+
+export class DestinationModel {
+  constructor() {
+    this.destinations = Array.from({length: DESTINATIONS_COUNT}, generateDestination)
+  }
+getDestination() {
+  return this.destinations
+}
+  getById(id)
+  {
+    return this.destinations.find(destination=>destination.id==id)
+  }
+  }

src/model/offer_model.js

@@ -0,0 +1,16 @@
+import { OFFERS_COUNT } from "../mocks/consts"
+import { generateOffer } from "../mocks/offer"
+
+export class OfferModel {
+constructor() {
+  this.offers = Array.from({length: OFFERS_COUNT}, generateOffer)
+}
+getOffers() {
+return this.offers
+}
+getOfferByType(type)
+{
+  return this.offers.filter(offer=>offer.type==type)
+
+}
+}

src/model/point_model.js

@@ -0,0 +1,12 @@
+import { POINTS_COUNT } from "../mocks/consts"
+import { generatePoint } from "../mocks/point"
+
+export class PointModel {
+  constructor(destinations, offers) {
+    this.points = Array.from({length: POINTS_COUNT}, ()=> generatePoint(destinations, offers))
+  }
+  getPoints()
+  {
+    return this.points
+    }
+  }

src/presenter/board-presenter.js

@@ -4,26 +4,40 @@ import SortView from "../view/sorting-view"
 import MainHeaderView from "../view/main-header-view"
 import ListEventsView from "../view/list-events-view"
 import EditPointView from "../view/editing-view";
-import AddPointView from "../view/add-view";
 export default class BoardPresenter {
-    constructor({container}) {
-      this.sort = new SortView()
-      this.events = new ListEventsView()
-    this.container = container
+  sortComponent = new SortView();
+  eventListComponent = new ListEventsView();
+  constructor({container, destinationsModel, offersModel, pointsModel}){
+    this.container = container;
+    this.destinationsModel = destinationsModel;
+    this.offersModel = offersModel;
+    this.pointsModel = pointsModel;
   }
-  init() {
-    render(this.sort, this.container)
-    render(this.events, this.container)
-    let eventsElement = this.events.getElement()
-    render(new EditPointView(), eventsElement)
-    render(new AddPointView(), eventsElement)
-    let eventsCount = 3
-    for (let i=0; i<eventsCount; i++)
-    {
-      console.log(i)
-      render(new RoutePointView(), eventsElement)
-    }
 
-  }
+  init(){
+    render(this.sortComponent, this.container);
+    render(this.eventListComponent, this.container);
+    let firstPoint = this.pointsModel.getPoints()[0]
+    console.log(this.pointsModel.getPoints())
+    render (new EditPointView(
+       firstPoint,
+       this.destinationsModel.getById(firstPoint.destinationId),
+       this.offersModel.getOffers()
 
+    ),
+    this.eventListComponent.getElement()
+    );
+    this.pointsModel.getPoints().forEach((point) => {
+      console.log(point)
+      render(
+        new RoutePointView(
+          point,
+         this.destinationsModel.getById(point.destinationId),
+        this.offersModel.getOfferByType(point.type)
+        ),
+        this.eventListComponent.getElement()
+      );
+    });
+  }
 }
+

src/templates/edit-template.js

@@ -0,0 +1,109 @@
+import { CITIES, TYPES } from "../mocks/consts";
+export function createEditTemplate(point, destination, offers) {
+  const { type} = point;
+  console.log(destination)
+  return (
+    `<li class="trip-events__item">
+              <form class="event event--edit" action="#" method="post">
+                <header class="event__header">
+                  <div class="event__type-wrapper">
+                    <label class="event__type  event__type-btn" for="event-type-toggle-1">
+                      <span class="visually-hidden">Choose event type</span>
+                      <img class="event__type-icon" width="17" height="17" src="img/icons/flight.png" alt="Event type icon">
+                    </label>
+                    <input class="event__type-toggle  visually-hidden" id="event-type-toggle-1" type="checkbox">
+
+                    <div class="event__type-list">
+                      <fieldset class="event__type-group">
+                        <legend class="visually-hidden">Event type</legend>
+                        ${createPointTypesListElement(type)}
+                      </fieldset>
+                    </div>
+                  </div>
+
+                  <div class="event__field-group  event__field-group--destination">
+                    <label class="event__label  event__type-output" for="event-destination-1">
+                      Flight
+                    </label>
+                    <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="Chamonix" list="destination-list-1">
+                    ${createDestinationListTemplate()}
+                  </div>
+
+                  <div class="event__field-group  event__field-group--time">
+                    <label class="visually-hidden" for="event-start-time-1">From</label>
+                    <input class="event__input  event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="18/03/19 12:25">
+                    &mdash;
+                    <label class="visually-hidden" for="event-end-time-1">To</label>
+                    <input class="event__input  event__input--time" id="event-end-time-1" type="text" name="event-end-time" value="18/03/19 13:35">
+                  </div>
+
+                  <div class="event__field-group  event__field-group--price">
+                    <label class="event__label" for="event-price-1">
+                      <span class="visually-hidden">Price</span>
+                      &euro;
+                    </label>
+                    <input class="event__input  event__input--price" id="event-price-1" type="text" name="event-price" value="160">
+                  </div>
+
+                  <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
+                  <button class="event__reset-btn" type="reset">Delete</button>
+                  <button class="event__rollup-btn" type="button">
+                    <span class="visually-hidden">Open event</span>
+                  </button>
+                </header>
+                <section class="event__details">
+                  <section class="event__section  event__section--offers">
+                    <h3 class="event__section-title  event__section-title--offers">Offers</h3>
+
+                    <div class="event__available-offers">
+                      ${createPointOffer(offers)}
+                    </div>
+                  </section>
+
+                  <section class="event__section  event__section--destination">
+                    <h3 class="event__section-title  event__section-title--destination">${destination.name}</h3>
+                    <p class="event__destination-description">${destination.description}</p>
+                    ${createPictures(destination.pictures)}
+                  </section>
+                </section>
+              </form>
+            </li>`
+
+  )
+}
+function createPictures(pictures) {
+  return `
+    <div class="event__photos-container">
+      <div class="event__photos-tape">
+        ${pictures.map((picture) => `<img class="event__photo" src="${picture.src}" alt="${picture.description}">`).join('')}
+      </div>
+    </div>`;
+}
+function createPointTypesListElement(currentType) {
+  return TYPES.map((type) =>
+    `<div class="event__type-item">
+      <input id="event-type-${type}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type}" ${currentType === type ? 'checked' : ''}>
+      <label class="event__type-label  event__type-label--${type}" for="event-type-${type}-1">${type}</label>
+    </div>`).join('');
+}
+function createDestinationListTemplate()
+{
+  return `<datalist id="destination-list-1">
+                     ${CITIES.map((city)=>`<option value="${city}"</option>`)}
+                    </datalist>`
+}
+function createPointOffer(offers)
+{
+  let result=''
+  offers.forEach((offer, index) => {
+    result+=`<div class="event__offer-selector">
+                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-luggage-${index+1}" type="checkbox" name="event-offer-luggage" checked>
+                        <label class="event__offer-label" for="event-offer-luggage-${index+1}">
+                          <span class="event__offer-title">${offer.title}</span>
+                          &plus;&euro;&nbsp;
+                          <span class="event__offer-price">${offer.price}</span>
+                        </label>
+                      </div>`
+  });
+  return result
+}