From 36b3da5ec51b7e9e872db8dbc9af2f811ba4cbd9 Mon Sep 17 00:00:00 2001 From: Daniil Ponomarenko Date: Fri, 20 Dec 2024 09:04:52 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BA=D0=BE=D0=B4=20=D0=BD=D0=B0=20=D0=BC=D0=BE?= =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D0=B8=20View=20=D0=B8=20Presenter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 69 +++++----- src/main.js | 17 +++ src/presenter/event-list-presenter.js | 24 ++++ src/view/add-new-event-view.js | 186 ++++++++++++++++++++++++++ src/view/event-edit-view.js | 179 +++++++++++++++++++++++++ src/view/event-list-view.js | 23 ++++ src/view/event-view.js | 60 +++++++++ src/view/filter-view.js | 45 +++++++ src/view/new-event-button-view.js | 22 +++ src/view/sort-view.js | 49 +++++++ 10 files changed, 640 insertions(+), 34 deletions(-) create mode 100644 src/presenter/event-list-presenter.js create mode 100644 src/view/add-new-event-view.js create mode 100644 src/view/event-edit-view.js create mode 100644 src/view/event-list-view.js create mode 100644 src/view/event-view.js create mode 100644 src/view/filter-view.js create mode 100644 src/view/new-event-button-view.js create mode 100644 src/view/sort-view.js diff --git a/public/index.html b/public/index.html index 44c26b4..58d1dfb 100644 --- a/public/index.html +++ b/public/index.html @@ -1,41 +1,42 @@ - - - - - Big Trip - - - - - -
-
- - -
-
-
- - -
-
- + + + + + Big Trip + + + + + +
+
+ + +
+
+
+ + +
+
-
-
-
-
- +
+
+
+
+
+ - + - -
-
-
- - + + + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..5d2dbc1 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,17 @@ +import FilterView from './view/filter-view.js'; +import NewEventButtonView from './view/new-event-button-view.js'; +import { render } from './render.js'; +import EventListPresenter from './presenter/event-list-presenter.js'; + + +const siteTripMainElement = document.querySelector('.trip-main'); +const siteFiltersElement = siteTripMainElement.querySelector('.trip-controls__filters'); +const siteTripEventsElement = document.querySelector('.trip-events'); + +const eventsListPresenter = new EventListPresenter(siteTripEventsElement); + +render(new FilterView(), siteFiltersElement); +render(new NewEventButtonView(), siteTripMainElement); + +eventsListPresenter.init(); + diff --git a/src/presenter/event-list-presenter.js b/src/presenter/event-list-presenter.js new file mode 100644 index 0000000..8b62e7b --- /dev/null +++ b/src/presenter/event-list-presenter.js @@ -0,0 +1,24 @@ +import EventListView from '../view/event-list-view.js'; +import SortView from '../view/sort-view.js'; +import EventEditView from '../view/event-edit-view.js'; +import EventView from '../view/event-view.js'; +import { render } from '../render.js'; + + +export default class EventListPresenter { + EventListComponent = new EventListView(); + + constructor(EventListContainer) { + this.EventListContainer = EventListContainer; + } + + init() { + render(new SortView(), this.EventListContainer); + render(this.EventListComponent, this.EventListContainer); + render(new EventEditView(), this.EventListComponent.getElement()); + + for (let i = 0; i < 3; i++) { + render(new EventView(), this.EventListComponent.getElement()); + } + } +} diff --git a/src/view/add-new-event-view.js b/src/view/add-new-event-view.js new file mode 100644 index 0000000..ae68891 --- /dev/null +++ b/src/view/add-new-event-view.js @@ -0,0 +1,186 @@ +import { createElement } from '../render.js'; + + +const createAddNewEventTemplate = () => ` +
  • +
    +
    +
    + + + +
    +
    + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +
    +
    + +
    + + + + + + + +
    + +
    + + + — + + +
    + +
    + + +
    + + + +
    +
    +
    +

    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 AddNewEventView { + getTemplate() { + return createAddNewEventTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/event-edit-view.js b/src/view/event-edit-view.js new file mode 100644 index 0000000..9b41bd7 --- /dev/null +++ b/src/view/event-edit-view.js @@ -0,0 +1,179 @@ +import { createElement } from '../render.js'; + + +const EventEditTemplate = () => ` +
  • +
    +
    +
    + + + +
    +
    + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +
    +
    + +
    + + + + + + + +
    + +
    + + + — + + +
    + +
    + + +
    + + + + +
    +
    +
    +

    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 EventEditView { + getTemplate() { + return EventEditTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/event-list-view.js b/src/view/event-list-view.js new file mode 100644 index 0000000..a274290 --- /dev/null +++ b/src/view/event-list-view.js @@ -0,0 +1,23 @@ +import { createElement } from '../render.js'; + + +const createEventsListTemplate = () => ''; + + +export default class EventListView { + getTemplate() { + return createEventsListTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/event-view.js b/src/view/event-view.js new file mode 100644 index 0000000..6ca2b73 --- /dev/null +++ b/src/view/event-view.js @@ -0,0 +1,60 @@ +import { createElement } from '../render.js'; + + +const createEventTemplate = () => ` +
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + +
      +
    • + Order Uber + +€  + 20 +
      • +
    + + +
    +
    • +`; + +export default class EventView { + getTemplate() { + return createEventTemplate(); + } + + 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..bed1ec6 --- /dev/null +++ b/src/view/filter-view.js @@ -0,0 +1,45 @@ +import { createElement } from '../render.js'; + +const createFiltersTemplate = () => ` +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + +
    +`; + +export default class FilterView { + getTemplate() { + return createFiltersTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/new-event-button-view.js b/src/view/new-event-button-view.js new file mode 100644 index 0000000..2fa4de9 --- /dev/null +++ b/src/view/new-event-button-view.js @@ -0,0 +1,22 @@ +import { createElement } from '../render.js'; + +const createNewEventButtonTemplate = () => ` + +`; + +export default class NewEventButtonView { + getTemplate() { + return createNewEventButtonTemplate(); + } + + 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..3f71923 --- /dev/null +++ b/src/view/sort-view.js @@ -0,0 +1,49 @@ +import { createElement } from '../render.js'; + + +const createSortTemplate = () => ` +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +`; + +export default class SortView { + getTemplate() { + return createSortTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +}