From 7f360d59c6f7ce979735bb13e861c0e328a217fe Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Fri, 4 Oct 2024 14:39:54 +0300 Subject: [PATCH 01/19] feat: add filters model and presenter --- src/const.js | 14 +++- src/main.js | 15 +++- src/model/filters-model.js | 18 +++++ src/model/point-model.js | 21 ++++- src/presenter/filters-presenter.js | 65 +++++++++++++++ src/presenter/main-presenter.js | 123 ++++++++++++++++++++--------- src/presenter/point-presenter.js | 9 ++- src/utils/filter-utils.js | 2 +- src/view/filters-view.js | 22 +++++- 9 files changed, 236 insertions(+), 53 deletions(-) create mode 100644 src/model/filters-model.js create mode 100644 src/presenter/filters-presenter.js diff --git a/src/const.js b/src/const.js index 6f1aade..700d867 100644 --- a/src/const.js +++ b/src/const.js @@ -19,4 +19,16 @@ const SortType = { OFFER: 'offer' }; -export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType }; +const UserAction = { + UPDATE_TASK: 'UPDATE_POINT', + ADD_TASK: 'ADD_POINT', + DELETE_TASK: 'DELETE_POINT', +}; + +const UpdateType = { + PATCH: 'PATCH', + MINOR: 'MINOR', + MAJOR: 'MAJOR', +}; + +export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType }; diff --git a/src/main.js b/src/main.js index 5bd0ee5..aa7490d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,21 +1,28 @@ -import NewFilters from './view/filters-view'; import NewTripInfo from './view/trip-info-view'; import { RenderPosition, render } from './framework/render'; import MainPresenter from './presenter/main-presenter'; import PointModel from './model/point-model'; -import { generateFilter } from './mock/filter-mock'; +import FiltersModel from './model/filters-model'; +import FiltersPresenter from './presenter/filters-presenter'; const mainContainer = document.querySelector('.trip-main'); const filtersContainer = document.querySelector('.trip-controls__filters'); const pointsContainer = document.querySelector('.trip-events'); const pointModel = new PointModel(); +const filtersModel = new FiltersModel(); + const mainPresenter = new MainPresenter({ pointsContainer: pointsContainer, pointModel, + filtersModel, }); -const filters = generateFilter(pointModel.points); + +const filtersPresenter = new FiltersPresenter({ + filtersContainer: filtersContainer, + pointModel, +}) render(new NewTripInfo(), mainContainer, RenderPosition.AFTERBEGIN); -render(new NewFilters({filters}), filtersContainer); +filtersPresenter.init(); mainPresenter.init(); diff --git a/src/model/filters-model.js b/src/model/filters-model.js new file mode 100644 index 0000000..2f46bdc --- /dev/null +++ b/src/model/filters-model.js @@ -0,0 +1,18 @@ +import { generateFilter } from "../mock/filter-mock"; +import PointModel from "./point-model"; +import Observable from "../framework/observable"; +import { FilterType } from "../const"; + +export default class FiltersModel extends Observable { + // #pointModel = new PointModel(); + // #filters = generateFilter(this.#pointModel.points); + #filter = FilterType.EVERYTHING; + + get filter() { + return this.#filter; + } + + set filter(filter) { + this.#filter = filter; + } +} diff --git a/src/model/point-model.js b/src/model/point-model.js index 0634b89..dab5b6d 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -1,8 +1,9 @@ import { getPoints } from '../mock/point-mock'; import { getDestinations } from '../mock/destinations-mock'; import { getOffers } from '../mock/offers-mock'; +import Observable from '../framework/observable'; -export default class PointModel { +export default class PointModel extends Observable { #points = getPoints(); #destinations = getDestinations(); #offers = getOffers(); @@ -11,6 +12,24 @@ export default class PointModel { return this.#points; } + set points(points) { + this.#points = points; + } + + updatePoint(updatedPoint) { + const pointIndex = this.#points.findIndex(point => point.id === updatedPoint.id); + this.#points = [...this.#points].splice(pointIndex, 1, updatedPoint); + } + + addPoint(updatedPoint) { + this.#points = [updatedPoint, ...this.#points]; + } + + deletePoint(updatedPoint) { + const pointIndex = this.#points.findIndex(point => point.id === updatedPoint.id); + this.#points = [...this.#points].splice(pointIndex, 1); + } + get destinations() { return this.#destinations; } diff --git a/src/presenter/filters-presenter.js b/src/presenter/filters-presenter.js new file mode 100644 index 0000000..2007935 --- /dev/null +++ b/src/presenter/filters-presenter.js @@ -0,0 +1,65 @@ +import { render } from "../framework/render"; +import FiltersView from "../view/filters-view"; +import FiltersModel from "../model/filters-model"; +import { FilterType } from "../const"; +import { filter } from "../utils/filter-utils"; + +export default class FiltersPresenter { + #filtersModel = new FiltersModel(); + #filtersComponent = null; + #filtersContainer = null; + #pointModel = null; + + #currentFilter = FilterType.EVERYTHING; + + constructor({ filtersContainer, pointModel }) { + this.#filtersContainer = filtersContainer; + this.#pointModel = pointModel; + } + + get filters() { + const points = this.#pointModel.points; + + const r = Object.entries(filter).map( + ([filterType, filterPoints]) => ({ + type: filterType, + count: filterPoints(points).length, + points: filterPoints(points) + }), + ); + console.log(r); + return r; + } + + init() { + const filters = this.filters; + const prevFiltersComponent = this.#filtersComponent; + + this.#filtersComponent = new FiltersView({ + filters, + onFiltersChange: this.#handleFiltersChange + }); + + if(prevFiltersComponent === null){ + render(this.#filtersComponent, this.#filtersContainer); + return; + } + + replace(this.#filtersComponent, prevFiltersComponent); + remove(prevFiltersComponent); + } + + #handleFiltersChange = (filterType) => { + if (this.#currentFilter === filterType) { + return; + } + + this.#currentFilter = filterType; + this.#filtersModel.filter = filterType; + + // this.#currentFilterType = this.#filtersModel.filter; + const points = this.#pointModel.points; + const filteredPoints = filter[this.#currentFilter](points); + console.log(filteredPoints) + } +} diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index 981070c..1dc4704 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -3,35 +3,62 @@ import SortingView from '../view/sorting-view'; import NoPointsView from '../view/no-points-view'; import { RenderPosition, render } from '../framework/render'; import PointPresenter from './point-presenter'; -import { updatePoint } from '../utils/common-utils'; -import { SortType } from '../const'; +import { SortType, UpdateType, UserAction } from '../const'; import { getWeightForPrice, getWeightForTime } from '../utils/point-utils'; +import { filter } from '../utils/filter-utils'; +import { FilterType } from '../const'; export default class MainPresenter { #pointsListComponent = new PointListView(); #pointsContainer = null; #pointModel = null; - #points = []; - #destinations = []; - #offers = []; #pointPresenters = new Map(); #noPoints = new NoPointsView(); + #filtersModel = null; #sorting = null; #currentSortType = SortType.DAY; - #initialPointsLayout = []; + #currentFilterType = FilterType.EVERYTHING; - constructor({ pointsContainer, pointModel }) { + constructor({ pointsContainer, pointModel, filtersModel }) { this.#pointsContainer = pointsContainer; this.#pointModel = pointModel; + this.#filtersModel = filtersModel; } - init() { - this.#points = [...this.#pointModel.points]; - this.#destinations = [...this.#pointModel.destinations]; - this.#offers = [...this.#pointModel.offers]; - this.#initialPointsLayout = [...this.#pointModel.points]; + get filter() { + return this.#filtersModel.filter; + } + + get points() { + this.#currentFilterType = this.filter; + const points = [...this.#pointModel.points]; + const filteredPoints = filter[this.#currentFilterType](points); + switch (this.#currentSortType) { + case SortType.TIME: + return filteredPoints.sort(getWeightForTime); + case SortType.PRICE: + return filteredPoints.sort(getWeightForPrice); + case SortType.EVENT: + break; + case SortType.OFFER: + break; + case SortType.DAY: + return filteredPoints; + } + return filteredPoints; + } + + get offers() { + return this.#pointModel.offers; + } + + get destinations() { + return this.#pointModel.destinations; + } + + init() { this.#renderSorting(this.#currentSortType); this.#renderMain(); } @@ -39,11 +66,11 @@ export default class MainPresenter { #renderMain() { render(this.#pointsListComponent, this.#pointsContainer); - if (this.#points.length === 0) { + if (this.points.length === 0) { this.#renderNoPoints(); } - this.#renderPointsList(); + this.#renderPointsList(this.points); } #renderSorting(sortType) { @@ -55,30 +82,12 @@ export default class MainPresenter { render(this.#sorting, this.#pointsContainer, RenderPosition.AFTERBEGIN); } - #sortPoints = (sortType) => { - switch (sortType) { - case SortType.TIME: - this.#points.sort(getWeightForTime); - break; - case SortType.PRICE: - this.#points.sort(getWeightForPrice); - break; - case SortType.EVENT: - break; - case SortType.OFFER: - break; - case SortType.DAY: - this.#points = [...this.#initialPointsLayout]; - } - this.#currentSortType = sortType; - }; - #handleSortingClick = (sortType) => { if (this.#currentSortType === sortType) { return; } - this.#sortPoints(sortType); + this.#currentSortType = sortType; this.#clearPointsList(); this.#renderPointsList(); this.#renderSorting(sortType); @@ -93,13 +102,45 @@ export default class MainPresenter { onEditPointView: this.#resetPointView }); - pointPresenter.init(point, this.#offers, this.#destinations); + pointPresenter.init(point, this.offers, this.destinations); this.#pointPresenters.set(point.id, pointPresenter); } #handlePointsChange = (updatedPoint) => { - this.#points = updatePoint(this.#points, updatedPoint); - this.#pointPresenters.get(updatedPoint.id).init(updatedPoint, this.#offers, this.#destinations); + this.#pointPresenters.get(updatedPoint.id).init(updatedPoint, this.offers, this.destinations); + } + + #handleViewAction = (actionType, updateType, update) => { + switch (actionType) { + case UserAction.UPDATE_TASK: + this.#pointModel.updateTask(updateType, update); + break; + case UserAction.ADD_TASK: + this.#pointModel.addTask(updateType, update); + break; + case UserAction.DELETE_TASK: + this.#pointModel.deleteTask(updateType, update); + break; + } + // Здесь будем вызывать обновление модели. + // actionType - действие пользователя, нужно чтобы понять, какой метод модели вызвать + // updateType - тип изменений, нужно чтобы понять, что после нужно обновить + // update - обновленные данные + }; + + #handleModelEvent = (updateType, point, offers, destinations) => { + switch (updateType) { + case UpdateType.PATCH: + this.#pointPresenters.get(point.id).init(point, offers, destinations); + case UpdateType.MINOR: + + case UpdateType.MAJOR: + this.#renderPointsList(points); + } + // В зависимости от типа изменений решаем, что делать: + // - обновить часть списка (например, когда поменялось описание) + // - обновить список (например, когда задача ушла в архив) + // - обновить всю доску (например, при переключении фильтра) }; #handleModeChange = () => { @@ -111,14 +152,20 @@ export default class MainPresenter { }; #renderPointsList() { - for (const point of this.#points) { + for (const point of this.points) { this.#renderPoint(point); } } - #clearPointsList() { + #clearPointsList(resetFilters = false, resetSorting = false) { this.#pointPresenters.forEach((presenter) => presenter.destroy()); this.#pointPresenters.clear(); + + // Если в момент нажатия на кнопку «New Event» был выбран фильтр или применена сортировка, + // то они сбрасываются на состояния «Everything» и по дате соответственно. + if (resetFilters === true) { + + } } #renderNoPoints() { diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index f8a6f70..26bedd0 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -11,11 +11,11 @@ export default class PointPresenter { #point = null; #destinations = null; #offers = null; - #pointsListComponent = null; #pointComponent = null; #editPointComponent = null; + #pointsListComponent = null; #handlePointsChange = null; #handleModeChange = null; #clearPoint = null; @@ -50,9 +50,9 @@ export default class PointPresenter { }); this.#editPointComponent = new EditPointView({ - point, - offers, - destinations, + point: this.#point, + offers: this.#offers, + destinations: this.#destinations, onEditClick: this.#handleFormEditClick, onFormSaveClick: this.#handleFormSaveClick, onFormDeleteClick: this.#handleFormDeleteClick, @@ -113,6 +113,7 @@ export default class PointPresenter { #handleFormDeleteClick = (point) => { this.#clearPoint(point); + this.#replaceFormToPoint(); document.removeEventListener('keydown', this.#escKeyDownHandler); }; diff --git a/src/utils/filter-utils.js b/src/utils/filter-utils.js index 3d58a1d..c007873 100644 --- a/src/utils/filter-utils.js +++ b/src/utils/filter-utils.js @@ -34,6 +34,6 @@ const filter = { [FilterType.FUTURE]: (points) => points.filter((point) => isPointFuture(point)), }; -export { filter }; +export { filter, isPointPast , isPointFuture, isPointPresent}; diff --git a/src/view/filters-view.js b/src/view/filters-view.js index bee3846..17effbb 100644 --- a/src/view/filters-view.js +++ b/src/view/filters-view.js @@ -8,9 +8,8 @@ const getFiltersItem = (type, count) => `
type="radio" name="trip-filter" value="${type}" - ${type === 'everything' ? 'checked' : ''} - ${count === 0 ? 'disabled' : 'checked'} > - + ${type === 'everything' ? 'checked' : ''}> +
`; function createFiltersTemplate(filters) { @@ -22,13 +21,28 @@ function createFiltersTemplate(filters) { export default class FiltersView extends AbstractView { #filters = []; + #handleFiltersChange = null; - constructor({ filters }) { + constructor({ filters, onFiltersChange }) { super(); this.#filters = filters; + this.#handleFiltersChange = onFiltersChange; + + this.element.addEventListener('click', this.#filtersChangeHandler); } get template() { return createFiltersTemplate(this.#filters); } + + #filtersChangeHandler = (evt) => { + if (evt.target.tagName !== 'LABEL') { + return; + } + + evt.preventDefault(); + console.log(evt.target.dataset.filterType); + + this.#handleFiltersChange(evt.target.dataset.filterType); + } } From 64c72f0f5bb7b03a1934d7faf3de79475932231c Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Fri, 4 Oct 2024 14:53:22 +0300 Subject: [PATCH 02/19] fix: add list empty text, delete not used code --- src/const.js | 9 ++++++++- src/presenter/filters-presenter.js | 8 +++----- src/presenter/main-presenter.js | 9 +++++---- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/const.js b/src/const.js index 700d867..a58232f 100644 --- a/src/const.js +++ b/src/const.js @@ -31,4 +31,11 @@ const UpdateType = { MAJOR: 'MAJOR', }; -export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType }; +const ListEmptyText = { + EVERYTHING: 'Click New Event to create your first point', + PAST: 'There are no past events now', + PRESENT: 'There are no present events now', + FUTURE: 'There are no future events now', +} + +export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType, ListEmptyText }; diff --git a/src/presenter/filters-presenter.js b/src/presenter/filters-presenter.js index 2007935..cf35c34 100644 --- a/src/presenter/filters-presenter.js +++ b/src/presenter/filters-presenter.js @@ -20,15 +20,13 @@ export default class FiltersPresenter { get filters() { const points = this.#pointModel.points; - const r = Object.entries(filter).map( + return Object.entries(filter).map( ([filterType, filterPoints]) => ({ type: filterType, count: filterPoints(points).length, - points: filterPoints(points) }), ); - console.log(r); - return r; + } init() { @@ -57,7 +55,7 @@ export default class FiltersPresenter { this.#currentFilter = filterType; this.#filtersModel.filter = filterType; - // this.#currentFilterType = this.#filtersModel.filter; + // проверка работает ли сортировка списка поинтов (для себя, потом удалю) const points = this.#pointModel.points; const filteredPoints = filter[this.#currentFilter](points); console.log(filteredPoints) diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index 1dc4704..c2fa41e 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -6,7 +6,6 @@ import PointPresenter from './point-presenter'; import { SortType, UpdateType, UserAction } from '../const'; import { getWeightForPrice, getWeightForTime } from '../utils/point-utils'; import { filter } from '../utils/filter-utils'; -import { FilterType } from '../const'; export default class MainPresenter { #pointsListComponent = new PointListView(); @@ -18,7 +17,7 @@ export default class MainPresenter { #sorting = null; #currentSortType = SortType.DAY; - #currentFilterType = FilterType.EVERYTHING; + #currentFilterType = null; constructor({ pointsContainer, pointModel, filtersModel }) { this.#pointsContainer = pointsContainer; @@ -133,9 +132,11 @@ export default class MainPresenter { case UpdateType.PATCH: this.#pointPresenters.get(point.id).init(point, offers, destinations); case UpdateType.MINOR: - + this.#clearPointsList(); + this.#renderPointsList(); case UpdateType.MAJOR: - this.#renderPointsList(points); + this.#clearPointsList(resetFilters = true, resetSorting = true); + this.#renderPointsList(); } // В зависимости от типа изменений решаем, что делать: // - обновить часть списка (например, когда поменялось описание) From 4ce5d5c1ab82ae64db9f32f3c735f3bf41fe10f4 Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Fri, 4 Oct 2024 14:56:00 +0300 Subject: [PATCH 03/19] fix: make changes after lint check --- src/const.js | 2 +- src/main.js | 2 +- src/model/filters-model.js | 8 ++------ src/model/point-model.js | 4 ++-- src/presenter/filters-presenter.js | 14 +++++++------- src/presenter/main-presenter.js | 6 ++++-- src/view/filters-view.js | 4 +--- 7 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/const.js b/src/const.js index a58232f..d84e63f 100644 --- a/src/const.js +++ b/src/const.js @@ -36,6 +36,6 @@ const ListEmptyText = { PAST: 'There are no past events now', PRESENT: 'There are no present events now', FUTURE: 'There are no future events now', -} +}; export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType, ListEmptyText }; diff --git a/src/main.js b/src/main.js index aa7490d..961d7e7 100644 --- a/src/main.js +++ b/src/main.js @@ -20,7 +20,7 @@ const mainPresenter = new MainPresenter({ const filtersPresenter = new FiltersPresenter({ filtersContainer: filtersContainer, pointModel, -}) +}); render(new NewTripInfo(), mainContainer, RenderPosition.AFTERBEGIN); diff --git a/src/model/filters-model.js b/src/model/filters-model.js index 2f46bdc..b25a875 100644 --- a/src/model/filters-model.js +++ b/src/model/filters-model.js @@ -1,11 +1,7 @@ -import { generateFilter } from "../mock/filter-mock"; -import PointModel from "./point-model"; -import Observable from "../framework/observable"; -import { FilterType } from "../const"; +import Observable from '../framework/observable'; +import { FilterType } from '../const'; export default class FiltersModel extends Observable { - // #pointModel = new PointModel(); - // #filters = generateFilter(this.#pointModel.points); #filter = FilterType.EVERYTHING; get filter() { diff --git a/src/model/point-model.js b/src/model/point-model.js index dab5b6d..afe9e91 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -17,7 +17,7 @@ export default class PointModel extends Observable { } updatePoint(updatedPoint) { - const pointIndex = this.#points.findIndex(point => point.id === updatedPoint.id); + const pointIndex = this.#points.findIndex((point) => point.id === updatedPoint.id); this.#points = [...this.#points].splice(pointIndex, 1, updatedPoint); } @@ -26,7 +26,7 @@ export default class PointModel extends Observable { } deletePoint(updatedPoint) { - const pointIndex = this.#points.findIndex(point => point.id === updatedPoint.id); + const pointIndex = this.#points.findIndex((point) => point.id === updatedPoint.id); this.#points = [...this.#points].splice(pointIndex, 1); } diff --git a/src/presenter/filters-presenter.js b/src/presenter/filters-presenter.js index cf35c34..fb1d157 100644 --- a/src/presenter/filters-presenter.js +++ b/src/presenter/filters-presenter.js @@ -1,8 +1,8 @@ -import { render } from "../framework/render"; -import FiltersView from "../view/filters-view"; -import FiltersModel from "../model/filters-model"; -import { FilterType } from "../const"; -import { filter } from "../utils/filter-utils"; +import { render, replace, remove } from '../framework/render'; +import FiltersView from '../view/filters-view'; +import FiltersModel from '../model/filters-model'; +import { FilterType } from '../const'; +import { filter } from '../utils/filter-utils'; export default class FiltersPresenter { #filtersModel = new FiltersModel(); @@ -58,6 +58,6 @@ export default class FiltersPresenter { // проверка работает ли сортировка списка поинтов (для себя, потом удалю) const points = this.#pointModel.points; const filteredPoints = filter[this.#currentFilter](points); - console.log(filteredPoints) - } + console.log(filteredPoints); + }; } diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index c2fa41e..6f60855 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -107,7 +107,7 @@ export default class MainPresenter { #handlePointsChange = (updatedPoint) => { this.#pointPresenters.get(updatedPoint.id).init(updatedPoint, this.offers, this.destinations); - } + }; #handleViewAction = (actionType, updateType, update) => { switch (actionType) { @@ -131,12 +131,15 @@ export default class MainPresenter { switch (updateType) { case UpdateType.PATCH: this.#pointPresenters.get(point.id).init(point, offers, destinations); + break; case UpdateType.MINOR: this.#clearPointsList(); this.#renderPointsList(); + break; case UpdateType.MAJOR: this.#clearPointsList(resetFilters = true, resetSorting = true); this.#renderPointsList(); + break; } // В зависимости от типа изменений решаем, что делать: // - обновить часть списка (например, когда поменялось описание) @@ -161,7 +164,6 @@ export default class MainPresenter { #clearPointsList(resetFilters = false, resetSorting = false) { this.#pointPresenters.forEach((presenter) => presenter.destroy()); this.#pointPresenters.clear(); - // Если в момент нажатия на кнопку «New Event» был выбран фильтр или применена сортировка, // то они сбрасываются на состояния «Everything» и по дате соответственно. if (resetFilters === true) { diff --git a/src/view/filters-view.js b/src/view/filters-view.js index 17effbb..68d881f 100644 --- a/src/view/filters-view.js +++ b/src/view/filters-view.js @@ -41,8 +41,6 @@ export default class FiltersView extends AbstractView { } evt.preventDefault(); - console.log(evt.target.dataset.filterType); - this.#handleFiltersChange(evt.target.dataset.filterType); - } + }; } From d104928652c84f8d3fe079796b88627895328e39 Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Sat, 5 Oct 2024 15:02:53 +0300 Subject: [PATCH 04/19] feat: add rendering no points text (when applying filters) --- src/const.js | 8 ++-- src/main.js | 1 + src/model/filters-model.js | 3 +- src/model/point-model.js | 12 +++-- src/presenter/filters-presenter.js | 28 ++++++------ src/presenter/main-presenter.js | 71 +++++++++++++++++------------- src/presenter/point-presenter.js | 10 +++-- src/view/no-points-view.js | 16 +++++-- 8 files changed, 89 insertions(+), 60 deletions(-) diff --git a/src/const.js b/src/const.js index d84e63f..52f3143 100644 --- a/src/const.js +++ b/src/const.js @@ -32,10 +32,10 @@ const UpdateType = { }; const ListEmptyText = { - EVERYTHING: 'Click New Event to create your first point', - PAST: 'There are no past events now', - PRESENT: 'There are no present events now', - FUTURE: 'There are no future events now', + [FilterType.EVERYTHING]: 'Click New Event to create your first point', + [FilterType.PAST]: 'There are no past events now', + [FilterType.PRESENT]: 'There are no present events now', + [FilterType.FUTURE]: 'There are no future events now', }; export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType, ListEmptyText }; diff --git a/src/main.js b/src/main.js index 961d7e7..a8eda34 100644 --- a/src/main.js +++ b/src/main.js @@ -20,6 +20,7 @@ const mainPresenter = new MainPresenter({ const filtersPresenter = new FiltersPresenter({ filtersContainer: filtersContainer, pointModel, + filtersModel, }); render(new NewTripInfo(), mainContainer, RenderPosition.AFTERBEGIN); diff --git a/src/model/filters-model.js b/src/model/filters-model.js index b25a875..f161a06 100644 --- a/src/model/filters-model.js +++ b/src/model/filters-model.js @@ -8,7 +8,8 @@ export default class FiltersModel extends Observable { return this.#filter; } - set filter(filter) { + setFilter(updateType, filter) { this.#filter = filter; + this._notify(updateType, filter); } } diff --git a/src/model/point-model.js b/src/model/point-model.js index afe9e91..8ea2f93 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -16,18 +16,24 @@ export default class PointModel extends Observable { this.#points = points; } - updatePoint(updatedPoint) { + updatePoint(updateType, updatedPoint) { const pointIndex = this.#points.findIndex((point) => point.id === updatedPoint.id); this.#points = [...this.#points].splice(pointIndex, 1, updatedPoint); + + this._notify(updateType, updatedPoint); } - addPoint(updatedPoint) { + addPoint(updateType, updatedPoint) { this.#points = [updatedPoint, ...this.#points]; + + this._notify(updateType, updatedPoint); } - deletePoint(updatedPoint) { + deletePoint(updateType, updatedPoint) { const pointIndex = this.#points.findIndex((point) => point.id === updatedPoint.id); this.#points = [...this.#points].splice(pointIndex, 1); + + this._notify(updateType, updatedPoint); } get destinations() { diff --git a/src/presenter/filters-presenter.js b/src/presenter/filters-presenter.js index fb1d157..7f51a95 100644 --- a/src/presenter/filters-presenter.js +++ b/src/presenter/filters-presenter.js @@ -1,20 +1,21 @@ import { render, replace, remove } from '../framework/render'; import FiltersView from '../view/filters-view'; -import FiltersModel from '../model/filters-model'; -import { FilterType } from '../const'; +import { UpdateType } from '../const'; import { filter } from '../utils/filter-utils'; export default class FiltersPresenter { - #filtersModel = new FiltersModel(); + #filtersModel = null; #filtersComponent = null; #filtersContainer = null; #pointModel = null; - #currentFilter = FilterType.EVERYTHING; - - constructor({ filtersContainer, pointModel }) { + constructor({ filtersContainer, pointModel, filtersModel }) { this.#filtersContainer = filtersContainer; this.#pointModel = pointModel; + this.#filtersModel = filtersModel; + + this.#pointModel.addObserver(this.#handleModelEvent); + this.#filtersModel.addObserver(this.#handleModelEvent); } get filters() { @@ -26,7 +27,6 @@ export default class FiltersPresenter { count: filterPoints(points).length, }), ); - } init() { @@ -47,17 +47,15 @@ export default class FiltersPresenter { remove(prevFiltersComponent); } + #handleModelEvent = () => { + this.init(); + }; + #handleFiltersChange = (filterType) => { - if (this.#currentFilter === filterType) { + if (this.#filtersModel.filter === filterType) { return; } - this.#currentFilter = filterType; - this.#filtersModel.filter = filterType; - - // проверка работает ли сортировка списка поинтов (для себя, потом удалю) - const points = this.#pointModel.points; - const filteredPoints = filter[this.#currentFilter](points); - console.log(filteredPoints); + this.#filtersModel.setFilter(UpdateType.MAJOR, filterType); }; } diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index 6f60855..485356e 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -1,28 +1,32 @@ import PointListView from '../view/point-list-view'; import SortingView from '../view/sorting-view'; import NoPointsView from '../view/no-points-view'; -import { RenderPosition, render } from '../framework/render'; +import { RenderPosition, remove, render, replace } from '../framework/render'; import PointPresenter from './point-presenter'; -import { SortType, UpdateType, UserAction } from '../const'; +import { SortType, UpdateType, UserAction, FilterType } from '../const'; import { getWeightForPrice, getWeightForTime } from '../utils/point-utils'; import { filter } from '../utils/filter-utils'; +import { updatePoint } from '../utils/common-utils'; export default class MainPresenter { #pointsListComponent = new PointListView(); #pointsContainer = null; #pointModel = null; #pointPresenters = new Map(); - #noPoints = new NoPointsView(); + #noPoints = null; #filtersModel = null; #sorting = null; #currentSortType = SortType.DAY; - #currentFilterType = null; + #currentFilterType = FilterType.EVERYTHING; constructor({ pointsContainer, pointModel, filtersModel }) { this.#pointsContainer = pointsContainer; this.#pointModel = pointModel; this.#filtersModel = filtersModel; + + this.#pointModel.addObserver(this.#handleModelEvent); + this.#filtersModel.addObserver(this.#handleModelEvent); } get filter() { @@ -65,11 +69,7 @@ export default class MainPresenter { #renderMain() { render(this.#pointsListComponent, this.#pointsContainer); - if (this.points.length === 0) { - this.#renderNoPoints(); - } - - this.#renderPointsList(this.points); + this.#renderPointsList(); } #renderSorting(sortType) { @@ -89,13 +89,12 @@ export default class MainPresenter { this.#currentSortType = sortType; this.#clearPointsList(); this.#renderPointsList(); - this.#renderSorting(sortType); }; #renderPoint(point) { const pointPresenter = new PointPresenter({ pointsListComponent: this.#pointsListComponent.element, - onPointsChange: this.#handlePointsChange, + onPointsChange: this.#handleModelEvent, onModeChange: this.#handleModeChange, onPointClear: this.#clearPoint, onEditPointView: this.#resetPointView @@ -105,10 +104,10 @@ export default class MainPresenter { this.#pointPresenters.set(point.id, pointPresenter); } - #handlePointsChange = (updatedPoint) => { - this.#pointPresenters.get(updatedPoint.id).init(updatedPoint, this.offers, this.destinations); - }; - + // Здесь будем вызывать обновление модели. + // actionType - действие пользователя, нужно чтобы понять, какой метод модели вызвать + // updateType - тип изменений, нужно чтобы понять, что после нужно обновить + // update - обновленные данные #handleViewAction = (actionType, updateType, update) => { switch (actionType) { case UserAction.UPDATE_TASK: @@ -121,30 +120,26 @@ export default class MainPresenter { this.#pointModel.deleteTask(updateType, update); break; } - // Здесь будем вызывать обновление модели. - // actionType - действие пользователя, нужно чтобы понять, какой метод модели вызвать - // updateType - тип изменений, нужно чтобы понять, что после нужно обновить - // update - обновленные данные }; - #handleModelEvent = (updateType, point, offers, destinations) => { + // В зависимости от типа изменений решаем, что делать: + #handleModelEvent = (updateType, updatedPoint) => { switch (updateType) { + // - обновить часть списка (например, когда поменялись данные поинта при редактировании) case UpdateType.PATCH: - this.#pointPresenters.get(point.id).init(point, offers, destinations); + this.#pointPresenters.get(updatedPoint.id).init(updatedPoint, this.offers, this.destinations); break; + // - обновить список case UpdateType.MINOR: this.#clearPointsList(); this.#renderPointsList(); break; + // - обновить всю доску (с очисткой фильтров и сортировки) case UpdateType.MAJOR: - this.#clearPointsList(resetFilters = true, resetSorting = true); + this.#clearPointsList({ resetFilters: true, resetSorting: true }); this.#renderPointsList(); break; } - // В зависимости от типа изменений решаем, что делать: - // - обновить часть списка (например, когда поменялось описание) - // - обновить список (например, когда задача ушла в архив) - // - обновить всю доску (например, при переключении фильтра) }; #handleModeChange = () => { @@ -156,22 +151,38 @@ export default class MainPresenter { }; #renderPointsList() { + if (this.points.length === 0) { + this.#renderNoPoints(); + } else { + remove(this.#noPoints); + } + for (const point of this.points) { this.#renderPoint(point); } } - #clearPointsList(resetFilters = false, resetSorting = false) { + #clearPointsList({ resetFilters = false, resetSorting = false } = {}) { this.#pointPresenters.forEach((presenter) => presenter.destroy()); this.#pointPresenters.clear(); - // Если в момент нажатия на кнопку «New Event» был выбран фильтр или применена сортировка, - // то они сбрасываются на состояния «Everything» и по дате соответственно. - if (resetFilters === true) { + if (resetFilters) { + this.#currentFilterType = FilterType.EVERYTHING + } + + if (resetSorting) { + this.#currentSortType = SortType.DAY; } + } #renderNoPoints() { + remove(this.#noPoints); + + this.#noPoints = new NoPointsView({ + filter: this.#currentFilterType, + }); + render(this.#noPoints, this.#pointsListComponent.element); } diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index 26bedd0..1ccb154 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -1,6 +1,7 @@ import { render, replace, remove } from '../framework/render'; import PointItemView from '../view/point-item-view'; import EditPointView from '../view/edit-point-view'; +import { UpdateType } from '../const'; const Mode = { DEFAULT: 'DEFAULT', @@ -16,7 +17,7 @@ export default class PointPresenter { #editPointComponent = null; #pointsListComponent = null; - #handlePointsChange = null; + #handleModelEvent = null; #handleModeChange = null; #clearPoint = null; #resetPointView = null; @@ -25,7 +26,7 @@ export default class PointPresenter { constructor({ pointsListComponent, onPointsChange, onModeChange, onPointClear, onEditPointView }) { this.#pointsListComponent = pointsListComponent; - this.#handlePointsChange = onPointsChange; + this.#handleModelEvent = onPointsChange; this.#handleModeChange = onModeChange; this.#clearPoint = onPointClear; this.#resetPointView = onEditPointView; @@ -102,11 +103,12 @@ export default class PointPresenter { // обработчики событий #handleFavoriteClick = () => { - this.#handlePointsChange({ ...this.#point, isFavorite: !this.#point.isFavorite }); + this.#handleModelEvent(UpdateType.PATCH, { ...this.#point, isFavorite: !this.#point.isFavorite }) + // this.#handlePointsChange({ ...this.#point, isFavorite: !this.#point.isFavorite }); }; #handleFormSaveClick = (point) => { - this.#handlePointsChange(point); + this.#handleModelEvent(UpdateType.PATCH, point); this.#replaceFormToPoint(); document.removeEventListener('keydown', this.#escKeyDownHandler); }; diff --git a/src/view/no-points-view.js b/src/view/no-points-view.js index 9b42832..7ab748f 100644 --- a/src/view/no-points-view.js +++ b/src/view/no-points-view.js @@ -1,11 +1,21 @@ import AbstractView from '../framework/view/abstract-view'; +import { ListEmptyText } from '../const'; -function createNoPointsTemplate() { - return '

Click New Event to create your first point

'; +function createNoPointsTemplate(filterType) { + const listEmptyText = ListEmptyText[filterType]; + + return `

${listEmptyText}

`; } export default class NoPointsView extends AbstractView { + #filter = null; + + constructor({ filter }) { + super(); + this.#filter = filter; + } + get template() { - return createNoPointsTemplate(); + return createNoPointsTemplate(this.#filter); } } From 90cab1e8b22c6195cbb962d51f07f7823a2b8b4c Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Mon, 7 Oct 2024 16:33:12 +0300 Subject: [PATCH 05/19] feat: add ability to create new point --- package-lock.json | 2 +- package.json | 1 + public/index.html | 2 - src/const.js | 20 +++++-- src/main.js | 22 +++++++- src/mock/point-mock.js | 4 +- src/model/point-model.js | 8 ++- src/presenter/main-presenter.js | 36 +++++++++---- src/presenter/new-point-presenter.js | 78 +++++++++++++++++++++++++++ src/presenter/point-presenter.js | 1 - src/view/add-new-point-button-view.js | 30 +++++++++++ src/view/create-point-view.js | 47 +++++++++++++--- src/view/edit-point-view.js | 40 ++++++++------ 13 files changed, 249 insertions(+), 42 deletions(-) create mode 100644 src/presenter/new-point-presenter.js create mode 100644 src/view/add-new-point-button-view.js diff --git a/package-lock.json b/package-lock.json index cffce3a..446c2d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@babel/core": "7.21.4", "dayjs": "1.11.13", "flatpickr": "4.6.13", + "he": "1.2.0", "webpack-dev-server": "4.13.3" }, "devDependencies": { @@ -4569,7 +4570,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", - "dev": true, "bin": { "he": "bin/he" } diff --git a/package.json b/package.json index 126cf90..7e096c9 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@babel/core": "7.21.4", "dayjs": "1.11.13", "flatpickr": "4.6.13", + "he": "1.2.0", "webpack-dev-server": "4.13.3" } } diff --git a/public/index.html b/public/index.html index 44c26b4..a29324b 100644 --- a/public/index.html +++ b/public/index.html @@ -21,8 +21,6 @@ - - diff --git a/src/const.js b/src/const.js index 52f3143..1a0cf34 100644 --- a/src/const.js +++ b/src/const.js @@ -20,9 +20,9 @@ const SortType = { }; const UserAction = { - UPDATE_TASK: 'UPDATE_POINT', - ADD_TASK: 'ADD_POINT', - DELETE_TASK: 'DELETE_POINT', + UPDATE_POINT: 'UPDATE_POINT', + ADD_POINT: 'ADD_POINT', + DELETE_POINT: 'DELETE_POINT', }; const UpdateType = { @@ -38,4 +38,16 @@ const ListEmptyText = { [FilterType.FUTURE]: 'There are no future events now', }; -export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType, ListEmptyText }; + const BLANK_POINT = { + id: '', + type: 'flight', + destination: null, + dateFrom: '19/03/19 00:00', + dateTo: '19/03/19 00:00', + basePrice: 0, + offers: [], + isFavorite: 0, + isNewPoint: true + }; + +export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType, ListEmptyText, BLANK_POINT }; diff --git a/src/main.js b/src/main.js index a8eda34..d69d6c7 100644 --- a/src/main.js +++ b/src/main.js @@ -1,20 +1,29 @@ import NewTripInfo from './view/trip-info-view'; -import { RenderPosition, render } from './framework/render'; +import { RenderPosition, render, remove } from './framework/render'; import MainPresenter from './presenter/main-presenter'; import PointModel from './model/point-model'; import FiltersModel from './model/filters-model'; import FiltersPresenter from './presenter/filters-presenter'; +import CreatePointView from './view/create-point-view'; +import AddNewPointButtonView from './view/add-new-point-button-view'; const mainContainer = document.querySelector('.trip-main'); +const addPointButton = document.querySelector('.trip-main__event-add-btn'); const filtersContainer = document.querySelector('.trip-controls__filters'); const pointsContainer = document.querySelector('.trip-events'); + const pointModel = new PointModel(); const filtersModel = new FiltersModel(); +const addNewPointButton = new AddNewPointButtonView({ + onClick: onNewPointButtonClick, +}) + const mainPresenter = new MainPresenter({ pointsContainer: pointsContainer, pointModel, filtersModel, + onNewPointCancel: cancelNewPoint, }); const filtersPresenter = new FiltersPresenter({ @@ -24,6 +33,17 @@ const filtersPresenter = new FiltersPresenter({ }); render(new NewTripInfo(), mainContainer, RenderPosition.AFTERBEGIN); +render(addNewPointButton, mainContainer); + +function onNewPointButtonClick() { + mainPresenter.createPoint(); + + addNewPointButton.disabled = true; +} + +function cancelNewPoint() { +remove() +} filtersPresenter.init(); mainPresenter.init(); diff --git a/src/mock/point-mock.js b/src/mock/point-mock.js index 66054bc..b35d0bc 100644 --- a/src/mock/point-mock.js +++ b/src/mock/point-mock.js @@ -2,6 +2,7 @@ import { getRandomArrayElement, getRandomInteger, createIdGenerator } from '../u import { CITIES, DATES } from './const-mock'; import { TYPES } from '../const'; import { getOffers } from './offers-mock'; +import { nanoid } from 'nanoid'; const POINTS_COUNT = 10; const offersData = getOffers(); @@ -32,7 +33,8 @@ const createPointMock = () => { }; const pointMock = { - id: generateRandomPointId(), + // id: generateRandomPointId(), + id: nanoid(), type: pointType, destination: getRandomInteger(1, CITIES.length), dateFrom: pointDate.dateFrom, diff --git a/src/model/point-model.js b/src/model/point-model.js index 8ea2f93..e76c46f 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -31,7 +31,13 @@ export default class PointModel extends Observable { deletePoint(updateType, updatedPoint) { const pointIndex = this.#points.findIndex((point) => point.id === updatedPoint.id); - this.#points = [...this.#points].splice(pointIndex, 1); + + this.#points = [ + ...this.#points.slice(0, pointIndex), + ...this.#points.slice(pointIndex + 1), + ]; + + // this.#points = [...this.#points].splice(pointIndex, 1); this._notify(updateType, updatedPoint); } diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index 485356e..002e6fe 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -7,6 +7,7 @@ import { SortType, UpdateType, UserAction, FilterType } from '../const'; import { getWeightForPrice, getWeightForTime } from '../utils/point-utils'; import { filter } from '../utils/filter-utils'; import { updatePoint } from '../utils/common-utils'; +import NewPointPresenter from './new-point-presenter'; export default class MainPresenter { #pointsListComponent = new PointListView(); @@ -15,16 +16,23 @@ export default class MainPresenter { #pointPresenters = new Map(); #noPoints = null; #filtersModel = null; + #newPointPresenter = null; #sorting = null; #currentSortType = SortType.DAY; #currentFilterType = FilterType.EVERYTHING; - constructor({ pointsContainer, pointModel, filtersModel }) { + constructor({ pointsContainer, pointModel, filtersModel}) { this.#pointsContainer = pointsContainer; this.#pointModel = pointModel; this.#filtersModel = filtersModel; + this.#newPointPresenter = new NewPointPresenter({ + pointsListContainer: this.#pointsListComponent.element, + onPointAdd: this.#handleViewAction, + // onDestroy: onNewPointCancel, + }); + this.#pointModel.addObserver(this.#handleModelEvent); this.#filtersModel.addObserver(this.#handleModelEvent); } @@ -61,6 +69,16 @@ export default class MainPresenter { return this.#pointModel.destinations; } + // onNewPointCancel() { + // remove() + // } + + createPoint() { + this.#currentSortType = FilterType.DAY; + this.#filtersModel.setFilter(UpdateType.MAJOR, FilterType.EVERYTHING); + this.#newPointPresenter.init(); + } + init() { this.#renderSorting(this.#currentSortType); this.#renderMain(); @@ -110,14 +128,14 @@ export default class MainPresenter { // update - обновленные данные #handleViewAction = (actionType, updateType, update) => { switch (actionType) { - case UserAction.UPDATE_TASK: - this.#pointModel.updateTask(updateType, update); + case UserAction.UPDATE_POINT: + this.#pointModel.updatePoint(updateType, update); break; - case UserAction.ADD_TASK: - this.#pointModel.addTask(updateType, update); + case UserAction.ADD_POINT: + this.#pointModel.addPoint(updateType, update); break; - case UserAction.DELETE_TASK: - this.#pointModel.deleteTask(updateType, update); + case UserAction.DELETE_POINT: + this.#pointModel.deletePoint(updateType, update); break; } }; @@ -173,7 +191,6 @@ export default class MainPresenter { if (resetSorting) { this.#currentSortType = SortType.DAY; } - } #renderNoPoints() { @@ -187,7 +204,6 @@ export default class MainPresenter { } #clearPoint = (point) => { - const targetPresenter = this.#pointPresenters.get(point.id); - targetPresenter.destroy(); + this.#handleViewAction(UserAction.DELETE_POINT, UpdateType.MINOR, point); }; } diff --git a/src/presenter/new-point-presenter.js b/src/presenter/new-point-presenter.js new file mode 100644 index 0000000..edd8177 --- /dev/null +++ b/src/presenter/new-point-presenter.js @@ -0,0 +1,78 @@ +import { UpdateType, UserAction } from "../const"; +import CreatePointView from "../view/create-point-view"; +import { render, replace, remove, RenderPosition } from "../framework/render"; +import EditPointView from "../view/edit-point-view"; +import { nanoid } from 'nanoid'; + +export default class NewPointPresenter { + // #newPointComponent = null; + #pointsListContainer = null; + #handleModelEvent = null; + #editPointComponent = null; + #handlePointAdd = null; + #handleDestroy = null; + #offers = []; + #destinations = []; + + + constructor({ pointsListContainer, onPointAdd, onDestroy }) { + this.#pointsListContainer = pointsListContainer; + this.#handlePointAdd = onPointAdd; + // this.#handleDestroy = onDestroy; + } + + init(offers, destinations) { + this.#offers = offers; + this.#destinations = destinations; + + if (this.#editPointComponent !== null) { + return; + } + + this.#editPointComponent = new EditPointView({ + offers: this.#offers, + destinations: this.#destinations, + onFormSaveClick: this.#handleFormSaveClick, + onFormDeleteClick: this.#handleFormDeleteClick, + }) + + render(this.#editPointComponent, this.#pointsListContainer, RenderPosition.AFTERBEGIN) + + document.addEventListener('keydown', this.#escKeyDownHandler); + } + + destroy() { + if (this.#editPointComponent === null) { + return; + } + + this.#handleDestroy(); + + remove(this.#editPointComponent); + this.#editPointComponent = null; + + document.removeEventListener('keydown', this.#escKeyDownHandler); + } + + #handleFormSaveClick = (point) => { + this.#handlePointAdd( + UserAction.ADD_POINT, + UpdateType.MINOR, + { id: nanoid(), ...point }, + ); + this.destroy(); + + } + + #handleFormDeleteClick = () => { + this.destroy(); + } + + #escKeyDownHandler = (evt) => { + if (evt.key === 'Escape') { + evt.preventDefault(); + + document.removeEventListener('keydown', this.#escKeyDownHandler); + } + }; +} diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index 1ccb154..cd52582 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -104,7 +104,6 @@ export default class PointPresenter { // обработчики событий #handleFavoriteClick = () => { this.#handleModelEvent(UpdateType.PATCH, { ...this.#point, isFavorite: !this.#point.isFavorite }) - // this.#handlePointsChange({ ...this.#point, isFavorite: !this.#point.isFavorite }); }; #handleFormSaveClick = (point) => { diff --git a/src/view/add-new-point-button-view.js b/src/view/add-new-point-button-view.js new file mode 100644 index 0000000..6643304 --- /dev/null +++ b/src/view/add-new-point-button-view.js @@ -0,0 +1,30 @@ +import AbstractView from '../framework/view/abstract-view'; + +function createAddNewPointButtonTemplate() { + return ``; +} + +export default class AddNewPointButtonView extends AbstractView { + #handleClick = null; + + constructor({ onClick }) { + super(); + this.#handleClick = onClick; + + this.element.addEventListener('click', this.#clickHandler); + } + + get template() { + return createAddNewPointButtonTemplate(); + } + + #clickHandler = (evt) => { + evt.preventDefault(); + this.#handleClick(); + }; +} + + + + + diff --git a/src/view/create-point-view.js b/src/view/create-point-view.js index a17de79..8b36fd5 100644 --- a/src/view/create-point-view.js +++ b/src/view/create-point-view.js @@ -1,6 +1,7 @@ -import { capitalize } from '../util'; -import { TYPES, CITIES } from '../const'; -import AbstractView from '../framework/view/abstract-view'; +import { capitalize } from '../utils/common-utils'; +import { TYPES } from '../const'; +import { CITIES } from '../mock/const-mock'; +import AbstractStatefulView from '../framework/view/abstract-stateful-view'; const DEFAULT_TYPE = 'Flight'; const DEFAULT_DESTINATION = 'Geneva'; @@ -17,7 +18,6 @@ const createDestinationsList = (destination) => ``; function createCreatePointTemplate() { - const getTypeCheckedAttribute = (pointType) => { if (pointType === 'flight') { return 'checked'; @@ -143,8 +143,43 @@ function createCreatePointTemplate() { `; } -export default class CreatePointView extends AbstractView { +export default class CreatePointView extends AbstractStatefulView { + #handleNewPointSave = null; + #handleNewPointCancel = null; + + constructor({ point = BLANK_POINT, onNewPointSaveClick, onNewPointCancelClick }) { + super(); + // this._setState(CreatePointView.parsePointToState(point)); + this.#handleNewPointSave = onNewPointSaveClick; + this.#handleNewPointCancel = onNewPointCancelClick; + + this.element.querySelector('form').addEventListener('submit', this.#newPointSaveHandler); + this.element.querySelector('form').addEventListener('reset', this.#newPointCancelHandler); + } + get template() { - return createCreatePointTemplate(); + return createCreatePointTemplate(this._state); + } + + static parsePointToState(point) { + return { ...point }; + } + + static parseStateToPoint(state) { + return { ...state }; + } + + #newPointSaveHandler(evt) { + evt.preventDefault(); + console.log('click'); + // console.log(this._state); + // console.log(point); + this.#handleNewPointSave(); + } + + #newPointCancelHandler(evt) { + evt.preventDefault(); + console.log('click'); + this.#handleNewPointCancel(); } } diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 71dd8d3..4613be0 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -1,6 +1,6 @@ import { capitalize } from '../utils/common-utils'; import { getOffersByType, getDestinationId, humanizePointDate } from '../utils/point-utils'; -import { DATE_WITH_TIME_FORMAT, TYPES } from '../const'; +import { DATE_WITH_TIME_FORMAT, TYPES, BLANK_POINT } from '../const'; import { CITIES } from '../mock/const-mock'; import AbstractStatefulView from '../framework/view/abstract-stateful-view'; import flatpickr from 'flatpickr'; @@ -29,11 +29,21 @@ const getPointOfferItem = (pointOffer, pointOfferChecked) => `
Save + + + ` +} + function createEditPointTemplate(point, offers, destinations) { - const { type, destination, dateFrom, dateTo, basePrice, offers: pointOffers } = point; - const modifiedDestination = destinations.find((destinationElement) => destinationElement.id === destination).name; - const description = destinations.find((destinationElement) => destinationElement.id === destination).description; - const offersArray = offers.find((offer) => offer.type === type).offers; + const { type, destination, dateFrom, dateTo, basePrice, offers: pointOffers, isNewPoint } = point; + const modifiedDestination = isNewPoint ? '' : destinations.find((destinationElement) => destinationElement.id === destination).name; + const description = isNewPoint ? '' : destinations.find((destinationElement) => destinationElement.id === destination).description; + const offersArray = isNewPoint ? '' : offers.find((offer) => offer.type === type).offers; const getOfferCheckedAttribute = (offerId) => { if (pointOffers.includes(offerId)) { @@ -81,10 +91,10 @@ function createEditPointTemplate(point, offers, destinations) {
- + — - +
@@ -92,12 +102,9 @@ function createEditPointTemplate(point, offers, destinations) { € - +
- - - - @@ -106,7 +113,7 @@ function createEditPointTemplate(point, offers, destinations) {

Offers

- ${offersArray.map((pointOffer) => getPointOfferItem(pointOffer, getOfferCheckedAttribute(pointOffer.id))).join('')} + ${isNewPoint ? '' : offersArray.map((pointOffer) => getPointOfferItem(pointOffer, getOfferCheckedAttribute(pointOffer.id))).join('')}
@@ -130,7 +137,7 @@ export default class EditPointView extends AbstractStatefulView { _state = {}; - constructor({ point, offers, destinations, onEditClick, onFormSaveClick, onFormDeleteClick }) { + constructor({ point = BLANK_POINT, offers, destinations, onEditClick, onFormSaveClick, onFormDeleteClick }) { super(); this._setState(EditPointView.parsePointToState(point)); this.#offers = offers; @@ -167,7 +174,10 @@ export default class EditPointView extends AbstractStatefulView { } _restoreHandlers() { - this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); + if (this._state.isNewPoint === false) { + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); + } + // this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); this.element.querySelector('form').addEventListener('submit', this.#formSaveHandler); this.element.querySelector('form').addEventListener('reset', this.#formDeleteHandler); this.element.querySelector('.event__type-group').addEventListener('change', this.#formTypeChangeHandler); From 710457fe3c4862267c5d0ef5f21803595be7b69f Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Mon, 7 Oct 2024 22:27:13 +0300 Subject: [PATCH 06/19] feat: add pictures in task edit view --- src/const.js | 21 ++- src/main.js | 13 +- src/mock/destinations-mock.js | 12 +- src/presenter/main-presenter.js | 8 +- src/presenter/new-point-presenter.js | 22 ++- src/presenter/point-presenter.js | 3 +- src/view/add-new-point-button-view.js | 4 +- src/view/create-point-view.js | 185 -------------------------- src/view/edit-point-view.js | 63 +++++++-- 9 files changed, 84 insertions(+), 247 deletions(-) delete mode 100644 src/view/create-point-view.js diff --git a/src/const.js b/src/const.js index 1a0cf34..c86452c 100644 --- a/src/const.js +++ b/src/const.js @@ -38,16 +38,15 @@ const ListEmptyText = { [FilterType.FUTURE]: 'There are no future events now', }; - const BLANK_POINT = { - id: '', - type: 'flight', - destination: null, - dateFrom: '19/03/19 00:00', - dateTo: '19/03/19 00:00', - basePrice: 0, - offers: [], - isFavorite: 0, - isNewPoint: true - }; +const BLANK_POINT = { + id: '', + type: 'flight', + destination: null, + dateFrom: null, + dateTo: null, + basePrice: 0, + offers: [], + isFavorite: false, +}; export { TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT, FilterType, SortType, UserAction, UpdateType, ListEmptyText, BLANK_POINT }; diff --git a/src/main.js b/src/main.js index d69d6c7..61308e4 100644 --- a/src/main.js +++ b/src/main.js @@ -4,7 +4,6 @@ import MainPresenter from './presenter/main-presenter'; import PointModel from './model/point-model'; import FiltersModel from './model/filters-model'; import FiltersPresenter from './presenter/filters-presenter'; -import CreatePointView from './view/create-point-view'; import AddNewPointButtonView from './view/add-new-point-button-view'; const mainContainer = document.querySelector('.trip-main'); @@ -17,13 +16,13 @@ const filtersModel = new FiltersModel(); const addNewPointButton = new AddNewPointButtonView({ onClick: onNewPointButtonClick, -}) +}); const mainPresenter = new MainPresenter({ pointsContainer: pointsContainer, pointModel, filtersModel, - onNewPointCancel: cancelNewPoint, + // onNewPointCancel: cancelNewPoint, }); const filtersPresenter = new FiltersPresenter({ @@ -37,13 +36,11 @@ render(addNewPointButton, mainContainer); function onNewPointButtonClick() { mainPresenter.createPoint(); - - addNewPointButton.disabled = true; } -function cancelNewPoint() { -remove() -} +// function cancelNewPoint() { +// remove(); +// } filtersPresenter.init(); mainPresenter.init(); diff --git a/src/mock/destinations-mock.js b/src/mock/destinations-mock.js index 1c56a05..c3d1e6e 100644 --- a/src/mock/destinations-mock.js +++ b/src/mock/destinations-mock.js @@ -1,5 +1,5 @@ import { CITIES, PICTURES, DESCRIPTION_TEXT } from './const-mock'; -import { getRandomDescriptionPoint } from '../utils/common-utils'; +import { getRandomDescriptionPoint, getRandomInteger } from '../utils/common-utils'; let destinationId = 0; @@ -10,23 +10,23 @@ const getDestinationsMock = (city) => { description: getRandomDescriptionPoint(DESCRIPTION_TEXT), pictures: [ { - src: PICTURES[0], + src: PICTURES[getRandomInteger(0, 4)], description: `${city} parliament building` }, { - src: PICTURES[1], + src: PICTURES[getRandomInteger(0, 4)], description: `${city} main square` }, { - src: PICTURES[2], + src: PICTURES[getRandomInteger(0, 4)], description: `${city} best view` }, { - src: PICTURES[3], + src: PICTURES[getRandomInteger(0, 4)], description: `${city} landscape` }, { - src: PICTURES[4], + src: PICTURES[getRandomInteger(0, 4)], description: `${city} church` } ], diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index 002e6fe..e36125b 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -51,12 +51,6 @@ export default class MainPresenter { return filteredPoints.sort(getWeightForTime); case SortType.PRICE: return filteredPoints.sort(getWeightForPrice); - case SortType.EVENT: - break; - case SortType.OFFER: - break; - case SortType.DAY: - return filteredPoints; } return filteredPoints; } @@ -185,7 +179,7 @@ export default class MainPresenter { this.#pointPresenters.clear(); if (resetFilters) { - this.#currentFilterType = FilterType.EVERYTHING + this.#currentFilterType = FilterType.EVERYTHING; } if (resetSorting) { diff --git a/src/presenter/new-point-presenter.js b/src/presenter/new-point-presenter.js index edd8177..7c29e43 100644 --- a/src/presenter/new-point-presenter.js +++ b/src/presenter/new-point-presenter.js @@ -1,11 +1,9 @@ -import { UpdateType, UserAction } from "../const"; -import CreatePointView from "../view/create-point-view"; -import { render, replace, remove, RenderPosition } from "../framework/render"; -import EditPointView from "../view/edit-point-view"; +import { BLANK_POINT, UpdateType, UserAction } from '../const'; +import { render, replace, remove, RenderPosition } from '../framework/render'; +import EditPointView from '../view/edit-point-view'; import { nanoid } from 'nanoid'; export default class NewPointPresenter { - // #newPointComponent = null; #pointsListContainer = null; #handleModelEvent = null; #editPointComponent = null; @@ -15,10 +13,9 @@ export default class NewPointPresenter { #destinations = []; - constructor({ pointsListContainer, onPointAdd, onDestroy }) { + constructor({ pointsListContainer, onPointAdd }) { this.#pointsListContainer = pointsListContainer; this.#handlePointAdd = onPointAdd; - // this.#handleDestroy = onDestroy; } init(offers, destinations) { @@ -30,13 +27,15 @@ export default class NewPointPresenter { } this.#editPointComponent = new EditPointView({ + point: BLANK_POINT, offers: this.#offers, destinations: this.#destinations, onFormSaveClick: this.#handleFormSaveClick, onFormDeleteClick: this.#handleFormDeleteClick, - }) + isNewPoint: true + }); - render(this.#editPointComponent, this.#pointsListContainer, RenderPosition.AFTERBEGIN) + render(this.#editPointComponent, this.#pointsListContainer, RenderPosition.AFTERBEGIN); document.addEventListener('keydown', this.#escKeyDownHandler); } @@ -61,12 +60,11 @@ export default class NewPointPresenter { { id: nanoid(), ...point }, ); this.destroy(); - - } + }; #handleFormDeleteClick = () => { this.destroy(); - } + }; #escKeyDownHandler = (evt) => { if (evt.key === 'Escape') { diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index cd52582..08cd36b 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -57,6 +57,7 @@ export default class PointPresenter { onEditClick: this.#handleFormEditClick, onFormSaveClick: this.#handleFormSaveClick, onFormDeleteClick: this.#handleFormDeleteClick, + isNewPoint: false }); if (prevPointComponent === null || prevEditPointComponent === null) { @@ -103,7 +104,7 @@ export default class PointPresenter { // обработчики событий #handleFavoriteClick = () => { - this.#handleModelEvent(UpdateType.PATCH, { ...this.#point, isFavorite: !this.#point.isFavorite }) + this.#handleModelEvent(UpdateType.PATCH, { ...this.#point, isFavorite: !this.#point.isFavorite }); }; #handleFormSaveClick = (point) => { diff --git a/src/view/add-new-point-button-view.js b/src/view/add-new-point-button-view.js index 6643304..03584fc 100644 --- a/src/view/add-new-point-button-view.js +++ b/src/view/add-new-point-button-view.js @@ -21,10 +21,8 @@ export default class AddNewPointButtonView extends AbstractView { #clickHandler = (evt) => { evt.preventDefault(); this.#handleClick(); + this.element.disabled = true; }; } - - - diff --git a/src/view/create-point-view.js b/src/view/create-point-view.js deleted file mode 100644 index 8b36fd5..0000000 --- a/src/view/create-point-view.js +++ /dev/null @@ -1,185 +0,0 @@ -import { capitalize } from '../utils/common-utils'; -import { TYPES } from '../const'; -import { CITIES } from '../mock/const-mock'; -import AbstractStatefulView from '../framework/view/abstract-stateful-view'; - -const DEFAULT_TYPE = 'Flight'; -const DEFAULT_DESTINATION = 'Geneva'; -const DEFAULT_START_TIME = '19/03/19 00:00'; -const DEFAULT_END_TIME = '19/03/19 00:00'; - -const createPointTypeItem = (pointType, pointTypeChecked) => ` -
- - -
`; - -const createDestinationsList = (destination) => - ``; - -function createCreatePointTemplate() { - const getTypeCheckedAttribute = (pointType) => { - if (pointType === 'flight') { - return 'checked'; - } else { - return ''; - } - }; - - return `
  • -
    -
    -
    - - - -
    -
    - - ${TYPES.map((pointType) => createPointTypeItem(pointType, getTypeCheckedAttribute(pointType))).join('')} -
    -
    -
    - -
    - - - - ${CITIES.map((city) => createDestinationsList(city)).join('')} - -
    - -
    - - - — - - -
    - -
    - - -
    - - - -
    -
    -
    -

    Offers

    - -
    -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    -
    -
    - -
    -

    Destination

    -

    Geneva is a city in Switzerland that lies at the southern tip of expansive Lac Léman (Lake Geneva). Surrounded by the Alps and Jura mountains, the city has views of dramatic Mont Blanc.

    - -
    -
    - Event photo - Event photo - Event photo - Event photo - Event photo -
    -
    -
    -
    -
    -
    • `; -} -export default class CreatePointView extends AbstractStatefulView { - #handleNewPointSave = null; - #handleNewPointCancel = null; - - constructor({ point = BLANK_POINT, onNewPointSaveClick, onNewPointCancelClick }) { - super(); - // this._setState(CreatePointView.parsePointToState(point)); - this.#handleNewPointSave = onNewPointSaveClick; - this.#handleNewPointCancel = onNewPointCancelClick; - - this.element.querySelector('form').addEventListener('submit', this.#newPointSaveHandler); - this.element.querySelector('form').addEventListener('reset', this.#newPointCancelHandler); - } - - get template() { - return createCreatePointTemplate(this._state); - } - - static parsePointToState(point) { - return { ...point }; - } - - static parseStateToPoint(state) { - return { ...state }; - } - - #newPointSaveHandler(evt) { - evt.preventDefault(); - console.log('click'); - // console.log(this._state); - // console.log(point); - this.#handleNewPointSave(); - } - - #newPointCancelHandler(evt) { - evt.preventDefault(); - console.log('click'); - this.#handleNewPointCancel(); - } -} diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 4613be0..a23c4c8 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -11,6 +11,10 @@ const createOfferClass = (offerTitle) => { return splittedOfferTitles[splittedOfferTitles.length - 1]; }; +const getDestinationPicture = (picture) => { + return `${picture.description}` +} + const createDestinationsList = (destination) => ``; @@ -32,19 +36,27 @@ const getPointOfferItem = (pointOffer, pointOfferChecked) => `
    Save - - `; } return ` - ` -} + + `; + return ''; } export default class AddNewPointButtonView extends AbstractView { diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index a23c4c8..b9b3688 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -1,6 +1,6 @@ import { capitalize } from '../utils/common-utils'; import { getOffersByType, getDestinationId, humanizePointDate } from '../utils/point-utils'; -import { DATE_WITH_TIME_FORMAT, TYPES, BLANK_POINT } from '../const'; +import { DATE_WITH_TIME_FORMAT, TYPES } from '../const'; import { CITIES } from '../mock/const-mock'; import AbstractStatefulView from '../framework/view/abstract-stateful-view'; import flatpickr from 'flatpickr'; @@ -11,9 +11,7 @@ const createOfferClass = (offerTitle) => { return splittedOfferTitles[splittedOfferTitles.length - 1]; }; -const getDestinationPicture = (picture) => { - return `${picture.description}` -} +const getDestinationPicture = (picture) => `${picture.description}`; const createDestinationsList = (destination) => ``; @@ -45,8 +43,8 @@ const getFormButtons = (isNewPoint) => { function createEditPointTemplate(point, offers, destinations, isNewPoint) { const { type, destination, dateFrom, dateTo, basePrice, offers: pointOffers } = point; - var modifiedDestination = ''; - var description = '' + let modifiedDestination = ''; + let description = ''; if (destination !== null) { modifiedDestination = destinations.find((destinationElement) => destinationElement.id === destination).name; @@ -226,9 +224,9 @@ export default class EditPointView extends AbstractStatefulView { #formSaveHandler = (evt) => { evt.preventDefault(); if (this.#isNewPoint) { -console.log('save') + console.log('save'); } else { - this.#handleFormSave(EditPointView.parseStateToPoint(this._state)); + this.#handleFormSave(EditPointView.parseStateToPoint(this._state)); } }; @@ -240,10 +238,11 @@ console.log('save') #formDeleteHandler = (evt) => { evt.preventDefault(); + if (this.#isNewPoint) { - this.#handleFormDelete; + this.#handleFormDelete; } else { - this.#handleFormDelete(EditPointView.parseStateToPoint(this._state)); + this.#handleFormDelete(EditPointView.parseStateToPoint(this._state)); } }; From 6ec0b40d8a56b945b71cd9c481d2bea178558b84 Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Tue, 8 Oct 2024 22:05:43 +0300 Subject: [PATCH 08/19] fix: delete not used code --- src/presenter/filters-presenter.js | 3 +-- src/presenter/main-presenter.js | 2 +- src/presenter/new-point-presenter.js | 1 - src/presenter/point-presenter.js | 5 +++-- src/view/edit-point-view.js | 18 +++++++----------- 5 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/presenter/filters-presenter.js b/src/presenter/filters-presenter.js index 7f51a95..59c850a 100644 --- a/src/presenter/filters-presenter.js +++ b/src/presenter/filters-presenter.js @@ -30,11 +30,10 @@ export default class FiltersPresenter { } init() { - const filters = this.filters; const prevFiltersComponent = this.#filtersComponent; this.#filtersComponent = new FiltersView({ - filters, + filters: this.filters, onFiltersChange: this.#handleFiltersChange }); diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index 9b9a386..3e11d30 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -108,7 +108,7 @@ export default class MainPresenter { onPointsChange: this.#handleModelEvent, onModeChange: this.#handleModeChange, onPointClear: this.#clearPoint, - onEditPointView: this.#resetPointView + onEditPointView: this.#resetPointView, }); pointPresenter.init(point, this.offers, this.destinations); diff --git a/src/presenter/new-point-presenter.js b/src/presenter/new-point-presenter.js index 0b6ee51..3b274ce 100644 --- a/src/presenter/new-point-presenter.js +++ b/src/presenter/new-point-presenter.js @@ -12,7 +12,6 @@ export default class NewPointPresenter { #offers = []; #destinations = []; - constructor({ pointsListContainer, onPointAdd }) { this.#pointsListContainer = pointsListContainer; this.#handlePointAdd = onPointAdd; diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index 08cd36b..52c727c 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -1,7 +1,7 @@ import { render, replace, remove } from '../framework/render'; import PointItemView from '../view/point-item-view'; import EditPointView from '../view/edit-point-view'; -import { UpdateType } from '../const'; +import { UpdateType} from '../const'; const Mode = { DEFAULT: 'DEFAULT', @@ -57,7 +57,7 @@ export default class PointPresenter { onEditClick: this.#handleFormEditClick, onFormSaveClick: this.#handleFormSaveClick, onFormDeleteClick: this.#handleFormDeleteClick, - isNewPoint: false + isNewPoint: false, }); if (prevPointComponent === null || prevEditPointComponent === null) { @@ -109,6 +109,7 @@ export default class PointPresenter { #handleFormSaveClick = (point) => { this.#handleModelEvent(UpdateType.PATCH, point); + this.#replaceFormToPoint(); document.removeEventListener('keydown', this.#escKeyDownHandler); }; diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index b9b3688..1ea9d0c 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -223,18 +223,14 @@ export default class EditPointView extends AbstractStatefulView { #formSaveHandler = (evt) => { evt.preventDefault(); - if (this.#isNewPoint) { - console.log('save'); - } else { - this.#handleFormSave(EditPointView.parseStateToPoint(this._state)); - } - }; - // #handleFormSaveClick = (point) => { - // this.#handleModelEvent(UpdateType.PATCH, point); - // this.#replaceFormToPoint(); - // document.removeEventListener('keydown', this.#escKeyDownHandler); - // }; + // if (this.#isNewPoint) { + // console.log('save'); + // } else { + this.#handleFormSave(EditPointView.parseStateToPoint(this._state)); + console.log(EditPointView.parseStateToPoint(this._state)); + // } + }; #formDeleteHandler = (evt) => { evt.preventDefault(); From 440195179752fecb927548e6092ba04f55415eb9 Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Wed, 9 Oct 2024 23:21:47 +0300 Subject: [PATCH 09/19] feat: add max date when choose dataFrom, add ability to choose offers when point edit --- src/utils/point-utils.js | 1 + src/view/edit-point-view.js | 26 +++++++++++++++++++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/utils/point-utils.js b/src/utils/point-utils.js index 23b9d21..bbb783a 100644 --- a/src/utils/point-utils.js +++ b/src/utils/point-utils.js @@ -53,6 +53,7 @@ function getWeightForTime(a, b) { } } +// const getOffersByType = (type, offers) => offers.find((offer) => offer.type === type).offers; const getOffersByType = (type, offers) => offers.find((offer) => offer.type === type).offers; const getDestinationId = (destinationName, destinations) => destinations.find((destinationElement) => destinationElement.name === destinationName).id; diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 1ea9d0c..46ccb3b 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -22,8 +22,8 @@ const createPointTypeItem = (pointType, pointTypeChecked) => `
    `; -const getPointOfferItem = (pointOffer, pointOfferChecked) => `
    - +const getPointOfferItem = (pointOffer, pointOfferChecked, offerId) => `
    +