From 6047947b9d26dbb2e40af6f8154a3b46172f210f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D1=80=D1=88=D0=BE=D0=B2=20=D0=95=D0=B3=D0=BE=D1=80?= Date: Sun, 14 Apr 2024 20:48:31 +0500 Subject: [PATCH] test3 fix merge pull requests --- src/const.js | 134 ++++++------------------ src/framework/api-service.js | 2 +- src/framework/ui-blocker/ui-blocker.css | 6 +- src/framework/view/abstract-view.js | 96 ++++++----------- src/model/destinations-model.js | 14 ++- src/model/event-points-model.js | 16 ++- src/model/offers-model.js | 14 ++- src/utils.js | 46 +++----- 8 files changed, 101 insertions(+), 227 deletions(-) diff --git a/src/const.js b/src/const.js index 570623b..cf5a475 100644 --- a/src/const.js +++ b/src/const.js @@ -6,19 +6,17 @@ const HOUR_IN_DAY = 24; const MAX_PRICE_VALUE = 200; const MSEC_IN_HOUR = MSEC_IN_SEC * SEC_IN_MIN * MIN_IN_HOUR; const MSEC_IN_DAY = MSEC_IN_HOUR * HOUR_IN_DAY; -const MAX_IMAGES_COUNT = 5; const EVENT_TYPES = [ - 'taxi', - 'bus', - 'train', - 'ship', - 'drive', - 'flight', - 'check-in', - 'sightseeing', - 'restaurant', -]; + 'Taxi', + 'Bus', + 'Train', + 'Ship', 'Drive', + 'Flight', + 'Check-in', + 'Sightseeing', + 'Restaurant']; + const CITIES = [ 'Paris', @@ -31,109 +29,41 @@ const CITIES = [ 'San-Francisco' ]; -const DESCRIPTIONS = [ + +const DESCCRIPTIONS = [ 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt architecto labore atque!', 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem exercitationem culpa, molestias qui eveniet corrupti?', 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, dolorem.', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ad eaque cupiditate praesentium maxime.', ]; -const Price = { - MIN: 1, - MAX: 500, -}; - -const MocksMaxCount = { - OFFERS: 7, - POINTS: 5, -}; - -const DateFormat = { - TIME: 'HH:mm', - SHORT: 'MMM DD', - FULL: 'YYYY-MM-DDTHH:mm', - WITH_DELIMITER: 'DD/MM/YY HH:mm', -}; - -const DurationFormat = { - DAYS: 'DD[D] HH[H] mm[M]', - HOURS: 'HH[H] mm[M]', - MINS: 'mm[M]', -}; -const FilterType = { - ANY: 'any', - FUTURE: 'future', - PRESENT: 'present', - PAST: 'past' +const DATE_FORMATS = { + time: 'HH:mm', + shortDate: 'MMM DD', + formDateTime: 'DD/MM/YY HH:mm' }; -const SortType = { - DAY: 'day', - EVENT: 'event', - TIME: 'time', - PRICE: 'price', - OFFER: 'offer', -}; -const FilterSettings = { - [FilterType.ANY]: { - label: 'Everything', - defaultSelected: true, - }, - [FilterType.FUTURE]: { label: 'Future' }, - [FilterType.PRESENT]: { label: 'Present' }, - [FilterType.PAST]: { label: 'Past' }, +const DURATION_FORMATS = { + days: 'DD[D] HH[H] mm[M]', + hours: 'HH[H] mm[M]', + mins: 'mm[M]' }; -const SORTING_COLUMNS = [ - { - type: SortType.DAY, - label: 'Day', - active: true, - defaultSelected: true, - }, - { - type: SortType.EVENT, - label: 'Event', - active: false, - }, - { - type: SortType.TIME, - label: 'Time', - active: true, - }, - { - type: SortType.PRICE, - label: 'Price', - active: true, - }, - { - type: SortType.OFFER, - label: 'Offer', - active: false, - }, -]; export { - POINTS_COUNT, - MSEC_IN_SEC, - SEC_IN_MIN, - MIN_IN_HOUR, - HOUR_IN_DAY, - MAX_PRICE_VALUE, - MSEC_IN_HOUR, - MSEC_IN_DAY, - MAX_IMAGES_COUNT, - EVENT_TYPES, - CITIES, - DESCRIPTIONS, - Price, - MocksMaxCount, - DateFormat, - DurationFormat, - FilterType, - FilterSettings, - SortType, - SORTING_COLUMNS, +POINTS_COUNT, +MSEC_IN_SEC, +SEC_IN_MIN, +MIN_IN_HOUR, +HOUR_IN_DAY, +MAX_PRICE_VALUE, +MSEC_IN_HOUR, +MSEC_IN_DAY, +EVENT_TYPES, +CITIES, +DESCCRIPTIONS, +DATE_FORMATS, +DURATION_FORMATS, }; diff --git a/src/framework/api-service.js b/src/framework/api-service.js index ef9f928..ff97aee 100644 --- a/src/framework/api-service.js +++ b/src/framework/api-service.js @@ -44,7 +44,7 @@ export default class ApiService { /** * Метод для обработки ответа * @param {Response} response Объект ответа - * @returns {Promise} + * @returns {Promise} */ static parseResponse(response) { return response.json(); diff --git a/src/framework/ui-blocker/ui-blocker.css b/src/framework/ui-blocker/ui-blocker.css index 489756d..6bcc6d5 100644 --- a/src/framework/ui-blocker/ui-blocker.css +++ b/src/framework/ui-blocker/ui-blocker.css @@ -1,11 +1,11 @@ .ui-blocker { display: none; place-content: center; - position: fixed; + position: absolute; top: 0; + right: 0; + bottom: 0; left: 0; - min-width: 100%; - min-height: 100%; z-index: 1000; cursor: wait; background-color: rgba(255, 255, 255, 0.5); diff --git a/src/framework/view/abstract-view.js b/src/framework/view/abstract-view.js index fa2a552..90858d7 100644 --- a/src/framework/view/abstract-view.js +++ b/src/framework/view/abstract-view.js @@ -1,65 +1,31 @@ -import {createElement} from '../render.js'; -import './abstract-view.css'; - -/** @const {string} Класс, реализующий эффект "покачивания головой" */ -const SHAKE_CLASS_NAME = 'shake'; - -/** @const {number} Время анимации в миллисекундах */ -const SHAKE_ANIMATION_TIMEOUT = 600; - -/** - * Абстрактный класс представления - */ -export default class AbstractView { - /** @type {HTMLElement|null} Элемент представления */ - #element = null; - - constructor() { - if (new.target === AbstractView) { - throw new Error('Can\'t instantiate AbstractView, only concrete one.'); - } - } - - /** - * Геттер для получения элемента - * @returns {HTMLElement} Элемент представления - */ - get element() { - if (!this.#element) { - this.#element = createElement(this.template); - } - - return this.#element; - } - - /** - * Геттер для получения разметки элемента - * @abstract - * @returns {string} Разметка элемента в виде строки - */ - get template() { - throw new Error('Abstract method not implemented: get template'); - } - - /** Метод для удаления элемента */ - removeElement() { - this.#element = null; - } - - /** - * Метод, реализующий эффект "покачивания головой" - * @param {shakeCallback} [callback] Функция, которая будет вызвана после завершения анимации - */ - shake(callback) { - this.element.classList.add(SHAKE_CLASS_NAME); - setTimeout(() => { - this.element.classList.remove(SHAKE_CLASS_NAME); - callback?.(); - }, SHAKE_ANIMATION_TIMEOUT); - } -} - -/** - * Функция, которая будет вызвана методом shake после завершения анимации - * @callback shakeCallback - */ +import { + render, + RenderPosition +} from './render.js'; +import TripInfoView from './view/create-trip.js'; +import FiltersView from './view/create-filter.js'; +import PointsPresenter from './presenter/board-presenter.js'; + +const tripMainContainer = document.querySelector('.trip-main'); +const tripEventsContainer = document.querySelector('.trip-events'); +const filtersContainer = tripMainContainer.querySelector('.trip-controls__filters'); + +import PointsModel from './model/event-points-model.js'; +import OffersModel from './model/offers-model.js'; +import DestinationsModel from './model/destinations-model.js'; + +const pointsModel = new PointsModel(); +const offersModel = new OffersModel(); +const destinationsModel = new DestinationsModel(); + +const pointsPresenter = new PointsPresenter({ + tripEventsContainer, + pointsModel, + offersModel, + destinationsModel +}); + +render(new TripInfoView(), tripMainContainer, RenderPosition.AFTERBEGIN); +render(new FiltersView(), filtersContainer); + +pointsPresenter.init(); diff --git a/src/model/destinations-model.js b/src/model/destinations-model.js index 336033d..eb046b2 100644 --- a/src/model/destinations-model.js +++ b/src/model/destinations-model.js @@ -1,17 +1,15 @@ -export default class DestinationsModel { - #service = null; - #destinations = null; +import { getDestinations } from '../mock/destinations.js'; - constructor(service) { - this.#service = service; - this.#destinations = this.#service.destinations; +export default class DestinationsModel { + constructor() { + this.destinations = getDestinations(); } get() { - return this.#destinations; + return this.destinations; } getById(id) { - return this.#destinations.find((destination) => destination.id === id); + return this.destinations.find((destination) => destination.id === id); } } diff --git a/src/model/event-points-model.js b/src/model/event-points-model.js index 5edf058..312faf3 100644 --- a/src/model/event-points-model.js +++ b/src/model/event-points-model.js @@ -1,14 +1,12 @@ -export default class PointsModel { - #service = null; - #points = null; +import { getRandomEventPoint } from '../mock/event-points.js'; +import { POINTS_COUNT } from '../const.js'; - constructor(service) { - this.#service = service; - this.#points = this.#service.points; +export default class PointsModel { + constructor() { + this.points = Array.from({ length: POINTS_COUNT }, getRandomEventPoint); } - get() { - return this.#points; + getEventPoints() { + return this.points; } } - diff --git a/src/model/offers-model.js b/src/model/offers-model.js index 0aac115..7d4d36f 100644 --- a/src/model/offers-model.js +++ b/src/model/offers-model.js @@ -1,17 +1,15 @@ -export default class OffersModel { - #service = null; - #offers = null; +import { getOffers } from '../mock/offers.js'; - constructor(service) { - this.#service = service; - this.#offers = this.#service.offers; +export default class OffersModel { + constructor() { + this.offers = getOffers(); } get() { - return this.#offers; + return this.offers; } getByType(type) { - return this.#offers.find((offers) => offers.type === type.toLowerCase()).offers; + return this.offers.find((offers) => offers.type === type.toLowerCase()).offers; } } diff --git a/src/utils.js b/src/utils.js index 5a4c397..b60f2f7 100644 --- a/src/utils.js +++ b/src/utils.js @@ -4,20 +4,19 @@ dayjs.extend(duration); import { MSEC_IN_HOUR, MSEC_IN_DAY, - DateFormat, - DurationFormat, - FilterType + DURATION_FORMATS } from './const.js'; +// Функция для получения случайного элемента из массива const getRandomArrayElement = (items) => items[Math.floor(Math.random() * items.length)]; -const getRandomPositiveNumber = (min = 0, max = 1) => { - const lower = Math.ceil(Math.min(min, max)); - const upper = Math.floor(Math.max(min, max)); - return Math.floor(lower + Math.random() * (upper - lower + 1)); -}; -const getRandomDate = (start = new Date(2022, 0, 1), end = new Date(2025, 0, 1)) => new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); -const formatDate = (currentDate, format = DateFormat.FULL) => dayjs(currentDate).format(format); +// Функция для генерации случайного положительного числа +const getRandomPositiveNumber = (max) => Math.ceil(Math.random() * max); + +// Функция для форматирования даты в указанном формате +const humanizeDate = (currentDate, format) => currentDate ? dayjs(currentDate).format(format) : ''; + +// Функция для вычисления продолжительности между двумя датами const calculateDuration = (dateFrom, dateTo) => { const diff = dayjs(dateTo).diff(dayjs(dateFrom)); @@ -25,19 +24,20 @@ const calculateDuration = (dateFrom, dateTo) => { switch (true) { case (diff >= MSEC_IN_DAY): - pointDuration = dayjs.duration(diff).format(DurationFormat.DAYS); + pointDuration = dayjs.duration(diff).format(DURATION_FORMATS.days); break; case (diff >= MSEC_IN_HOUR): - pointDuration = dayjs.duration(diff).format(DurationFormat.HOURS); + pointDuration = dayjs.duration(diff).format(DURATION_FORMATS.hours); break; case (diff < MSEC_IN_HOUR): - pointDuration = dayjs.duration(diff).format(DurationFormat.MINS); + pointDuration = dayjs.duration(diff).format(DURATION_FORMATS.mins); break; } return pointDuration; }; +// Функция для инкрементации счетчика const incrementCounter = (START_FROM) => { let counterStart = START_FROM; return function() { @@ -45,26 +45,10 @@ const incrementCounter = (START_FROM) => { }; }; -const toCapitalize = (str) => `${str[0].toUpperCase()}${str.slice(1)}`; - -const isPointFuture = (point) => dayjs().isBefore(point.dateFrom); -const isPointPresent = (point) => dayjs().isAfter(point.dateFrom) && dayjs().isBefore(point.dateTo); -const isPointPast = (point) => dayjs().isAfter(point.dateTo); - -const filterByType = { - [FilterType.ANY]: (points) => [...points], - [FilterType.FUTURE]: (points) => points.filter((point) => isPointFuture(point)), - [FilterType.PRESENT]: (points) => points.filter((point) => isPointPresent(point)), - [FilterType.PAST]: (points) => points.filter((point) => isPointPast(point)) -}; - export { getRandomArrayElement, getRandomPositiveNumber, - getRandomDate, - formatDate, + humanizeDate, calculateDuration, - incrementCounter, - toCapitalize, - filterByType, + incrementCounter };