Время разбивать камни

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "eslint src/",
     "build": "webpack --mode production",
-    "start": "webpack serve --mode development --open"
+    "start": "set PORT=8085 && webpack serve --mode development --open"
   },
   "browserslist": [
     "last 2 versions",

src/main.js

@@ -0,0 +1,15 @@
+import BoardPresenter from "./presenter/board-presenter"
+import { render, RenderPosition } from "./render"
+import FilterView from "./view/filters-view"
+import MainHeaderView 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)
+render(new FilterView(), filter)
+boardPresenter.init()

src/presenter/board-presenter.js

@@ -0,0 +1,29 @@
+import { render } from "../render";
+import RoutePointView from "../view/route-point-view"
+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
+  }
+  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)
+    }
+
+  }
+
+}

src/view/add-view.js

@@ -0,0 +1,161 @@
+import { createElement } from "../render"
+function createAddElement() {
+  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>
+            <div class="event__type-item">
+              <input id="event-type-taxi-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="taxi">
+              <label class="event__type-label  event__type-label--taxi" for="event-type-taxi-1">Taxi</label>
+            </div>
+            <div class="event__type-item">
+              <input id="event-type-bus-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="bus">
+              <label class="event__type-label  event__type-label--bus" for="event-type-bus-1">Bus</label>
+            </div>
+            <div class="event__type-item">
+              <input id="event-type-train-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="train">
+              <label class="event__type-label  event__type-label--train" for="event-type-train-1">Train</label>
+            </div>
+            <div class="event__type-item">
+              <input id="event-type-ship-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="ship">
+              <label class="event__type-label  event__type-label--ship" for="event-type-ship-1">Ship</label>
+            </div>
+            <div class="event__type-item">
+              <input id="event-type-drive-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="drive">
+              <label class="event__type-label  event__type-label--drive" for="event-type-drive-1">Drive</label>
+            </div>
+            <div class="event__type-item">
+              <input id="event-type-flight-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="flight" checked>
+              <label class="event__type-label  event__type-label--flight" for="event-type-flight-1">Flight</label>
+            </div>
+            <div class="event__type-item">
+              <input id="event-type-check-in-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="check-in">
+              <label class="event__type-label  event__type-label--check-in" for="event-type-check-in-1">Check-in</label>
+            </div>
+            <div class="event__type-item">
+              <input id="event-type-sightseeing-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="sightseeing">
+              <label class="event__type-label  event__type-label--sightseeing" for="event-type-sightseeing-1">Sightseeing</label>
+            </div>
+            <div class="event__type-item">
+              <input id="event-type-restaurant-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="restaurant">
+              <label class="event__type-label  event__type-label--restaurant" for="event-type-restaurant-1">Restaurant</label>
+            </div>
+          </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="Geneva" list="destination-list-1">
+        <datalist id="destination-list-1">
+          <option value="Amsterdam"></option>
+          <option value="Geneva"></option>
+          <option value="Chamonix"></option>
+        </datalist>
+      </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="19/03/19 00:00">
+        &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="19/03/19 00:00">
+      </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="">
+      </div>
+      <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
+      <button class="event__reset-btn" type="reset">Cancel</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">
+          <div class="event__offer-selector">
+            <input class="event__offer-checkbox  visually-hidden" id="event-offer-luggage-1" type="checkbox" name="event-offer-luggage" checked>
+            <label class="event__offer-label" for="event-offer-luggage-1">
+              <span class="event__offer-title">Add luggage</span>
+              &plus;&euro;&nbsp;
+              <span class="event__offer-price">30</span>
+            </label>
+          </div>
+          <div class="event__offer-selector">
+            <input class="event__offer-checkbox  visually-hidden" id="event-offer-comfort-1" type="checkbox" name="event-offer-comfort" checked>
+            <label class="event__offer-label" for="event-offer-comfort-1">
+              <span class="event__offer-title">Switch to comfort class</span>
+              &plus;&euro;&nbsp;
+              <span class="event__offer-price">100</span>
+            </label>
+          </div>
+          <div class="event__offer-selector">
+            <input class="event__offer-checkbox  visually-hidden" id="event-offer-meal-1" type="checkbox" name="event-offer-meal">
+            <label class="event__offer-label" for="event-offer-meal-1">
+              <span class="event__offer-title">Add meal</span>
+              &plus;&euro;&nbsp;
+              <span class="event__offer-price">15</span>
+            </label>
+          </div>
+          <div class="event__offer-selector">
+            <input class="event__offer-checkbox  visually-hidden" id="event-offer-seats-1" type="checkbox" name="event-offer-seats">
+            <label class="event__offer-label" for="event-offer-seats-1">
+              <span class="event__offer-title">Choose seats</span>
+              &plus;&euro;&nbsp;
+              <span class="event__offer-price">5</span>
+            </label>
+          </div>
+          <div class="event__offer-selector">
+            <input class="event__offer-checkbox  visually-hidden" id="event-offer-train-1" type="checkbox" name="event-offer-train">
+            <label class="event__offer-label" for="event-offer-train-1">
+              <span class="event__offer-title">Travel by train</span>
+              &plus;&euro;&nbsp;
+              <span class="event__offer-price">40</span>
+            </label>
+          </div>
+        </div>
+      </section>
+      <section class="event__section  event__section--destination">
+        <h3 class="event__section-title  event__section-title--destination">Destination</h3>
+        <p class="event__destination-description">Geneva is a city in Switzerland that lies at the southern tip of expansive Lac Léman (Lake Geneva). Surrounded by the Alps and Jura mountains, the city has views of dramatic Mont Blanc.</p>
+        <div class="event__photos-container">
+          <div class="event__photos-tape">
+            <img class="event__photo" src="img/photos/1.jpg" alt="Event photo">
+            <img class="event__photo" src="img/photos/2.jpg" alt="Event photo">
+            <img class="event__photo" src="img/photos/3.jpg" alt="Event photo">
+            <img class="event__photo" src="img/photos/4.jpg" alt="Event photo">
+            <img class="event__photo" src="img/photos/5.jpg" alt="Event photo">
+          </div>
+        </div>
+      </section>
+    </section>
+  </form>
+</li>`
+)
+
+}
+export default class AddPointView {
+  getTemplate() {
+    return createAddElement()
+  }
+  getElement() {
+    if (!this.element){
+      this.element = createElement(this.getTemplate())
+    }
+    return this.element
+  }
+  removeElement() {
+    this.element = null
+  }
+}