From 84160e17df519125238f1eaf67626e3a52ce91a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A1=D0=BE=D1=84=D1=8C=D1=8F?= Date: Mon, 15 Apr 2024 22:29:33 +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/consts.js | 3 + src/main.js | 12 +++ src/presenter/list-presenter.js | 22 ++++ src/view/add-new-point-view.js | 186 ++++++++++++++++++++++++++++++++ src/view/edit-point-view.js | 179 ++++++++++++++++++++++++++++++ src/view/filter-view.js | 47 ++++++++ src/view/list-point-view.js | 66 ++++++++++++ src/view/list-view.js | 23 ++++ src/view/sort-view.js | 50 +++++++++ 9 files changed, 588 insertions(+) create mode 100644 src/consts.js create mode 100644 src/presenter/list-presenter.js create mode 100644 src/view/add-new-point-view.js create mode 100644 src/view/edit-point-view.js create mode 100644 src/view/filter-view.js create mode 100644 src/view/list-point-view.js create mode 100644 src/view/list-view.js create mode 100644 src/view/sort-view.js diff --git a/src/consts.js b/src/consts.js new file mode 100644 index 0000000..a00b7f1 --- /dev/null +++ b/src/consts.js @@ -0,0 +1,3 @@ +const POINT_COUNT = 3; + +export {POINT_COUNT}; diff --git a/src/main.js b/src/main.js index e69de29..c2f8e84 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,12 @@ +import FilterView from './view/filter-view.js'; +import SortView from './view/sort-view.js'; +import ListPresenter from './presenter/list-presenter.js'; +import {render} from './render.js'; + +const filterContainer = document.querySelector('.trip-controls__filters'); +const sortAndListContainer = document.querySelector('.trip-events'); +const listPresenter = new ListPresenter({container: sortAndListContainer}); + +render(new FilterView(), filterContainer); +render(new SortView(), sortAndListContainer); +listPresenter.init(); diff --git a/src/presenter/list-presenter.js b/src/presenter/list-presenter.js new file mode 100644 index 0000000..5f0ad30 --- /dev/null +++ b/src/presenter/list-presenter.js @@ -0,0 +1,22 @@ +import {POINT_COUNT} from '../consts.js'; +import ListView from '../view/list-view.js'; +import EditPointView from '../view/edit-point-view.js'; +import ListPointView from '../view/list-point-view.js'; +import {render} from '../render.js'; + +export default class ListPresenter { + listComponent = new ListView(); + + constructor({container}) { + this.container = container; + } + + init() { + render(this.listComponent, this.container); + render(new EditPointView(), this.listComponent.getElement()); + + for (let i = 0; i < POINT_COUNT; i++) { + render(new ListPointView(), this.listComponent.getElement()); + } + } +} diff --git a/src/view/add-new-point-view.js b/src/view/add-new-point-view.js new file mode 100644 index 0000000..9996696 --- /dev/null +++ b/src/view/add-new-point-view.js @@ -0,0 +1,186 @@ +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 AddNewPointView { + getTemplate() { + return createNewPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js new file mode 100644 index 0000000..bfc75ff --- /dev/null +++ b/src/view/edit-point-view.js @@ -0,0 +1,179 @@ +import {createElement} from '../render'; + +function createEditPointTemplate() { + 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 EditPointView { + getTemplate() { + return createEditPointTemplate(); + } + + 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..e461319 --- /dev/null +++ b/src/view/filter-view.js @@ -0,0 +1,47 @@ +import {createElement} from '../render.js'; + +function 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; + } +} diff --git a/src/view/list-point-view.js b/src/view/list-point-view.js new file mode 100644 index 0000000..f3b585e --- /dev/null +++ b/src/view/list-point-view.js @@ -0,0 +1,66 @@ +import {createElement} from '../render.js'; + +function createListPointTemplate() { + return ` +
  • +
    + +
    + Event type icon +
    +

    Flight Chamonix

    +
    +

    + + — + +

    +

    01H 10M

    +
    +

    + € 160 +

    + +
      +
    • + Add luggage + +€  + 50 +
      • +
    • + Switch to comfort + +€  + 80 +
      • +
    + + +
    +
    • + `; +} + +export default class ListPointView { + getTemplate() { + return createListPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/list-view.js b/src/view/list-view.js new file mode 100644 index 0000000..49f1c03 --- /dev/null +++ b/src/view/list-view.js @@ -0,0 +1,23 @@ +import {createElement} from '../render.js'; + +function createListTemplate() { + return ''; +} + +export default class ListView { + getTemplate() { + return createListTemplate(); + } + + 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..bd38720 --- /dev/null +++ b/src/view/sort-view.js @@ -0,0 +1,50 @@ +import {createElement} from '../render'; + +function createSortTemplate() { + return ` +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    + `; +} + +export default class SortView { + getTemplate() { + return createSortTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +}