diff --git a/public/css/style.css b/public/css/style.css index c6c86ec..aefb5e2 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -332,7 +332,9 @@ main { .trip-events__item { margin-bottom: 54px; - margin-left: auto; } + margin-left: auto; + list-style-type: none; +} .trip-sort { display: -ms-flexbox; diff --git a/public/index.html b/public/index.html index 9c7b69c..acd71bf 100644 --- a/public/index.html +++ b/public/index.html @@ -33,9 +33,7 @@
- -
diff --git a/src/const.js b/src/const.js index f81620c..e3c224c 100644 --- a/src/const.js +++ b/src/const.js @@ -1,4 +1,4 @@ -const TYPE = [ +const TYPES = [ 'Taxi', 'Bus', 'Train', @@ -30,4 +30,4 @@ const OFFERS = [ 'Book tickets', 'Lunch in city', ]; -export { TYPE, CITIES, OFFERS }; +export { TYPES, CITIES, OFFERS }; diff --git a/src/mock/destination.js b/src/mock/destination.js index de72742..b5df22a 100644 --- a/src/mock/destination.js +++ b/src/mock/destination.js @@ -1,7 +1,7 @@ const mockDestinations = [ { 'id': 'd9e9fc03-d3c9-4f60-baed-e5106dbfe007', - 'description': '', + 'description': 'Paris - is a wonderful city!', 'name': 'Paris', 'pictures': [] }, diff --git a/src/model/point-model.js b/src/model/point-model.js index 7ffe4fd..ff86f84 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -1,7 +1,7 @@ import { getRandomPoint } from '../mock/points.js'; import { mockOffers } from '../mock/offers.js'; import { mockDestinations } from '../mock/destination.js'; -const POINT_COUNT = 3; //Количество поинтов (сколько раз отрисуется поинт getRandomPoint) +const POINT_COUNT = 4; //Количество поинтов (сколько раз отрисуется поинт getRandomPoint) export default class PointsModel { points = Array.from({length: POINT_COUNT}, getRandomPoint); //Записываем в points массив поинтов diff --git a/src/utils.js b/src/utils.js index 47192b4..c8eb581 100644 --- a/src/utils.js +++ b/src/utils.js @@ -5,4 +5,23 @@ function getRandomInteger(min, max) { const rand = Math.floor(min + Math.random() * (max + 1 - min)); return Math.floor(rand); } -export { getRandomArrayElement, getRandomInteger }; + +const createOfferItemTemplate = (type, title, price, className) => ` +
+ + +
+`; + +const createTypeGroupTemplate = (group, className) => ` +
+ + +
+`; + +export { getRandomArrayElement, getRandomInteger, createOfferItemTemplate, createTypeGroupTemplate }; diff --git a/src/view/trip-edit-point-view.js b/src/view/trip-edit-point-view.js index caea92d..e01abe4 100644 --- a/src/view/trip-edit-point-view.js +++ b/src/view/trip-edit-point-view.js @@ -1,173 +1,113 @@ import {createElement} from '../render.js'; - -function createAddPointTemplate(offer) { - const { point, offers, destination } = offer; //Необходимо деструктурировать!! +import { TYPES } from '../const.js'; +import { createOfferItemTemplate, createTypeGroupTemplate } from '../utils.js'; + +function createAddPointTemplate(point, allOffers, allDestination, pointDestination) { + const { basePrice, type } = point; + const typeName = type[0].toUpperCase() + type.slice(1, type.length); + const { name, description, pictures } = pointDestination; + function asa() { + if(pictures.length !== 0) { + const [{src}] = pictures; + return src; + } + } + //console.log(description, src) + const createAllOffers = allOffers.offers + .map((offer) => { + const checkedClassName = point.offers.includes(offer.id) ? 'checked' : ''; + return createOfferItemTemplate(allOffers.type, offer.title, offer.price, checkedClassName); + }).join(''); + + const createDesinationTemplate = allDestination + .map((item) => ``).join(''); + + const createTypeList = TYPES + .map((group) => { + const checkedClassName = group === typeName ? 'checked' : ''; + return createTypeGroupTemplate(group, checkedClassName); + }).join(''); 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.

-
-
-
`); + `
  • +
    +
    +
    + + +
    +
    + + ${createTypeList} +
    +
    +
    +
    + + + + ${createDesinationTemplate} + +
    +
    + + + — + + +
    +
    + + +
    + + + +
    +
    +
    +

    Offers

    +
    + ${createAllOffers} +
    +
    +
    +

    Destination

    +

    ${description}

    +
    +
    + Event photo + Event photo + Event photo + Event photo + Event photo +
    +
    +
    +
    +
    • ` + ); } - export default class OffersView { - constructor({point, offers, destination}) { + constructor({point, allOffers, allDestination, pointDestination}) { this.point = point; - this.offers = offers; - this.destination = destination; + this.allOffers = allOffers; + this.allDestination = allDestination; + this.pointDestination = pointDestination; } getTemplate() { - return createAddPointTemplate(this.point, this.offers, this.destination); + return createAddPointTemplate(this.point, this.allOffers, this.allDestination, this.pointDestination); } getElement() { diff --git a/src/view/trip-point-view.js b/src/view/trip-point-view.js index ad5a308..840f51e 100644 --- a/src/view/trip-point-view.js +++ b/src/view/trip-point-view.js @@ -1,17 +1,32 @@ import {createElement} from '../render.js'; -import { getRandomInteger } from '../utils.js'; +//import { getRandomInteger } from '../utils.js'; +const createListTemplate = (point, offers, destination) => { + const { basePrice, type, isFavorite} = point; + const typeName = type[0].toUpperCase() + type.slice(1, type.length); + + const createEventOfferTemplate = (title, price) => (` +
  • + ${title} + + ${price} +
    • + `); + + const createEventOffers = offers + .map((offer) => createEventOfferTemplate(offer.title, offer.price)).join(''); + + const favoriteClassName = isFavorite + ? 'event__favorite-btn event__favorite-btn--active' + : 'event__favorite-btn'; -function createListTemplate(point, offers, destination) { - const {type, basePrice} = point; return ( - ``); -} - + `); +}; export default class PointView { constructor({point, offers, destination}) { this.point = point;