diff --git a/package.json b/package.json index 378f1e0..a2dcfeb 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "lint": "eslint src/", "build": "webpack --mode production", - "start": "webpack serve --mode development --open" + "start": "set PORT=8085 && webpack serve --mode development --open" }, "browserslist": [ "last 2 versions", diff --git a/src/main.js b/src/main.js index e69de29..fabe2a8 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,15 @@ +import BoardPresenter from "./presenter/board-presenter" +import { render, RenderPosition } from "./render" +import FilterView from "./view/filters-view" +import MainHeaderView from "./view/main-header-view" + +let body = document.querySelector("body") +let header = body.querySelector(".page-header__container") +let filter = header.querySelector(".trip-controls__filters") +let mainTrip = header.querySelector(".trip-main") +console.log(filter) +let events = body.querySelector(".trip-events") +let boardPresenter = new BoardPresenter({container:events}) +render(new MainHeaderView(), mainTrip, RenderPosition.AFTERBEGIN) +render(new FilterView(), filter) +boardPresenter.init() diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js new file mode 100644 index 0000000..99f5361 --- /dev/null +++ b/src/presenter/board-presenter.js @@ -0,0 +1,29 @@ +import { render } from "../render"; +import RoutePointView from "../view/route-point-view" +import SortView from "../view/sorting-view" +import MainHeaderView from "../view/main-header-view" +import ListEventsView from "../view/list-events-view" +import EditPointView from "../view/editing-view"; +import AddPointView from "../view/add-view"; +export default class BoardPresenter { + constructor({container}) { + this.sort = new SortView() + this.events = new ListEventsView() + this.container = container + } + init() { + render(this.sort, this.container) + render(this.events, this.container) + let eventsElement = this.events.getElement() + render(new EditPointView(), eventsElement) + render(new AddPointView(), eventsElement) + let eventsCount = 3 + for (let i=0; i +
+
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + + + + + + +
+
+ + + — + + +
+
+ + +
+ + +
+
+
+

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 createAddElement() + } + getElement() { + if (!this.element){ + this.element = createElement(this.getTemplate()) + } + return this.element + } + removeElement() { + this.element = null + } +} diff --git a/src/view/editing-view.js b/src/view/editing-view.js new file mode 100644 index 0000000..b2f06ae --- /dev/null +++ b/src/view/editing-view.js @@ -0,0 +1,174 @@ +import { createElement } from "../render" +function createEditTemplate() { + 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 createEditTemplate() + } + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()) + } + return this.element + } + removeElement() { + this.element = null + } +} diff --git a/src/view/filters-view.js b/src/view/filters-view.js new file mode 100644 index 0000000..f2c216f --- /dev/null +++ b/src/view/filters-view.js @@ -0,0 +1,47 @@ +const { createElement } = require("../render"); + +function createFilterElement() { + return ( + `
    + +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + +
    +
    ` + ) +} + export default class FilterView { + getTemplate() { + return createFilterElement() + } + getElement() { + if (!this.element){ + this.element = createElement(this.getTemplate()) + } + return this.element + + } + removeElement() { + this.element = null + } + } diff --git a/src/view/list-events-view.js b/src/view/list-events-view.js new file mode 100644 index 0000000..5ff2800 --- /dev/null +++ b/src/view/list-events-view.js @@ -0,0 +1,18 @@ +import { createElement } from "../render" +function createEventsList() { + return `` +} +export default class ListEventsView { + getTemplate() { + return createEventsList() + } + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()) + } + return this.element + } + removeElement() { + this.element = null + } +} diff --git a/src/view/main-header-view.js b/src/view/main-header-view.js new file mode 100644 index 0000000..dc5bcb6 --- /dev/null +++ b/src/view/main-header-view.js @@ -0,0 +1,27 @@ +import { createElement, render } from "../render"; +function createHeaderElement() { + return (`
    +
    +
    +

    Amsterdam — Chamonix — Geneva

    +

    Mar 18 — 20

    +
    +

    + Total: € 1230 +

    +
    `) +} +export default class MainHeaderView { + getTemplate() { + return createHeaderElement(); + } + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()) + } + return this.element + } + removeElement() { + this.element = null + } +} diff --git a/src/view/route-point-view.js b/src/view/route-point-view.js new file mode 100644 index 0000000..05adfcf --- /dev/null +++ b/src/view/route-point-view.js @@ -0,0 +1,56 @@ +import { createElement } from "../render" +function createRoutePoint() { +return ( + `
  • +
    + +
    + Event type icon +
    +

    Taxi Amsterdam

    +
    +

    + + — + +

    +

    30M

    +
    +

    + € 20 +

    + +
      +
    • + Order Uber + +€  + 20 +
      • +
    + + +
    +
    • ` +) +} +export default class RoutePointView { + getTemplate() { + return createRoutePoint() + } + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()) + } + return this.element + } + removeElement() { + this.element = null + } +} diff --git a/src/view/sorting-view.js b/src/view/sorting-view.js new file mode 100644 index 0000000..ea9a976 --- /dev/null +++ b/src/view/sorting-view.js @@ -0,0 +1,46 @@ +import { createElement } from "../render" + +function createSortElement() { + return ( + `
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    ` + ); +} +export default class SortView { + getTemplate() { + return createSortElement() + } + getElement() { + if (!this.element) { + this.element = createElement(this.getTemplate()) + } + return this.element + } + removeElement() { + this.element = null + } +}