diff --git a/src/main.js b/src/main.js index e69de29..d51c181 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,14 @@ +import FiltersView from './view/filters-view.js'; +import TripInfoView from './view/trip-info-view.js'; +import {RenderPosition, render} from './render.js'; +import EventsPresenter from './presenter/events-presenter.js'; + +const tripInfoContainer = document.querySelector('.trip-main'); +const filtersContainer = document.querySelector('.trip-controls__filters'); +const eventsContainer = document.querySelector('.trip-events'); +const eventsPresenter = new EventsPresenter({eventsContainer: eventsContainer}); + +render(new TripInfoView(), tripInfoContainer, RenderPosition.AFTERBEGIN); +render(new FiltersView(), filtersContainer); + +eventsPresenter.init(); diff --git a/src/presenter/events-presenter.js b/src/presenter/events-presenter.js new file mode 100644 index 0000000..5a253b0 --- /dev/null +++ b/src/presenter/events-presenter.js @@ -0,0 +1,23 @@ +import SortView from '../view/sort-view.js'; +import EventsListView from '../view/events-list-view.js'; +import EditPointView from '../view/edit-point-view.js'; +import EventsItemView from '../view/events-item-view.js'; +import {render} from '../render.js'; + +export default class BoardPresenter { + eventsListComponent = new EventsListView(); + eventsContainer; + + constructor({eventsContainer}) { + this.eventsContainer = eventsContainer; + } + + init() { + render(new SortView(), this.eventsContainer); + render(this.eventsListComponent, this.eventsContainer); + render(new EditPointView(), this.eventsListComponent.getElement()); + for (let i = 0; i < 3; i++) { + render(new EventsItemView(), this.eventsListComponent.getElement()); + } + } +} diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js new file mode 100644 index 0000000..39e92d2 --- /dev/null +++ b/src/view/edit-point-view.js @@ -0,0 +1,179 @@ +import {createElement} from '../render.js'; + +function createEditPointTemplate() { + 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 EditPointView { + getTemplate() { + return createEditPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/events-item-view.js b/src/view/events-item-view.js new file mode 100644 index 0000000..f4ea79a --- /dev/null +++ b/src/view/events-item-view.js @@ -0,0 +1,61 @@ +import {createElement} from '../render.js'; + +function createEventsItemTemplate() { + return ( + `
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + + + + +
    +
    • ` + ); +} + +export default class EventsItemView { + getTemplate() { + return createEventsItemTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/events-list-view.js b/src/view/events-list-view.js new file mode 100644 index 0000000..876a1bf --- /dev/null +++ b/src/view/events-list-view.js @@ -0,0 +1,23 @@ +import {createElement} from '../render.js'; + +function createEventsListTemplate() { + return ''; +} + +export default class EventsListView { + getTemplate() { + return createEventsListTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/filters-view.js b/src/view/filters-view.js new file mode 100644 index 0000000..cacdda5 --- /dev/null +++ b/src/view/filters-view.js @@ -0,0 +1,47 @@ +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/sort-view.js b/src/view/sort-view.js new file mode 100644 index 0000000..43a0db8 --- /dev/null +++ b/src/view/sort-view.js @@ -0,0 +1,50 @@ +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; + } +} diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js new file mode 100644 index 0000000..2cfcbd3 --- /dev/null +++ b/src/view/trip-info-view.js @@ -0,0 +1,35 @@ +import {createElement} from '../render.js'; + +function createTripInfoTemplate() { + return ( + `
    +
    +

    Amsterdam — Chamonix — Geneva

    + +

    18 — 20 Mar

    +
    + +

    + Total: € 1230 +

    +
    ` + ); +} + +export default class TripInfoView { + getTemplate() { + return createTripInfoTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +}