-
-
+
+ Trip events
+
+
+
+
+
- 
-
-
+ `
+ );
+}
+
+export default class MessageView extends AbstractView {
+ #filterType;
+
+ constructor({ filterType }) {
+ super();
+ this.#filterType = filterType;
+ }
+
+ get template() {
+ const message = FilterMessage[this.#filterType];
+
+ return createMessageTemplate({ message });
+ }
+}
diff --git a/src/view/new-point-button-view.js b/src/view/new-point-button-view.js
new file mode 100644
index 0000000..4a35ce8
--- /dev/null
+++ b/src/view/new-point-button-view.js
@@ -0,0 +1,31 @@
+import AbstractView from "../framework/view/abstract-view.js";
+
+const createNewPointButtonTemplate = () => {
+ return (
+ ''
+ );
+}
+
+export default class NewPointButtonView extends AbstractView {
+ #handleClick = null;
+
+ constructor({ onClick }) {
+ super();
+ this.#handleClick = onClick;
+
+ this.element.addEventListener('click', this.#clickHandler);
+ }
+
+ get template() {
+ return createNewPointButtonTemplate();
+ }
+
+ setDisabled = (isDisabled) => {
+ this.element.disabled = isDisabled;
+ }
+
+ #clickHandler = (evt) => {
+ evt.preventDefault();
+ this.#handleClick();
+ }
+}
diff --git a/src/view/point-view.js b/src/view/point-view.js
index 6d13c8a..4c1937c 100644
--- a/src/view/point-view.js
+++ b/src/view/point-view.js
@@ -2,9 +2,7 @@ import AbstractView from '../framework/view/abstract-view.js';
import { formatStringToDateTime, formatStringToShortDate, formatStringToTime, getPointDuration } from '../utils.js';
const createPointOffersTemplate = ({ offersId, pointOffers }) => {
-
const selectedOffers = pointOffers.filter((offer) => offersId.includes(offer.id));
- console.log(selectedOffers)
if (selectedOffers.length === 0) {
return '';
diff --git a/src/view/sort-view.js b/src/view/sort-view.js
index 73e0d81..2b41ce6 100644
--- a/src/view/sort-view.js
+++ b/src/view/sort-view.js
@@ -1,5 +1,4 @@
import AbstractView from '../framework/view/abstract-view.js';
-import { EnabledSortType, SortType } from '../const.js';
const createSortItemsTemplate = ({ items }) => {
const sortItems = items.map(sortItem => {
@@ -35,20 +34,14 @@ const createSortTemplate = ({ items }) => {
export default class SortView extends AbstractView {
#items = null;
- #onItemChange = null;
+ #handleSortTypeChange = null;
- constructor({ sortType, onItemChange }) {
+ constructor({ items, onItemChange }) {
super();
+ this.#items = items;
+ this.#handleSortTypeChange = onItemChange;
- this.#items = Object.values(SortType).map((type) => ({
- type,
- isChecked: type === sortType,
- isDisabled: !EnabledSortType[type]
- }));
-
- this.#onItemChange = onItemChange;
-
- this.element.addEventListener('change', this.#itemChangeHandler);
+ this.element.addEventListener('change', this.#sortTypeChangeHandler);
}
get template() {
@@ -57,8 +50,8 @@ export default class SortView extends AbstractView {
});
}
- #itemChangeHandler = (evt) => {
+ #sortTypeChangeHandler = (evt) => {
evt.preventDefault();
- this.#onItemChange(evt.target.dataset.sortType);
+ this.#handleSortTypeChange(evt.target.dataset.sortType);
};
}
diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js
index 49fbf6c..a70cb81 100644
--- a/src/view/trip-info-view.js
+++ b/src/view/trip-info-view.js
@@ -5,16 +5,14 @@ const createTripInfoTemplate = () => {
`
-
`
);
-};
+}
export default class TripInfoView extends AbstractView {
get template() {
-
-
- Big Trip
+
+
+
+
+
+
+
${(currentOffers.length !== 0) ? `
@@ -122,15 +148,19 @@ export default class EditPointView extends AbstractStatefulView {
#pointOffers = null;
#handleSubmitClick = null;
#handleResetClick = null;
+ #handleDeleteClick = null;
#datepickerFrom = null;
#datepickerTo = null;
+ #pointType;
- constructor({ point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onResetClick }) {
+ constructor({ point = POINT_EMPTY, pointDestination, pointOffers, pointType = EditType.EDITING, onSubmitClick, onResetClick, onDeleteClick }) {
super();
this.#pointDestination = pointDestination;
this.#pointOffers = pointOffers;
this.#handleSubmitClick = onSubmitClick;
this.#handleResetClick = onResetClick;
+ this.#handleDeleteClick = onDeleteClick;
+ this.#pointType = pointType;
this._setState(EditPointView.parsePointToState({ point }))
@@ -141,7 +171,8 @@ export default class EditPointView extends AbstractStatefulView {
return createEditPointTemplate({
state: this._state,
pointDestination: this.#pointDestination,
- pointOffers: this.#pointOffers
+ pointOffers: this.#pointOffers,
+ pointType: this.#pointType
});
}
@@ -162,11 +193,17 @@ export default class EditPointView extends AbstractStatefulView {
};
_restoreHandlers = () => {
- this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler);
+ if (this.#pointType === EditType.EDITING) {
+ this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#resetButtonClickHandler);
- this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#resetButtonClickHandler);
+ this.element.querySelector('.event__reset-btn').addEventListener('click', this.#deleteButtonClickHandler)
+ }
- this.element.querySelector('.event__reset-btn').addEventListener('click', this.#resetButtonClickHandler)
+ if (this.#pointType === EditType.CREATING) {
+ this.element.querySelector('.event__reset-btn').addEventListener('click', this.#resetButtonClickHandler)
+ }
+
+ this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler);
this.element.querySelector('.event__type-group').addEventListener('change', this.#typeChangeHandler);
@@ -189,6 +226,11 @@ export default class EditPointView extends AbstractStatefulView {
this.#handleResetClick();
}
+ #deleteButtonClickHandler = (evt) => {
+ evt.preventDefault();
+ this.#handleDeleteClick(EditPointView.parseStateToPoint(this._state));
+ }
+
#typeChangeHandler = (evt) => {
this.updateElement({
point: {
diff --git a/src/view/filter-view.js b/src/view/filter-view.js
index a969897..3c37819 100644
--- a/src/view/filter-view.js
+++ b/src/view/filter-view.js
@@ -5,31 +5,36 @@ const createFilterItemsTemplate = ({ filters }) => {
const filterItems = filters.map(filter => {
return (
`
`
+ )
}).join('');
return filterItems;
-};
+}
const createFilterTemplate = ({ filters }) => {
return (
``
);
-};
+}
export default class FilterView extends AbstractView {
- #filters = [];
+ #filters = null;
+ #handleFilterTypeChange = null;
- constructor(filters) {
+ constructor({ items, onItemChange }) {
super();
- this.#filters = filters;
+ this.#filters = items;
+ this.#handleFilterTypeChange = onItemChange;
+
+ this.element.addEventListener('change', this.#filterTypeChangeHandler);
}
get template() {
@@ -38,4 +43,8 @@ export default class FilterView extends AbstractView {
});
}
+ #filterTypeChangeHandler = (evt) => {
+ evt.preventDefault();
+ this.#handleFilterTypeChange(evt.target.value);
+ };
}
diff --git a/src/view/message-view.js b/src/view/message-view.js
new file mode 100644
index 0000000..a94abf8
--- /dev/null
+++ b/src/view/message-view.js
@@ -0,0 +1,33 @@
+import AbstractView from "../framework/view/abstract-view.js";
+import { FilterType } from "../const.js";
+
+const FilterMessage = {
+ [FilterType.EVERYTHING]: 'Click New Event to create your first point',
+ [FilterType.FUTURE]: 'There are no future events now',
+ [FilterType.PRESENT]: 'There are no present events now',
+ [FilterType.PAST]: 'There are no past events now'
+}
+
+const createMessageTemplate = ({ message }) => {
+ return (
+ `
-
-
+
+
+
+
+
-
- Filter events
- -
+
+
+
-
+
+
-
-
-
-
-
diff --git a/src/const.js b/src/const.js
index e675ccd..c9be995 100644
--- a/src/const.js
+++ b/src/const.js
@@ -89,6 +89,23 @@ const EnabledSortType = {
[SortType.OFFERS]: false
};
+const UserAction = {
+ UPDATE_POINT: 'UPDATE_POINT',
+ ADD_POINT: 'ADD_POINT',
+ DELETE_POINT: 'DELETE_POINT',
+};
+
+const UpdateType = {
+ PATCH: 'PATCH',
+ MINOR: 'MINOR',
+ MAJOR: 'MAJOR'
+};
+
+const EditType = {
+ EDITING: 'EDITING',
+ CREATING: 'CREATING'
+}
+
export {
OFFER_COUNT,
DESTINATION_COUNT,
@@ -103,5 +120,8 @@ export {
FilterType,
Mode,
SortType,
- EnabledSortType
+ EnabledSortType,
+ UserAction,
+ UpdateType,
+ EditType
}
diff --git a/src/main.js b/src/main.js
index 04d7fa9..b5219ab 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,18 @@
import TripInfoView from './view/trip-info-view.js';
import TripPresenter from './presenter/trip-presenter.js';
import FilterPresenter from './presenter/filter-presenter.js';
+import NewPointButtonPresenter from './presenter/new-point-button-presenter.js';
import MockService from './service/mock-service.js';
import DestinationsModel from './model/destinations-model.js';
import OffersModel from './model/offers-model.js';
import PointsModel from './model/points-model.js';
+import FilterModel from './model/filter-model.js';
import { render, RenderPosition } from './framework/render.js';
-const tripInfoElement = document.querySelector('.trip-main');
-const siteMainElement = document.querySelector('.page-main');
+const bodyElement = document.querySelector('body');
+const headerElement = bodyElement.querySelector('.page-header');
+const tripInfoElement = headerElement.querySelector('.trip-main');
+const siteMainElement = bodyElement.querySelector('.page-main');
const eventListElement = siteMainElement.querySelector('.trip-events');
const filterElement = tripInfoElement.querySelector('.trip-controls__filters');
@@ -16,11 +20,32 @@ const mockService = new MockService();
const destinationsModel = new DestinationsModel(mockService);
const offersModel = new OffersModel(mockService);
const pointsModel = new PointsModel(mockService);
+const filterModel = new FilterModel();
-const tripPresenter = new TripPresenter({ tripContainer: eventListElement, destinationsModel, offersModel, pointsModel });
-const filterPresenter = new FilterPresenter({ container: filterElement, pointsModel });
+const newPointButtonPresenter = new NewPointButtonPresenter({
+ container: tripInfoElement
+});
+
+const filterPresenter = new FilterPresenter({
+ container: filterElement,
+ pointsModel,
+ filterModel
+});
+
+const tripPresenter = new TripPresenter({
+ tripContainer: eventListElement,
+ destinationsModel,
+ offersModel,
+ pointsModel,
+ filterModel,
+ newPointButtonPresenter: newPointButtonPresenter
+});
render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
-tripPresenter.init();
+newPointButtonPresenter.init({
+ onButtonClick: tripPresenter.newPointButtonClickHandler
+});
+
filterPresenter.init();
+tripPresenter.init();
diff --git a/src/model/destinations-model.js b/src/model/destinations-model.js
index e2225a8..46ddff7 100644
--- a/src/model/destinations-model.js
+++ b/src/model/destinations-model.js
@@ -1,14 +1,21 @@
-export default class DestinationsModel {
+import Observable from '../framework/observable.js';
+
+export default class DestinationsModel extends Observable {
+ #service = null;
+ #destinations = [];
+
constructor(service) {
- this.service = service;
- this.destinations = this.service.getDestinations();
+ super();
+ this.#service = service;
+ this.#destinations = this.#service.getDestinations();
}
get() {
- return this.destinations;
+ return this.#destinations;
}
getById(id) {
- return this.destinations.find((destination) => destination.id === id);
+ return this.#destinations
+ .find((destination) => destination.id === id);
}
}
diff --git a/src/model/filter-model.js b/src/model/filter-model.js
new file mode 100644
index 0000000..3152aca
--- /dev/null
+++ b/src/model/filter-model.js
@@ -0,0 +1,15 @@
+import Observable from '../framework/observable.js';
+import { FilterType } from '../const.js';
+
+export default class FilterModel extends Observable {
+ #filter = FilterType.EVERYTHING;
+
+ get() {
+ return this.#filter;
+ }
+
+ set(updateType, update) {
+ this.#filter = update;
+ this._notify(updateType, update)
+ }
+}
diff --git a/src/model/offers-model.js b/src/model/offers-model.js
index 03added..091ba04 100644
--- a/src/model/offers-model.js
+++ b/src/model/offers-model.js
@@ -1,14 +1,21 @@
-export default class OffersModel {
+import Observable from '../framework/observable.js';
+
+export default class OffersModel extends Observable {
+ #service = null;
+ #offers = [];
+
constructor(service) {
- this.service = service;
- this.offers = this.service.getOffers();
+ super();
+ this.#service = service;
+ this.#offers = this.#service.getOffers();
}
get() {
- return this.offers;
+ return this.#offers;
}
getByType(type) {
- return this.offers.find((offer) => offer.type === type).offers;
+ return this.#offers
+ .find((offer) => offer.type === type).offers;
}
}
diff --git a/src/model/points-model.js b/src/model/points-model.js
index ec813b9..9ab0c1f 100644
--- a/src/model/points-model.js
+++ b/src/model/points-model.js
@@ -1,10 +1,40 @@
-export default class PointsModel {
+import Observable from '../framework/observable.js';
+
+import { updateItem } from '../utils.js';
+
+export default class PointsModel extends Observable {
+ #points = [];
+ #service = null;
+
constructor(service) {
- this.service = service;
- this.points = this.service.getPoints();
+ super();
+ this.#service = service;
+ this.#points = this.#service.getPoints();
}
get() {
- return this.points;
+ return this.#points;
+ }
+
+ getById(id) {
+ return this.#points.find((point) => point.id === id);
+ }
+
+ update(updateType, point) {
+ const updatedPoint = this.#service.updatePoint(point);
+ this.#points = updateItem(this.#points, updatedPoint);
+ this._notify(updateType, updatedPoint);
+ }
+
+ add(updateType, point) {
+ const addedPoint = this.#service.addPoint(point);
+ this.#points.push(addedPoint);
+ this._notify(updateType, addedPoint);
+ }
+
+ delete(updateType, point) {
+ this.#service.deletePoint(point);
+ this.#points = this.#points.filter((pointItem) => pointItem.id !== point.id);
+ this._notify(updateType);
}
}
diff --git a/src/presenter/filter-presenter.js b/src/presenter/filter-presenter.js
index 9c17249..2358338 100644
--- a/src/presenter/filter-presenter.js
+++ b/src/presenter/filter-presenter.js
@@ -1,19 +1,63 @@
-import FilterView from '../view/filter-view.js';
-import { render } from '../framework/render.js';
-import { generateFilters } from '../mock/filter.js';
+import FilterView from "../view/filter-view.js";
+import { render, replace, remove } from "../framework/render.js";
+import { UpdateType } from "../const.js";
+import { filter } from "../utils/filter.js";
export default class FilterPresenter {
#container = null;
+ #filterComponent = null;
+
#pointsModel = null;
- #filters = [];
+ #filterModel = null;
+
+ #currentFilter = null;
- constructor({ container, pointsModel }) {
+ constructor({ container, pointsModel, filterModel }) {
this.#container = container;
this.#pointsModel = pointsModel;
- this.#filters = generateFilters(this.#pointsModel.get());
+ this.#filterModel = filterModel;
+
+ this.#pointsModel.addObserver(this.#modelEventHandler);
+ this.#filterModel.addObserver(this.#modelEventHandler);
+ }
+
+ get filters() {
+ const points = this.#pointsModel.get();
+
+ return Object.entries(filter)
+ .map(([filterType, filterPoints]) => ({
+ type: filterType,
+ isChecked: filterType === this.#currentFilter,
+ isDisabled: filterPoints(points).length === 0
+ }));
}
init() {
- render(new FilterView(this.#filters), this.#container);
+ this.#currentFilter = this.#filterModel.get();
+
+ const filters = this.filters;
+
+ const prevFilterComponent = this.#filterComponent;
+
+ this.#filterComponent = new FilterView({
+ items: filters,
+ onItemChange: this.#filterTypeChangeHandler
+ });
+
+ if (prevFilterComponent === null) {
+ render(this.#filterComponent, this.#container);
+ return;
+ }
+
+ replace(this.#filterComponent, prevFilterComponent);
+ remove(prevFilterComponent);
}
+
+ #filterTypeChangeHandler = (filterType) => {
+ this.#filterModel.set(UpdateType.MAJOR, filterType);
+ };
+
+ #modelEventHandler = () => {
+ this.init();
+ };
}
diff --git a/src/presenter/new-point-button-presenter.js b/src/presenter/new-point-button-presenter.js
new file mode 100644
index 0000000..de1a90d
--- /dev/null
+++ b/src/presenter/new-point-button-presenter.js
@@ -0,0 +1,31 @@
+import NewPointButtonView from '../view/new-point-button-view.js';
+
+import { render } from '../framework/render.js';
+
+export default class NewPointButtonPresenter {
+ #container = null;
+ #button = null;
+ #handleButtonClick = null;
+
+ constructor({ container }) {
+ this.#container = container;
+ }
+
+ init({ onButtonClick }) {
+ this.#handleButtonClick = onButtonClick;
+ this.#button = new NewPointButtonView({ onClick: this.#buttonClickHandler });
+ render(this.#button, this.#container);
+ }
+
+ disableButton() {
+ this.#button.setDisabled(true);
+ }
+
+ enableButton() {
+ this.#button.setDisabled(false);
+ }
+
+ #buttonClickHandler = () => {
+ this.#handleButtonClick();
+ };
+}
diff --git a/src/presenter/new-point-presenter.js b/src/presenter/new-point-presenter.js
new file mode 100644
index 0000000..2de63a8
--- /dev/null
+++ b/src/presenter/new-point-presenter.js
@@ -0,0 +1,74 @@
+import EditPointView from "../view/edit-point-view.js";
+
+import { remove, render, RenderPosition } from '../framework/render.js';
+import { UserAction, UpdateType, EditType } from "../const.js";
+
+export default class NewPointPresenter {
+ #container = null;
+
+ #destinationsModel = null;
+ #offersModel = null;
+
+ #pointNewComponent = 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.#pointNewComponent !== null) {
+ return;
+ }
+
+ this.#pointNewComponent = new EditPointView({
+ pointDestination: this.#destinationsModel.get(),
+ pointOffers: this.#offersModel.get(),
+ onSubmitClick: this.#formSubmitHandler,
+ onResetClick: this.#resetButtonClickHandler,
+ pointType: EditType.CREATING
+ });
+
+ render(this.#pointNewComponent, this.#container, RenderPosition.AFTERBEGIN);
+ document.addEventListener('keydown', this.#escKeyDownHandler);
+ }
+
+ destroy = ({ isCanceled = true } = {}) => {
+ if (this.#pointNewComponent === null) {
+ return;
+ }
+
+ remove(this.#pointNewComponent);
+ this.#pointNewComponent = null;
+ document.removeEventListener('keydown', this.#escKeyDownHandler);
+
+ this.#handleDestroy({ isCanceled });
+ };
+
+ #formSubmitHandler = (point) => {
+ this.#handleDataChange(
+ UserAction.ADD_POINT,
+ UpdateType.MINOR,
+ point
+ );
+
+ this.destroy({ isCanceled: false });
+ };
+
+ #resetButtonClickHandler = () => {
+ this.destroy();
+ };
+
+ #escKeyDownHandler = (evt) => {
+ if (evt.key === 'Escape') {
+ evt.preventDefault();
+ this.destroy();
+ }
+ };
+}
diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js
index 300f7ba..2d05712 100644
--- a/src/presenter/point-presenter.js
+++ b/src/presenter/point-presenter.js
@@ -1,7 +1,8 @@
import PointView from '../view/point-view.js';
import EditPointView from '../view/edit-point-view.js';
import { remove, render, replace } from '../framework/render.js';
-import { Mode } from '../const.js';
+import { Mode, UserAction, UpdateType } from '../const.js';
+import { isBigDifference } from '../utils.js';
export default class PointPresenter {
#container = null;
@@ -44,7 +45,8 @@ export default class PointPresenter {
pointDestination: this.#destinationsModel.get(),
pointOffers: this.#offersModel.get(),
onSubmitClick: this.#formSubmitHandler,
- onResetClick: this.#resetButtonClickHandler
+ onResetClick: this.#resetButtonClickHandler,
+ onDeleteClick: this.#deleteButtonClickHandler
})
if (!prevPointComponent || !prevEditPointComponent) {
@@ -89,6 +91,14 @@ export default class PointPresenter {
this.#mode = Mode.DEFAULT;
};
+ #deleteButtonClickHandler = (point) => {
+ this.#handleDataChange(
+ UserAction.DELETE_POINT,
+ UpdateType.MINOR,
+ point
+ );
+ };
+
#escKeyDownHandler = (evt) => {
if (evt.key === 'Escape') {
evt.preventDefault();
@@ -102,16 +112,27 @@ export default class PointPresenter {
};
#favoriteClickHandler = () => {
- this.#handleDataChange({
- ...this.#point,
- isFavorite: !this.#point.isFavorite
- });
+ this.#handleDataChange(
+ UserAction.UPDATE_POINT,
+ UpdateType.PATCH,
+ {
+ ...this.#point,
+ isFavorite: !this.#point.isFavorite
+ }
+ );
};
- #formSubmitHandler = (point) => {
- this.#handleDataChange(point);
+ #formSubmitHandler = (updatedPoint) => {
+ const isMinor = isBigDifference(updatedPoint, this.#point);
+
+ this.#handleDataChange(
+ UserAction.UPDATE_POINT,
+ isMinor ? UpdateType.MINOR : UpdateType.PATCH,
+ updatedPoint
+ );
+
this.#replaceFormToPoint();
- }
+ };
#resetButtonClickHandler = () => {
this.#editPointComponent.reset(this.#point);
diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js
index 5b4f7bb..910e998 100644
--- a/src/presenter/trip-presenter.js
+++ b/src/presenter/trip-presenter.js
@@ -1,40 +1,71 @@
import SortView from '../view/sort-view.js';
import TripView from '../view/point-list-view.js';
-import EmptyListView from '../view/empty-list-view.js';
+import MessageView from '../view/message-view.js';
import PointPresenter from './point-presenter.js';
+import NewPointPresenter from './new-point-presenter.js';
import { render, replace, remove } from '../framework/render.js';
-import { updateItem } from '../utils.js';
-import { SortType } from '../const.js';
+import { SortType, EnabledSortType, UserAction, UpdateType, FilterType } from '../const.js';
import { sort } from '../utils/sort.js';
-import PointListView from '../view/point-list-view.js';
+import { filter } from '../utils/filter.js';
export default class TripPresenter {
#tripContainer = null;
+
+ #pointListComponent = new TripView();
+ #sortComponent = null;
+ #messageComponent = null;
+
#destinationsModel = null;
#offersModel = null;
#pointsModel = null;
- #pointListComponent = new TripView();
- #sortComponent = null;
+ #filterModel = null;
- #points = [];
+ #pointPresenters = new Map();
+ #newPointPresenter = null;
+ #newPointButtonPresenter = null;
#currentSortType = SortType.DAY;
+ #isCreating = false;
- #pointPresenters = new Map();
-
- constructor({ tripContainer, destinationsModel, offersModel, pointsModel }) {
+ constructor({ tripContainer, destinationsModel, offersModel, pointsModel, filterModel, newPointButtonPresenter }) {
this.#tripContainer = tripContainer;
this.#destinationsModel = destinationsModel;
this.#offersModel = offersModel;
this.#pointsModel = pointsModel;
+ this.#filterModel = filterModel;
+ this.#newPointButtonPresenter = newPointButtonPresenter;
- this.#points = sort[SortType.DAY]([...this.#pointsModel.get()]);
+ this.#newPointPresenter = new NewPointPresenter({
+ container: this.#pointListComponent.element,
+ destinationsModel: this.#destinationsModel,
+ offersModel: this.#offersModel,
+ onDataChange: this.#pointChangeHandler,
+ onDestroy: this.#newPointDestroyHandler
+ });
+
+ this.#pointsModel.addObserver(this.#modelEventHandler);
+ this.#filterModel.addObserver(this.#modelEventHandler);
+ }
+
+ get points() {
+ const filterType = this.#filterModel.get();
+ const filteredPoints = filter[filterType](this.#pointsModel.get());
+
+ return sort[this.#currentSortType](filteredPoints);
}
init() {
this.#renderBoard();
}
+ newPointButtonClickHandler = () => {
+ this.#isCreating = true;
+ this.#currentSortType = SortType.DAY;
+ this.#filterModel.set(UpdateType.MAJOR, FilterType.EVERYTHING);
+ this.#newPointButtonPresenter.disableButton();
+ this.#newPointPresenter.init();
+ };
+
#renderPoint = (point) => {
const pointPresenter = new PointPresenter({
container: this.#pointListComponent.element,
@@ -49,13 +80,8 @@ export default class TripPresenter {
this.#pointPresenters.set(point.id, pointPresenter);
}
- #sortPoints = (sortType) => {
- this.#currentSortType = sortType;
- this.#points = sort[this.#currentSortType](this.#points);
- }
-
#renderPoints = () => {
- this.#points.forEach((point) => {
+ this.points.forEach((point) => {
this.#renderPoint(point);
});
};
@@ -63,13 +89,21 @@ export default class TripPresenter {
#clearPoints = () => {
this.#pointPresenters.forEach((presenter) => presenter.destroy());
this.#pointPresenters.clear();
+ this.#newPointPresenter.destroy();
}
#renderSort = () => {
const prevSortComponent = this.#sortComponent;
+ const sortTypes = Object.values(SortType)
+ .map((type) => ({
+ type,
+ isChecked: (type === this.#currentSortType),
+ isDisabled: !EnabledSortType[type]
+ }));
+
this.#sortComponent = new SortView({
- sortType: this.#currentSortType,
+ items: sortTypes,
onItemChange: this.#sortTypeChangeHandler
});
@@ -79,16 +113,23 @@ export default class TripPresenter {
} else {
render(this.#sortComponent, this.#tripContainer);
}
+ };
+
+ #renderMessage() {
+ this.#messageComponent = new MessageView({
+ filterType: this.#filterModel.get()
+ });
+ render(this.#messageComponent, this.#tripContainer);
}
+
#renderPointContainer = () => {
- this.#pointListComponent = new PointListView();
render(this.#pointListComponent, this.#tripContainer);
}
#renderBoard = () => {
- if (this.#points.length === 0) {
- render(new EmptyListView(), this.#tripContainer);
+ if (this.points.length === 0 && !this.#isCreating) {
+ this.#renderMessage();
return;
}
@@ -97,17 +138,63 @@ export default class TripPresenter {
this.#renderPoints();
};
- #pointChangeHandler = (updatedPoint) => {
- this.#points = updateItem(this.#points, updatedPoint);
- this.#pointPresenters.get(updatedPoint.id).init(updatedPoint);
+ #clearBoard = ({ resetSortType = false } = {}) => {
+ this.#clearPoints();
+ remove(this.#messageComponent);
+ remove(this.#sortComponent);
+ this.#sortComponent = null;
+
+ if (resetSortType) {
+ this.#currentSortType = SortType.DAY;
+ }
}
+ #pointChangeHandler = (actionType, updateType, update) => {
+ switch (actionType) {
+ case UserAction.UPDATE_POINT:
+ this.#pointsModel.update(updateType, update);
+ break;
+ case UserAction.DELETE_POINT:
+ this.#pointsModel.delete(updateType, update);
+ break;
+ case UserAction.ADD_POINT:
+ this.#pointsModel.add(updateType, update);
+ break;
+ }
+ };
+
+ #modelEventHandler = (updateType, data) => {
+ switch (updateType) {
+ case UpdateType.PATCH:
+ this.#pointPresenters?.get(data.id)?.init(data);
+ break;
+ case UpdateType.MINOR:
+ this.#clearBoard();
+ this.#renderBoard();
+ break;
+ case UpdateType.MAJOR:
+ this.#clearBoard({ resetSortType: true });
+ this.#renderBoard();
+ break;
+ }
+ };
+
#modeChangeHandler = () => {
this.#pointPresenters.forEach((presenter) => presenter.resetView());
+ this.#newPointPresenter.destroy();
};
+ #newPointDestroyHandler = () => {
+ this.#isCreating = false;
+ this.#newPointButtonPresenter.enableButton();
+ if (this.points.length === 0 && isCanceled) {
+ this.#clearBoard();
+ this.#renderBoard();
+ }
+ }
+
#sortTypeChangeHandler = (sortType) => {
- this.#sortPoints(sortType);
+ this.#currentSortType = sortType;
this.#clearPoints();
this.#renderSort();
this.#renderPoints();
diff --git a/src/render.js b/src/render.js
deleted file mode 100644
index c01e5a6..0000000
--- a/src/render.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const RenderPosition = {
- BEFOREBEGIN: 'beforebegin',
- AFTERBEGIN: 'afterbegin',
- BEFOREEND: 'beforeend',
- AFTEREND: 'afterend',
-};
-
-function createElement(template) {
- const newElement = document.createElement('div');
- newElement.innerHTML = template;
-
- return newElement.firstElementChild;
-}
-
-function render(component, container, place = RenderPosition.BEFOREEND) {
- container.insertAdjacentElement(place, component.getElement());
-}
-
-export { RenderPosition, createElement, render };
diff --git a/src/service/mock-service.js b/src/service/mock-service.js
index 8b2d2bf..724b2af 100644
--- a/src/service/mock-service.js
+++ b/src/service/mock-service.js
@@ -59,4 +59,16 @@ export default class MockService {
return generatePoint(type, destination.id, offerIds);
});
}
+
+ updatePoint(updatedPoint) {
+ return updatedPoint;
+ }
+
+ addPoint(data) {
+ return { ...data, id: crypto.randomUUID() };
+ }
+
+ deletePoint() {
+ //...
+ }
}
diff --git a/src/utils.js b/src/utils.js
index a185b19..e674817 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -117,6 +117,12 @@ function getPointsDurationDifference(pointA, pointB) {
return durationB - durationA;
}
+function isBigDifference(pointA, pointB) {
+ return pointA.dateFrom !== pointB.dateFrom
+ || pointA.basePrice !== pointB.basePrice
+ || getPointDuration(pointA.dateFrom, pointA.dateTo) !== getPointDuration(pointB.dateFrom, pointB.dateTo);
+}
+
export {
getDate,
getRandomInteger,
@@ -132,5 +138,6 @@ export {
updateItem,
getPointsDateDifference,
getPointsPriceDifference,
- getPointsDurationDifference
+ getPointsDurationDifference,
+ isBigDifference
}
diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js
index 5a3911d..e4b078c 100644
--- a/src/view/edit-point-view.js
+++ b/src/view/edit-point-view.js
@@ -1,8 +1,39 @@
import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
-import { POINT_EMPTY, TYPES, CITIES } from "../const.js";
+import { POINT_EMPTY, TYPES, CITIES, EditType } from "../const.js";
import { formatStringToDateTime } from '../utils.js';
import 'flatpickr/dist/flatpickr.min.css';
import flatpickr from 'flatpickr';
+import he from 'he';
+
+const ButtonLabel = {
+ CANCEL_DEFAULT: 'Cancel',
+ DELETE_DEFAULT: 'Delete',
+ SAVE_DEFAULT: 'Save'
+}
+
+const createSaveButtonTemplate = () => {
+ const label = ButtonLabel.SAVE_DEFAULT;
+ return ``;
+}
+
+const createResetButtonTemplate = ({ pointType }) => {
+ const label = pointType === EditType.CREATING
+ ? ButtonLabel.CANCEL_DEFAULT
+ : ButtonLabel.DELETE_DEFAULT;
+ return ``;
+}
+
+const createRollupButtonTemplate = () => {
+ return ``
+}
+
+const createPointEditControlsTemplate = ({ pointType }) => {
+ return `
+ ${createSaveButtonTemplate()}
+ ${createResetButtonTemplate({ pointType })}
+ ${(pointType === EditType.EDITING) ? createRollupButtonTemplate() : ''}
+ `;
+}
const createPointCitiesOptionsTemplate = () => {
return (
@@ -30,8 +61,7 @@ const createPointTypesTemplate = (currentType) => {
}
const createPointOffersTemplate = ({ offersId, currentOffers }) => {
- console.log(offersId)
- const offerItems = currentOffers.map((offer) => {
+ const offerItems = currentOffers.map(offer => {
const isChecked = offersId.includes(offer.id) ? 'checked' : '';
return (
`
+
+
+
-
-
+
+
+
+
Filter events
+ +
@@ -48,7 +78,7 @@ const createPointOffersTemplate = ({ offersId, currentOffers }) => {
return `
${offerItems}
`;
}
-const createEditPointTemplate = ({ state, pointDestination, pointOffers }) => {
+const createEditPointTemplate = ({ state, pointDestination, pointOffers, pointType }) => {
const { point } = state;
const { basePrice, dateFrom, dateTo, type } = point;
@@ -76,28 +106,24 @@ const createEditPointTemplate = ({ state, pointDestination, pointOffers }) => {
-
+
${createPointCitiesOptionsTemplate()}
-
+
—
-
+
-
+
-
-
-
+ ${createPointEditControlsTemplate({ pointType })}
-
-
-
`
- );
+
+
+ Trip events
+${message}
+Amsterdam — Chamonix — Geneva
-Mar 18 — 20
Total: € 1230