From d28b945438e11fcfab5fa469f3c14e72b2f6cf56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D1=81=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=A2=D0=BE=D0=BF=D0=BE=D1=80=D0=BA=D0=BE=D0=B2=D0=B0?= Date: Mon, 26 Feb 2024 10:07:28 +0500 Subject: [PATCH] =?UTF-8?q?1.8.=20=D0=92=D1=80=D0=B5=D0=BC=D1=8F=20=D1=80?= =?UTF-8?q?=D0=B0=D0=B7=D0=B1=D0=B8=D0=B2=D0=B0=D1=82=D1=8C=20=D0=BA=D0=B0?= =?UTF-8?q?=D0=BC=D0=BD=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 13 +++ src/presenter/trip-presenter.js | 22 ++++ src/view/edit-point-view.js | 186 ++++++++++++++++++++++++++++++++ src/view/filter-view.js | 43 ++++++++ src/view/point-list-view.js | 25 +++++ src/view/point-view.js | 61 +++++++++++ src/view/sort-view.js | 47 ++++++++ src/view/trip-info-view.js | 35 ++++++ 8 files changed, 432 insertions(+) create mode 100644 src/presenter/trip-presenter.js create mode 100644 src/view/edit-point-view.js create mode 100644 src/view/filter-view.js create mode 100644 src/view/point-list-view.js create mode 100644 src/view/point-view.js create mode 100644 src/view/sort-view.js create mode 100644 src/view/trip-info-view.js diff --git a/src/main.js b/src/main.js index e69de29..0efd436 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,13 @@ +import TripInfoView from './view/trip-info-view.js'; +import FilterView from './view/filter-view.js'; +import { render, RenderPosition } from './render.js'; +import TripPresenter from './presenter/trip-presenter.js'; + +const tripInfoElement = document.querySelector('.trip-main'); +const siteMainElement = document.querySelector('.page-main'); +const tripPresenter = new TripPresenter(siteMainElement.querySelector('.trip-events')); + +render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN); +render(new FilterView(), tripInfoElement.querySelector('.trip-controls__filters')); + +tripPresenter.init(); \ No newline at end of file diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js new file mode 100644 index 0000000..7fb15c8 --- /dev/null +++ b/src/presenter/trip-presenter.js @@ -0,0 +1,22 @@ +import SortView from '../view/sort-view.js'; +import EditPointView from '../view/edit-point-view.js'; +import PointView from '../view/point-view.js'; +import TripView from '../view/point-list-view.js'; +import { render } from '../render.js'; + +export default class TripPresenter { + constructor(tripContainer) { + this.tripContainer = tripContainer; + this.pointList = new TripView(); + } + + init() { + render(new SortView(), this.tripContainer); + render(this.pointList, this.tripContainer); + render(new EditPointView(), this.pointList.getElement()); + + for (let i = 0; i < 3; i++) { + render(new PointView(), this.pointList.getElement()); + } + } +} \ No newline at end of file diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js new file mode 100644 index 0000000..e58867c --- /dev/null +++ b/src/view/edit-point-view.js @@ -0,0 +1,186 @@ +import { createElement } from '../render.js'; + +const createEditPointTemplate = () => { + return ( + `
  • +
    +
    +
    + + + +
    +
    + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +
    +
    + +
    + + + + + + + +
    + +
    + + + — + + +
    + +
    + + +
    + + + +
    +
    +
    +

    Offers

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

    Destination

    +

    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.

    + +
    +
    + Event photo + Event photo + Event photo + Event photo + Event photo +
    +
    +
    +
    +
    +
    • ` + ); +} + +export default class EditPointView { + getTemplate() { + return createEditPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} \ No newline at end of file diff --git a/src/view/filter-view.js b/src/view/filter-view.js new file mode 100644 index 0000000..3044dd3 --- /dev/null +++ b/src/view/filter-view.js @@ -0,0 +1,43 @@ +import { createElement } from '../render.js'; + +const 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; + } +} \ No newline at end of file diff --git a/src/view/point-list-view.js b/src/view/point-list-view.js new file mode 100644 index 0000000..08670f1 --- /dev/null +++ b/src/view/point-list-view.js @@ -0,0 +1,25 @@ +import { createElement } from '../render.js'; + +const createPointListTemplate = () => { + return ( + `