diff --git a/package.json b/package.json index f163988..a3c5206 100644 --- a/package.json +++ b/package.json @@ -23,13 +23,13 @@ "node": "18" }, "dependencies": { - "@babel/core": "^7.20.5", - "@babel/preset-env": "^7.20.2", - "babel-loader": "^9.1.0", - "copy-webpack-plugin": "^11.0.0", - "html-webpack-plugin": "^5.6.0", - "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", - "webpack-dev-server": "^4.11.1" + "@babel/core": "7.20.5", + "@babel/preset-env": "7.20.2", + "babel-loader": "9.1.0", + "copy-webpack-plugin": "11.0.0", + "html-webpack-plugin": "5.6.0", + "webpack": "5.75.0", + "webpack-cli": "5.0.0", + "webpack-dev-server": "4.11.1" } } diff --git a/src/main.js b/src/main.js index e69de29..78f9eaf 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,13 @@ +import { render } from './render.js'; +import FilterView from './view/filter-view.js'; +import TripEventsPresenter from './presenter/trip-events-presenter.js'; + + +const tripControlsFilters = document.querySelector('.trip-controls__filters'); +const tripEvents = document.querySelector('.trip-events'); +const tripEventsPresenter = new TripEventsPresenter({tpipEventsContainer : tripEvents}); + +render(new FilterView(), tripControlsFilters); + +tripEventsPresenter.init(); + diff --git a/src/presenter/trip-events-presenter.js b/src/presenter/trip-events-presenter.js new file mode 100644 index 0000000..83ae722 --- /dev/null +++ b/src/presenter/trip-events-presenter.js @@ -0,0 +1,26 @@ +import SortView from '../view/sort-view.js'; +import ListView from '../view/list-view.js'; +import NewPointView from '../view/new-point-view.js'; +import EditablePointView from '../view/editable-point-view.js'; +import PointView from '../view/point-view.js'; + +import {render} from '../render.js'; + +export default class TripEventsPresenter { + listComponent = new ListView(); + + constructor({tpipEventsContainer}) { + this.tpipEventsContainer = tpipEventsContainer; + } + + init() { + render(new SortView(), this.tpipEventsContainer); + render(this.listComponent, this.tpipEventsContainer); + render(new EditablePointView, this.listComponent.getElement()); + render(new NewPointView(), this.listComponent.getElement()); + + for (let i = 0; i < 3; i++) { + render(new PointView(), this.listComponent.getElement()); + } + } +} diff --git a/src/view/editable-point-view.js b/src/view/editable-point-view.js new file mode 100644 index 0000000..ea41b0f --- /dev/null +++ b/src/view/editable-point-view.js @@ -0,0 +1,179 @@ +import { createElement } from '../render.js'; + +function createEditablePointTemplate() { + 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 EditablePointView { + getTemplate() { + return createEditablePointTemplate(); + } + + 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..139186a --- /dev/null +++ b/src/view/filter-view.js @@ -0,0 +1,72 @@ +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-view.js b/src/view/list-view.js new file mode 100644 index 0000000..8cfc61a --- /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/new-point-view.js b/src/view/new-point-view.js new file mode 100644 index 0000000..0168b0c --- /dev/null +++ b/src/view/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 NewPointView { + getTemplate() { + return createNewPointTemplate(); + } + + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()); + } + + return this.element; + } + + removeElement() { + this.element = null; + } +} diff --git a/src/view/point-view.js b/src/view/point-view.js new file mode 100644 index 0000000..0b1a9ac --- /dev/null +++ b/src/view/point-view.js @@ -0,0 +1,61 @@ +import { createElement } from '../render.js'; + +function createPointTemplate() { + return( + `
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + + + + +
    +
    • ` + ); +} + +export default class PointView { + getTemplate() { + return createPointTemplate(); + } + + 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..588d3c0 --- /dev/null +++ b/src/view/sort-view.js @@ -0,0 +1,75 @@ +import { createElement } from '../render.js'; + +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; + } +}