diff --git a/markup/css/style.css b/markup/css/style.css index c6c86ec..1a6b68f 100644 --- a/markup/css/style.css +++ b/markup/css/style.css @@ -751,6 +751,9 @@ main { .event__section--offers { padding: 0 20px; } +.event__section--destination { + padding: 0 20px; } + .event__section-title { margin: 0; font-weight: 800; @@ -762,8 +765,7 @@ main { .event__section-title--offers { margin-bottom: 15px; } .event__section-title--destination { - margin-bottom: 8px; - margin-left: 20px; } + margin-bottom: 8px;} .event__available-offers { display: -ms-flexbox; @@ -806,7 +808,6 @@ main { width: 560px; margin: 0; margin-bottom: 16px; - margin-left: 20px; font-size: 15px; line-height: 18px; } diff --git a/public/css/style.css b/public/css/style.css index c6c86ec..1a6b68f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -751,6 +751,9 @@ main { .event__section--offers { padding: 0 20px; } +.event__section--destination { + padding: 0 20px; } + .event__section-title { margin: 0; font-weight: 800; @@ -762,8 +765,7 @@ main { .event__section-title--offers { margin-bottom: 15px; } .event__section-title--destination { - margin-bottom: 8px; - margin-left: 20px; } + margin-bottom: 8px;} .event__available-offers { display: -ms-flexbox; @@ -806,7 +808,6 @@ main { width: 560px; margin: 0; margin-bottom: 16px; - margin-left: 20px; font-size: 15px; line-height: 18px; } diff --git a/public/index.html b/public/index.html index 44c26b4..b38de33 100644 --- a/public/index.html +++ b/public/index.html @@ -1,41 +1,42 @@ - - - - - Big Trip - - - - - -
-
- - -
-
-
- - -
-
- + + + + + Big Trip + + + + + +
+
+ + +
+
+
+ + +
+
-
-
-
-
- +
+
+
+
+
+ - + + + +
+
+
+ - - - - - diff --git a/src/main.js b/src/main.js index e69de29..562eaec 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,22 @@ +import {RenderPosition, render} from './render.js'; +import SectionTripInfoView from './view/section-trip-info-view.js'; +import NewEventButtonView from './view/new-event-button-view.js'; +import TripFiltersFormView from './view/trip-filters-form-view.js'; +import ListPresenter from './presenter/list-presenter.js'; + + +const tripMain = document.querySelector('.trip-main'); +const tripEventsElement = document.querySelector('.trip-events'); +const tripControlsFilters = document.querySelector('.trip-controls__filters'); + +render(new SectionTripInfoView(), tripMain, RenderPosition.AFTERBEGIN); // Заголовок, даты, общая цена +render(new NewEventButtonView(), tripMain); // Заголовок, кнопка добавить событие +render (new TripFiltersFormView(), tripControlsFilters); // Кнопки сортировки + + +const listPresenter = new ListPresenter({ + listContainer: tripEventsElement +}); + +listPresenter.init(); + diff --git a/src/presenter/list-presenter.js b/src/presenter/list-presenter.js new file mode 100644 index 0000000..75da1af --- /dev/null +++ b/src/presenter/list-presenter.js @@ -0,0 +1,31 @@ +import { render } from '../render.js'; + +import SortButtonView from '../view/sort-view.js'; +import TripEventListView from '../view/trip-events-list-view.js'; +import TripEventItemView from '../view/trip-events-item-view.js'; +import AddNewPointView from '../view/add-new-point-view.js'; +import EditPointView from '../view/edit-poit-view.js'; +import TripEventsMessage from '../view/trip-events-message-view.js'; + +export default class ListPresenter { + + listComponent = new TripEventListView(); + + constructor({ listContainer }) { + this.listContainer = listContainer; + } + + init() { + render(new SortButtonView(), this.listContainer); + render(new TripEventItemView(), this.listContainer); + render(new AddNewPointView(), this.listContainer); + render(new EditPointView(), this.listContainer); + render(this.listComponent, this.listContainer); + + for (let i = 0; i < 3; i++) { // Создание элементов в списке + render (new TripEventItemView(), this.listComponent.getElement()); + } + + render(new TripEventsMessage(), this.listContainer); + } +} diff --git a/src/view/add-new-point-view.js b/src/view/add-new-point-view.js new file mode 100644 index 0000000..7028bdd --- /dev/null +++ b/src/view/add-new-point-view.js @@ -0,0 +1,182 @@ +import {createElement} from '../render.js'; + +function createAddNewPointTemplate() { + 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 createAddNewPointTemplate(); + } + + getElement() { + if(!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/edit-poit-view.js b/src/view/edit-poit-view.js new file mode 100644 index 0000000..a32e56c --- /dev/null +++ b/src/view/edit-poit-view.js @@ -0,0 +1,179 @@ +import {createElement} from '../render.js'; + +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/new-event-button-view.js b/src/view/new-event-button-view.js new file mode 100644 index 0000000..9a74e48 --- /dev/null +++ b/src/view/new-event-button-view.js @@ -0,0 +1,24 @@ +import {createElement} from '../render.js'; + +function createNewEventButtonTemplate() { + return ''; +} + +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/section-trip-info-view.js b/src/view/section-trip-info-view.js new file mode 100644 index 0000000..a6d3a4f --- /dev/null +++ b/src/view/section-trip-info-view.js @@ -0,0 +1,35 @@ +import {createElement} from '../render.js'; + +function createSectionTripInfoTemplate() { + return `
+
+

Amsterdam — Chamonix — Geneva

+ +

18 — 20 Mar

+
+ +

+ Total: € 1230 +

+
`; +} + +export default class SectionTripInfoView { + getTemplate() { + return createSectionTripInfoTemplate(); + } + + 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..016f30f --- /dev/null +++ b/src/view/sort-view.js @@ -0,0 +1,50 @@ +import {createElement} from '../render.js'; + +function createSortButtonTemplate() { + return ( + `
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
` + ); +} + +export default class SortButtonView { + getTemplate() { + return createSortButtonTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-events-item-view.js b/src/view/trip-events-item-view.js new file mode 100644 index 0000000..44245da --- /dev/null +++ b/src/view/trip-events-item-view.js @@ -0,0 +1,59 @@ +import {createElement} from '../render.js'; + +function createTripEventItemTemplate() { + return `
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + + + + +
    +
    • `; +} + +export default class TripEventItemView { + getTemplate() { + return createTripEventItemTemplate(); + } + + 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..6920af2 --- /dev/null +++ b/src/view/trip-events-list-view.js @@ -0,0 +1,25 @@ +import {createElement} from '../render.js'; + +function createTripEventListTemplate() { + return (` + + `); +} + +export default class TripEventListView { + getTemplate() { + return createTripEventListTemplate(); + } + + getElement() { + if(!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/trip-events-message-view.js b/src/view/trip-events-message-view.js new file mode 100644 index 0000000..552c942 --- /dev/null +++ b/src/view/trip-events-message-view.js @@ -0,0 +1,25 @@ +import {createElement} from '../render.js'; + +function createTripEventsMessageTemplate() { + return '

    Click New Event to create your first point

    '; +} + +export default class TripEventsMessage { + getTemplate() { + return createTripEventsMessageTemplate(); + } + + getElement() { + if(!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} + + diff --git a/src/view/trip-filters-form-view.js b/src/view/trip-filters-form-view.js new file mode 100644 index 0000000..dd2b6e4 --- /dev/null +++ b/src/view/trip-filters-form-view.js @@ -0,0 +1,47 @@ +import {createElement} from '../render.js'; + +function createTripFiltersFormTemplate() { + return `
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + +
    `; +} + +export default class TripFiltersFormView { + getTemplate() { + return createTripFiltersFormTemplate(); + } + + getElement() { + if(!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} + +