diff --git a/src/const.js b/src/const.js index 4c407df..05f4b9e 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..f83ac9d 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 { 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 `