diff --git a/public/index.html b/public/index.html index 7e11ed2..9778b3a 100644 --- a/public/index.html +++ b/public/index.html @@ -6,9 +6,8 @@ Big Trip - - + @@ -18,13 +17,16 @@
+
+ + +
+
- -
@@ -40,4 +42,4 @@ - + \ No newline at end of file diff --git a/src/api-service/destinations-api.js b/src/api-service/destinations-api.js index 130809b..50ec62e 100644 --- a/src/api-service/destinations-api.js +++ b/src/api-service/destinations-api.js @@ -1,20 +1,8 @@ import ApiService from '../framework/api-service.js'; -import {ApiServiceMethod} from '../const'; export default class DestinationsApiService extends ApiService{ get destinations() { return this._load({url: 'destinations'}) .then(ApiService.parseResponse); } - - async updateDestinations(destination) { - const response = await this._load({ - url: `destinations/${destination.id}`, - method: ApiServiceMethod.PUT, - body: JSON.stringify(destination), - headers: new Headers({'Content-Type': 'application/json'}), - }); - const parsedResponse = await ApiService.parseResponse(response); - return parsedResponse; - } } diff --git a/src/api-service/offers-api.js b/src/api-service/offers-api.js index cb217ec..e7b4418 100644 --- a/src/api-service/offers-api.js +++ b/src/api-service/offers-api.js @@ -1,20 +1,8 @@ import ApiService from '../framework/api-service.js'; -import {ApiServiceMethod} from '../const'; export default class OffersApiService extends ApiService{ get offers() { return this._load({url: 'offers'}) .then(ApiService.parseResponse); } - - async updateOffers(offer) { - const response = await this._load({ - url: `offers/${offer.type}`, - method: ApiServiceMethod.PUT, - body: JSON.stringify(offer), - headers: new Headers({'Content-Type': 'application/json'}), - }); - const parsedResponse = await ApiService.parseResponse(response); - return parsedResponse; - } } diff --git a/src/const.js b/src/const.js index 08a0f93..4915c92 100644 --- a/src/const.js +++ b/src/const.js @@ -1,47 +1,97 @@ +// export const TYPES = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant']; + +// export const OFFERS = [ +// 'Add luggage', +// 'Switch to comfort class', +// 'Add meal', +// 'Choose seats', +// 'Add a child safety seat' +// ]; + +// export const CITIES = ['Magnolia', 'Greed Island', 'Soul Society', 'Amestris', 'Death City', 'Karakura', 'Z-City', 'Alubarna', 'Aincrad']; + +// export const DESCRIPTIONS = [ +// 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', +// 'Maecenas dapibus sed enim in ultrices.', +// 'Praesent non ex turpis.', +// 'Nunc mollis sed tortor a faucibus.', +// 'Morbi ac convallis erat, vel volutpat nisl.', +// 'Phasellus a interdum lacus. Aenean consectetur magna vel diam fringilla, at commodo sem placerat.', +// 'Etiam a pellentesque massa.', +// 'Sed sed nisi sed augue convallis suscipit in sed felis.', +// 'Aliquam erat volutpat.' +// ]; + +// export const Duration = { +// MIN: 60, +// HOUR: 10, +// DAY: 3 +// }; + +// export const DateFormat = { +// LONG: 'YYYY-MM-DDTHH:mm', +// SHORT: 'MMM DD' +// }; + +// export const Price = { +// MIN: 0, +// MAX: 1000 +// }; + +// export const MILLISECONDS_IN_DAY = 86400000; + +// export const MILLISECONDS_IN_HOUR = 3600000; + +// export const Mode = { +// DEFAULT: 'DEFAULT', +// EDITING: 'EDITING' +// }; + +// export const UserAction = { +// UPDATE_POINT: 'UPDATE_POINT', +// ADD_POINT: 'ADD_POINT', +// DELETE_POINT: 'DELETE_POINT' +// }; + +// export const UpdateType = { +// PATCH: 'PATCH', +// MAJOR: 'MAJOR', +// INIT: 'INIT' +// }; + +// export const POINT_COUNT_PER_STEP = 7; + +// export const ApiServiceMethod = { +// GET: 'GET', +// PUT: 'PUT', +// POST: 'POST', +// DELETE: 'DELETE' +// }; + +// export const TimeLimit = { +// LOWER_LIMIT: 350, +// UPPER_LIMIT: 1000, +// }; export const TYPES = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant']; -export const OFFERS = [ - 'Add luggage', - 'Switch to comfort class', - 'Add meal', - 'Choose seats', - 'Add a child safety seat' -]; - -export const CITIES = ['Magnolia', 'Greed Island', 'Soul Society', 'Amestris', 'Death City', 'Karakura', 'Z-City', 'Alubarna', 'Aincrad']; - -export const DESCRIPTIONS = [ - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - 'Maecenas dapibus sed enim in ultrices.', - 'Praesent non ex turpis.', - 'Nunc mollis sed tortor a faucibus.', - 'Morbi ac convallis erat, vel volutpat nisl.', - 'Phasellus a interdum lacus. Aenean consectetur magna vel diam fringilla, at commodo sem placerat.', - 'Etiam a pellentesque massa.', - 'Sed sed nisi sed augue convallis suscipit in sed felis.', - 'Aliquam erat volutpat.' -]; - -export const Duration = { - MIN: 60, - HOUR: 10, - DAY: 3 +export const FilterType = { + EVERYTHING: 'everything', + FUTURE: 'future', + PAST: 'past' }; -export const DateFormat = { - LONG: 'YYYY-MM-DDTHH:mm', - SHORT: 'MMM DD' +export const SortType = { + DEFAULT: 'day', + TIME: 'time', + PRICE: 'price' }; -export const Price = { - MIN: 0, - MAX: 1000 +export const NoPointsTextType = { + [FilterType.EVERYTHING]: 'Click New Event to create your first point', + [FilterType.PAST]: 'There are no past events now', + [FilterType.FUTURE]: 'There are no future events now' }; -export const MILLISECONDS_IN_DAY = 86400000; - -export const MILLISECONDS_IN_HOUR = 3600000; - export const Mode = { DEFAULT: 'DEFAULT', EDITING: 'EDITING' @@ -55,12 +105,11 @@ export const UserAction = { export const UpdateType = { PATCH: 'PATCH', + MINOR: 'MINOR', MAJOR: 'MAJOR', INIT: 'INIT' }; -export const POINT_COUNT_PER_STEP = 7; - export const ApiServiceMethod = { GET: 'GET', PUT: 'PUT', diff --git a/src/main.js b/src/main.js index 0e94425..16def16 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,7 @@ import TripPresenter from './presenter/trip-presenter'; import PointModel from './model/point-model'; -import HeaderPresenter from './presenter/header-presenter'; -import DestinationsModel from './model/destinations-model'; -import OffersModel from './model/offers-model'; +import DestinationModel from './model/destinations-model'; +import OfferModel from './model/offers-model'; import FilterModel from './model/filter-model'; import FilterPresenter from './presenter/filter-presenter'; import NewPointButtonView from './view/new-point-button-view'; @@ -11,7 +10,7 @@ import PointsApiService from './api-service/points-api'; import DestinationsApiService from './api-service/destinations-api'; import OffersApiService from './api-service/offers-api'; -const AUTHORIZATION = 'Basic gq0Af3hqaR'; +const AUTHORIZATION = 'Basic RsgQy3KcnM'; const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip'; const tripContainer = document.querySelector('.trip-events'); @@ -19,10 +18,10 @@ const headerContainer = document.querySelector('.trip-main'); const pointsModel = new PointModel({ pointsApiService: new PointsApiService(END_POINT, AUTHORIZATION) }); -const destinationsModel = new DestinationsModel({ +const destinationsModel = new DestinationModel({ destinationsApiService: new DestinationsApiService(END_POINT, AUTHORIZATION) }); -const offersModel = new OffersModel({ +const offersModel = new OfferModel({ offersApiService: new OffersApiService(END_POINT, AUTHORIZATION) }); const filtersModel = new FilterModel(); @@ -32,7 +31,7 @@ const tripPresenter = new TripPresenter({ destinationsModel: destinationsModel, offersModel: offersModel, filtersModel: filtersModel, - onNewPointDestroy: handleNewPointClose + onNewPointDestroy: newPointCloseHandler }); const filterPresenter = new FilterPresenter({ filterContainer: headerContainer.querySelector('.trip-controls__filters'), @@ -41,20 +40,18 @@ const filterPresenter = new FilterPresenter({ }); const newPointButtonComponent = new NewPointButtonView({ - onClick: handleNewPointButtonClick + onClick: NewPointButtonClickHandler }); -function handleNewPointClose() { +function newPointCloseHandler() { newPointButtonComponent.element.disabled = false; } -function handleNewPointButtonClick() { +function NewPointButtonClickHandler() { tripPresenter.createPoint(); newPointButtonComponent.element.disabled = true; } -const headerPresenter = new HeaderPresenter(headerContainer, pointsModel.points, destinationsModel.destinations); -headerPresenter.init(); filterPresenter.init(); tripPresenter.init(); offersModel.init().finally(() => { diff --git a/src/model/destinations-model.js b/src/model/destinations-model.js index ad17345..559c05a 100644 --- a/src/model/destinations-model.js +++ b/src/model/destinations-model.js @@ -1,7 +1,7 @@ -import {UpdateType} from '../const'; import Observable from '../framework/observable'; +import {UpdateType} from '../const'; -export default class DestinationsModel extends Observable{ +export default class DestinationModel extends Observable{ #destinationsApiService = null; #destinations = []; constructor({destinationsApiService}) { diff --git a/src/model/filter-model.js b/src/model/filter-model.js index eb60986..be57132 100644 --- a/src/model/filter-model.js +++ b/src/model/filter-model.js @@ -1,8 +1,9 @@ import Observable from '../framework/observable.js'; -import {FILTERTYPE} from '../utils/filter'; +import {FilterType} from '../const'; + export default class FilterModel extends Observable{ - #filter = FILTERTYPE.EVERYTHING; + #filter = FilterType.EVERYTHING; get filter() { return this.#filter; diff --git a/src/model/offers-model.js b/src/model/offers-model.js index 0f36789..334e4b9 100644 --- a/src/model/offers-model.js +++ b/src/model/offers-model.js @@ -1,7 +1,7 @@ -import {UpdateType} from '../const'; import Observable from '../framework/observable'; +import {UpdateType} from '../const'; -export default class OffersModel extends Observable{ +export default class OfferModel extends Observable{ #offersApiService = null; #offers = []; constructor({offersApiService}) { diff --git a/src/model/point-model.js b/src/model/point-model.js index 0b3da9e..1d46757 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -1,5 +1,5 @@ -import {UpdateType} from '../const'; import Observable from '../framework/observable'; +import {UpdateType} from '../const'; export default class PointModel extends Observable{ #pointsApiService = null; diff --git a/src/presenter/filter-presenter.js b/src/presenter/filter-presenter.js index 6595204..155c9d0 100644 --- a/src/presenter/filter-presenter.js +++ b/src/presenter/filter-presenter.js @@ -1,15 +1,12 @@ - import {render, replace, remove} from '../framework/render.js'; import FilterView from '../view/filter-view.js'; import {filterByType} from '../utils/filter.js'; -import {FILTERTYPE} from '../utils/filter.js'; -import {UpdateType} from '../const'; +import {FilterType, UpdateType} from '../const'; export default class FilterPresenter { #filterContainer = null; #filterModel = null; #pointsModel = null; - #filterComponent = null; constructor({filterContainer, filterModel, pointsModel}) { @@ -21,47 +18,47 @@ export default class FilterPresenter { this.#filterModel.addObserver(this.#handleModelEvent); } + init() { + const filters = this.filters; + const previousFilterComponent = this.#filterComponent; + + this.#filterComponent = new FilterView({ + filters, + currentFilterType: this.#filterModel.filter, + onFilterTypeChange: this.#handleFilterTypeChange + }); + + if (previousFilterComponent === null) { + render(this.#filterComponent, this.#filterContainer); + return; + } + + replace(this.#filterComponent, previousFilterComponent); + remove(previousFilterComponent); + } + get filters() { const points = this.#pointsModel.points; return [ { - type: FILTERTYPE.EVERYTHING, + type: FilterType.EVERYTHING, name: 'EVERYTHING', - count: filterByType[FILTERTYPE.EVERYTHING](points).length, + count: filterByType[FilterType.EVERYTHING](points).length, }, { - type: FILTERTYPE.PAST, + type: FilterType.PAST, name: 'PAST', - count: filterByType[FILTERTYPE.PAST](points).length, + count: filterByType[FilterType.PAST](points).length, }, { - type: FILTERTYPE.FUTURE, + type: FilterType.FUTURE, name: 'FUTURE', - count: filterByType[FILTERTYPE.FUTURE](points).length, + count: filterByType[FilterType.FUTURE](points).length, } ]; } - init() { - const filters = this.filters; - const prevFilterComponent = this.#filterComponent; - - this.#filterComponent = new FilterView({ - filters, - currentFilterType: this.#filterModel.filter, - onFilterTypeChange: this.#handleFilterTypeChange - }); - - if (prevFilterComponent === null) { - render(this.#filterComponent, this.#filterContainer); - return; - } - - replace(this.#filterComponent, prevFilterComponent); - remove(prevFilterComponent); - } - #handleModelEvent = () => { this.init(); }; diff --git a/src/presenter/header-presenter.js b/src/presenter/header-presenter.js deleted file mode 100644 index bb35297..0000000 --- a/src/presenter/header-presenter.js +++ /dev/null @@ -1,26 +0,0 @@ -import {render, RenderPosition} from '../framework/render'; -import MenuView from '../view/menu-view'; -import TripInfoView from '../view/trip-info-view'; - -export default class Header{ - #headerContainer = null; - #menuComponent = null; - #points = null; - #destinations = null; - - - constructor(headerContainer, points, destinations){ - this.#headerContainer = headerContainer; - this.#points = points; - this.#destinations = destinations; - this.#menuComponent = new MenuView(); - } - - init(){ - if (this.#points.length !== 0) { - render(new TripInfoView(this.#points, this.#destinations), this.#headerContainer, RenderPosition.AFTERBEGIN); - } - render(this.#menuComponent, this.#headerContainer.querySelector('.trip-controls__navigation')); - } -} - diff --git a/src/presenter/new-point-presenter.js b/src/presenter/new-point-presenter.js index d0d1d9a..38a8ffe 100644 --- a/src/presenter/new-point-presenter.js +++ b/src/presenter/new-point-presenter.js @@ -58,7 +58,6 @@ export default class NewPointPresenter { this.#pointEditComponent.shake(resetFormState); } - destroy() { if (this.#pointEditComponent === null) { return; @@ -78,7 +77,6 @@ export default class NewPointPresenter { UpdateType.MINOR, point ); - this.destroy(); }; #handleDeleteClick = () => { diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index c4cefa0..e398ec6 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -1,7 +1,7 @@ import PointView from '../view/point-view'; import EditingPointView from '../view/edit-point-view'; import {remove, render, replace} from '../framework/render'; -import {UpdateType, UserAction, Mode} from '../const'; +import {Mode, UpdateType, UserAction} from '../const'; export default class PointPresenter{ #pointListContainer = null; @@ -11,16 +11,14 @@ export default class PointPresenter{ #editPointComponent = null; #point = null; #mode = Mode.DEFAULT; - #pointsModel = null; #destinationsModel = null; #offersModel = null; #destinations = null; #offers = null; - constructor({pointListContainer, pointsModel, destinationsModel, offersModel, onFavoriteChange, onModeChange}) { + constructor({pointListContainer, destinationsModel, offersModel, onFavoriteChange, onModeChange}) { this.#pointListContainer = pointListContainer; this.#handleFavoriteChange = onFavoriteChange; this.#handleModeChange = onModeChange; - this.#pointsModel = pointsModel; this.#destinationsModel = destinationsModel; this.#offersModel = offersModel; } @@ -30,8 +28,8 @@ export default class PointPresenter{ this.#destinations = [...this.#destinationsModel.destinations]; this.#offers = [...this.#offersModel.offers]; - const prevPointComponent = this.#pointComponent; - const prevEditPointComponent = this.#editPointComponent; + const previousPointComponent = this.#pointComponent; + const previousEditPointComponent = this.#editPointComponent; this.#pointComponent = new PointView({ point: this.#point, @@ -48,36 +46,24 @@ export default class PointPresenter{ offers: this.#offers }); - if (prevPointComponent === null || prevEditPointComponent === null){ + if (previousPointComponent === null || previousEditPointComponent === null){ render(this.#pointComponent, this.#pointListContainer); return; } if (this.#mode === Mode.DEFAULT){ - replace(this.#pointComponent, prevPointComponent); + replace(this.#pointComponent, previousPointComponent); } if (this.#mode === Mode.EDITING){ - replace(this.#pointComponent, prevEditPointComponent); + replace(this.#pointComponent, previousEditPointComponent); this.#mode = Mode.DEFAULT; } - remove(prevPointComponent); - remove(prevEditPointComponent); + remove(previousPointComponent); + remove(previousEditPointComponent); }; - destroy() { - remove(this.#pointComponent); - remove(this.#editPointComponent); - } - - resetView() { - if (this.#mode !== Mode.DEFAULT) { - this.#editPointComponent.reset(this.#point); - this.#replaceEditPointToPoint(); - } - } - setSaving() { if (this.#mode === Mode.EDITING) { this.#editPointComponent.updateElement({ @@ -105,32 +91,45 @@ export default class PointPresenter{ this.#editPointComponent.updateElement({ isDisabled: false, isSaving: false, - isDeleting: false, + isDeleting: false }); }; this.#editPointComponent.shake(resetFormState); } - #onEscKeyDown = (event) => { - if(event.key === 'Escape' || event.key === 'Esc'){ - event.preventDefault(); + destroy() { + remove(this.#pointComponent); + remove(this.#editPointComponent); + } + + resetView() { + if (this.#mode !== Mode.DEFAULT) { this.#editPointComponent.reset(this.#point); + this.#replaceEditPointToPoint(); } - }; + } #replacePointToEditPoint = () => { replace(this.#editPointComponent, this.#pointComponent); - document.addEventListener('keydown', this.#onEscKeyDown); + document.addEventListener('keydown', this.#escKeyDownHandler); this.#handleModeChange(); this.#mode = Mode.EDITING; }; #replaceEditPointToPoint = () => { replace(this.#pointComponent, this.#editPointComponent); - document.removeEventListener('keydown', this.#onEscKeyDown); + document.removeEventListener('keydown', this.#escKeyDownHandler); this.#mode = Mode.DEFAULT; }; + #escKeyDownHandler = (event) => { + if(event.key === 'Escape' || event.key === 'Esc'){ + event.preventDefault(); + this.#editPointComponent.reset(this.#point); + this.#replaceEditPointToPoint(); + } + }; + #handleFavoriteClick = () => { this.#handleFavoriteChange( UserAction.UPDATE_POINT, @@ -147,15 +146,14 @@ export default class PointPresenter{ UserAction.UPDATE_POINT, UpdateType.MINOR, update); - this.#editPointComponent.reset(this.#point); - this.#replaceEditPointToPoint(); + this.#editPointComponent.reset(update); }; #handleDeleteClick = (point) => { this.#handleFavoriteChange( UserAction.DELETE_POINT, UpdateType.MINOR, - point, + point ); }; } diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index e47bf85..e02f986 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -1,30 +1,35 @@ - import {remove, render, RenderPosition} from '../framework/render'; -import TripList from '../view/event-list-view'; +import TripListView from '../view/event-list-view'; import Sorting from '../view/sort-view'; import NoPointView from '../view/no-point-view'; import PointPresenter from './point-presenter'; -import {sortPointsByType, SortType} from '../utils/common'; -import {filterByType, FILTERTYPE} from '../utils/filter'; -import {TimeLimit, UpdateType, UserAction} from '../const'; +import {sortPointsByType} from '../utils/common'; +import {filterByType} from '../utils/filter'; +import {FilterType, SortType, TimeLimit, UpdateType, UserAction} from '../const'; import NewPointPresenter from './new-point-presenter'; import LoadingView from '../view/loading-view'; import UiBlocker from '../framework/ui-blocker/ui-blocker'; +import TripInfoView from '../view/trip-info-view'; +import MenuView from '../view/menu-view'; -class TripPresenter{ +class TripPresenter { #container = null; #pointsModel = null; #destinationsModel = null; #offersModel = null; #filtersModel = null; - #component = new TripList(); - #loadingComponent = new LoadingView(); + #component = new TripListView(); #sortComponent = null; + #loadingComponent = new LoadingView(); + #tripInfoComponent = null; + #menuComponent = new MenuView(); #noPoint = null; #pointPresenter = new Map(); #newPointPresenter = null; #currentSortType = SortType.DEFAULT; - #filterType = FILTERTYPE.EVERYTHING; + #filterType = FilterType.EVERYTHING; + #headerContainer = document.querySelector('.trip-main'); + #menuContainer = this.#headerContainer.querySelector('.trip-controls__navigation'); #isLoading = true; #uiBlocker = new UiBlocker({ lowerLimit: TimeLimit.LOWER_LIMIT, @@ -49,6 +54,10 @@ class TripPresenter{ this.#filtersModel.addObserver(this.#handleModelEvent); } + init() { + this.#renderBoard(); + } + get points() { this.#filterType = this.#filtersModel.filter; const points = this.#pointsModel.points; @@ -65,13 +74,9 @@ class TripPresenter{ return this.#offersModel.offers; } - init() { - this.#renderBoard(); - } - createPoint() { this.#currentSortType = SortType.DEFAULT; - this.#filtersModel.setFilter(UpdateType.MAJOR, FILTERTYPE.EVERYTHING); + this.#filtersModel.setFilter(UpdateType.MAJOR, FilterType.EVERYTHING); this.#newPointPresenter.init(); } @@ -87,15 +92,15 @@ class TripPresenter{ this.#pointPresenter.get(update.id).setSaving(); try { await this.#pointsModel.updatePoint(updateType, update); - }catch (error){ + } catch (error) { this.#pointPresenter.get(update.id).setAborting(); } break; case UserAction.ADD_POINT: this.#newPointPresenter.setSaving(); - try{ + try { await this.#pointsModel.addPoint(updateType, update); - }catch (error){ + } catch (error) { this.#newPointPresenter.setAborting(); } break; @@ -103,7 +108,7 @@ class TripPresenter{ this.#pointPresenter.get(update.id).setDeleting(); try { await this.#pointsModel.deletePoint(updateType, update); - }catch (error){ + } catch (error) { this.#pointPresenter.get(update.id).setAborting(); } break; @@ -133,7 +138,7 @@ class TripPresenter{ }; #handleSortTypeChange = (sortType) => { - if(sortType === this.#currentSortType) { + if (sortType === this.#currentSortType) { return; } this.#currentSortType = sortType; @@ -149,29 +154,11 @@ class TripPresenter{ render(this.#sortComponent, this.#container, RenderPosition.AFTERBEGIN); } - #clearBoard({resetSortType = false} = {}) { - this.#newPointPresenter.destroy(); - this.#pointPresenter.forEach((presenter) => presenter.destroy()); - this.#pointPresenter.clear(); - - remove(this.#sortComponent); - remove(this.#loadingComponent); - - if (this.#noPoint) { - remove(this.#noPoint); - } - if (resetSortType) { - this.#currentSortType = SortType.DEFAULT; - } - } - - #renderPoint(point) { const pointPresenter = new PointPresenter({ pointListContainer: this.#component.element, onFavoriteChange: this.#handleViewAction, onModeChange: this.#handleModeChange, - pointsModel: this.#pointsModel, destinationsModel: this.#destinationsModel, offersModel: this.#offersModel }); @@ -183,7 +170,7 @@ class TripPresenter{ points.forEach((point) => this.#renderPoint(point)); } - #renderLoading(){ + #renderLoading() { render(this.#loadingComponent, this.#container, RenderPosition.AFTERBEGIN); } @@ -194,21 +181,55 @@ class TripPresenter{ render(this.#noPoint, this.#container, RenderPosition.AFTERBEGIN); } + #renderTripInfo() { + const points = this.points; + this.#tripInfoComponent = new TripInfoView({ + points: points, + destinations: [...this.#destinationsModel.destinations], + offers: [...this.#offersModel.offers] + }); + render(this.#tripInfoComponent, this.#headerContainer, RenderPosition.AFTERBEGIN); + } + + #renderMenu() { + render(this.#menuComponent, this.#menuContainer); + } + #renderBoard() { const points = this.points; const pointsCount = points.length; - if(pointsCount === 0 && !this.#isLoading) { + if (pointsCount === 0 && !this.#isLoading) { this.#renderNoPoints(); return; } - if(this.#isLoading) { + if (this.#isLoading) { this.#renderLoading(); return; } + if (this.#filterType === FilterType.EVERYTHING) { + this.#renderTripInfo(); + } + this.#renderMenu(); this.#renderSort(); render(this.#component, this.#container); this.#renderPoints(points); } -} + #clearBoard({resetSortType = false} = {}) { + this.#newPointPresenter.destroy(); + this.#pointPresenter.forEach((presenter) => presenter.destroy()); + this.#pointPresenter.clear(); + + remove(this.#tripInfoComponent); + remove(this.#sortComponent); + remove(this.#loadingComponent); + + if (this.#noPoint) { + remove(this.#noPoint); + } + if (resetSortType) { + this.#currentSortType = SortType.DEFAULT; + } + } +} export default TripPresenter; diff --git a/src/utils/common.js b/src/utils/common.js index 5fb5972..4955e56 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -1,25 +1,9 @@ - import {sortPointDay, sortPointTime, sortPointPrice} from './point'; import dayjs from 'dayjs'; - -export const getRandomInteger = (a = 0, b = 1) => { - const lower = Math.ceil(Math.min(a, b)); - const upper = Math.floor(Math.max(a, b)); - return Math.floor(lower + Math.random() * (upper - lower + 1)); -}; - -export const getRandomIntegerFromRange = (start, end) => Math.ceil(Math.random() * (end - start + 1)) + start - 1; - -export const getRandomItem = (items) => items[getRandomInteger(0, items.length - 1)]; +import {SortType} from '../const'; export const upperFirst = (str) => str[0].toUpperCase() + str.slice(1); -export const SortType = { - DEFAULT: 'day', - TIME: 'time', - PRICE: 'price' -}; - export const sortPointsByType = { [SortType.DEFAULT]: (points) => points.sort(sortPointDay), [SortType.TIME]: (points) => points.sort(sortPointTime), @@ -29,11 +13,11 @@ export const sortPointsByType = { export const getStartPoint = (points) => { let startPoint = points[0]; for(let i = 1; i < points.length; i++) { - const currPointDate = points[i].startDate; + const currentPointDate = points[i].startDate; const endPointDate = startPoint.startDate; - if(dayjs(currPointDate).diff(dayjs(endPointDate), 'M') < 0 - || dayjs(currPointDate).diff(dayjs(endPointDate), 'M') === 0 - && dayjs(currPointDate).diff(dayjs(endPointDate), 'D') < 0) { + if(dayjs(currentPointDate).diff(dayjs(endPointDate), 'M') < 0 + || dayjs(currentPointDate).diff(dayjs(endPointDate), 'M') === 0 + && dayjs(currentPointDate).diff(dayjs(endPointDate), 'D') < 0) { startPoint = points[i]; } } @@ -43,11 +27,11 @@ export const getStartPoint = (points) => { export const getEndPoint = (points) => { let endPoint = points[0]; for(let i = 1; i < points.length; i++) { - const currPointDate = points[i].endDate; + const currentPointDate = points[i].endDate; const endPointDate = endPoint.endDate; - if(dayjs(currPointDate).diff(dayjs(endPointDate), 'M') > 0 - || dayjs(currPointDate).diff(dayjs(endPointDate), 'M') === 0 - && dayjs(currPointDate).diff(dayjs(endPointDate), 'D') > 0) { + if(dayjs(currentPointDate).diff(dayjs(endPointDate), 'M') > 0 + || dayjs(currentPointDate).diff(dayjs(endPointDate), 'M') === 0 + && dayjs(currentPointDate).diff(dayjs(endPointDate), 'D') > 0) { endPoint = points[i]; } } diff --git a/src/utils/filter.js b/src/utils/filter.js index 7fbfe71..cc83fc5 100644 --- a/src/utils/filter.js +++ b/src/utils/filter.js @@ -1,17 +1,12 @@ import dayjs from 'dayjs'; - -export const FILTERTYPE = { - EVERYTHING: 'everything', - FUTURE: 'future', - PAST: 'past', -}; +import {FilterType} from '../const'; const filterByPast = (date, param) => dayjs().isAfter(dayjs(date), param); const filterByFuture = (date, param) => dayjs().isBefore(dayjs(date), param) || dayjs().isSame(dayjs(date), param); export const filterByType = { - [FILTERTYPE.EVERYTHING]: (points) => points, - [FILTERTYPE.FUTURE]: (points) => points.filter((point) => filterByFuture(point.startDate, 'D') || filterByFuture(point.endDate, 'D')), - [FILTERTYPE.PAST]: (points) => points.filter((point) => filterByPast(point.endDate, 'D') || filterByPast(point.startDate, 'D')) + [FilterType.EVERYTHING]: (points) => points, + [FilterType.FUTURE]: (points) => points.filter((point) => filterByFuture(point.startDate, 'D') || filterByFuture(point.endDate, 'D')), + [FilterType.PAST]: (points) => points.filter((point) => filterByPast(point.endDate, 'D') || filterByPast(point.startDate, 'D')) }; diff --git a/src/utils/point.js b/src/utils/point.js index 015ec0a..3391c9d 100644 --- a/src/utils/point.js +++ b/src/utils/point.js @@ -1,54 +1,15 @@ import dayjs from 'dayjs'; -import { getRandomIntegerFromRange } from './common.js'; -import { Duration, DateFormat, MILLISECONDS_IN_DAY, MILLISECONDS_IN_HOUR } from '../const.js'; export const humanizePointDate = (date, form) => dayjs(date).format(form); -const createDuration = (startDate, endDate, param) => dayjs(endDate).diff(startDate, param); +const createDuration = (startDate, endDate, param) => dayjs(humanizePointDate(endDate, 'YYYY-MM-DDTHH:mm')).diff(humanizePointDate(startDate, 'YYYY-MM-DDTHH:mm'), param); const formattingDate = (diffDate) => diffDate < 10 ? `0${diffDate}` : `${diffDate}`; -export const humanizeTaskDueDate = (dueDate) => dueDate ? dayjs(dueDate).format(DateFormat.LONG) : ''; - -export const getDate = (add) => { - let date = dayjs().subtract(getRandomIntegerFromRange(0, Duration.DAY), 'day').toDate(); - - const mins = getRandomIntegerFromRange(0, Duration.MIN); - const hours = getRandomIntegerFromRange(0, Duration.HOUR); - const days = getRandomIntegerFromRange(0, Duration.DAY); - - if (add) { - date = dayjs(date) - .add(mins, 'minute') - .add(hours, 'hour') - .add(days, 'days') - .toDate(); - } - - return date; -}; - -export const formatToShortDate = (time) => time ? dayjs(time).format(DateFormat.SHORT) : ''; - -export const formatToShortTime = (time) => time ? dayjs(time).format('HH:mm') : ''; - -export const getDuration = (dateFrom, dateTo) => { - const timeDifference = dayjs(dateTo).diff(dayjs(dateFrom)); - - if (timeDifference >= MILLISECONDS_IN_DAY) { - return dayjs.duration(timeDifference).format('DD[D] HH[H] mm[M]'); - } else if (timeDifference >= MILLISECONDS_IN_HOUR) { - return dayjs.duration(timeDifference).format('HH[H] mm[M]'); - } else if (timeDifference < MILLISECONDS_IN_HOUR) { - return dayjs.duration(timeDifference).format('mm[M]'); - } -}; - - export const calculateDuration = (startDate, endDate) => { const differenceDays = formattingDate(createDuration(startDate, endDate, 'day')); const differenceHours = formattingDate(createDuration(startDate, endDate, 'hour') - differenceDays * 24); - const differenceMinutes = formattingDate(createDuration(startDate, endDate, 'minute') - differenceDays * 24 * 60 - differenceHours * 60 + 1); + const differenceMinutes = formattingDate(createDuration(startDate, endDate, 'minute') - differenceDays * 24 * 60 - differenceHours * 60); if (startDate === null || endDate === null){ return null; } @@ -71,4 +32,3 @@ export const sortPointDay = (pointA, pointB) => { export const sortPointPrice = (pointA, pointB) => pointA.price - pointB.price; - diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index c3e2cb2..9f17184 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -59,20 +59,20 @@ const createTypesTemplates = (currentType, isDisabled) => { return typesTemplates; }; -const createPhotosTemplates = (destPhotos) => { +const createPhotosTemplates = (destinationPhotos) => { let photosTemplates = ''; - if (destPhotos !== ''){ - photosTemplates = destPhotos.map((photo) => (`${photo.description}`)).join(''); + if (destinationPhotos !== ''){ + photosTemplates = destinationPhotos.map((photo) => (`${photo.description}`)).join(''); } return photosTemplates; }; -export const editingPoint = (point, destinations, arrayOffersIds, isNewPoint) => { +export const editingPointView = (point, destinations, offersIds, isNewPoint) => { const {type, destination, startDate, endDate, price, offers, isSaving, isDeleting, isDisabled} = point; const dateFrom = startDate !== null ? humanizePointDate(startDate, 'DD/MM/YY HH:mm') : ''; const dateTo = endDate !== null ? humanizePointDate(endDate, 'DD/MM/YY HH:mm') : ''; - const allTypeOffers = arrayOffersIds.find((offer) => offer.type === type); - const destinationInf = destinations.find((dest) => dest.id === destination); + const allTypeOffers = offersIds.find((offer) => offer.type === type); + const destinationData = destinations.find((dest) => dest.id === destination); return(`
  • @@ -92,11 +92,11 @@ export const editingPoint = (point, destinations, arrayOffersIds, isNewPoint) =>
    -