From 8767a4a49dab1b1735c866ba206cb74dd5ff61f0 Mon Sep 17 00:00:00 2001 From: Sergei Date: Mon, 2 Sep 2024 00:25:29 -0400 Subject: [PATCH] 1.24 modulation --- public/index.html | 1 - src/main.js | 5 + src/presenter/global-presenter.js | 68 ++++++++++ src/view/event-add-and-edit-form-view.js | 163 +++++++++++++++++++++++ src/view/event-add-button-view.js | 25 ++++ src/view/trip-event-list-item-view.js | 29 ++++ src/view/trip-events-list-view.js | 25 ++++ src/view/trip-events-point-view.js | 59 ++++++++ src/view/trip-filters-view.js | 43 ++++++ src/view/trip-info.js | 34 +++++ src/view/trip-sort-view.js | 46 +++++++ 11 files changed, 497 insertions(+), 1 deletion(-) create mode 100644 src/presenter/global-presenter.js create mode 100644 src/view/event-add-and-edit-form-view.js create mode 100644 src/view/event-add-button-view.js create mode 100644 src/view/trip-event-list-item-view.js create mode 100644 src/view/trip-events-list-view.js create mode 100644 src/view/trip-events-point-view.js create mode 100644 src/view/trip-filters-view.js create mode 100644 src/view/trip-info.js create mode 100644 src/view/trip-sort-view.js diff --git a/public/index.html b/public/index.html index 44c26b4..ec85658 100644 --- a/public/index.html +++ b/public/index.html @@ -22,7 +22,6 @@ - diff --git a/src/main.js b/src/main.js index e69de29..1b2d486 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,5 @@ +import GlobalPresenter from './presenter/global-presenter.js'; + +const globalPresenter = new GlobalPresenter(); + +globalPresenter.init(); diff --git a/src/presenter/global-presenter.js b/src/presenter/global-presenter.js new file mode 100644 index 0000000..8f79de7 --- /dev/null +++ b/src/presenter/global-presenter.js @@ -0,0 +1,68 @@ +import { render, RenderPosition } from '../render.js'; +import TripInfo from '../view/trip-info'; +import TripFiltersView from '../view/trip-filters-view'; +import EventAddButtonView from '../view/event-add-button-view'; +import TripSortView from '../view/trip-sort-view'; +import TripEventsListView from '../view/trip-events-list-view'; +import TripListItem from '../view/trip-event-list-item-view'; +import TripEventsPointView from '../view/trip-events-point-view'; +import EventAddAndEditFormView from '../view/event-add-and-edit-form-view'; + +export default class GlobalPresenter { + + constructor() { + this.pageHeader = document.querySelector('.page-header'); + this.tripMain = this.pageHeader.querySelector('.trip-main'); + this.tripFilters = this.pageHeader.querySelector('.trip-controls__filters'); + + this.pageMain = document.querySelector('.page-main'); + this.tripEvents = this.pageMain.querySelector('.trip-events'); + } + + renderTripInfo() { + render(new TripInfo(), this.tripMain, RenderPosition.AFTERBEGIN); + } + + renderTripFilters() { + render(new TripFiltersView(), this.tripFilters, RenderPosition.BEFOREEND); + } + + renderEventAddButton() { + render(new EventAddButtonView(), this.tripMain, RenderPosition.BEFOREEND); + } + + renderTripSort() { + render(new TripSortView(), this.tripEvents, RenderPosition.BEFOREEND); + } + + renderTripEventsList() { + render(new TripEventsListView(), this.tripEvents, RenderPosition.BEFOREEND); + } + + renderFormEdit() { + this.tripEventsList = this.tripEvents.querySelector('.trip-events__list'); + + const formEditPoint = new EventAddAndEditFormView(); + + render(new TripListItem(formEditPoint.getTemplate()), this.tripEventsList, RenderPosition.BEFOREEND); + } + + renderTripEventPoint() { + this.tripEventsList = this.tripEvents.querySelector('.trip-events__list'); + + const tripEventPoint = new TripEventsPointView(); + + [1, 2, 3].forEach(() => render(new TripListItem(tripEventPoint.getTemplate()), this.tripEventsList, RenderPosition.BEFOREEND)); + + } + + init() { + this.renderTripInfo(); + this.renderTripFilters(); + this.renderEventAddButton(); + this.renderTripSort(); + this.renderTripEventsList(); + this.renderFormEdit(); + this.renderTripEventPoint(); + } +} diff --git a/src/view/event-add-and-edit-form-view.js b/src/view/event-add-and-edit-form-view.js new file mode 100644 index 0000000..38eaa26 --- /dev/null +++ b/src/view/event-add-and-edit-form-view.js @@ -0,0 +1,163 @@ +import { createElement } from '../render.js'; + +function createEventAddAndEditFormTemplate() { + 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 EventAddAndEditFormView { + getTemplate() { + return createEventAddAndEditFormTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/event-add-button-view.js b/src/view/event-add-button-view.js new file mode 100644 index 0000000..926907a --- /dev/null +++ b/src/view/event-add-button-view.js @@ -0,0 +1,25 @@ +import { createElement } from '../render.js'; + +function createEventAddButtonTemplate() { + return ` + + `; +} + +export default class EventAddButtonView { + getTemplate() { + return createEventAddButtonTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-event-list-item-view.js b/src/view/trip-event-list-item-view.js new file mode 100644 index 0000000..1d0b8a6 --- /dev/null +++ b/src/view/trip-event-list-item-view.js @@ -0,0 +1,29 @@ +import { createElement } from '../render'; + +function createTripListItemTemplate(data) { + return ` +
  • ${data}
    • + `; +} + +export default class TripListItem { + constructor(data) { + this.data = data; + } + + getTemplate() { + return createTripListItemTemplate(this.data); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-events-list-view.js b/src/view/trip-events-list-view.js new file mode 100644 index 0000000..d9cc59d --- /dev/null +++ b/src/view/trip-events-list-view.js @@ -0,0 +1,25 @@ +import {createElement} from '../render.js'; + +function createTripEventsListTemplate() { + return ` + + `; +} + +export default class TripEventsListView { + getTemplate() { + return createTripEventsListTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-events-point-view.js b/src/view/trip-events-point-view.js new file mode 100644 index 0000000..2549d90 --- /dev/null +++ b/src/view/trip-events-point-view.js @@ -0,0 +1,59 @@ +import {createElement} from '../render.js'; + +function createTripEventsPointTemplate() { + return ` +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + + + + +
    + `; +} + +export default class TripEventsPointView { + getTemplate() { + return createTripEventsPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-filters-view.js b/src/view/trip-filters-view.js new file mode 100644 index 0000000..8ccb0ab --- /dev/null +++ b/src/view/trip-filters-view.js @@ -0,0 +1,43 @@ +import {createElement} from '../render.js'; + +function createTripFiltersTemplate() { + return ` +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    + `; +} + +export default class TripFiltersView { + getTemplate() { + return createTripFiltersTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-info.js b/src/view/trip-info.js new file mode 100644 index 0000000..b94beef --- /dev/null +++ b/src/view/trip-info.js @@ -0,0 +1,34 @@ +import {createElement} from '../render.js'; + +function createTripInfoTemplate() { + return ` +
    +
    +

    Amsterdam — Chamonix — Geneva

    +

    18 — 20 Mar

    +
    +

    + Total: € 1230 +

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