From af1949f1de9f2812da0e44cd2cf49525df73568e Mon Sep 17 00:00:00 2001 From: Sergei Pozdeev Date: Thu, 26 Sep 2024 14:44:19 -0400 Subject: [PATCH] 5.13. Big changes (part 2) --- src/constants.js | 23 ++++++++++ src/presenter/main-presenter.js | 76 +++++++++++++++++++++++++++------ src/util/utils.js | 11 +++++ src/view/event-editor-view.js | 5 +-- src/view/events-item-view.js | 10 +---- src/view/sort-view.js | 40 +++++++++++++---- 6 files changed, 131 insertions(+), 34 deletions(-) diff --git a/src/constants.js b/src/constants.js index 17c8163..ba8bf7e 100644 --- a/src/constants.js +++ b/src/constants.js @@ -96,3 +96,26 @@ export const Mode = { DEFAULT: 'DEFAULT', EDITING: 'EDITING', }; + +export const SortType = { + DAY: { + name: 'day', + disabled: false + }, + EVENT: { + name: 'event', + disabled: true + }, + TIME: { + name: 'time', + disabled: false + }, + PRICE: { + name: 'price', + disabled: false + }, + OFFERS: { + name: 'offers', + disabled: true + } +}; diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index ca52105..38daf38 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -6,15 +6,15 @@ import EventAddButtonView from '../view/event-add-button-view.js'; import EventsMessageView from '../view/events-message-view.js'; import PointPresenter from './point-presenter.js'; import { render, RenderPosition } from '../framework/render.js'; -import { EVENTS_MESSAGE } from '../constants.js'; +import {EVENTS_MESSAGE, SortType} from '../constants.js'; import { generateFilter } from '../mocks/filters.js'; -import { updateItem } from '../util/utils.js'; +import { sortByDate, sortByDuration, sortByValue, updateItem } from '../util/utils.js'; export default class MainPresenter { #tripInfoComponent = new TripInfoView(); #addButtonComponent = new EventAddButtonView(); - #sortComponent = new SortView(); #listComponent = new EventsListView(); + #sortComponent = null; #pointModel = null; #pointPresenters = new Map(); @@ -22,6 +22,9 @@ export default class MainPresenter { #offers = []; #destinations = []; + #defaultSortType = SortType.DAY; + #currentSortType = this.#defaultSortType; + constructor({infoContainer, contentContainer, filtersContainer, pointModel}) { this.infoContainer = infoContainer; this.contentContainer = contentContainer; @@ -30,33 +33,78 @@ export default class MainPresenter { } init() { - this.#points = this.#pointModel.points; - this.#destinations = this.#pointModel.destinations; - this.#offers = this.#pointModel.offers; + this.#points = [...this.#pointModel.points]; + this.#destinations = [...this.#pointModel.destinations]; + this.#offers = [...this.#pointModel.offers]; const filters = generateFilter(this.#points); render(this.#tripInfoComponent, this.infoContainer, RenderPosition.AFTERBEGIN); render(new FiltersView({filters}), this.filtersContainer); render(this.#addButtonComponent, this.infoContainer); - this.#renderWithoutContent(this.#points); - this.#renderContent(this.#points, this.#offers, this.#destinations); + this.#renderWithoutContent(); + this.#renderContent(); } - #renderWithoutContent = (points) => { - if (points.length === 0) { + #renderWithoutContent = () => { + if (this.#points.length === 0) { render(new EventsMessageView(EVENTS_MESSAGE.EMPTY), this.contentContainer); } }; - #renderContent = (points, offers, destinations) => { + #renderContent = () => { + this.#renderSortTypes(); + this.#renderContainer(); + this.#sortPoints(this.#defaultSortType); + this.#renderPoints(); + // render(this.#sortComponent, this.contentContainer); + // render(this.#listComponent, this.contentContainer); + // this.#renderPoints(points, offers, destinations); + }; + + #renderSortTypes = () => { + const currentSortType = this.#currentSortType; + const onSortTypeChange = this.#handleSortTypeChange; + + this.#sortComponent = new SortView({ currentSortType, onSortTypeChange }); + render(this.#sortComponent, this.contentContainer); + }; + + #handleSortTypeChange = (sortType) => { + this.#clearPoints(); + this.#sortPoints(sortType); + this.#renderPoints(); + }; + + #sortPoints = (sortType) => { + switch (sortType) { + case 'day': + this.#points.sort(sortByDate('dateFrom')); + break; + case 'time': + this.#points.sort(sortByDuration('dateFrom', 'dateTo')); + break; + case 'price': + this.#points.sort(sortByValue('basePrice')); + break; + default: this.#points.sort(sortByDate('dateFrom')); + } + + this.#currentSortType = sortType; + }; + + #clearPoints = () => { + this.#pointPresenters.forEach((presenter) => presenter.destroy()); + this.#pointPresenters.clear(); + }; + + #renderContainer = () => { render(this.#listComponent, this.contentContainer); - this.#renderPoints(points, offers, destinations); }; - #renderPoints = (points, offers, destinations) => { - points.forEach((point) => this.#renderPoint(point, offers, destinations)); + #renderPoints = () => { + this.#points.forEach((point) => this.#renderPoint(point, this.#offers, this.#destinations)); }; #renderPoint = (point, offers, destinations) => { diff --git a/src/util/utils.js b/src/util/utils.js index a415627..ffa5e95 100644 --- a/src/util/utils.js +++ b/src/util/utils.js @@ -33,3 +33,14 @@ export const isDatePast = (end) => dayjs().isAfter(end); export const getCapitalized = (word) => `${word[0].toUpperCase()}${word.slice(1)}`; export const updateItem = (items, update) => items.map((item) => item.id === update.id ? update : item); + +export const sortByDate = (start) => (a, b) => dayjs(a[start]).diff(dayjs(b[start])); + +export const sortByDuration = (start, end) => (a, b) => { + const firstDuration = calculateDuration(a[start], a[end]); + const secondDuration = calculateDuration(b[start], b[end]); + + return secondDuration.asMilliseconds() - firstDuration.asMilliseconds(); +}; + +export const sortByValue = (value) => (a, b) => b[value] - a[value]; diff --git a/src/view/event-editor-view.js b/src/view/event-editor-view.js index b146500..c269789 100644 --- a/src/view/event-editor-view.js +++ b/src/view/event-editor-view.js @@ -165,8 +165,5 @@ export default class EventEditorView extends AbstractView { this.#handleFormSubmit(this.#point); }; - #editClickHandler = (event) => { - event.preventDefault(); - this.#handleEditClick(); - }; + #editClickHandler = () => this.#handleEditClick(); } diff --git a/src/view/events-item-view.js b/src/view/events-item-view.js index 2fd7094..4c83fc7 100644 --- a/src/view/events-item-view.js +++ b/src/view/events-item-view.js @@ -89,13 +89,7 @@ export default class EventsItemView extends AbstractView { return createEventItemTemplate(this.#point, this.#offers, this.#destinations); } - #editClickHandler = (event) => { - event.preventDefault(); - this.#handleEditClick(); - }; + #editClickHandler = () => this.#handleEditClick(); - #favoriteClickHandler = (event) => { - event.preventDefault(); - this.#handleFavoriteClick(); - }; + #favoriteClickHandler = () => this.#handleFavoriteClick(); } diff --git a/src/view/sort-view.js b/src/view/sort-view.js index d2deffb..21ef0f8 100644 --- a/src/view/sort-view.js +++ b/src/view/sort-view.js @@ -1,19 +1,43 @@ import AbstractView from '../framework/view/abstract-view.js'; -import { TRIP_SORT_ITEMS } from '../constants.js'; +import { SortType } from '../constants.js'; +import { getCapitalized } from '../util/utils.js'; -const createTripSortItemTemplate = (item) => ` -
- - +const createTripSortItemTemplate = (name, isDisabled, currentSortType) => ` +
+ +
`; -const createSortTemplate = () => ` +const createSortTemplate = (currentSortType) => `
- ${TRIP_SORT_ITEMS.map((item) => createTripSortItemTemplate(item)).join('')} + ${Object.values(SortType).map((type) => createTripSortItemTemplate(type.name, type.disabled, currentSortType)).join('')}
`; export default class SortView extends AbstractView { + #currentSortType = null; + #handleSortTypeChange = null; + + constructor({ currentSortType, onSortTypeChange }) { + super(); + this.#currentSortType = currentSortType; + this.#handleSortTypeChange = onSortTypeChange; + + this.element.addEventListener('change', this.#sortTypeChangeHandler); + } + get template() { - return createSortTemplate(); + return createSortTemplate(this.#currentSortType); } + + #sortTypeChangeHandler = (event) => this.#handleSortTypeChange(event.target.dataset.sortType); }