From 05f9a660bef8ee86736c756469695ab7f97dcd5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D1=81=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=A2=D0=BE=D0=BF=D0=BE=D1=80=D0=BA=D0=BE=D0=B2=D0=B0?= Date: Sun, 14 Apr 2024 11:45:54 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8F?= =?UTF-8?q?=D0=B9=20=D0=B8=20=D0=B2=D0=BB=D0=B0=D1=81=D1=82=D0=B2=D1=83?= =?UTF-8?q?=D0=B92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/const.js | 72 +++++++++---------- src/main.js | 2 +- src/presenter/trip-presenter.js | 124 ++++++++++++++++---------------- src/render.js | 2 +- src/utils.js | 100 +++++++++++++------------- src/view/edit-point-view.js | 104 +++++++++++++-------------- src/view/filter-view.js | 12 ++-- src/view/point-list-view.js | 12 ++-- src/view/point-view.js | 76 ++++++++++---------- src/view/sort-view.js | 12 ++-- src/view/trip-info-view.js | 12 ++-- webpack.config.js | 18 ++--- 12 files changed, 273 insertions(+), 273 deletions(-) diff --git a/src/const.js b/src/const.js index 97f9018..cc4c19a 100644 --- a/src/const.js +++ b/src/const.js @@ -18,56 +18,56 @@ const CITIES = [ ]; const OFFERS = [ - 'Order Uber', - 'Add luggage', - 'Switch to comfort', - 'Rent a car', - 'Add breakfast', - 'Book tickets', - 'Lunch in city', - 'Upgrade to a business class' + 'Order Uber', + 'Add luggage', + 'Switch to comfort', + 'Rent a car', + 'Add breakfast', + 'Book tickets', + 'Lunch in city', + 'Upgrade to a business class' ]; const DESCRIPTION = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet varius magna, non porta ligula feugiat eget. Fusce tristique felis at fermentum pharetra. Aliquam id orci ut lectus varius viverra.'; const Price = { - MIN: 1, - MAX: 1000 + MIN: 1, + MAX: 1000 }; const TYPES = [ - 'taxi', - 'bus', - 'train', - 'ship', - 'drive', - 'flight', - 'check-in', - 'sightseeing', - 'restaurant' + 'taxi', + 'bus', + 'train', + 'ship', + 'drive', + 'flight', + 'check-in', + 'sightseeing', + 'restaurant' ]; const DEFAULT_TYPE = 'flight'; const POINT_EMPTY = { - basePrice: 0, - dateFrom: null, - dateTo: null, - destination: null, - isFavorite: false, - offers: [], - type: DEFAULT_TYPE + basePrice: 0, + dateFrom: null, + dateTo: null, + destination: null, + isFavorite: false, + offers: [], + type: DEFAULT_TYPE }; export { - OFFER_COUNT, - DESTINATION_COUNT, - POINT_COUNT, - CITIES, - OFFERS, - DESCRIPTION, - Price, - TYPES, - DEFAULT_TYPE, - POINT_EMPTY + OFFER_COUNT, + DESTINATION_COUNT, + POINT_COUNT, + CITIES, + OFFERS, + DESCRIPTION, + Price, + TYPES, + DEFAULT_TYPE, + POINT_EMPTY } diff --git a/src/main.js b/src/main.js index 4bfca32..22f2c77 100644 --- a/src/main.js +++ b/src/main.js @@ -16,7 +16,7 @@ const destinationsModel = new DestinationsModel(mockService); const offersModel = new OffersModel(mockService); const pointsModel = new PointsModel(mockService); -const tripPresenter = new TripPresenter({tripContainer: eventListElement, destinationsModel, offersModel, pointsModel}); +const tripPresenter = new TripPresenter({ tripContainer: eventListElement, destinationsModel, offersModel, pointsModel }); render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN); render(new FilterView(), tripInfoElement.querySelector('.trip-controls__filters')); diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index 8a26afc..1bb8bae 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -5,79 +5,79 @@ import TripView from '../view/point-list-view.js'; import { render, replace } from '../framework/render.js'; export default class TripPresenter { - #tripContainer = null; - #destinationsModel = null; - #offersModel = null; - #pointsModel = null; - #pointListComponent = new TripView(); - #sortComponent = new SortView(); + #tripContainer = null; + #destinationsModel = null; + #offersModel = null; + #pointsModel = null; + #pointListComponent = new TripView(); + #sortComponent = new SortView(); - #points = []; + #points = []; - constructor({tripContainer, destinationsModel, offersModel, pointsModel}) { - this.#tripContainer = tripContainer; - this.#destinationsModel = destinationsModel; - this.#offersModel = offersModel; - this.#pointsModel = pointsModel; - this.#points = [...this.#pointsModel.get()]; - } + constructor({ tripContainer, destinationsModel, offersModel, pointsModel }) { + this.#tripContainer = tripContainer; + this.#destinationsModel = destinationsModel; + this.#offersModel = offersModel; + this.#pointsModel = pointsModel; + this.#points = [...this.#pointsModel.get()]; + } - init() { - render(this.#sortComponent, this.#tripContainer); - render(this.#pointListComponent, this.#tripContainer); + init() { + render(this.#sortComponent, this.#tripContainer); + render(this.#pointListComponent, this.#tripContainer); - this.#points.forEach((point) => { - this.#renderPoint(point); - }); - } + this.#points.forEach((point) => { + this.#renderPoint(point); + }); + } - #renderPoint = (point) => { - const pointComponent = new PointView({ - point, - pointDestination: this.#destinationsModel.getById(point.destination), - pointOffers: this.#offersModel.getByType(point.type), - onEditClick: pointEditClickHandler - }); + #renderPoint = (point) => { + const pointComponent = new PointView({ + point, + pointDestination: this.#destinationsModel.getById(point.destination), + pointOffers: this.#offersModel.getByType(point.type), + onEditClick: pointEditClickHandler + }); - const editPointComponent = new EditPointView({ - point, - pointDestination: this.#destinationsModel.getById(point.destination), - pointOffers: this.#offersModel.getByType(point.type), - onSubmitClick: pointSubmitHandler, - onResetClick: resetButtonClickHandler - }); + const editPointComponent = new EditPointView({ + point, + pointDestination: this.#destinationsModel.getById(point.destination), + pointOffers: this.#offersModel.getByType(point.type), + onSubmitClick: pointSubmitHandler, + onResetClick: resetButtonClickHandler + }); - const replacePointToForm = () => { - replace(editPointComponent, pointComponent); - }; + const replacePointToForm = () => { + replace(editPointComponent, pointComponent); + }; - const replaceFormToPoint = () => { - replace(pointComponent, editPointComponent); - }; + const replaceFormToPoint = () => { + replace(pointComponent, editPointComponent); + }; - const escKeyDownHandler = (evt) => { - if (evt.key === 'Escape' || evt.key === 'Esc') { - evt.preventDefault(); - replaceFormToPoint(); - document.removeEventListener('keydown', escKeyDownHandler); - } - }; + const escKeyDownHandler = (evt) => { + if (evt.key === 'Escape' || evt.key === 'Esc') { + evt.preventDefault(); + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + } + }; - function pointEditClickHandler() { - replacePointToForm(); - document.addEventListener('keydown', escKeyDownHandler); - }; + function pointEditClickHandler() { + replacePointToForm(); + document.addEventListener('keydown', escKeyDownHandler); + }; - function resetButtonClickHandler() { - replaceFormToPoint(); - document.removeEventListener('keydown', escKeyDownHandler); - }; + function resetButtonClickHandler() { + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + }; - function pointSubmitHandler() { - replaceFormToPoint(); - document.removeEventListener('keydown', escKeyDownHandler); - }; + function pointSubmitHandler() { + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + }; - render(pointComponent, this.#pointListComponent.element); - } + render(pointComponent, this.#pointListComponent.element); + } } diff --git a/src/render.js b/src/render.js index 8c22c92..c01e5a6 100644 --- a/src/render.js +++ b/src/render.js @@ -16,4 +16,4 @@ function render(component, container, place = RenderPosition.BEFOREEND) { container.insertAdjacentElement(place, component.getElement()); } -export {RenderPosition, createElement, render}; +export { RenderPosition, createElement, render }; diff --git a/src/utils.js b/src/utils.js index d64bcd2..9a0deaf 100644 --- a/src/utils.js +++ b/src/utils.js @@ -6,88 +6,88 @@ dayjs.extend(duration); dayjs.extend(relativeTime); const TimePeriods = { - MSEC_IN_SEC: 1000, - SEC_IN_MIN: 60, - MIN_IN_HOUR: 60, - HOUR_IN_DAY: 24 + MSEC_IN_SEC: 1000, + SEC_IN_MIN: 60, + MIN_IN_HOUR: 60, + HOUR_IN_DAY: 24 } const MSEC_IN_HOUR = TimePeriods.MIN_IN_HOUR * TimePeriods.SEC_IN_MIN * TimePeriods.MSEC_IN_SEC; const MSEC_IN_DAY = TimePeriods.HOUR_IN_DAY * MSEC_IN_HOUR; const Duration = { - HOUR: 5, - DAY: 5, - MIN: 59 + HOUR: 5, + DAY: 5, + MIN: 59 }; let date = dayjs().subtract(getRandomInteger(0, Duration.DAY), 'day').toDate(); -function getDate({next}) { - const minsGap = getRandomInteger(0, Duration.MIN); - const hoursGap = getRandomInteger(1, Duration.HOUR); - const daysGap = getRandomInteger(0, Duration.DAY); +function getDate({ next }) { + const minsGap = getRandomInteger(0, Duration.MIN); + const hoursGap = getRandomInteger(1, Duration.HOUR); + const daysGap = getRandomInteger(0, Duration.DAY); - if (next) { - date = dayjs(date) - .add(minsGap, 'minute') - .add(hoursGap, 'hour') - .add(daysGap, 'day') - .toDate(); - } + if (next) { + date = dayjs(date) + .add(minsGap, 'minute') + .add(hoursGap, 'hour') + .add(daysGap, 'day') + .toDate(); + } - return date; + return date; } function getRandomInteger(a = 0, b = 1) { - const lower = Math.ceil(Math.min(a,b)); - const upper = Math.floor(Math.max(a,b)); + const lower = Math.ceil(Math.min(a, b)); + const upper = Math.floor(Math.max(a, b)); - return Math.floor(lower + Math.random() * (upper - lower + 1)); + return Math.floor(lower + Math.random() * (upper - lower + 1)); } function getRandomValue(items) { - return items[getRandomInteger(0, items.length - 1)]; + return items[getRandomInteger(0, items.length - 1)]; } function formatStringToDateTime(date) { - return dayjs(date).format('DD/MM/YY HH:mm'); + return dayjs(date).format('DD/MM/YY HH:mm'); } function formatStringToShortDate(date) { - return dayjs(date).format('MMM DD'); + return dayjs(date).format('MMM DD'); } function formatStringToTime(date) { - return dayjs(date).format('HH:mm'); + return dayjs(date).format('HH:mm'); } function getPointDuration(dateFrom, dateTo) { - const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom)); - - let pointDuration = 0; - - switch (true) { - case (timeDiff >= MSEC_IN_DAY): - pointDuration = dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]'); - break; - case (timeDiff >= MSEC_IN_HOUR): - pointDuration = dayjs.duration(timeDiff).format('HH[H] mm[M]'); - break; - case (timeDiff < MSEC_IN_HOUR): - pointDuration = dayjs.duration(timeDiff).format('mm[M]'); - break; - } - - return pointDuration; + const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom)); + + let pointDuration = 0; + + switch (true) { + case (timeDiff >= MSEC_IN_DAY): + pointDuration = dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]'); + break; + case (timeDiff >= MSEC_IN_HOUR): + pointDuration = dayjs.duration(timeDiff).format('HH[H] mm[M]'); + break; + case (timeDiff < MSEC_IN_HOUR): + pointDuration = dayjs.duration(timeDiff).format('mm[M]'); + break; + } + + return pointDuration; } export { - getDate, - getRandomInteger, - getRandomValue, - formatStringToDateTime, - formatStringToShortDate, - formatStringToTime, - getPointDuration + getDate, + getRandomInteger, + getRandomValue, + formatStringToDateTime, + formatStringToShortDate, + formatStringToTime, + getPointDuration } diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 5e7863b..86bcaf9 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -3,34 +3,34 @@ import { POINT_EMPTY, TYPES, CITIES } from "../const.js"; import { formatStringToDateTime } from '../utils.js'; const createPointCitiesOptionsTemplate = () => { - return ( - ` + return ( + ` ${CITIES.map((city) => ``).join('')} ` - ); + ); } const createPointPhotosTemplate = (pointDestination) => { - return ( - `
+ return ( + `
${pointDestination.pictures.map((picture) => - `${picture.description}`).join('')} + `${picture.description}`).join('')}
` - ); + ); } const createPointTypesTemplate = (currentType) => { - return TYPES.map((type) => - `
+ return TYPES.map((type) => + `
`).join(''); } -const createPointOffersTemplate = ({pointOffers}) => { - const offerItems = pointOffers.map(offer => { - return ( - `
+const createPointOffersTemplate = ({ pointOffers }) => { + const offerItems = pointOffers.map(offer => { + return ( + `
` - ); - }).join(''); + ); + }).join(''); - return `
${offerItems}
`; + return `
${offerItems}
`; } -const createEditPointTemplate = ({point, pointDestination, pointOffers}) => { - const { basePrice, dateFrom, dateTo, offers, type } = point; +const createEditPointTemplate = ({ point, pointDestination, pointOffers }) => { + const { basePrice, dateFrom, dateTo, offers, type } = point; - return ( - `
  • + return ( + `
  • @@ -94,7 +94,7 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {

    Offers

    - ${createPointOffersTemplate({pointOffers})} + ${createPointOffersTemplate({ pointOffers })}

    Destination

    @@ -106,44 +106,44 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {
    • ` - ); + ); } export default class EditPointView extends AbstractView { - #point = null; - #pointDestination = null; - #pointOffers = null; - #onSubmitClick = null; - #onResetClick = null; + #point = null; + #pointDestination = null; + #pointOffers = null; + #onSubmitClick = null; + #onResetClick = null; - constructor({point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onResetClick}) { - super(); - this.#point = point; - this.#pointDestination = pointDestination; - this.#pointOffers = pointOffers; - this.#onSubmitClick = onSubmitClick; - this.#onResetClick = onResetClick; + constructor({ point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onResetClick }) { + super(); + this.#point = point; + this.#pointDestination = pointDestination; + this.#pointOffers = pointOffers; + this.#onSubmitClick = onSubmitClick; + this.#onResetClick = onResetClick; - this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler); + this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler); - this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#resetButtonClickHandler); - } + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#resetButtonClickHandler); + } - get template() { - return createEditPointTemplate({ - point: this.#point, - pointDestination: this.#pointDestination, - pointOffers: this.#pointOffers - }); - } + get template() { + return createEditPointTemplate({ + point: this.#point, + pointDestination: this.#pointDestination, + pointOffers: this.#pointOffers + }); + } - #formSubmitHandler = (evt) => { - evt.preventDefault(); - this.#onSubmitClick(); - } + #formSubmitHandler = (evt) => { + evt.preventDefault(); + this.#onSubmitClick(); + } - #resetButtonClickHandler = (evt) => { - evt.preventDefault(); - this.#onResetClick(); - } + #resetButtonClickHandler = (evt) => { + evt.preventDefault(); + this.#onResetClick(); + } } diff --git a/src/view/filter-view.js b/src/view/filter-view.js index e3429bf..dcc3181 100644 --- a/src/view/filter-view.js +++ b/src/view/filter-view.js @@ -1,8 +1,8 @@ import AbstractView from '../framework/view/abstract-view.js'; const createFilterTemplate = () => { - return ( - `
    + return ( + `
    @@ -21,12 +21,12 @@ const createFilterTemplate = () => {
    ` - ); + ); } export default class FilterView extends AbstractView { - get template() { - return createFilterTemplate(); - } + get template() { + return createFilterTemplate(); + } } diff --git a/src/view/point-list-view.js b/src/view/point-list-view.js index 11a5198..0efcfa4 100644 --- a/src/view/point-list-view.js +++ b/src/view/point-list-view.js @@ -1,13 +1,13 @@ import AbstractView from '../framework/view/abstract-view.js'; const createPointListTemplate = () => { - return ( - `
        ` - ); + return ( + `
            ` + ); } export default class PointListView extends AbstractView { - get template() { - return createPointListTemplate(); - } + get template() { + return createPointListTemplate(); + } } diff --git a/src/view/point-view.js b/src/view/point-view.js index 6146454..25793b9 100644 --- a/src/view/point-view.js +++ b/src/view/point-view.js @@ -1,26 +1,26 @@ import AbstractView from '../framework/view/abstract-view.js'; -import { formatStringToDateTime, formatStringToShortDate, formatStringToTime, getPointDuration} from '../utils.js'; +import { formatStringToDateTime, formatStringToShortDate, formatStringToTime, getPointDuration } from '../utils.js'; -const createPointOffersTemplate = ({pointOffers}) => { - const offerItems = pointOffers.map(offer => { - return ( - `
          • +const createPointOffersTemplate = ({ pointOffers }) => { + const offerItems = pointOffers.map(offer => { + return ( + `
          • ${offer.title} +€  ${offer.price}
            • ` - ); - }).join(''); + ); + }).join(''); - return `
              ${offerItems}
            `; + return `
              ${offerItems}
            `; } -const createPointTemplate = ({point, pointDestination, pointOffers}) => { - const { basePrice, dateFrom, dateTo, offers, isFavorite, type } = point; - const favoriteClassName = isFavorite ? 'event__favorite-btn--active' : ''; +const createPointTemplate = ({ point, pointDestination, pointOffers }) => { + const { basePrice, dateFrom, dateTo, offers, isFavorite, type } = point; + const favoriteClassName = isFavorite ? 'event__favorite-btn--active' : ''; - return ( - `
          • + return ( + `
          • @@ -39,7 +39,7 @@ const createPointTemplate = ({point, pointDestination, pointOffers}) => { € ${basePrice}

            - ${createPointOffersTemplate({pointOffers})} + ${createPointOffersTemplate({ pointOffers })}
            • ` - ); + ); } export default class PointView extends AbstractView { - #point = null; - #pointDestination = null; - #pointOffers = null; - #onEditClick = null; + #point = null; + #pointDestination = null; + #pointOffers = null; + #onEditClick = null; - constructor({point, pointDestination, pointOffers, onEditClick}) { - super(); - this.#point = point; - this.#pointDestination = pointDestination; - this.#pointOffers = pointOffers; - this.#onEditClick = onEditClick; + constructor({ point, pointDestination, pointOffers, onEditClick }) { + super(); + this.#point = point; + this.#pointDestination = pointDestination; + this.#pointOffers = pointOffers; + this.#onEditClick = onEditClick; - this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); - } + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); + } - get template() { - return createPointTemplate({ - point: this.#point, - pointDestination: this.#pointDestination, - pointOffers: this.#pointOffers - }); - } + get template() { + return createPointTemplate({ + point: this.#point, + pointDestination: this.#pointDestination, + pointOffers: this.#pointOffers + }); + } - #editClickHandler = (evt) => { - evt.preventDefault(); - this.#onEditClick(); - } + #editClickHandler = (evt) => { + evt.preventDefault(); + this.#onEditClick(); + } } diff --git a/src/view/sort-view.js b/src/view/sort-view.js index 29b8f0c..0c775c9 100644 --- a/src/view/sort-view.js +++ b/src/view/sort-view.js @@ -1,8 +1,8 @@ import AbstractView from '../framework/view/abstract-view.js'; const createSortTemplate = () => { - return ( - `
            + return ( + `
            @@ -25,11 +25,11 @@ const createSortTemplate = () => {
            ` - ); + ); } export default class SortView extends AbstractView { - get template() { - return createSortTemplate(); - } + get template() { + return createSortTemplate(); + } } diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js index 58b4bb2..b7ffa98 100644 --- a/src/view/trip-info-view.js +++ b/src/view/trip-info-view.js @@ -1,8 +1,8 @@ import AbstractView from '../framework/view/abstract-view.js'; const createTripInfoTemplate = () => { - return ( - `
            + return ( + `

            Amsterdam — Chamonix — Geneva

            @@ -13,11 +13,11 @@ const createTripInfoTemplate = () => { Total: € 1230

            ` - ); + ); } export default class TripInfoView extends AbstractView { - get template() { - return createTripInfoTemplate(); - } + get template() { + return createTripInfoTemplate(); + } } diff --git a/webpack.config.js b/webpack.config.js index 6c6ac38..ee42b2d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,17 +12,17 @@ module.exports = { devtool: 'source-map', plugins: [ new HtmlPlugin({ - template: 'public/index.html', + template: 'public/index.html', }), new CopyPlugin({ - patterns: [ - { - from: 'public', - globOptions: { - ignore: ['**/index.html'], - }, - }, - ], + patterns: [ + { + from: 'public', + globOptions: { + ignore: ['**/index.html'], + }, + }, + ], }), ], module: {