From 3b27f24dec9a07ecfe39d6e7b8be6f4066dff0b2 Mon Sep 17 00:00:00 2001 From: Vitaly Lipko Date: Sun, 15 Dec 2024 16:51:56 +0700 Subject: [PATCH] add views and presenter --- src/main.js | 5 + src/presenter/presenter.js | 23 +++++ src/view/create-form.js | 186 +++++++++++++++++++++++++++++++++++++ src/view/edit-form.js | 179 +++++++++++++++++++++++++++++++++++ src/view/event-item.js | 61 ++++++++++++ src/view/event-list.js | 25 +++++ src/view/filters.js | 47 ++++++++++ src/view/sorting.js | 50 ++++++++++ 8 files changed, 576 insertions(+) create mode 100644 src/presenter/presenter.js create mode 100644 src/view/create-form.js create mode 100644 src/view/edit-form.js create mode 100644 src/view/event-item.js create mode 100644 src/view/event-list.js create mode 100644 src/view/filters.js create mode 100644 src/view/sorting.js diff --git a/src/main.js b/src/main.js index e69de29..a1c2b6b 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,5 @@ +import Presenter from './presenter/presenter'; + +const presenter = new Presenter(); + +presenter.init(); diff --git a/src/presenter/presenter.js b/src/presenter/presenter.js new file mode 100644 index 0000000..13ed6b7 --- /dev/null +++ b/src/presenter/presenter.js @@ -0,0 +1,23 @@ +import {render} from '../render'; +import EventItem from '../view/event-item'; +import EventList from '../view/event-list'; +import Filters from '../view/filters'; +import Sorting from '../view/sorting'; +import EditForm from '../view/edit-form'; + +export default class Presenter { + eventListComponent = new EventList(); + eventsContainer = document.querySelector('.trip-events'); + filterContainer = document.querySelector('.trip-controls__filters'); + + init() { + render(new Filters(), this.filterContainer); + render(new Sorting(), this.eventsContainer); + render(this.eventListComponent, this.eventsContainer); + render(new EditForm(), this.eventListComponent.getElement()); + + for (let i = 0; i < 3; i++) { + render(new EventItem(), this.eventListComponent.getElement()); + } + } +} diff --git a/src/view/create-form.js b/src/view/create-form.js new file mode 100644 index 0000000..4d06fc0 --- /dev/null +++ b/src/view/create-form.js @@ -0,0 +1,186 @@ +import {createElement} from '../render'; + +function getCreateFormTemplate() { + 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 CreateForm { + getTemplate() { + return getCreateFormTemplate(); + } + + getElement() { + if(!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/edit-form.js b/src/view/edit-form.js new file mode 100644 index 0000000..c5742da --- /dev/null +++ b/src/view/edit-form.js @@ -0,0 +1,179 @@ +import {createElement} from '../render'; + +function getEditFormTemplate() { + 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 EditForm { + getTemplate() { + return getEditFormTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/event-item.js b/src/view/event-item.js new file mode 100644 index 0000000..280b0c4 --- /dev/null +++ b/src/view/event-item.js @@ -0,0 +1,61 @@ +import {createElement} from '../render'; + +function getEventItemTemplate() { + return ` +
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + +
      +
    • + Order Uber + +€  + 20 +
      • +
    + + +
    +
    • + `; +} + +export default class EventItem { + getTemplate() { + return getEventItemTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/event-list.js b/src/view/event-list.js new file mode 100644 index 0000000..a4f73f9 --- /dev/null +++ b/src/view/event-list.js @@ -0,0 +1,25 @@ +import {createElement} from '../render'; + +function getEventListTemplate() { + return ` + + `; +} + +export default class EventList { + getTemplate() { + return getEventListTemplate(); + } + + getElement() { + if(!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/filters.js b/src/view/filters.js new file mode 100644 index 0000000..5766620 --- /dev/null +++ b/src/view/filters.js @@ -0,0 +1,47 @@ +import {createElement} from '../render'; + +function filtersTemplate() { + return ` +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + +
    + `; +} + +export default class Filters { + getTemplate() { + return filtersTemplate(); + } + + getElement() { + if(!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/sorting.js b/src/view/sorting.js new file mode 100644 index 0000000..0fc8a53 --- /dev/null +++ b/src/view/sorting.js @@ -0,0 +1,50 @@ +import {createElement} from '../render'; + +function getSortingTemplate() { + return ` +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    + `; +} + +export default class Sorting { + getTemplate() { + return getSortingTemplate(); + } + + getElement() { + if(!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +}