diff --git a/src/main.js b/src/main.js index e69de29..90a4875 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,14 @@ +import FilterView from './view/filter-view.js'; +import HeaderInfoView from './view/header-info-view.js'; +import {render} from './render.js'; +import TripPresenter from './presenter/trip-presenter.js'; + +const headerContainer = document.querySelector('.trip-main'); +const filterContainer = headerContainer.querySelector('.trip-controls__filters'); +const tripEventsContainer = document.querySelector('.trip-events'); +const tripPresenter = new TripPresenter({container: tripEventsContainer}); + +render (new FilterView(), filterContainer); +render (new HeaderInfoView(), headerContainer, 'afterbegin'); + +tripPresenter.init(); diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js new file mode 100644 index 0000000..11f814a --- /dev/null +++ b/src/presenter/trip-presenter.js @@ -0,0 +1,28 @@ + +import SortView from '../view/sort-view.js'; +import CreateFormView from '../view/create-form-view.js'; +import EditFormView from '../view/edit-form-view.js'; +import RoutePointListView from '../view/route-point-list-view.js'; +import RoutePointView from '../view/route-point-view.js'; +import {render} from '../render.js'; + +const ROUTE_POINT_AMOUNT = 3; + +export default class TripPresenter { + pointListElement = new RoutePointListView(); + + constructor({container}) { + this.container = container; + } + + init() { + render(new SortView(), this.container); + render(this.pointListElement, this.container); + render(new CreateFormView(), this.pointListElement.getElement()); + render(new EditFormView(), this.pointListElement.getElement()); + + for (let i = 0; i < ROUTE_POINT_AMOUNT; i++) { + render(new RoutePointView(), this.pointListElement.getElement()); + } + } +} diff --git a/src/view/create-form-view.js b/src/view/create-form-view.js new file mode 100644 index 0000000..1567537 --- /dev/null +++ b/src/view/create-form-view.js @@ -0,0 +1,177 @@ +import {createElement} from '../render.js'; + +function createFormTemplate() { + return (`
  • +
    +
    +
    + + + +
    +
    + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +
    +
    + +
    + + + + + + + +
    + +
    + + + — + + +
    + +
    + + +
    + + + + +
    +
    +
    +

    Offers

    + +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +
    + +
    +

    Destination

    +

    Chamonix-Mont-Blanc (usually shortened to Chamonix) is a resort area near the junction of France, Switzerland and Italy. At the base of Mont Blanc, the highest summit in the Alps, it's renowned for its skiing.

    +
    +
    +
    +
    • `); +} + +export default class CreateFormView { + getTemplate() { + return createFormTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/edit-form-view.js b/src/view/edit-form-view.js new file mode 100644 index 0000000..7b0e054 --- /dev/null +++ b/src/view/edit-form-view.js @@ -0,0 +1,177 @@ +import {createElement} from '../render.js'; + +function createEditFormTemplate() { + return (`
  • +
    +
    +
    + + + +
    +
    + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +
    +
    + +
    + + + + + + + +
    + +
    + + + — + + +
    + +
    + + +
    + + + + +
    +
    +
    +

    Offers

    + +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +
    + +
    +

    Destination

    +

    Chamonix-Mont-Blanc (usually shortened to Chamonix) is a resort area near the junction of France, Switzerland and Italy. At the base of Mont Blanc, the highest summit in the Alps, it's renowned for its skiing.

    +
    +
    +
    +
    • `); +} + +export default class EditFormView { + getTemplate() { + return createEditFormTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/filter-view.js b/src/view/filter-view.js new file mode 100644 index 0000000..c212977 --- /dev/null +++ b/src/view/filter-view.js @@ -0,0 +1,45 @@ +import {createElement} from '../render.js'; + +function createFilterTemplate() { + return (`
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + +
    `); +} + +export default class FilterView { + getTemplate() { + return createFilterTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/header-info-view.js b/src/view/header-info-view.js new file mode 100644 index 0000000..5c382f1 --- /dev/null +++ b/src/view/header-info-view.js @@ -0,0 +1,33 @@ +import {createElement} from '../render.js'; + +function createHeaderInfoTemplate() { + return (`
    +
    +

    Amsterdam — Chamonix — Geneva

    + +

    18 — 20 Mar

    +
    + +

    + Total: € 1230 +

    +
    `); +} + +export default class HeaderInfoView { + getTemplate() { + return createHeaderInfoTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/route-point-list-view.js b/src/view/route-point-list-view.js new file mode 100644 index 0000000..f23c4b1 --- /dev/null +++ b/src/view/route-point-list-view.js @@ -0,0 +1,22 @@ +import {createElement} from '../render'; + +function createRoutePointList() { + return ''; +} + +export default class RoutePointListView { + getTemplate() { + return createRoutePointList(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/route-point-view.js b/src/view/route-point-view.js new file mode 100644 index 0000000..4356c36 --- /dev/null +++ b/src/view/route-point-view.js @@ -0,0 +1,59 @@ +import {createElement} from '../render.js'; + +function createRoutePointTemplate() { + return (`
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + + + + +
    +
    • `); +} + +export default class RoutePointView { + getTemplate() { + return createRoutePointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/sort-view.js b/src/view/sort-view.js new file mode 100644 index 0000000..ed87b33 --- /dev/null +++ b/src/view/sort-view.js @@ -0,0 +1,48 @@ +import {createElement} from '../render.js'; + +function createSortTemplate() { + return (`
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    `); +} + +export default class SortView { + getTemplate() { + return createSortTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +}