diff --git a/public/index.html b/public/index.html index fcc5570..a29324b 100644 --- a/public/index.html +++ b/public/index.html @@ -21,8 +21,6 @@ - - diff --git a/src/main.js b/src/main.js index 0a981f9..d280cd0 100644 --- a/src/main.js +++ b/src/main.js @@ -9,7 +9,7 @@ import FilterModel from './model/filter-model.js'; import PointApiService from '../src/service/point-api-service.js'; -const AUTHORIZATION = 'Basic 09SVykjhUhHbMdik'; +const AUTHORIZATION = 'Basic 09SVykjhUhHbMdig'; const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip'; const bodyElement = document.querySelector('body'); diff --git a/src/model/point-model.js b/src/model/point-model.js index de40f6b..00afb16 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -1,5 +1,5 @@ import Observable from '../framework/observable.js'; -import { UpdateType } from '../const.js'; +import {UpdateType} from '../const.js'; import {updateItem, adaptToClient, adaptToServer} from '../utils.js'; export default class PointModel extends Observable { diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js index 47c6057..f6eed42 100644 --- a/src/presenter/board-presenter.js +++ b/src/presenter/board-presenter.js @@ -1,11 +1,12 @@ -import {render, remove} from '../framework/render.js'; +import {render, remove, RenderPosition} from '../framework/render.js'; import EventListView from '../view/event-list-view.js'; import SortView from '../view/sort-view.js'; import PointPresenter from './point-presenter.js'; -// import TripInfoView from '../view/trip-info-view.js'; +import FilterView from '../view/filter-view.js'; +import TripInfoView from '../view/trip-info-view.js'; import {sortPointDay, sortPointPrice, sortPointTime} from '../utils.js'; -import {SortType, UpdateType, UserAction, TimeLimit} from '../const.js'; -import {FilterType} from '../model/filter-model.js'; +import {FilterType, SortType, UpdateType, UserAction, TimeLimit} from '../const.js'; +// import {FilterType} from '../model/filter-model.js'; // import NewPointButtonPresenter from '../presenter/new-point-button-presenter.js'; import NewPointPresenter from '../presenter/new-point-presenter.js'; import MessageView from '../view/message-view.js'; @@ -22,16 +23,19 @@ export default class BoardPresenter { #tripEventsElement = null; #tripInfoElement = null; + #tripFliterElement = null; #pointPresenterArray = new Map(); #newPointPresenter = null; #newPointButtonPresenter = null; #currentSortType = SortType.DAY; + #currentFilteType = FilterType.EVERYTHING; #sourcedTripPoints = []; #isCreating = false; #sortComponent = null; + #tripInfoComponent = null; #filterComponent = null; #loadingComponent = new LoadingView(); #pointsListComponent = new EventListView(); @@ -41,7 +45,7 @@ export default class BoardPresenter { upperLimit: TimeLimit.UPPER_LIMIT }); - #isLoading = true; + #isLoading = false; constructor({tripContainer, destinationsModel, offersModel, pointsModel, filterModel, @@ -67,21 +71,18 @@ export default class BoardPresenter { } get points() { - // const filterType = this.#filterModel.get(); - // const filteredPoints = filter[filterType](this.#pointsModel.get()); - - // return sort[this.#currentSortType](filteredPoints); - return this.#pointsModel.points; - // return filteredPoints; + const points = this.#pointsModel.points; + // const filteredPoints = filter[this.#currentFilteType](points); + // return filteredPoints.sort(sortPointDay); + return points; } init(){ this.#tripEventsElement = this.#tripContainer.querySelector('.trip-events'); this.#tripInfoElement = this.#tripContainer.querySelector('.trip-main'); - // this.#sourcedTripPoints = [...this.#pointsModel.get()]; - // this.points.sort(sortPointDay); - this.#sourcedTripPoints.sort(sortPointDay); - + this.#tripFliterElement = this.#tripContainer.querySelector('.trip-controls__filters'); + this.#renderFilters(); + this.#renderLoading(); // this.#renderBoard(); } @@ -140,10 +141,31 @@ export default class BoardPresenter { render(this.#loadingComponent, this.#tripEventsElement); }; + #renderFilters = () => { + this.#filterComponent = new FilterView({ + filters: FilterType, + onFilterTypeChange: this.#filterTypeChangeHandler + }); + + render(this.#filterComponent, this.#tripFliterElement); + }; + #renderPointsList = () => { render(this.#pointsListComponent, this.#tripEventsElement); }; + #renderTripInfo = () => { + const points = this.points; + this.#tripInfoComponent = new TripInfoView({ + points: points, + destinations: [...this.#destinationsModel.get()], + offers: [...this.#offersModel.get()] + }); + + if (this.#tripInfoComponent.element !== null) + {render(this.#tripInfoComponent, this.#tripInfoElement, RenderPosition.AFTERBEGIN);} + }; + #renderBoard = () => { if (this.points.length === 0 && !this.#isLoading) { this.#renderMessage(); @@ -152,8 +174,10 @@ export default class BoardPresenter { if (this.#isLoading) { this.#renderLoading(); + return; } + this.#renderTripInfo(); this.#renderSort(); this.#renderPointsList(); this.#renderPoints(); @@ -163,6 +187,7 @@ export default class BoardPresenter { this.#clearPoints(); remove(this.#messageComponent); remove(this.#sortComponent); + remove(this.#tripInfoComponent); this.#sortComponent = null; if (resetSortType) { @@ -226,6 +251,16 @@ export default class BoardPresenter { } }; + #filterTypeChangeHandler = (filterType) => { + if (this.#currentFilteType === filterType) { + return; + } + + // this.#filterPoints(filterType); + this.#clearPoints(); + this.#renderPoints(); + }; + #sortTypeChangeHandler = (sortType) => { if (this.#currentSortType === sortType) { return; @@ -240,6 +275,11 @@ export default class BoardPresenter { this.#newPointPresenter.destroy(); }; + // #filterPoints = (filterType) => { + // filter[filterType](this.#pointsModel.points); + // console.log(filter[filterType](this.#pointsModel.points)); + // }; + #sortPoints = (sortType) => { switch (sortType) { case SortType.PRICE: diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index a5ac25a..525c661 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -2,7 +2,6 @@ import {render, replace, remove} from '../framework/render.js'; import EditPointView from '../view/edit-point-view.js'; import EventPointView from '../view/event-point-view.js'; import {MODE, UpdateType, UserAction} from '../const.js'; -import {isBigDifference} from '../utils.js'; export default class PointPresenter { #point = null; @@ -168,11 +167,9 @@ export default class PointPresenter { }; #formSubmitHandler = (updatedPoint) => { - const isMinor = isBigDifference(updatedPoint, this.#point); - this.#handleDataChange( UserAction.UPDATE_POINT, - isMinor ? UpdateType.MINOR : UpdateType.PATCH, + UpdateType.MINOR, updatedPoint ); diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 64b09af..f9f73f3 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -7,7 +7,7 @@ import 'flatpickr/dist/flatpickr.min.css'; const getPicrtureItem = (picture) => `${picture.description}`; -const getDestinationItem = (city, isDisabled) => ``; +const getDestinationItem = (city, isDisabled) => ``; const getEventTypeItem = (typeItem, type, isDisabled) => `
getPicrtureItem(picture)).join(''); - const typeItemsTemplate = ROUTE_TYPE.map((typeItem) => getEventTypeItem(typeItem, state.type, isDisabled)).join(''); const cityItemsTemplate = pointDestinations.get() .map((point) => point.name) diff --git a/src/view/filter-view.js b/src/view/filter-view.js index c71737d..ebf0d18 100644 --- a/src/view/filter-view.js +++ b/src/view/filter-view.js @@ -1,23 +1,15 @@ import AbstractView from '../framework/view/abstract-view.js'; -const createFilterItemTemplate = (filter, isChecked) => { - const {type} = filter; - - return (`
- - +const createFilterItems = (filter, flag) => (`
+ +
`); -}; - -const createFilterTemplate = (filterItems) => { - const filterItemsTemplate = filterItems.map((filter, index) => createFilterItemTemplate(filter, index === 0)).join(''); - return (`
- ${filterItemsTemplate} - -
`); -}; +const createFilterTemplate = (filters) => (`
+ ${filters.map((filter, index) => createFilterItems(filter, index)).join('')} + +
`); export default class FilterView extends AbstractView{ #filters = null; @@ -25,7 +17,7 @@ export default class FilterView extends AbstractView{ constructor({filters, onFilterTypeChange}) { super(); - this.#filters = filters; + this.#filters = Object.values(filters); this.#handleFilterTypeChange = onFilterTypeChange; this.element.querySelectorAll('.trip-filters__filter') @@ -37,7 +29,7 @@ export default class FilterView extends AbstractView{ } #filterClickHandler = (evt) => { - evt.preventDefault(); - this.#handleFilterTypeChange (evt.target.innerHTML); + // evt.preventDefault(); + this.#handleFilterTypeChange(evt.target.innerHTML); }; } diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js index e3b00f5..9974235 100644 --- a/src/view/trip-info-view.js +++ b/src/view/trip-info-view.js @@ -1,48 +1,66 @@ -import {POINT_EMPTY} from '../mock/const.js'; +import {POINT_EMPTY} from '../const.js'; import {formatToShortDate, formatToDay} from '../utils.js'; import AbstractView from '../framework/view/abstract-view.js'; import dayjs from 'dayjs'; +const getOffersCoast = (offersIds = [], offers = []) => offersIds.reduce( + (result, id) => result + (offers.find((offer) => offer.id === id)?.price ?? 0), + 0 +); + +const getTripCost = (points = [], offers = []) => points.reduce( + (result, point) => result + point.basePrice + getOffersCoast(point.offers, offers.find((offer) => point.type === offer.type)?.offers), + 0 +); + const findDestinationForPoint = (point, pointDestination) => pointDestination.find((destination) => destination.id === point.destination); -const createDestinationElement = (pointDestination) => - pointDestination.length <= 3 - ? pointDestination.map((destination) => (`${destination} - `)).join('').slice(0, -2) - : `${pointDestination[0]} - ... - ${pointDestination[pointDestination.length - 1]}`; +const createDestinationElement = (destinations) => + destinations.length <= 3 + ? destinations.map((destination) => (`${destination} - `)).join('').slice(0, -2) + : `${destinations[0]} - ... - ${destinations[destinations.length - 1]}`; -const createTripInfoTemplate = ({points, pointDestination}) => (`
+const createTripInfoTemplate = ({points, destination, isEmpty, cost}) => + (`${!isEmpty + ? `
-

${createDestinationElement(pointDestination)}

+

${createDestinationElement(destination)}

${formatToShortDate(points[0].dateFrom)} —  ${dayjs(points[points.length - 1].dateTo).month() === dayjs(points[0].dateFrom).month() - ? formatToDay(points[points.length - 1].dateTo) - : formatToShortDate(points[points.length - 1].dateTo)}

+ ? formatToDay(points[points.length - 1].dateTo) + : formatToShortDate(points[points.length - 1].dateTo)}

Total: €  - ${points.reduce((x, point) => (x + point.basePrice), 0)} + ${cost}

-
`); +
` + : '' + }`); export default class TripInfoView extends AbstractView { - #points = null; - #pointDestination = []; + #points = 0; + #destination = []; + #offers = []; - constructor({points = POINT_EMPTY, pointDestination}) { + constructor({points = POINT_EMPTY, destinations, offers}) { super(); this.#points = points; - this.#pointDestination = points - .map((point) => findDestinationForPoint(point, pointDestination)) + this.#offers = offers; + this.#destination = points + .map((point) => findDestinationForPoint(point, destinations)) .map((destination) => destination.name); } get template() { return createTripInfoTemplate({ points: this.#points, - pointDestination: this.#pointDestination, + destination: this.#destination, + isEmpty: this.#points.length === 0, + cost: getTripCost(this.#points, this.#offers) }); } }