From ba43e58364f27c71b208a1b37f4c247f367aa74f Mon Sep 17 00:00:00 2001 From: KseniiaPan Date: Thu, 19 Sep 2024 14:28:46 +0300 Subject: [PATCH 1/4] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?= =?UTF-8?q?=20=D1=84=D1=80=D0=B5=D0=B9=D0=BC=D0=B2=D0=BE=D1=80=D0=BA,=20?= =?UTF-8?q?=D1=83=D1=81=D1=82=D0=B0=D0=BD=D0=BE=D0=B2=D0=B8=D1=82=20=D0=BB?= =?UTF-8?q?=D0=BE=D0=B0=D0=B4=D0=B5=D1=80=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ webpack.config.js | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 7670f40..ae4d084 100644 --- a/package.json +++ b/package.json @@ -20,9 +20,11 @@ "@babel/preset-env": "7.21.4", "babel-loader": "9.1.2", "copy-webpack-plugin": "11.0.0", + "css-loader": "6.7.3", "eslint": "8.38.0", "eslint-config-htmlacademy": "9.0.0", "html-webpack-plugin": "5.5.1", + "style-loader": "3.3.2", "webpack": "5.79.0", "webpack-cli": "5.0.1", "webpack-dev-server": "4.13.3" diff --git a/webpack.config.js b/webpack.config.js index 89ec3c6..ca796d9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -37,6 +37,10 @@ module.exports = { }, }, }, + { + test: /\.css$/i, + use: ['style-loader', 'css-loader'] + }, ], }, }; From df1c9bc21b95f91d4175d3ad071e5b88eb0ec224 Mon Sep 17 00:00:00 2001 From: KseniiaPan Date: Thu, 19 Sep 2024 16:19:17 +0300 Subject: [PATCH 2/4] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?= =?UTF-8?q?=20=D0=BD=D0=B0=D1=81=D0=BB=D0=B5=D0=B4=D0=BE=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5,=20=D0=BF=D1=80=D0=B8=D0=B2=D0=B0=D1=82=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D0=BF=D0=BE=D0=BB=D1=8F,=20=D1=83=D0=B4=D0=B0?= =?UTF-8?q?=D0=BB=D0=B8=D1=82=20=D0=BD=D0=B5=D0=B8=D1=81=D0=BF=D0=BE=D0=BB?= =?UTF-8?q?=D1=8C=D0=B7=D1=83=D0=B5=D0=BC=D1=8B=D0=B9=20=D0=BC=D0=BE=D0=B4?= =?UTF-8?q?=D1=83=D0=BB=D1=8C=20render?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 219 ++++++++++++++++++++++++++++- src/presenter/events-presenter.js | 59 ++++---- src/presenter/filters-presenter.js | 4 +- src/render.js | 19 --- src/view/event-add-view.js | 37 +++-- src/view/event-edit-view.js | 36 +++-- src/view/event-point-view.js | 31 ++-- src/view/events-list-view.js | 18 +-- src/view/filtes-view.js | 18 +-- src/view/sort-view.js | 18 +-- 10 files changed, 304 insertions(+), 155 deletions(-) delete mode 100644 src/render.js diff --git a/package-lock.json b/package-lock.json index 6511f4e..0d612f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,9 +15,11 @@ "@babel/preset-env": "7.21.4", "babel-loader": "9.1.2", "copy-webpack-plugin": "11.0.0", + "css-loader": "6.7.3", "eslint": "8.38.0", "eslint-config-htmlacademy": "9.0.0", "html-webpack-plugin": "5.5.1", + "style-loader": "3.3.2", "webpack": "5.79.0", "webpack-cli": "5.0.1", "webpack-dev-server": "4.13.3" @@ -3197,6 +3199,44 @@ "node": ">= 8" } }, + "node_modules/css-loader": { + "version": "6.7.3", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz", + "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==", + "dev": true, + "dependencies": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.19", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.3.8" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/css-loader/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/css-select": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", @@ -3225,6 +3265,18 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/dayjs": { "version": "1.11.13", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", @@ -4764,6 +4816,18 @@ "node": ">=0.10.0" } }, + "node_modules/icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -5571,6 +5635,24 @@ "multicast-dns": "cli.js" } }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -5983,9 +6065,9 @@ } }, "node_modules/picocolors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", "dev": true }, "node_modules/picomatch": { @@ -6064,6 +6146,112 @@ "node": ">=8" } }, + "node_modules/postcss": { + "version": "8.4.47", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", + "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.1.0", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-modules-extract-imports": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz", + "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-local-by-default": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz", + "integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==", + "dev": true, + "dependencies": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-scope": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz", + "integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.4" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "dependencies": { + "icss-utils": "^5.0.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -6826,6 +7014,15 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -6981,6 +7178,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-loader": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.2.tgz", + "integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==", + "dev": true, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/src/presenter/events-presenter.js b/src/presenter/events-presenter.js index d6fe012..58c54a6 100644 --- a/src/presenter/events-presenter.js +++ b/src/presenter/events-presenter.js @@ -5,50 +5,57 @@ import EventPointView from '../view/event-point-view.js'; import EventAddView from '../view/event-add-view.js'; -import { render, RenderPosition } from '../render.js'; +import { render } from '../framework/render.js'; export default class EventsPresenter { + #eventsContainer = null; + #pointsModel = null; + #destinationsModel = null; + #offersModel = null; + + #eventsListComponent = new EventsListView(); + + #eventsPoints = []; - eventsListComponent = new EventsListView(); constructor({ eventsContainer, pointsModel, destinationsModel, offersModel }) { - this.eventsContainer = eventsContainer; - this.pointsModel = pointsModel; - this.destinationsModel = destinationsModel; - this.offersModel = offersModel; + this.#eventsContainer = eventsContainer; + this.#pointsModel = pointsModel; + this.#destinationsModel = destinationsModel; + this.#offersModel = offersModel; } init() { - this.eventsPoints = [...this.pointsModel.getPoints()]; + this.#eventsPoints = [...this.#pointsModel.getPoints()]; - render(new SortView(), this.eventsContainer, RenderPosition.BEFOREEND); - render(this.eventsListComponent, this.eventsContainer, RenderPosition.BEFOREEND); + render(new SortView(), this.#eventsContainer); + render(this.#eventsListComponent, this.#eventsContainer); const eventEditing = new EventEditView({ - event: this.eventsPoints[0], - chosenDestination: this.destinationsModel.getDestinationsById(this.eventsPoints[0].destination), - chosenOffers: [...this.offersModel.getOffersById(this.eventsPoints[0].type, this.eventsPoints[0].offers)], - allDestinations: this.destinationsModel.getDestinations(), - allOffers: this.offersModel.getOffersByType(this.eventsPoints[0].type), + event: this.#eventsPoints[0], + chosenDestination: this.#destinationsModel.getDestinationsById(this.#eventsPoints[0].destination), + chosenOffers: [...this.#offersModel.getOffersById(this.#eventsPoints[0].type, this.#eventsPoints[0].offers)], + allDestinations: this.#destinationsModel.getDestinations(), + allOffers: this.#offersModel.getOffersByType(this.#eventsPoints[0].type), }); - render(eventEditing, this.eventsListComponent.getElement()); + render(eventEditing, this.#eventsListComponent.element); const eventAdding = new EventAddView({ - event: this.eventsPoints[this.eventsPoints.length - 1], - chosenDestination: this.destinationsModel.getDestinationsById(this.eventsPoints[0].destination), - chosenOffers: [...this.offersModel.getOffersById(this.eventsPoints[this.eventsPoints.length - 1].type, this.eventsPoints[this.eventsPoints.length - 1].offers)], - allDestinations: this.destinationsModel.getDestinations(), - allOffers: this.offersModel.getOffersByType(this.eventsPoints[this.eventsPoints.length - 1].type), + event: this.#eventsPoints[this.#eventsPoints.length - 1], + chosenDestination: this.#destinationsModel.getDestinationsById(this.#eventsPoints[0].destination), + chosenOffers: [...this.#offersModel.getOffersById(this.#eventsPoints[this.#eventsPoints.length - 1].type, this.#eventsPoints[this.#eventsPoints.length - 1].offers)], + allDestinations: this.#destinationsModel.getDestinations(), + allOffers: this.#offersModel.getOffersByType(this.#eventsPoints[this.#eventsPoints.length - 1].type), }); - render(eventAdding, this.eventsListComponent.getElement()); + render(eventAdding, this.#eventsListComponent.element); - for (let i = 0; i < this.eventsPoints.length; i++) { + for (let i = 0; i < this.#eventsPoints.length; i++) { const point = new EventPointView({ - event: this.eventsPoints[i], - destination: this.destinationsModel.getDestinationsById(this.eventsPoints[i].destination), - offers: [...this.offersModel.getOffersById(this.eventsPoints[i].type, this.eventsPoints[i].offers)] + event: this.#eventsPoints[i], + destination: this.#destinationsModel.getDestinationsById(this.#eventsPoints[i].destination), + offers: [...this.#offersModel.getOffersById(this.#eventsPoints[i].type, this.#eventsPoints[i].offers)] }); - render(point, this.eventsListComponent.getElement()); + render(point, this.#eventsListComponent.element); } } } diff --git a/src/presenter/filters-presenter.js b/src/presenter/filters-presenter.js index 65181ec..d3bc920 100644 --- a/src/presenter/filters-presenter.js +++ b/src/presenter/filters-presenter.js @@ -1,6 +1,6 @@ import FiltersView from '../view/filtes-view.js'; -import { render, RenderPosition } from '../render.js'; +import { render } from '../framework/render.js'; export default class FiltersPresenter { filtersComponent = new FiltersView(); @@ -10,6 +10,6 @@ export default class FiltersPresenter { } init() { - render(this.filtersComponent, this.filtersContainer, RenderPosition.BEFOREEND); + render(this.filtersComponent, this.filtersContainer); } } diff --git a/src/render.js b/src/render.js deleted file mode 100644 index 8c22c92..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/view/event-add-view.js b/src/view/event-add-view.js index 2e3fe10..6cb8683 100644 --- a/src/view/event-add-view.js +++ b/src/view/event-add-view.js @@ -1,4 +1,4 @@ -import {createElement} from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; import {TIME_FORMAT, EVENT_TYPES} from '../consts.js'; import {createOffersTemplate, createTypeTemplate} from './service.js'; import {humanizeEventDate} from '../utils.js'; @@ -81,28 +81,23 @@ function createEventAddingTemplate(event, chosenDestination, chosenOffers, allDe `; } -export default class EventAddView { - constructor({event, chosenDestination, chosenOffers, allDestinations, allOffers}) { - this.event = event; - this.chosenDestination = chosenDestination; - this.chosenOffers = chosenOffers; - this.allDestinations = allDestinations; - this.allOffers = allOffers; - } - - getTemplate() { - return createEventAddingTemplate(this.event, this.chosenDestination, this.chosenOffers, this.allDestinations, this.allOffers); - } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } +export default class EventAddView extends AbstractView { + #event = null; + #chosenDestination = null; + #chosenOffers = null; + #allDestinations = null; + #allOffers = null; - return this.element; + constructor({event, chosenDestination, chosenOffers, allDestinations, allOffers}) { + super(); + this.#event = event; + this.#chosenDestination = chosenDestination; + this.#chosenOffers = chosenOffers; + this.#allDestinations = allDestinations; + this.#allOffers = allOffers; } - removeElement() { - this.element = null; + get template() { + return createEventAddingTemplate(this.#event, this.#chosenDestination, this.#chosenOffers, this.#allDestinations, this.#allOffers); } } diff --git a/src/view/event-edit-view.js b/src/view/event-edit-view.js index 8dc3c77..6f93a7d 100644 --- a/src/view/event-edit-view.js +++ b/src/view/event-edit-view.js @@ -1,4 +1,4 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; import {TIME_FORMAT, EVENT_TYPES} from '../consts.js'; import {createOffersTemplate, createTypeTemplate} from './service.js'; import {humanizeEventDate} from '../utils.js'; @@ -76,28 +76,24 @@ function createEventEditingTemplate(event, chosenDestination, chosenOffers, allD `; } -export default class EventEditView { +export default class EventEditView extends AbstractView { + #event = null; + #chosenDestination = null; + #chosenOffers = null; + #allDestinations = null; + #allOffers = null; + constructor({event, chosenDestination, chosenOffers, allDestinations, allOffers}) { - this.event = event; - this.chosenDestination = chosenDestination; - this.chosenOffers = chosenOffers; - this.allDestinations = allDestinations; - this.allOffers = allOffers; + super(); + this.#event = event; + this.#chosenDestination = chosenDestination; + this.#chosenOffers = chosenOffers; + this.#allDestinations = allDestinations; + this.#allOffers = allOffers; } - getTemplate() { - return createEventEditingTemplate(this.event, this.chosenDestination, this.chosenOffers, this.allDestinations, this.allOffers); + get template() { + return createEventEditingTemplate(this.#event, this.#chosenDestination, this.#chosenOffers, this.#allDestinations, this.#allOffers); } - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/event-point-view.js b/src/view/event-point-view.js index d2c9e46..931d894 100644 --- a/src/view/event-point-view.js +++ b/src/view/event-point-view.js @@ -1,4 +1,4 @@ -import {createElement} from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; import {TIME_FORMAT} from '../consts.js'; import {humanizeEventDate, getEventDuration} from '../utils.js'; @@ -46,26 +46,19 @@ function createEventTemplate(event, destination, offers) { `; } -export default class EventPointView { - constructor({event, destination, offers}) { - this.event = event; - this.destination = destination; - this.offers = offers; - } - - getTemplate() { - return createEventTemplate(this.event, this.destination, this.offers); - } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } +export default class EventPointView extends AbstractView { + #event = null; + #destination = null; + #offers = null; - return this.element; + constructor({event, destination, offers}) { + super(); + this.#event = event; + this.#destination = destination; + this.#offers = offers; } - removeElement() { - this.element = null; + get template() { + return createEventTemplate(this.#event, this.#destination, this.#offers); } } diff --git a/src/view/events-list-view.js b/src/view/events-list-view.js index a30db69..ed5a474 100644 --- a/src/view/events-list-view.js +++ b/src/view/events-list-view.js @@ -1,25 +1,13 @@ -import {createElement} from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; function createEventsListTemplate() { return `