From 5fc7d8fd63c1255b432e890c8eccb71629595081 Mon Sep 17 00:00:00 2001 From: andrey Date: Sun, 9 Jun 2024 19:49:42 +0500 Subject: [PATCH 1/3] module7-task1 --- public/index.html | 2 +- src/const.js | 7 +++ src/main.js | 21 ++++++- src/presenter/board-presenter.js | 23 +++++++- src/presenter/new-point-presenter.js | 65 +++++++++++++++++++++ src/template/form-edit-markup.js | 87 +++++++++++++++------------- src/view/form-edit-view.js | 29 ++++++---- 7 files changed, 177 insertions(+), 57 deletions(-) create mode 100644 src/presenter/new-point-presenter.js diff --git a/public/index.html b/public/index.html index 44c26b4..f6b8616 100644 --- a/public/index.html +++ b/public/index.html @@ -22,7 +22,7 @@ - + diff --git a/src/const.js b/src/const.js index e646e5a..4605eb8 100644 --- a/src/const.js +++ b/src/const.js @@ -47,6 +47,13 @@ export const FilterOptions = { [FilterTypes.FUTURE]: (points) => points.filter((point) => isPointFuture(point)) }; +export const EmptyPointsMessage = { + [FilterTypes.EVERYTHING]: 'Click New Event to create your first point', + [FilterTypes.FUTURE]: 'There are no future events now', + [FilterTypes.PRESENT]: 'There are no present events now', + [FilterTypes.PAST]: 'There are no past events now' +}; + const UserAction = { UPDATE_POINT:'UPDATE_POINT', DELETE_POINT: 'DELETE_POINT', diff --git a/src/main.js b/src/main.js index 882dbe6..f3676be 100644 --- a/src/main.js +++ b/src/main.js @@ -8,6 +8,7 @@ import OffersModel from './model/offers-model.js'; import PointsModel from './model/points-model.js'; import FilterPresenter from './presenter/filter-presenter.js'; import FiltersModel from './model/filter-model.js'; +import NewPointButtonView from './view/new-point-view.js'; const bodyElement = document.querySelector('body'); const headerElement = bodyElement.querySelector('.page-header'); @@ -29,7 +30,8 @@ const boardPresenter = new BoardPresenter({ destinationsModel, offersModel, pointsModel, - filtersModel + filtersModel, + onNewPointDestroy: newPointFormCloseHandler }); const filterPresenter = new FilterPresenter({ @@ -38,8 +40,25 @@ const filterPresenter = new FilterPresenter({ pointModel: pointsModel }); +const newPointComponent = new NewPointButtonView({ + onClick: newPointClickHandler +}); + +function newPointFormCloseHandler() { + newPointComponent.element.disabled = false; +} + +function newPointClickHandler() { + boardPresenter.createPoint(); + newPointComponent.element.disabled = true; +} + +render(newPointComponent, tripInfoElement, RenderPosition.BEFOREEND); + + render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN); + filterPresenter.init(); boardPresenter.init(); diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js index 08b267c..80e7012 100644 --- a/src/presenter/board-presenter.js +++ b/src/presenter/board-presenter.js @@ -8,6 +8,7 @@ import { SortType } from '../const.js'; import { sortByDay, sortByPrice, sortByTime } from '../utils.js'; import { UpdateType, UserAction } from '../const.js'; import { FilterOptions } from '../const.js'; +import NewPointPresenter from './new-point-presenter.js'; export default class BoardPresenter{ #sortComponent = null; @@ -18,24 +19,33 @@ export default class BoardPresenter{ #offersModel = null; #pointsModel = null; #filtersModel = null; + #newPointPresenter = null; #pointPresenters = new Map(); #currentSortType = SortType.DAY; + #filterType = FilterOptions.EVERYTHING; - constructor({container, destinationsModel, offersModel, pointsModel, filtersModel}){ + constructor({container, destinationsModel, offersModel, pointsModel, filtersModel, onNewPointDestroy}){ this.#container = container; this.#destinationModel = destinationsModel; this.#offersModel = offersModel; this.#pointsModel = pointsModel; this.#filtersModel = filtersModel; + this.#newPointPresenter = new NewPointPresenter({ + container: this.#eventListComponent, + destinationsModel: this.#destinationModel, + offersModel: this.#offersModel, + onDataChange: this.#userActionHandler, + onDestroy: onNewPointDestroy + }); this.#pointsModel.addObserver(this.#modelEventHandler); this.#filtersModel.addObserver(this.#modelEventHandler); } get points() { - const filterType = this.#filtersModel.filter; + this.#filterType = this.#filtersModel.filter; const points = this.#pointsModel.points; - const filteredPoints = FilterOptions[filterType](points); + const filteredPoints = FilterOptions[this.#filterType](points); const sortedPoints = [...filteredPoints]; switch (this.#currentSortType) { case SortType.DAY: @@ -51,6 +61,12 @@ export default class BoardPresenter{ return sortedPoints; } + createPoint() { + this.#currentSortType = SortType.DAY; + this.#filtersModel.setFilter(UpdateType.MAJOR, FilterOptions.EVERYTHING); + this.#newPointPresenter.init(); + } + init(){ this.#renderBoard(); } @@ -86,6 +102,7 @@ export default class BoardPresenter{ }; #clearPoints = ({resetSortType = false} = {}) => { + this.#newPointPresenter.destroy(); this.#pointPresenters.forEach((presenter) => presenter.destroy()); this.#pointPresenters.clear(); diff --git a/src/presenter/new-point-presenter.js b/src/presenter/new-point-presenter.js new file mode 100644 index 0000000..4e80c58 --- /dev/null +++ b/src/presenter/new-point-presenter.js @@ -0,0 +1,65 @@ +import {remove, render } from '../framework/render'; +import { UpdateType, UserAction } from '../const'; +import FormEditView from '../view/form-edit-view'; +export default class NewPointPresenter { + #container = null; + #destinationsModel = null; + #offersModel = null; + #editFormComponent = null; + #handleDataChange = null; + #handleDestroy = null; + + constructor({ container, destinationsModel, offersModel, onDataChange, onDestroy }) { + this.#container = container; + this.#destinationsModel = destinationsModel; + this.#offersModel = offersModel; + this.#handleDataChange = onDataChange; + this.#handleDestroy = onDestroy; + } + + init() { + if (this.#editFormComponent !== null) { + return; + } + this.#editFormComponent = new FormEditView({ + pointDestination: this.#destinationsModel.getDestination(), + pointOffers: this.#offersModel.getOffers(), + isCreating: true, + onRollUpPointClick: this.#cancelClickHandler, + onFormSubmit: this.#formSubmitHandler, + onCancelFormClick: this.#cancelClickHandler + }); + render(this.#editFormComponent, this.#container.element); + document.addEventListener('keydown', this.#escKeyDownHandler); + } + + destroy() { + if (this.#editFormComponent === null) { + return; + } + remove(this.#editFormComponent); + this.#editFormComponent = null; + document.removeEventListener('keydown', this.#escKeyDownHandler); + this.#handleDestroy(); + } + + + #formSubmitHandler = (point) => { + this.#handleDataChange( + UserAction.ADD_POINT, + UpdateType.MINOR, + point + ); + }; + + #cancelClickHandler = () => { + this.destroy(); + }; + + #escKeyDownHandler = (evt) => { + if (evt.key === 'Escape' || evt.key === 'Esc') { + evt.preventDefault(); + this.destroy(); + } + }; +} diff --git a/src/template/form-edit-markup.js b/src/template/form-edit-markup.js index 3f695e3..33cee75 100644 --- a/src/template/form-edit-markup.js +++ b/src/template/form-edit-markup.js @@ -1,26 +1,23 @@ -import { TYPES, CITIES } from '../mock/consts.js'; +import { TYPES } from '../mock/consts.js'; import { formatStringToDateTime } from '../utils.js'; -function createPointTypesListElement(currentType) { +function createPointTypesListElement(currentType, id, isDisabled) { return TYPES.map((type) => `
- - + +
`).join(''); } -function createPointDestinationListElement() { - return ` - - ${CITIES.map((city) => ``).join('')} - `; +function createPointDestinationListElement(destinations) { + return ( `${destinations.map((destination) => ``).join('')} `); } -function createOffersTemplate(offers, selectedOffers) { +function createOffersTemplate(offers, selectedOffers, isDisabled) { const offerItems = offers.offers.map((offer) => { const offerName = offer.title.replace(' ', '').toLowerCase(); return (`
- of.id).includes(offer.id) ? 'checked' : ''}> + of.id).includes(offer.id) ? 'checked' : ''} ${isDisabled ? '' : 'disabled'}>