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 @@
-
+const getPointOfferItem = (pointOffer, pointOfferChecked, offerId) => `
-
-
-
-
-
- Offers
-
-
- ${offersArray.map((pointOffer) => getPointOfferItem(pointOffer, getOfferCheckedAttribute(pointOffer.id))).join('')}
-
-
-
-
- Destination
- ${description}
-
+ ${getOffersInfo(allOffers, pointOffers) ?? ''}
+ ${getDestinationInfo(description, pictures) ?? ''}
`;
}
export default class EditPointView extends AbstractStatefulView {
- #offers = null;
- #destinations = null;
+ #allOffers = [];
+ #allDestinations = [];
#handleEditClick = null;
#handleFormSave = null;
#handleFormDelete = null;
#dateFromPicker = null;
#dateToPicker = null;
+ #isNewPoint = null;
_state = {};
- constructor({ point, offers, destinations, onEditClick, onFormSaveClick, onFormDeleteClick }) {
+ constructor({ point, offers, destinations, onEditClick, onFormSaveClick, onFormDeleteClick, isNewPoint }) {
super();
this._setState(EditPointView.parsePointToState(point));
- this.#offers = offers;
- this.#destinations = destinations;
+ this.#allOffers = offers;
+ this.#allDestinations = destinations;
this.#handleEditClick = onEditClick;
this.#handleFormSave = onFormSaveClick;
this.#handleFormDelete = onFormDeleteClick;
+ this.#isNewPoint = isNewPoint;
this._restoreHandlers();
}
get template() {
- return createEditPointTemplate(this._state, this.#offers, this.#destinations);
+ return createEditPointTemplate(this._state, this.#allOffers, this.#allDestinations, this.#isNewPoint);
}
removeElement() {
@@ -167,11 +199,19 @@ export default class EditPointView extends AbstractStatefulView {
}
_restoreHandlers() {
- this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler);
+ if (!this.#isNewPoint) {
+ 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);
- this.element.querySelector('.event__input--price').addEventListener('input', this.#formPriceInputHandler);
+
+ if (this.element.querySelector('.event__available-offers')) {
+ this.element.querySelector('.event__available-offers').addEventListener('change', this.#offersChooseHandler);
+ }
+
+ this.element.querySelector('.event__input--price').addEventListener('change', this.#formPriceInputHandler);
this.element.querySelector('.event__input--destination').addEventListener('change', this.#formDestinationChangeHandler);
this.#setDateFromPicker();
@@ -199,15 +239,23 @@ export default class EditPointView extends AbstractStatefulView {
#formDeleteHandler = (evt) => {
evt.preventDefault();
- this.#handleFormDelete(EditPointView.parseStateToPoint(this._state));
+
+ if (this.#isNewPoint) {
+ this.#handleFormDelete();
+ } else {
+ this.#handleFormDelete(EditPointView.parseStateToPoint(this._state));
+ }
};
#formPriceInputHandler = (evt) => {
evt.preventDefault();
-
- this.updateElement(({
- basePrice: evt.target.value,
- }));
+ if (Number.isFinite(Number(evt.target.value))) {
+ this.updateElement(({
+ basePrice: evt.target.value,
+ }));
+ return;
+ }
+ evt.target.value = '';
};
#formTypeChangeHandler = (evt) => {
@@ -216,16 +264,42 @@ export default class EditPointView extends AbstractStatefulView {
this.updateElement(({
type: evt.target.value,
- offers: getOffersByType(evt.target.value, this.#offers),
+ allOffers: getOffersByType(evt.target.value, this.#allOffers),
}));
};
+ #offersChooseHandler = (evt) => {
+ evt.preventDefault();
+
+ if (evt.target.tagName !== 'INPUT') {
+ return;
+ }
+
+ let updatedOffers = [];
+ const newOffer = Number(Object.values(evt.target.dataset));
+ const isNewOfferInList = this._state.offers.find((offer) => offer === newOffer) > 0;
+
+ if (isNewOfferInList) {
+ updatedOffers = this._state.offers.filter((offer) => offer !== newOffer);
+ } else {
+ updatedOffers = this._state.offers.concat(newOffer);
+ }
+
+ this.updateElement({
+ offers: updatedOffers,
+ });
+ };
+
#formDestinationChangeHandler = (evt) => {
evt.preventDefault();
- this.updateElement(({
- destination: getDestinationId(evt.target.value, this.#destinations),
- }));
+ this.#allDestinations.forEach((destination) => {
+ if (evt.target.value === destination.name) {
+ this.updateElement(({
+ destination: getDestinationId(evt.target.value, this.#allDestinations),
+ }));
+ }
+ });
};
#dateFromChangeHandler = ([userDate]) => {
@@ -247,6 +321,7 @@ export default class EditPointView extends AbstractStatefulView {
enableTime: true,
dateFormat: 'd/m/y H:i',
'time_24hr': true,
+ maxDate: humanizePointDate(this._state.dateTo, DATE_WITH_TIME_FORMAT),
defaultDate: humanizePointDate(this._state.dateFrom, DATE_WITH_TIME_FORMAT),
onChange: this.#dateFromChangeHandler,
}
diff --git a/src/view/filters-view.js b/src/view/filters-view.js
index bee3846..68d881f 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,26 @@ 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();
+ this.#handleFiltersChange(evt.target.dataset.filterType);
+ };
}
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);
}
}
diff --git a/src/view/point-item-view.js b/src/view/point-item-view.js
index 059568d..3161e4f 100644
--- a/src/view/point-item-view.js
+++ b/src/view/point-item-view.js
@@ -16,8 +16,11 @@ const getOffers = (type, offersList) => {
function createPointItemTemplate(point, offers, destinations) {
const { type, destination, dateFrom, dateTo, basePrice, isFavorite } = point;
+ let modifiedDestination = '';
- const modifiedDestination = destinations.find((destinationElement) => destinationElement.id === destination).name;
+ if (destination !== null) {
+ modifiedDestination = destinations.find((destinationElement) => destinationElement.id === destination).name;
+ }
const favoriteClassName = isFavorite ? 'event__favorite-btn event__favorite-btn--active' : 'event__favorite-btn';
@@ -58,16 +61,16 @@ function createPointItemTemplate(point, offers, destinations) {
export default class PointItemView extends AbstractView {
#point = null;
- #offers = null;
- #destinations = null;
+ #allOffers = [];
+ #allDestinations = [];
#handleEditClick = null;
#handleFavoriteClick = null;
constructor({ point, offers, destinations, onEditClick, onFavoriteClick }) {
super();
this.#point = point;
- this.#offers = offers;
- this.#destinations = destinations;
+ this.#allOffers = offers;
+ this.#allDestinations = destinations;
this.#handleEditClick = onEditClick;
this.#handleFavoriteClick = onFavoriteClick;
@@ -76,7 +79,7 @@ export default class PointItemView extends AbstractView {
}
get template() {
- return createPointItemTemplate(this.#point, this.#offers, this.#destinations);
+ return createPointItemTemplate(this.#point, this.#allOffers, this.#allDestinations);
}
#editClickHandler = (evt) => {
diff --git a/src/view/sorting-view.js b/src/view/sorting-view.js
index 1d6e66f..9dc9ef7 100644
--- a/src/view/sorting-view.js
+++ b/src/view/sorting-view.js
@@ -4,9 +4,6 @@ import { SortType } from '../const';
const getSortingItems = (sorting, currentSortType) =>
- // console.log(`sorting ${ sorting}`);
- // console.log(`current ${ currentSortType}`);
- // console.log(sorting === currentSortType ? 'checked' : '');
`