From 2907b9e8858a53693b20a2217590b0ff90c76adc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=91=D0=BE?= =?UTF-8?q?=D1=80=D0=BE=D0=B4=D0=B5=D0=BD=D0=BA=D0=BE?= Date: Mon, 2 Sep 2024 13:44:15 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D0=BF=D0=BE=D0=BB=D0=BE=D0=B2=D0=B8=D0=BD?= =?UTF-8?q?=D0=B0=20=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 3 + src/main.js | 20 ++++ src/render.js | 9 +- src/view/trip-event-view.js | 49 ++++++++++ src/view/trip-filter-view.js | 51 ++++++++++ src/view/trip-info-view.js | 32 +++++++ src/view/trip-list-view.js | 181 +++++++++++++++++++++++++++++++++++ 7 files changed, 343 insertions(+), 2 deletions(-) create mode 100644 src/view/trip-event-view.js create mode 100644 src/view/trip-filter-view.js create mode 100644 src/view/trip-info-view.js create mode 100644 src/view/trip-list-view.js diff --git a/public/index.html b/public/index.html index 44c26b4..9c7b69c 100644 --- a/public/index.html +++ b/public/index.html @@ -15,6 +15,9 @@
+
+ +
diff --git a/src/main.js b/src/main.js index e69de29..2ba1717 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,20 @@ +import TripInfoView from './view/trip-info-view.js'; +import TripFilterView from './view/trip-filter-view.js'; +import TripSortView from './view/trip-event-view.js'; +import ListView from './view/trip-list-view.js'; + +import {render, renderBegin} from './render.js'; + +const siteMainElement = document.querySelector('.page-body'); +const siteTripInfoElement = siteMainElement.querySelector('.trip-main'); // шапка +const siteTripInfo = siteMainElement.querySelector('.trip-info'); // Инфо в шапке про маршрут +const siteFiltersElement = siteTripInfoElement.querySelector('.trip-controls__filters'); // Фильтры EVERYTHING, FUTURE, PAST и т.д +const siteEventsElement = siteMainElement.querySelector('.trip-events'); // Сортировка DAY, EVENT, TIME итд. +const siteListElement = siteMainElement.querySelector('.trip-events'); // Список маршрутов + + +renderBegin(new TripInfoView(), siteTripInfo); // Отображение информации вверху про маршрут +render(new TripFilterView(), siteFiltersElement); // Отрисовка компонента Фильтры +render(new TripSortView(), siteEventsElement); // Отрисовка компонента Эвент +render(new ListView(), siteListElement); // Отрисовка компонента Лист(Список с маршрутами) + diff --git a/src/render.js b/src/render.js index 8c22c92..70bda0a 100644 --- a/src/render.js +++ b/src/render.js @@ -15,5 +15,10 @@ function createElement(template) { function render(component, container, place = RenderPosition.BEFOREEND) { container.insertAdjacentElement(place, component.getElement()); } - -export {RenderPosition, createElement, render}; +function renderBegin(component, container, place = RenderPosition.BEFOREBEGIN) { + container.insertAdjacentElement(place, component.getElement()); +} +function renderAfterBegin(component, container, place = RenderPosition.AFTERBEGIN) { + container.insertAdjacentElement(place, component.getElement()); +} +export {RenderPosition, createElement, render, renderBegin, renderAfterBegin}; diff --git a/src/view/trip-event-view.js b/src/view/trip-event-view.js new file mode 100644 index 0000000..0802c9b --- /dev/null +++ b/src/view/trip-event-view.js @@ -0,0 +1,49 @@ +import {createElement} from '../render.js'; + +function createTripSortTemplate() { + return ( + `
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
`); +} + +export default class SortView { + getTemplate() { + return createTripSortTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-filter-view.js b/src/view/trip-filter-view.js new file mode 100644 index 0000000..caad377 --- /dev/null +++ b/src/view/trip-filter-view.js @@ -0,0 +1,51 @@ +import {createElement} from '../render.js'; + +function createTripFilterTemplate() { + return ( + `
+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
`); +} + +export default class TripFilterView { + getTemplate() { + return createTripFilterTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js new file mode 100644 index 0000000..dc540f8 --- /dev/null +++ b/src/view/trip-info-view.js @@ -0,0 +1,32 @@ +import {createElement} from '../render.js'; + +function createTripInfoTemplate() { + return ( + `div class="trip-info__main"> +

Amsterdam — Chamonix — Geneva

+ +

18 — 20 Mar

+
+ +

+ 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/trip-list-view.js b/src/view/trip-list-view.js new file mode 100644 index 0000000..10af6a0 --- /dev/null +++ b/src/view/trip-list-view.js @@ -0,0 +1,181 @@ +import {createElement} from '../render.js'; + +function createListTemplate() { + return ( + `
    +
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + +
      +
    • + Order Uber + +€  + 20 +
      • +
    + + +
    +
    • + +
  • +
    + +
    + Event type icon +
    +

    Flight Chamonix

    +
    +

    + + — + +

    +

    01H 10M

    +
    +

    + € 160 +

    + +
      +
    • + Add luggage + +€  + 50 +
      • +
    • + Switch to comfort + +€  + 80 +
      • +
    + + +
    +
    • + +
  • +
    + +
    + Event type icon +
    +

    Drive Chamonix

    +
    +

    + + — + +

    +

    01H 35M

    +
    +

    + € 160 +

    + +
      +
    • + Rent a car + +€  + 200 +
      • +
    + + +
    +
    • + +
  • +
    + +
    + Event type icon +
    +

    Check-in Chamonix

    +
    +

    + + — + +

    +

    40M

    +
    +

    + € 600 +

    + +
      +
    • + Add breakfast + +€  + 50 +
      • +
    + + +
    +
    • +
`); +} + +export default class ListView { + getTemplate() { + return createListTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} From 00255aa3721e7c26a3ed4474368a3a520f64a081 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=91=D0=BE?= =?UTF-8?q?=D1=80=D0=BE=D0=B4=D0=B5=D0=BD=D0=BA=D0=BE?= Date: Thu, 5 Sep 2024 23:04:07 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=B7=D0=B5=D0=BD=D1=82=D0=B5=D1=80,=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=BA=D0=B0=20=D0=BE=D1=82=D1=80=D0=B8=D1=81=D0=BE?= =?UTF-8?q?=D0=B2=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=20=D0=9D=D0=95=D0=9A=D0=9E?= =?UTF-8?q?=D0=A0=D0=A0=D0=95=D0=9A=D0=A2=D0=9D=D0=9E!!!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 7 ++ src/presenter/board-presenter.js | 29 +++++ src/view/trip-addPoint-view.js | 176 +++++++++++++++++++++++++++++++ src/view/trip-filter-view.js | 9 +- src/view/trip-list-view.js | 119 --------------------- 5 files changed, 214 insertions(+), 126 deletions(-) create mode 100644 src/presenter/board-presenter.js create mode 100644 src/view/trip-addPoint-view.js diff --git a/src/main.js b/src/main.js index 2ba1717..0e18589 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,11 @@ import TripInfoView from './view/trip-info-view.js'; import TripFilterView from './view/trip-filter-view.js'; import TripSortView from './view/trip-event-view.js'; +import AddPoint from './view/trip-addPoint-view.js'; import ListView from './view/trip-list-view.js'; +import BoardPresenter from './presenter/board-presenter.js'; + import {render, renderBegin} from './render.js'; const siteMainElement = document.querySelector('.page-body'); @@ -10,11 +13,15 @@ const siteTripInfoElement = siteMainElement.querySelector('.trip-main'); // ша const siteTripInfo = siteMainElement.querySelector('.trip-info'); // Инфо в шапке про маршрут const siteFiltersElement = siteTripInfoElement.querySelector('.trip-controls__filters'); // Фильтры EVERYTHING, FUTURE, PAST и т.д const siteEventsElement = siteMainElement.querySelector('.trip-events'); // Сортировка DAY, EVENT, TIME итд. +const siteAddPointElement = siteMainElement.querySelector('.trip-events'); // Форма const siteListElement = siteMainElement.querySelector('.trip-events'); // Список маршрутов +const boardPresenter = new BoardPresenter({boardContainer: siteMainElement}); renderBegin(new TripInfoView(), siteTripInfo); // Отображение информации вверху про маршрут render(new TripFilterView(), siteFiltersElement); // Отрисовка компонента Фильтры render(new TripSortView(), siteEventsElement); // Отрисовка компонента Эвент +render(new AddPoint(), siteAddPointElement); // Отрисовка формы render(new ListView(), siteListElement); // Отрисовка компонента Лист(Список с маршрутами) +boardPresenter.init(); diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js new file mode 100644 index 0000000..794f386 --- /dev/null +++ b/src/presenter/board-presenter.js @@ -0,0 +1,29 @@ +//import BoardView from '../view/board-view.js'; +import TripFilterView from '../view/trip-filter-view.js'; +import ListView from '../view/trip-list-view.js'; +//import TaskView from '../view/task-view.js'; +//import TaskEditView from '../view/task-edit-view.js'; +import AddPoint from '../view/trip-addPoint-view.js'; +import {render} from '../render.js'; + +export default class BoardPresenter { + boardComponent = new ListView(); + taskListComponent = new ListView(); + + constructor({boardContainer}) { + this.boardContainer = boardContainer; + } + + init() { + render(this.boardComponent, this.boardContainer); + render(new TripFilterView(), this.boardComponent.getElement()); + render(this.taskListComponent, this.boardComponent.getElement()); + render(new AddPoint(), this.taskListComponent.getElement()); + + for (let i = 0; i < 3; i++) { + render(new ListView(), this.taskListComponent.getElement()); + } + + render(new AddPoint(), this.boardComponent.getElement()); + } +} diff --git a/src/view/trip-addPoint-view.js b/src/view/trip-addPoint-view.js new file mode 100644 index 0000000..c99c1f3 --- /dev/null +++ b/src/view/trip-addPoint-view.js @@ -0,0 +1,176 @@ +import {createElement} from '../render.js'; + +function createAddPointTemplate() { + 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 AddPoint { + getTemplate() { + return createAddPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-filter-view.js b/src/view/trip-filter-view.js index caad377..524bea1 100644 --- a/src/view/trip-filter-view.js +++ b/src/view/trip-filter-view.js @@ -2,10 +2,7 @@ import {createElement} from '../render.js'; function createTripFilterTemplate() { return ( - `
-
- -
+ `
@@ -27,9 +24,7 @@ function createTripFilterTemplate() {
-
-
-
`); + `); } export default class TripFilterView { diff --git a/src/view/trip-list-view.js b/src/view/trip-list-view.js index 10af6a0..65a378d 100644 --- a/src/view/trip-list-view.js +++ b/src/view/trip-list-view.js @@ -40,125 +40,6 @@ function createListTemplate() {
- -
  • -
    - -
    - Event type icon -
    -

    Flight Chamonix

    -
    -

    - - — - -

    -

    01H 10M

    -
    -

    - € 160 -

    - -
      -
    • - Add luggage - +€  - 50 -
      • -
    • - Switch to comfort - +€  - 80 -
      • -
    - - -
    -
    • - -
  • -
    - -
    - Event type icon -
    -

    Drive Chamonix

    -
    -

    - - — - -

    -

    01H 35M

    -
    -

    - € 160 -

    - -
      -
    • - Rent a car - +€  - 200 -
      • -
    - - -
    -
    • - -
  • -
    - -
    - Event type icon -
    -

    Check-in Chamonix

    -
    -

    - - — - -

    -

    40M

    -
    -

    - € 600 -

    - -
      -
    • - Add breakfast - +€  - 50 -
      • -
    - - -
    -
    • `); } From fe16d02fd26831193ff9df6b1a062fe1049296f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=91=D0=BE?= =?UTF-8?q?=D1=80=D0=BE=D0=B4=D0=B5=D0=BD=D0=BA=D0=BE?= Date: Sun, 8 Sep 2024 05:07:28 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=B0=D0=BB=20=D0=BF=D1=80=D0=B5=D0=B7=D0=B5=D0=BD=D1=82=D0=B5?= =?UTF-8?q?=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 24 +-- src/presenter/board-presenter.js | 28 +-- src/view/trip-add-point-view.js | 184 ++++++++++++++++++ ...dPoint-view.js => trip-edit-point-view.js} | 2 +- src/view/trip-info-view.js | 6 +- .../{trip-list-view.js => trip-point-view.js} | 2 +- 6 files changed, 208 insertions(+), 38 deletions(-) create mode 100644 src/view/trip-add-point-view.js rename src/view/{trip-addPoint-view.js => trip-edit-point-view.js} (99%) rename src/view/{trip-list-view.js => trip-point-view.js} (98%) diff --git a/src/main.js b/src/main.js index 0e18589..1f5f62e 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,7 @@ -import TripInfoView from './view/trip-info-view.js'; -import TripFilterView from './view/trip-filter-view.js'; -import TripSortView from './view/trip-event-view.js'; -import AddPoint from './view/trip-addPoint-view.js'; -import ListView from './view/trip-list-view.js'; +import TripInfoView from './view/trip-info-view.js'; //Инфо в шапке про маршрут +import TripFilterView from './view/trip-filter-view.js'; //Фильтры +import TripSortView from './view/trip-event-view.js'; //Сортировка DAY, EVENT, PRICE +//import AddPointView from './view/trip-add-point-view.js'; //Форма создания import BoardPresenter from './presenter/board-presenter.js'; @@ -12,16 +11,13 @@ const siteMainElement = document.querySelector('.page-body'); const siteTripInfoElement = siteMainElement.querySelector('.trip-main'); // шапка const siteTripInfo = siteMainElement.querySelector('.trip-info'); // Инфо в шапке про маршрут const siteFiltersElement = siteTripInfoElement.querySelector('.trip-controls__filters'); // Фильтры EVERYTHING, FUTURE, PAST и т.д -const siteEventsElement = siteMainElement.querySelector('.trip-events'); // Сортировка DAY, EVENT, TIME итд. -const siteAddPointElement = siteMainElement.querySelector('.trip-events'); // Форма -const siteListElement = siteMainElement.querySelector('.trip-events'); // Список маршрутов +const siteEventsElement = siteMainElement.querySelector('.trip-events'); // Сортировка DAY, EVENT, TIME итд., Форма создания и Точка маршрута -const boardPresenter = new BoardPresenter({boardContainer: siteMainElement}); -renderBegin(new TripInfoView(), siteTripInfo); // Отображение информации вверху про маршрут -render(new TripFilterView(), siteFiltersElement); // Отрисовка компонента Фильтры -render(new TripSortView(), siteEventsElement); // Отрисовка компонента Эвент -render(new AddPoint(), siteAddPointElement); // Отрисовка формы -render(new ListView(), siteListElement); // Отрисовка компонента Лист(Список с маршрутами) +const boardPresenter = new BoardPresenter({container: siteEventsElement}); + +renderBegin(new TripInfoView(), siteTripInfo); // Отображение информации в шапке про маршрут +render(new TripFilterView(), siteFiltersElement); // Фильтры EVERYTHING, FUTURE, PAST и т.д +render(new TripSortView(), siteEventsElement); // Сортировка DAY, EVENT, TIME, PRICE, OFFER boardPresenter.init(); diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js index 794f386..1880c3c 100644 --- a/src/presenter/board-presenter.js +++ b/src/presenter/board-presenter.js @@ -1,29 +1,17 @@ -//import BoardView from '../view/board-view.js'; -import TripFilterView from '../view/trip-filter-view.js'; -import ListView from '../view/trip-list-view.js'; -//import TaskView from '../view/task-view.js'; -//import TaskEditView from '../view/task-edit-view.js'; -import AddPoint from '../view/trip-addPoint-view.js'; -import {render} from '../render.js'; -export default class BoardPresenter { - boardComponent = new ListView(); - taskListComponent = new ListView(); +import PointView from '../view/trip-point-view.js'; //Точка маршрута +import EditPointView from '../view/trip-edit-point-view.js'; +import {render, RenderPosition} from '../render.js'; - constructor({boardContainer}) { - this.boardContainer = boardContainer; +export default class BoardPresenter { + constructor({container}) { + this.container = container; } init() { - render(this.boardComponent, this.boardContainer); - render(new TripFilterView(), this.boardComponent.getElement()); - render(this.taskListComponent, this.boardComponent.getElement()); - render(new AddPoint(), this.taskListComponent.getElement()); - + render(new EditPointView(), this.container, RenderPosition.BEFOREEND); //Форма редактирования for (let i = 0; i < 3; i++) { - render(new ListView(), this.taskListComponent.getElement()); + render(new PointView(), this.container, RenderPosition.BEFOREEND); //Отображение Точки маршрута 3 раза } - - render(new AddPoint(), this.boardComponent.getElement()); } } diff --git a/src/view/trip-add-point-view.js b/src/view/trip-add-point-view.js new file mode 100644 index 0000000..063972f --- /dev/null +++ b/src/view/trip-add-point-view.js @@ -0,0 +1,184 @@ +import {createElement} from '../render.js'; + +function createAddPointTemplate() { + 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 AddPointView { + getTemplate() { + return createAddPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-addPoint-view.js b/src/view/trip-edit-point-view.js similarity index 99% rename from src/view/trip-addPoint-view.js rename to src/view/trip-edit-point-view.js index c99c1f3..fa3eb86 100644 --- a/src/view/trip-addPoint-view.js +++ b/src/view/trip-edit-point-view.js @@ -157,7 +157,7 @@ function createAddPointTemplate() { `); } -export default class AddPoint { +export default class EditPointView { getTemplate() { return createAddPointTemplate(); } diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js index dc540f8..69076e3 100644 --- a/src/view/trip-info-view.js +++ b/src/view/trip-info-view.js @@ -2,7 +2,8 @@ import {createElement} from '../render.js'; function createTripInfoTemplate() { return ( - `div class="trip-info__main"> + `
    +

    Amsterdam — Chamonix — Geneva

    18 — 20 Mar

    @@ -10,7 +11,8 @@ function createTripInfoTemplate() {

    Total: € 1230 -

    `); +

    +
    `); } export default class TripInfoView { diff --git a/src/view/trip-list-view.js b/src/view/trip-point-view.js similarity index 98% rename from src/view/trip-list-view.js rename to src/view/trip-point-view.js index 65a378d..1a31422 100644 --- a/src/view/trip-list-view.js +++ b/src/view/trip-point-view.js @@ -43,7 +43,7 @@ function createListTemplate() { `); } -export default class ListView { +export default class PointView { getTemplate() { return createListTemplate(); }