From 742f0c18ec8d6f9bae9c5fd0ffbdab03040e1ed9 Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Mon, 20 May 2024 02:08:47 +0500 Subject: [PATCH 1/3] =?UTF-8?q?5.9.=20=D0=91=D0=BE=D0=BB=D1=8C=D1=88=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D1=8B=20(?= =?UTF-8?q?=D1=87=D0=B0=D1=81=D1=82=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/const.js | 22 ++++++++++++++- src/main.js | 5 +--- src/presenter/point-presenter.js | 6 ++-- src/presenter/trip-presenter.js | 47 +++++++++++++++++++++++++++++++- src/template/sort-template.js | 8 ++++-- src/utils/sort-points.js | 19 +++++++++++++ src/view/sort-points-view.js | 17 ++++++++++++ 7 files changed, 111 insertions(+), 13 deletions(-) create mode 100644 src/utils/sort-points.js diff --git a/src/const.js b/src/const.js index 4c407df..f4ec90b 100644 --- a/src/const.js +++ b/src/const.js @@ -64,4 +64,24 @@ const FilterType = [{ PAST: 'past' }]; -export {POINT_EMPTY, POINT_TYPE, DESTINATION, DESCRIPTION, OFFERS, DESTINATION_COUNT, OFFERS_COUNT, POINTS_COUNT, FilterType}; +const Mode = { + DEFAULT: 'DEFAULT', + EDITING: 'EDITING', +}; + +const SortType = [{ + DAY: 'day', + TIME: 'time', + PRICE: 'price' +}] + +export {POINT_EMPTY, + POINT_TYPE, DESTINATION, + DESCRIPTION, + OFFERS, + DESTINATION_COUNT, + OFFERS_COUNT, + POINTS_COUNT, + FilterType, + Mode, + SortType}; diff --git a/src/main.js b/src/main.js index bbab2ab..c8ff8fd 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,5 @@ import FilterPointsView from './view/filter-points-view.js'; import TripInfoView from './view/trip-info-view.js'; -import SortPointsView from './view/sort-points-view.js'; import TripPresenter from './presenter/trip-presenter.js'; import { render, RenderPosition } from './framework/render.js'; @@ -14,7 +13,6 @@ import { generateFilters } from './mock/filter.js'; const filterHeaderElement = document.querySelector('.trip-controls'); const siteFilterElement = filterHeaderElement.querySelector('.trip-controls__filters'); const siteMainElement = document.querySelector('.page-main'); -const siteSortElement = siteMainElement.querySelector('.trip-events'); const tripInfoElement = document.querySelector('.trip-main'); const pointsModel = new PointsModel(); @@ -22,7 +20,7 @@ const destinationModel = new DestinationModel(); const offersModel = new OffersModel(); const tripPresenter = new TripPresenter({ - listContainer: siteSortElement, + listContainer: siteMainElement, pointsModel, destinationsModel: destinationModel, offersModel @@ -30,7 +28,6 @@ const tripPresenter = new TripPresenter({ const filters = generateFilters(pointsModel.points); -render(new SortPointsView(), siteSortElement); render(new FilterPointsView({ filters }), siteFilterElement); render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN); diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index d0761ba..8d90326 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -1,11 +1,9 @@ import { remove, render, replace } from '../framework/render'; + import ListPointsView from '../view/list-points-view'; import EditPointView from '../view/editing-form-view'; -const Mode = { - DEFAULT: 'DEFAULT', - EDITING: 'EDITING', -}; +import { Mode } from '../const'; export default class PointPresenter { #pointListContainer = null; diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index e28bdfe..827bf69 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -1,11 +1,18 @@ import ListView from '../view/list-view.js'; import EventListEmptyView from '../view/event-list-empty-view.js'; -import { render } from '../framework/render.js'; +import SortPointsView from '../view/sort-points-view.js'; + +import { render, RenderPosition } from '../framework/render.js'; + import PointPresenter from './point-presenter.js'; + import { updateItem } from '../utils/common.js'; +import { sortPointsByDay, sortPointsByTime, sortPointsByPrice } from '../utils/sort-points.js'; +import { SortType } from '../const.js'; export default class TripPresenter { #listComponent = new ListView(); + #sortComponent = null; #listContainer; #pointsModel; @@ -13,6 +20,8 @@ export default class TripPresenter { #offersModel; #tripPoint = []; + #currentSortType = SortType.DAY; + #sourcedTripPoints = []; #pointPresenters = new Map(); @@ -26,6 +35,8 @@ export default class TripPresenter { } init() { + this.#sourcedTripPoints = [...this.#pointsModel.points]; + this.#renderBoard(); } @@ -56,6 +67,14 @@ export default class TripPresenter { render(this.#listComponent, this.#listContainer); }; + #renderSort() { + this.#sortComponent = new SortPointsView({ + onSortTypeChange: this.#handleSortTypeChange + }); + + render(this.#sortComponent, this.#listComponent.element, RenderPosition.AFTERBEGIN); + } + #renderBoard = () => { /* console.log('Rendering board'); */ if (this.#tripPoint.length === 0) { @@ -63,6 +82,7 @@ export default class TripPresenter { return; } + this.#renderSort(); this.#renderPointContainer(); this.#renderPoints(); }; @@ -80,4 +100,29 @@ export default class TripPresenter { this.#tripPoint = updateItem(this.#tripPoint, updatePoint); this.#pointPresenters.get(updatePoint.id).init(updatePoint); }; + + #sortPoints(sortType) { + switch(sortType) { + case SortType.TIME: + this.#tripPoint.sort(sortPointsByTime); + break; + case SortType.PRICE: + this.#tripPoint.sort(sortPointsByPrice); + break; + default: + this.#tripPoint = [...this.#sourcedTripPoints]; + } + + this.#currentSortType = sortType; + } + + #handleSortTypeChange = (sortType) => { + if (this.#currentSortType === sortType) { + return; + } + + this.#sortPoints(sortType); + this.#clearPointsList(); + this.#renderPoints(); + }; } diff --git a/src/template/sort-template.js b/src/template/sort-template.js index 83da8b3..0ae2840 100644 --- a/src/template/sort-template.js +++ b/src/template/sort-template.js @@ -1,8 +1,10 @@ +import { SortType } from '../const'; + function createSortTemplate() { return `
- +
@@ -12,12 +14,12 @@ function createSortTemplate() {
- +
- +
diff --git a/src/utils/sort-points.js b/src/utils/sort-points.js new file mode 100644 index 0000000..ddcb855 --- /dev/null +++ b/src/utils/sort-points.js @@ -0,0 +1,19 @@ +function sortPointsByDay(pointA, pointB) { + return dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom)); +} + +function sortPointsByTime(pointA, pointB) { + const durationA = getDurationNF(pointA.dateFrom, pointA.dateTo); + const durationB = getDurationNF(pointB.dateFrom, pointB.dateTo); + + return (durationA.asMilliseconds() > durationB.asMilliseconds()) ? -1 + : ((durationA.asMilliseconds() < durationB.asMilliseconds()) ? 1 : 0); +} + +function sortPointsByPrice(pointA, pointB){ + const diff = pointA.basePrice - pointB.basePrice; + + return (diff > 0) ? -1 : ((diff < 0) ? 1 : 0); +} + +export {sortPointsByPrice, sortPointsByTime, sortPointsByDay}; diff --git a/src/view/sort-points-view.js b/src/view/sort-points-view.js index d8a12bd..47f308f 100644 --- a/src/view/sort-points-view.js +++ b/src/view/sort-points-view.js @@ -2,7 +2,24 @@ import AbstractView from '../framework/view/abstract-view.js'; import { createSortTemplate } from '../template/sort-template.js'; export default class SortPointsView extends AbstractView { + #handleSortTypeChange = null; + + constructor({onSortTypeChange}) { + super(); + this.#handleSortTypeChange = onSortTypeChange; + + this.element.addEventListener('click', this.#sortTypeChangeHandler); + } + get template() { return createSortTemplate(); } + + #sortTypeChangeHandler = (evt) => { + if (evt.target.tagName !== 'LABEL') { + return; + } + + this.#handleSortTypeChange(evt.target.dataset.sortType); + }; } From 8991297f5e4d2e8068c1925f0d9f20122757f35b Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Mon, 20 May 2024 02:12:38 +0500 Subject: [PATCH 2/3] =?UTF-8?q?5.9.=20=D0=91=D0=BE=D0=BB=D1=8C=D1=88=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D1=8B=20(?= =?UTF-8?q?=D1=87=D0=B0=D1=81=D1=82=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/const.js | 18 +++++++++--------- src/presenter/trip-presenter.js | 2 +- src/utils/sort-points.js | 2 ++ 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/const.js b/src/const.js index f4ec90b..8243f39 100644 --- a/src/const.js +++ b/src/const.js @@ -76,12 +76,12 @@ const SortType = [{ }] export {POINT_EMPTY, - POINT_TYPE, DESTINATION, - DESCRIPTION, - OFFERS, - DESTINATION_COUNT, - OFFERS_COUNT, - POINTS_COUNT, - FilterType, - Mode, - SortType}; + POINT_TYPE, DESTINATION, + DESCRIPTION, + OFFERS, + DESTINATION_COUNT, + OFFERS_COUNT, + POINTS_COUNT, + FilterType, + Mode, + SortType}; diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index 827bf69..f83ac9d 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -7,7 +7,7 @@ import { render, RenderPosition } from '../framework/render.js'; import PointPresenter from './point-presenter.js'; import { updateItem } from '../utils/common.js'; -import { sortPointsByDay, sortPointsByTime, sortPointsByPrice } from '../utils/sort-points.js'; +import { sortPointsByTime, sortPointsByPrice } from '../utils/sort-points.js'; import { SortType } from '../const.js'; export default class TripPresenter { diff --git a/src/utils/sort-points.js b/src/utils/sort-points.js index ddcb855..b0d163a 100644 --- a/src/utils/sort-points.js +++ b/src/utils/sort-points.js @@ -1,3 +1,5 @@ +import dayjs from "dayjs"; + function sortPointsByDay(pointA, pointB) { return dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom)); } From f2211d0b77a7930e172d50c6ade9a6195221d97d Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Mon, 20 May 2024 02:21:05 +0500 Subject: [PATCH 3/3] =?UTF-8?q?5.9.=20=D0=91=D0=BE=D0=BB=D1=8C=D1=88=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D1=8B=20(?= =?UTF-8?q?=D1=87=D0=B0=D1=81=D1=82=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/const.js | 2 +- src/utils/sort-points.js | 25 ++++++++++++++++++------- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/const.js b/src/const.js index 8243f39..05f4b9e 100644 --- a/src/const.js +++ b/src/const.js @@ -73,7 +73,7 @@ const SortType = [{ DAY: 'day', TIME: 'time', PRICE: 'price' -}] +}]; export {POINT_EMPTY, POINT_TYPE, DESTINATION, diff --git a/src/utils/sort-points.js b/src/utils/sort-points.js index b0d163a..5eb6bad 100644 --- a/src/utils/sort-points.js +++ b/src/utils/sort-points.js @@ -1,21 +1,32 @@ -import dayjs from "dayjs"; +import dayjs from 'dayjs'; function sortPointsByDay(pointA, pointB) { - return dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom)); + return dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom)); } function sortPointsByTime(pointA, pointB) { - const durationA = getDurationNF(pointA.dateFrom, pointA.dateTo); - const durationB = getDurationNF(pointB.dateFrom, pointB.dateTo); + const durationA = dayjs.duration(dayjs(pointA.dateTo).diff(dayjs(pointA.dateFrom), 'minute')); + const durationB = dayjs.duration(dayjs(pointB.dateTo).diff(dayjs(pointB.dateFrom), 'minute')); - return (durationA.asMilliseconds() > durationB.asMilliseconds()) ? -1 - : ((durationA.asMilliseconds() < durationB.asMilliseconds()) ? 1 : 0); + if (durationA.asMilliseconds() > durationB.asMilliseconds()) { + return -1; + } else if (durationA.asMilliseconds() < durationB.asMilliseconds()) { + return 1; + } else { + return 0; + } } function sortPointsByPrice(pointA, pointB){ const diff = pointA.basePrice - pointB.basePrice; - return (diff > 0) ? -1 : ((diff < 0) ? 1 : 0); + if (diff > 0) { + return -1; + } else if (diff < 0) { + return 1; + } else { + return 0; + } } export {sortPointsByPrice, sortPointsByTime, sortPointsByDay};