@@ -75,27 +78,38 @@ function editPointTemplate(point, destination, typesTemplate, offersTemplate, pi
`;
}
-export default class EditPointView {
- constructor({pointData, destinationData, offersByType}) {
- this.pointData = pointData;
- this.destinationData = destinationData;
- this.offersByType = offersByType;
+export default class EditPointView extends AbstractView {
+ #point;
+ #destination;
+ #offersByType;
+ #handleSubmit;
+ #handleClick;
+
+ constructor({point = DEFAULT_POINT_DATA, destination, offersByType, handleSubmit, handleClick}) {
+ super();
+ this.#point = point;
+ this.#destination = destination;
+ this.#offersByType = offersByType;
+ this.#handleSubmit = handleSubmit;
+ this.element.querySelector('form').addEventListener('submit', this.#submitHandler);
+ this.#handleClick = handleClick;
+ this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#clickHandler);
}
- getTypesTemplate() {
+ get #typesTemplate() {
let typesTemplate = '';
for (let i = 0; i < TYPES.length; i++) {
- const isChecked = TYPES[i] === this.pointData.type ? 'checked' : '';
+ const isChecked = TYPES[i] === this.#point.type ? 'checked' : '';
typesTemplate += `
-
-
+
+
`;
}
return typesTemplate;
}
- getDestinationsTemplate() {
+ get #destinationsTemplate() {
let destinationsTemplate = '';
for (let i = 0; i < DESTINATIONS.length; i++) {
destinationsTemplate += `
@@ -104,48 +118,46 @@ export default class EditPointView {
return destinationsTemplate;
}
- getOffersTemplate() {
+ get #offersTemplate() {
let offersTemplate = '';
- for (let i = 0; i < this.offersByType.length; i++) {
- const isChecked = this.offersByType[i].id in this.pointData.offers ? 'checked' : '';
- const offerShortName = this.offersByType[i].name.toLowerCase().split(' ').at(-1);
+ for (let i = 0; i < this.#offersByType.length; i++) {
+ const isChecked = this.#offersByType[i].id in this.#point.offers ? 'checked' : '';
+ const offerShortName = this.#offersByType[i].name.toLowerCase().split(' ').at(-1);
offersTemplate += `
-
-
`;
}
return offersTemplate;
}
- getPicturesTemplate() {
+ get #picturesTemplate() {
let picturesTemplate = '';
- for (let i = 0; i < this.destinationData.pictures.length; i++) {
- const picture = this.destinationData.pictures[i];
+ for (let i = 0; i < this.#destination.pictures.length; i++) {
+ const picture = this.#destination.pictures[i];
picturesTemplate += `
`;
}
return picturesTemplate;
}
- getTemplate() {
- return editPointTemplate(this.pointData, this.destinationData, this.getTypesTemplate(),
- this.getOffersTemplate(), this.getPicturesTemplate(), this.getDestinationsTemplate());
+ get template() {
+ return editPointTemplate(this.#point, this.#destination, this.#typesTemplate,
+ this.#offersTemplate, this.#picturesTemplate, this.#destinationsTemplate);
}
- getElement() {
- if (!this.element) {
- this.element = createElement(this.getTemplate());
- }
-
- return this.element;
- }
+ #submitHandler = (evt) => {
+ evt.preventDefault();
+ this.#handleSubmit();
+ };
- removeElement() {
- this.element = null;
- }
+ #clickHandler = (evt) => {
+ evt.preventDefault();
+ this.#handleClick();
+ };
}
diff --git a/src/view/filter-view.js b/src/view/filter-view.js
index e461319..fa1aae5 100644
--- a/src/view/filter-view.js
+++ b/src/view/filter-view.js
@@ -1,4 +1,4 @@
-import {createElement} from '../render.js';
+import AbstractView from '../framework/view/abstract-view.js';
function createFilterTemplate() {
return `
@@ -28,20 +28,8 @@ function createFilterTemplate() {
`;
}
-export default class FilterView {
- getTemplate() {
+export default class FilterView extends AbstractView {
+ get template() {
return createFilterTemplate();
}
-
- getElement() {
- if (!this.element) {
- this.element = createElement(this.getTemplate());
- }
-
- return this.element;
- }
-
- removeElement() {
- this.element = null;
- }
}
diff --git a/src/view/list-view.js b/src/view/list-view.js
index 49f1c03..e584047 100644
--- a/src/view/list-view.js
+++ b/src/view/list-view.js
@@ -1,23 +1,11 @@
-import {createElement} from '../render.js';
+import AbstractView from '../framework/view/abstract-view.js';
function createListTemplate() {
return '';
}
-export default class ListView {
- getTemplate() {
+export default class ListView extends AbstractView {
+ get template() {
return createListTemplate();
}
-
- getElement() {
- if (!this.element) {
- this.element = createElement(this.getTemplate());
- }
-
- return this.element;
- }
-
- removeElement() {
- this.element = null;
- }
}
diff --git a/src/view/list-point-view.js b/src/view/point-view.js
similarity index 62%
rename from src/view/list-point-view.js
rename to src/view/point-view.js
index 1db74ab..9a181b3 100644
--- a/src/view/list-point-view.js
+++ b/src/view/point-view.js
@@ -1,5 +1,5 @@
-import {createElement} from '../render.js';
import {humanizeDueDate, humanizeDueTime, humanizeDuration} from '../utils.js';
+import AbstractView from '../framework/view/abstract-view.js';
function createListPointTemplate(point, totalPrice, destination, selectedOffersTemplate, isFavorite) {
return `
@@ -39,51 +39,53 @@ function createListPointTemplate(point, totalPrice, destination, selectedOffersT
`;
}
-export default class ListPointView {
- constructor({pointData, destinationData, selectedOffersData}) {
- this.pointData = pointData;
- this.destinationData = destinationData;
- this.selectedOffersData = selectedOffersData;
+export default class ListPointView extends AbstractView {
+ #point;
+ #destination;
+ #selectedOffers;
+ #handleClick;
+
+ constructor({point, destination, selectedOffers, handleClick}) {
+ super();
+ this.#point = point;
+ this.#destination = destination;
+ this.#selectedOffers = selectedOffers;
+ this.#handleClick = handleClick;
+ this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#clickHandler);
}
- getSelectedOffersTemplate() {
+ get #selectedOffersTemplate() {
let selectedOffersTemplate = '';
- for (let i = 0; i < this.selectedOffersData.length; i++) {
+ for (let i = 0; i < this.#selectedOffers.length; i++) {
selectedOffersTemplate += `
- ${this.selectedOffersData[i].name}
+ ${this.#selectedOffers[i].name}
+€
- ${this.selectedOffersData[i].price}
+ ${this.#selectedOffers[i].price}
`;
}
return selectedOffersTemplate;
}
- getTotalPrice() {
- let totalPrice = this.pointData.basePrice;
- for (let i = 0; i < this.selectedOffersData.length; i++) {
- totalPrice += this.selectedOffersData[i].price;
+ get #totalPrice() {
+ let totalPrice = this.#point.basePrice;
+ for (let i = 0; i < this.#selectedOffers.length; i++) {
+ totalPrice += this.#selectedOffers[i].price;
}
return totalPrice;
}
- isFavorite() {
- return this.pointData.isFavorite ? 'event__favorite-btn--active' : '';
+ #isFavorite() {
+ return this.#point.isFavorite ? 'event__favorite-btn--active' : '';
}
- getTemplate() {
- return createListPointTemplate(this.pointData, this.getTotalPrice(), this.destinationData,
- this.getSelectedOffersTemplate(), this.isFavorite());
+ get template() {
+ return createListPointTemplate(this.#point, this.#totalPrice, this.#destination,
+ this.#selectedOffersTemplate, this.#isFavorite);
}
- getElement() {
- if (!this.element) {
- this.element = createElement(this.getTemplate());
- }
- return this.element;
- }
-
- removeElement() {
- this.element = null;
- }
+ #clickHandler = (evt) => {
+ evt.preventDefault();
+ this.#handleClick();
+ };
}
diff --git a/src/view/sort-view.js b/src/view/sort-view.js
index bd38720..6731c7c 100644
--- a/src/view/sort-view.js
+++ b/src/view/sort-view.js
@@ -1,4 +1,4 @@
-import {createElement} from '../render';
+import AbstractView from '../framework/view/abstract-view.js';
function createSortTemplate() {
return `
@@ -31,20 +31,8 @@ function createSortTemplate() {
`;
}
-export default class SortView {
- getTemplate() {
+export default class SortView extends AbstractView {
+ get template() {
return createSortTemplate();
}
-
- getElement() {
- if (!this.element) {
- this.element = createElement(this.getTemplate());
- }
-
- return this.element;
- }
-
- removeElement() {
- this.element = null;
- }
}
diff --git a/webpack.config.js b/webpack.config.js
index 69f3597..e917a26 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -37,6 +37,10 @@ module.exports = {
},
},
},
- ]
- }
+ {
+ test: /\.css$/i,
+ use: ['style-loader', 'css-loader']
+ },
+ ],
+ },
};