From 5eb0716be4a13016a3e24335b8d1fd1655245831 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D1=80=D1=88=D0=BE=D0=B2=20=D0=95=D0=B3=D0=BE=D1=80?= Date: Sat, 6 Apr 2024 14:11:49 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BD=D0=B0=20=D0=BA=D0=BE=D0=BC=D0=BF?= =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B=20+=20=D0=BF=D1=80=D0=B5?= =?UTF-8?q?=D0=B7=D0=B5=D0=BD=D1=82=D0=B5=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 19 ++++ src/presenter/board-presenter.js | 30 +++++ src/view/create-filter.js | 49 ++++++++ src/view/create-item.js | 63 +++++++++++ src/view/create-sort.js | 52 +++++++++ src/view/create-trip.js | 35 ++++++ src/view/creator-view.js | 188 +++++++++++++++++++++++++++++++ src/view/editor-view.js | 181 +++++++++++++++++++++++++++++ src/view/events-list.js | 25 ++++ 9 files changed, 642 insertions(+) create mode 100644 src/presenter/board-presenter.js create mode 100644 src/view/create-filter.js create mode 100644 src/view/create-item.js create mode 100644 src/view/create-sort.js create mode 100644 src/view/create-trip.js create mode 100644 src/view/creator-view.js create mode 100644 src/view/editor-view.js create mode 100644 src/view/events-list.js diff --git a/src/main.js b/src/main.js index e69de29..83c86bc 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,19 @@ +import { + render, + RenderPosition +} from './render.js'; +import TripInfoView from './view/create-trip.js'; +import FiltersView from './view/create-filter.js'; +import PointsPresenter from './presenter/board-presenter.js'; + +const tripMainContainer = document.querySelector('.trip-main'); +const tripEventsContainer = document.querySelector('.trip-events'); +const filtersContainer = tripMainContainer.querySelector('.trip-controls__filters'); +const pointsPresenter = new PointsPresenter({ + tripEventsContainer +}); + +render(new TripInfoView(), tripMainContainer, RenderPosition.AFTERBEGIN); +render(new FiltersView(), filtersContainer); + +pointsPresenter.init(); diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js new file mode 100644 index 0000000..3cd5c9a --- /dev/null +++ b/src/presenter/board-presenter.js @@ -0,0 +1,30 @@ +import { + render +} from '../render.js'; +import EventListView from '../view/events-list.js'; +import EventItemView from '../view/create-item.js'; +import PointEditorView from '../view/editor-view.js'; +import SortingView from '../view/create-sort.js'; + +const POINTS_COUNT = 3; + +export default class PointsPresenter { + listComponent = new EventListView(); + sortingComponent = new SortingView(); + + constructor({ + tripEventsContainer + }) { + this.tripEventsContainer = tripEventsContainer; + } + + init() { + render(this.sortingComponent, this.tripEventsContainer); + render(this.listComponent, this.tripEventsContainer); + render(new PointEditorView(), this.listComponent.getElement()); + + for (let i = 0; i < POINTS_COUNT; i++) { + render(new EventItemView(), this.listComponent.getElement()); + } + } +} diff --git a/src/view/create-filter.js b/src/view/create-filter.js new file mode 100644 index 0000000..de10c10 --- /dev/null +++ b/src/view/create-filter.js @@ -0,0 +1,49 @@ +import { + createElement +} from '../render.js'; + +function createFiltersTemplate() { + return ( + `
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
` + ); +} + +export default class FiltersView { + getTemplate() { + return createFiltersTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/create-item.js b/src/view/create-item.js new file mode 100644 index 0000000..2e0f0db --- /dev/null +++ b/src/view/create-item.js @@ -0,0 +1,63 @@ +import { + createElement +} from '../render.js'; + +function createEventItemTemplate() { + return ( + `
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + +
      +
    • + Order Uber + +€  + 20 +
      • +
    + + +
    +
    • ` + ); +} + +export default class EventItemView { + getTemplate() { + return createEventItemTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/create-sort.js b/src/view/create-sort.js new file mode 100644 index 0000000..1f139a8 --- /dev/null +++ b/src/view/create-sort.js @@ -0,0 +1,52 @@ +import { + createElement +} from '../render.js'; + +function createSortingTemplate() { + return ( + `
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    ` + ); +} + +export default class SortingView { + getTemplate() { + return createSortingTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/create-trip.js b/src/view/create-trip.js new file mode 100644 index 0000000..8c5168f --- /dev/null +++ b/src/view/create-trip.js @@ -0,0 +1,35 @@ +import { + createElement +} from '../render.js'; + +function createTripInfoTemplate() { + return ( + `
    +
    +

    Amsterdam — Chamonix — Geneva

    +

    Mar 18 — 20

    +
    +

    + 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; + } +} diff --git a/src/view/creator-view.js b/src/view/creator-view.js new file mode 100644 index 0000000..70426e2 --- /dev/null +++ b/src/view/creator-view.js @@ -0,0 +1,188 @@ +import { + createElement +} from '../render.js'; + +function createNewPointTemplate() { + 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 NewPointView { + getTemplate() { + return createNewPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/editor-view.js b/src/view/editor-view.js new file mode 100644 index 0000000..373c1f3 --- /dev/null +++ b/src/view/editor-view.js @@ -0,0 +1,181 @@ +import { + createElement +} from '../render.js'; + +function createPointEditorTemplate() { + 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 PointEditorView { + getTemplate() { + return createPointEditorTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/events-list.js b/src/view/events-list.js new file mode 100644 index 0000000..964a599 --- /dev/null +++ b/src/view/events-list.js @@ -0,0 +1,25 @@ +import { + createElement +} from '../render.js'; + +function createEventListTemplate() { + return ''; +} + +export default class EventListView { + getTemplate() { + return createEventListTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +}