From 3ccb7ac969d801e8b25e2de3b5d30509032436ef Mon Sep 17 00:00:00 2001 From: Sergey Ivanov Date: Sun, 1 Sep 2024 14:44:40 +0300 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BC=D0=BE=D0=BA=D0=BE=D0=B2=D1=8B=D0=B5=20?= =?UTF-8?q?=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D0=B5.=20=D0=A1=D0=BE=D0=B7?= =?UTF-8?q?=D0=B4=D0=B0=D0=B5=D1=82=20=D0=B3=D0=B5=D0=BD=D0=B5=D1=80=D0=B0?= =?UTF-8?q?=D1=82=D0=BE=D1=80=20=D1=81=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D1=8F?= =?UTF-8?q?(event).=20=D0=9F=D0=BE=D0=B4=D0=BA=D0=BB=D1=8E=D1=87=D0=B0?= =?UTF-8?q?=D0=B5=D1=82=20dayjs.=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=B8=20=D0=BF=D0=BE=D0=B4=D0=BA=D0=BB?= =?UTF-8?q?=D1=8E=D1=87=D0=B0=D0=B5=D1=82=20=D0=BC=D0=BE=D0=B4=D0=B5=D0=BB?= =?UTF-8?q?=D1=8C=20=D0=B2=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5.=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D1=83=20?= =?UTF-8?q?=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F=20=D1=81=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D1=8F.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 9 ++ package.json | 3 + src/const.js | 0 src/main.js | 8 +- src/mock/event.js | 149 ++++++++++++++++++ src/model/event-model.js | 11 ++ src/presenter/list-presenter.js | 13 +- src/render.js | 14 ++ src/utils.js | 24 +++ ...events-item-view.js => event-item-view.js} | 37 +++-- 10 files changed, 247 insertions(+), 21 deletions(-) create mode 100644 src/const.js create mode 100644 src/mock/event.js create mode 100644 src/model/event-model.js create mode 100644 src/utils.js rename src/view/{trip-events-item-view.js => event-item-view.js} (59%) diff --git a/package-lock.json b/package-lock.json index 46b664c..912a97a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "big-trip", "version": "22.0.0", + "dependencies": { + "dayjs": "1.11.7" + }, "devDependencies": { "@babel/core": "7.21.4", "@babel/preset-env": "7.21.4", @@ -3119,6 +3122,12 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/dayjs": { + "version": "1.11.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", + "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==", + "license": "MIT" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index f48e0fd..897315b 100644 --- a/package.json +++ b/package.json @@ -22,5 +22,8 @@ }, "engines": { "node": "20" + }, + "dependencies": { + "dayjs": "1.11.7" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..e69de29 diff --git a/src/main.js b/src/main.js index 562eaec..a5dbfc1 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,9 @@ import {RenderPosition, render} from './render.js'; +import ListPresenter from './presenter/list-presenter.js'; +import EventModel from './model/event-model.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'); @@ -13,9 +14,10 @@ render(new SectionTripInfoView(), tripMain, RenderPosition.AFTERBEGIN); // За render(new NewEventButtonView(), tripMain); // Заголовок, кнопка добавить событие render (new TripFiltersFormView(), tripControlsFilters); // Кнопки сортировки - +const eventModel = new EventModel(); const listPresenter = new ListPresenter({ - listContainer: tripEventsElement + listContainer: tripEventsElement, + eventModel, }); listPresenter.init(); diff --git a/src/mock/event.js b/src/mock/event.js new file mode 100644 index 0000000..331a6ce --- /dev/null +++ b/src/mock/event.js @@ -0,0 +1,149 @@ +import { getRandomArrayElement } from '../utils'; + +const offers = [ + { + title: 'Order Uber', + price: 20, + }, + { + title: 'Add luggage', + price: 50, + }, + { + title: 'Switch to comfort', + price: 80, + }, + { + title: 'Rent a car', + price: 200, + }, + { + title: 'Add breakfast', + price: 50, + }, + { + title: 'Book tickets', + price: 40, + }, + { + title: 'Lunch in city', + price: 30, + }, +]; + +const typePoint = [ + { + type: 'Taxi', + img: '../markup/img/icons/taxi.png', + price: 20, + }, + { + type: 'Bus', + img: '../markup/img/icons/bus.png', + price: 10, + }, + { + type: 'Train', + img: '../markup/img/icons/train.png', + price: 15, + }, + { + type: 'Ship', + img: '../markup/img/icons/ship.png', + price: 120, + }, + { + type: 'Drive', + img: '../markup/img/icons/drive.png', + price: 160, + }, + { + type: 'Flight', + img: '../markup/img/icons/flight.png', + price: 160, + }, + { + type: 'Check-in', + img: '../markup/img/icons/check-in.png', + price: 600, + }, + { + type: 'Sightseeing', + img: '../markup/img/icons/sightseeing.png', + price: 50, + }, + { + type: 'Restaurant', + img: '../markup/img/icons/restaurant.png', + price: 200, + }, +]; + +const destination = [ + { + title: 'Chamonix', + description: '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.', + photo: [], + }, + { + title: 'Amsterdam', + description: 'Amsterdam fans out south from the Amsterdam Centraal station and Damrak, the main street off the station. The oldest area of the town is known as De Wallen (English: "The Quays"). It lies to the east of Damrak and contains the city\'s famous red-light district. To the south of De Wallen is the old Jewish quarter of Waterlooplein.', + photo: [], + }, + { + title: 'Geneva', + description: '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.', + photo: ['img/photos/1.jpg', 'img/photos/2.jpg', 'img/photos/3.jpg', 'img/photos/4.jpg', 'img/photos/5.jpg',], + }, +]; + + +const mockEvents = [ + { + title: `${typePoint[0].type} ${destination[1].title}`, + icon: `${typePoint[0].img}`, + price: typePoint[0].price, + eventStartTime: '2019-03-18T10:30', + eventEndtTime: '2019-03-18T11:00', + offers: [offers[0],], + isFavorite: true, + }, + { + title: `${typePoint[5].type} ${destination[0].title}`, + icon: `${typePoint[5].img}`, + price: typePoint[5].price, + eventStartTime: '2019-03-18T12:25', + eventEndtTime: '2019-03-18T13:35', + offers: [offers[1], offers[2],], + isFavorite: false, + }, + { + title: `${typePoint[4].type} ${destination[0].title}`, + icon: `${typePoint[4].img}`, + price: typePoint[4].price, + eventStartTime: '2019-03-18T14:30', + eventEndtTime: '2019-03-18T16:05', + offers: [offers[3],], + isFavorite: true, + }, + { + title: `${typePoint[6].type} ${destination[0].title}`, + icon: `${typePoint[6].img}`, + price: typePoint[6].price, + eventStartTime: '2019-03-18T10:30', + eventEndtTime: '2019-03-18T11:00', + offers: [offers[0],], + isFavorite: true, + }, +]; + +/** + * Returns a random event from mockEvents array. + * @returns {Object} - Random event. + */ +function getRandomEvent() { + return getRandomArrayElement(mockEvents); +} + + +export {getRandomEvent}; diff --git a/src/model/event-model.js b/src/model/event-model.js new file mode 100644 index 0000000..f25bfbb --- /dev/null +++ b/src/model/event-model.js @@ -0,0 +1,11 @@ +import {getRandomEvent} from '../mock/event.js'; + +const EVENT_COUNT = 4; + +export default class EventModel { + event = Array.from({length: EVENT_COUNT}, getRandomEvent); + + getEvents() { + return this.event; + } +} diff --git a/src/presenter/list-presenter.js b/src/presenter/list-presenter.js index 75da1af..fc1012b 100644 --- a/src/presenter/list-presenter.js +++ b/src/presenter/list-presenter.js @@ -2,7 +2,7 @@ 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 EventItemView from '../view/event-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'; @@ -11,19 +11,22 @@ export default class ListPresenter { listComponent = new TripEventListView(); - constructor({ listContainer }) { + constructor({ listContainer, eventModel }) { this.listContainer = listContainer; + this.eventModel = eventModel; } init() { + this.listEvents = [...this.eventModel.getEvents()]; + render(new SortButtonView(), this.listContainer); - render(new TripEventItemView(), this.listContainer); + render(new EventItemView(), 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()); + for (let i = 0; i < this.listEvents.length; i++) { // Создание элементов в списке + render (new EventItemView({event: this.listEvents[i]}), this.listComponent.getElement()); } render(new TripEventsMessage(), this.listContainer); diff --git a/src/render.js b/src/render.js index 8c22c92..bf24375 100644 --- a/src/render.js +++ b/src/render.js @@ -5,6 +5,12 @@ const RenderPosition = { AFTEREND: 'afterend', }; +/** + * Creates an HTML-element based on given template-string. + * + * @param {string} template - Template-string for new element. + * @returns {HTMLElement} - Created element. + */ function createElement(template) { const newElement = document.createElement('div'); newElement.innerHTML = template; @@ -12,6 +18,14 @@ function createElement(template) { return newElement.firstElementChild; } +/** + * Render component in container on given position. + * + * @param {Object} component - Component to be rendered. + * @param {HTMLElement} container - Container where component will be rendered. + * @param {string} [place=RenderPosition.BEFOREEND] - Place where component will be rendered. + * @return {void} + */ function render(component, container, place = RenderPosition.BEFOREEND) { container.insertAdjacentElement(place, component.getElement()); } diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..2d7b7dc --- /dev/null +++ b/src/utils.js @@ -0,0 +1,24 @@ +import dayjs from 'dayjs'; + +/** + * Returns a random element from the given array. + * @param {Array} items - Array of any type of elements. + * @returns {any} - Random element from the array. + */ +function getRandomArrayElement(items) { + return items[Math.floor(Math.random() * items.length)]; +} + +const DATE_FORMAT = 'MMM DD'; + +/** + * Returns a humanized representation of a given due date. + * @param {string} dueDate - Due date in ISO format. + * @returns {string} - Humanized representation of given due date, or empty string if due date is not given. + */ +function humanizeEventDueDate(dueDate) { + return dueDate ? dayjs(dueDate).format(DATE_FORMAT).toUpperCase() : ''; +} + + +export {getRandomArrayElement, humanizeEventDueDate}; diff --git a/src/view/trip-events-item-view.js b/src/view/event-item-view.js similarity index 59% rename from src/view/trip-events-item-view.js rename to src/view/event-item-view.js index 44245da..bc2e487 100644 --- a/src/view/trip-events-item-view.js +++ b/src/view/event-item-view.js @@ -1,30 +1,36 @@ import {createElement} from '../render.js'; +import {humanizeEventDueDate} from '../utils.js'; -function createTripEventItemTemplate() { - return `
  • +function createEventItemTemplate(event) { + const {title, icon, price, eventStartTime, eventEndtTime, offers, dueDate} = event; + + const date = humanizeEventDueDate(dueDate); + + return ( + `
  • - +
    - Event type icon + Event type icon
    -

    Taxi Amsterdam

    +

    ${title}

    - + — - +

    30M

    - € 20 + € ${price}

    • - Order Uber + ${offers.title} +€  - 20 + ${offers.price}
    -
    • `; + ` + ); } -export default class TripEventItemView { +export default class EventItemView { + constructor({event}) { + this.event = event; + } + getTemplate() { - return createTripEventItemTemplate(); + return createEventItemTemplate(this.event); } getElement() { From f1fbc97973d1bb24bd10c1e3faf4888d61c82756 Mon Sep 17 00:00:00 2001 From: Sergey Ivanov Date: Sun, 1 Sep 2024 16:20:51 +0300 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=D0=9F=D1=80=D0=B0=D0=B2=D0=B8=D1=82?= =?UTF-8?q?=20=D0=B4=D0=B0=D1=82=D1=8B.=20=D0=9F=D0=B5=D1=80=D0=B5=D0=B4?= =?UTF-8?q?=D0=B5=D0=BB=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=20=D0=BE=D1=82=D0=BE?= =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=B0?= =?UTF-8?q?=D1=82=D1=8B=20=D0=B8=20=D0=B2=D1=80=D0=B5=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8.=20feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20?= =?UTF-8?q?=D0=B2=D1=8B=D1=87=D0=B8=D1=81=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20?= =?UTF-8?q?=D1=80=D0=B0=D0=B7=D0=BD=D0=B8=D1=86=D1=8B=20=D0=B2=D1=80=D0=B5?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mock/event.js | 34 ++++++++++++++++----------------- src/presenter/list-presenter.js | 2 -- src/utils.js | 17 ++++++++++++++--- src/view/event-item-view.js | 18 +++++++++-------- 4 files changed, 41 insertions(+), 30 deletions(-) diff --git a/src/mock/event.js b/src/mock/event.js index 331a6ce..c7effb2 100644 --- a/src/mock/event.js +++ b/src/mock/event.js @@ -34,47 +34,47 @@ const offers = [ const typePoint = [ { type: 'Taxi', - img: '../markup/img/icons/taxi.png', + img: './img/icons/taxi.png', price: 20, }, { type: 'Bus', - img: '../markup/img/icons/bus.png', + img: './img/icons/bus.png', price: 10, }, { type: 'Train', - img: '../markup/img/icons/train.png', + img: './img/icons/train.png', price: 15, }, { type: 'Ship', - img: '../markup/img/icons/ship.png', + img: './img/icons/ship.png', price: 120, }, { type: 'Drive', - img: '../markup/img/icons/drive.png', + img: './img/icons/drive.png', price: 160, }, { type: 'Flight', - img: '../markup/img/icons/flight.png', + img: './img/icons/flight.png', price: 160, }, { type: 'Check-in', - img: '../markup/img/icons/check-in.png', + img: './img/icons/check-in.png', price: 600, }, { type: 'Sightseeing', - img: '../markup/img/icons/sightseeing.png', + img: './img/icons/sightseeing.png', price: 50, }, { type: 'Restaurant', - img: '../markup/img/icons/restaurant.png', + img: './img/icons/restaurant.png', price: 200, }, ]; @@ -103,8 +103,8 @@ const mockEvents = [ title: `${typePoint[0].type} ${destination[1].title}`, icon: `${typePoint[0].img}`, price: typePoint[0].price, - eventStartTime: '2019-03-18T10:30', - eventEndtTime: '2019-03-18T11:00', + eventStartTime: new Date('2019-03-18T10:30'), + eventEndtTime: new Date('2019-03-18T11:00'), offers: [offers[0],], isFavorite: true, }, @@ -112,8 +112,8 @@ const mockEvents = [ title: `${typePoint[5].type} ${destination[0].title}`, icon: `${typePoint[5].img}`, price: typePoint[5].price, - eventStartTime: '2019-03-18T12:25', - eventEndtTime: '2019-03-18T13:35', + eventStartTime: new Date('2019-03-18T12:25'), + eventEndtTime: new Date('2019-03-18T13:35'), offers: [offers[1], offers[2],], isFavorite: false, }, @@ -121,8 +121,8 @@ const mockEvents = [ title: `${typePoint[4].type} ${destination[0].title}`, icon: `${typePoint[4].img}`, price: typePoint[4].price, - eventStartTime: '2019-03-18T14:30', - eventEndtTime: '2019-03-18T16:05', + eventStartTime: new Date('2019-03-18T14:30'), + eventEndtTime: new Date('2019-03-18T16:05'), offers: [offers[3],], isFavorite: true, }, @@ -130,8 +130,8 @@ const mockEvents = [ title: `${typePoint[6].type} ${destination[0].title}`, icon: `${typePoint[6].img}`, price: typePoint[6].price, - eventStartTime: '2019-03-18T10:30', - eventEndtTime: '2019-03-18T11:00', + eventStartTime: new Date('2019-03-18T10:30'), + eventEndtTime: new Date('2019-03-18T11:00'), offers: [offers[0],], isFavorite: true, }, diff --git a/src/presenter/list-presenter.js b/src/presenter/list-presenter.js index fc1012b..0365302 100644 --- a/src/presenter/list-presenter.js +++ b/src/presenter/list-presenter.js @@ -8,7 +8,6 @@ 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, eventModel }) { @@ -20,7 +19,6 @@ export default class ListPresenter { this.listEvents = [...this.eventModel.getEvents()]; render(new SortButtonView(), this.listContainer); - render(new EventItemView(), this.listContainer); render(new AddNewPointView(), this.listContainer); render(new EditPointView(), this.listContainer); render(this.listComponent, this.listContainer); diff --git a/src/utils.js b/src/utils.js index 2d7b7dc..a328893 100644 --- a/src/utils.js +++ b/src/utils.js @@ -10,15 +10,26 @@ function getRandomArrayElement(items) { } const DATE_FORMAT = 'MMM DD'; +const TIME_FORMAT = 'HH:mm'; /** * Returns a humanized representation of a given due date. * @param {string} dueDate - Due date in ISO format. * @returns {string} - Humanized representation of given due date, or empty string if due date is not given. */ -function humanizeEventDueDate(dueDate) { - return dueDate ? dayjs(dueDate).format(DATE_FORMAT).toUpperCase() : ''; +function humanizeEventDate(eventDate, format) { + if (format === 'date') { + return eventDate ? dayjs(eventDate).format(DATE_FORMAT).toUpperCase() : ''; + } + return eventDate ? dayjs(eventDate).format(TIME_FORMAT).toUpperCase() : ''; } +function diffTime(startTime, endTime) { + let time = dayjs(endTime).diff(startTime, 'm'); + if (time > 60) { + time = `${Math.floor(time / 60)}H ${time % 60}M`; + } + return time; +} -export {getRandomArrayElement, humanizeEventDueDate}; +export {getRandomArrayElement, humanizeEventDate, diffTime}; diff --git a/src/view/event-item-view.js b/src/view/event-item-view.js index bc2e487..4cae57d 100644 --- a/src/view/event-item-view.js +++ b/src/view/event-item-view.js @@ -1,10 +1,12 @@ import {createElement} from '../render.js'; -import {humanizeEventDueDate} from '../utils.js'; +import {humanizeEventDate, diffTime} from '../utils.js'; function createEventItemTemplate(event) { - const {title, icon, price, eventStartTime, eventEndtTime, offers, dueDate} = event; + const {title, icon, price, eventStartTime, eventEndtTime, offers} = event; - const date = humanizeEventDueDate(dueDate); + const date = humanizeEventDate(eventStartTime, 'date'); + const startTime = humanizeEventDate(eventStartTime); + const endTime = humanizeEventDate(eventEndtTime); return ( `
  • @@ -16,11 +18,11 @@ function createEventItemTemplate(event) {

    ${title}

    - + ${startTime} — - +

    -

    30M

    +

    ${diffTime(eventStartTime, eventEndtTime)}

    € ${price} @@ -28,9 +30,9 @@ function createEventItemTemplate(event) {

    • - ${offers.title} + ${offers.map((element) => element.title)} +€  - ${offers.price} + ${offers.map((element) => element.price)}
    -
    -

    Offers

    -
    -
    - - -
    + ${createOffersTemplate(tripEventData)} -
    - - -
    + ${createDestinationSectionTemplate(destinations)} -
    - - -
    - -
    - - -
    - -
    - - -
    -
    -
    - -
    -

    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 { + constructor(tripEventData, destinations) { + this.tripEventData = tripEventData; + this.destinations = destinations; + } + getTemplate() { - return createEditPointTemplate(); + return createEditPointTemplate(this.tripEventData, this.destinations); } getElement() { diff --git a/src/view/event-item-view.js b/src/view/event-item-view.js index 498bb55..a4b8601 100644 --- a/src/view/event-item-view.js +++ b/src/view/event-item-view.js @@ -18,8 +18,8 @@ function createOffersTemplate(offers) { } -function createEventItemTemplate(obj) { - const {basePrice = obj.basePrice, dateFrom = obj.dateFrom, dateTo = obj.dateTo, offers = obj.offers, type = obj.basePrice, destinationPicture = obj.destinationPicture} = obj; +function createEventItemTemplate(tripEventData) { + const {basePrice = tripEventData.basePrice, dateFrom = tripEventData.dateFrom, dateTo = tripEventData.dateTo, destination = tripEventData.destination, offers = tripEventData.offers, type = tripEventData.basePrice, destinationPicture = tripEventData.destinationPicture} = tripEventData; const date = humanizeEventDate(dateFrom, 'date'); const startTime = humanizeEventDate(dateFrom); @@ -30,9 +30,9 @@ function createEventItemTemplate(obj) {
    - Event type icon + Event type icon
    -

    ${type}

    +

    ${type} ${destination}

    ${startTime} @@ -65,12 +65,12 @@ function createEventItemTemplate(obj) { } export default class EventItemView { - constructor({obj}) { - this.obj = obj; + constructor({tripEventData}) { + this.tripEventData = tripEventData; } getTemplate() { - return createEventItemTemplate(this.obj); + return createEventItemTemplate(this.tripEventData); } getElement() { From 1e6a88a67a4a58e4cde8817812c51d7001bc7bdb Mon Sep 17 00:00:00 2001 From: Sergey Ivanov Date: Tue, 24 Sep 2024 23:06:42 +0300 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=D0=B2=D1=81=D1=82=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D1=83?= =?UTF-8?q?=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F=20=D0=B2=D0=B0=D1=80=D0=B8=D0=B0=D0=BD=D1=82=D0=BE=D0=B2?= =?UTF-8?q?=20=D0=BF=D1=83=D0=BD=D0=BA=D1=82=D0=BE=D0=B2=20=D0=BD=D0=B0?= =?UTF-8?q?=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B2=20?= =?UTF-8?q?=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=B8=D1=80=D1=83=D0=B5?= =?UTF-8?q?=D0=BC=D0=BE=D0=BC=20=D0=BF=D1=83=D0=BD=D0=BA=D1=82=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/presenter/list-presenter.js | 3 ++- src/utils.js | 5 +---- src/view/edit-poit-view.js | 31 ++++++++++++++++++++----------- src/view/event-item-view.js | 4 ++-- 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/presenter/list-presenter.js b/src/presenter/list-presenter.js index ac1276f..ee3f48e 100644 --- a/src/presenter/list-presenter.js +++ b/src/presenter/list-presenter.js @@ -44,7 +44,8 @@ export default class ListPresenter { render(new EditPointView( tripEventData(this.pointsTrip[0]), - this.destinations.getDestinationById(this.pointsTrip[0]) + this.destinations.getDestinationById(this.pointsTrip[0]), + {allDestinations: this.destinations} ), this.listContainer); render(this.listComponent, this.listContainer); diff --git a/src/utils.js b/src/utils.js index 7584cda..8caa982 100644 --- a/src/utils.js +++ b/src/utils.js @@ -22,10 +22,7 @@ const FORMATS = { * @returns {string} - Humanized representation of given due date, or empty string if due date is not given. */ function humanizeEventDate(eventDate, format) { - if (format === 'date') { - return eventDate ? dayjs(eventDate).format(DATE_FORMAT).toUpperCase() : ''; - } - return eventDate ? dayjs(eventDate).format(TIME_FORMAT).toUpperCase() : ''; + return eventDate ? dayjs(eventDate).format(FORMATS[format]).toUpperCase() : ''; } /** diff --git a/src/view/edit-poit-view.js b/src/view/edit-poit-view.js index b5d26d4..13f582f 100644 --- a/src/view/edit-poit-view.js +++ b/src/view/edit-poit-view.js @@ -77,12 +77,22 @@ function createEventTypeList() { `); } -function createEditPointTemplate(tripEventData, destinations) { - const {dateFrom = tripEventData.dateFrom, dateTo = tripEventData.dateTo, destination = tripEventData.destination, offers = tripEventData.offers, type = tripEventData.type, destinationPicture = tripEventData.destinationPicture} = tripEventData; +function destinationsList(destinations) { + + return (` + + ${destinations.map((destination) => (` + + `)).join('')} + + `); +} + +function createEditPointTemplate(tripEventData, destinations, allDestinations) { + const {basePrice = tripEventData.basePrice, dateFrom = tripEventData.dateFrom, dateTo = tripEventData.dateTo, destination = tripEventData.destination, type = tripEventData.type, destinationPicture = tripEventData.destinationPicture} = tripEventData; const timeStart = humanizeEventDate(dateFrom, 'eventTime'); const timeEnd = humanizeEventDate(dateTo, 'eventTime'); - return (`

    @@ -101,11 +111,9 @@ function createEditPointTemplate(tripEventData, destinations) { ${type} - - - - - + + ${destinationsList(allDestinations.allDestinations.data)} +
    @@ -121,7 +129,7 @@ function createEditPointTemplate(tripEventData, destinations) { € - +
    @@ -142,13 +150,14 @@ function createEditPointTemplate(tripEventData, destinations) { } export default class EditPointView { - constructor(tripEventData, destinations) { + constructor(tripEventData, destinations, allDestinations) { this.tripEventData = tripEventData; this.destinations = destinations; + this.allDestinations = allDestinations; } getTemplate() { - return createEditPointTemplate(this.tripEventData, this.destinations); + return createEditPointTemplate(this.tripEventData, this.destinations, this.allDestinations); } getElement() { diff --git a/src/view/event-item-view.js b/src/view/event-item-view.js index a4b8601..38b3821 100644 --- a/src/view/event-item-view.js +++ b/src/view/event-item-view.js @@ -22,8 +22,8 @@ function createEventItemTemplate(tripEventData) { const {basePrice = tripEventData.basePrice, dateFrom = tripEventData.dateFrom, dateTo = tripEventData.dateTo, destination = tripEventData.destination, offers = tripEventData.offers, type = tripEventData.basePrice, destinationPicture = tripEventData.destinationPicture} = tripEventData; const date = humanizeEventDate(dateFrom, 'date'); - const startTime = humanizeEventDate(dateFrom); - const endTime = humanizeEventDate(dateTo); + const startTime = humanizeEventDate(dateFrom, 'time'); + const endTime = humanizeEventDate(dateTo, 'time'); return ( `