From b7cab3a6331c7ab629d840808e43f079b3c70844 Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Wed, 22 May 2024 19:00:30 +0500 Subject: [PATCH 1/2] =?UTF-8?q?6.6.=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=B5=D0=BA=D0=B0=20(=D1=87?= =?UTF-8?q?=D0=B0=D1=81=D1=82=D1=8C=201)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/const.js | 3 +- src/presenter/point-presenter.js | 1 + src/template/editing-form-template.js | 33 +++++--- src/view/editing-form-view.js | 112 ++++++++++++++++++++++---- 4 files changed, 118 insertions(+), 31 deletions(-) diff --git a/src/const.js b/src/const.js index 05f4b9e..7edc280 100644 --- a/src/const.js +++ b/src/const.js @@ -76,7 +76,8 @@ const SortType = [{ }]; export {POINT_EMPTY, - POINT_TYPE, DESTINATION, + POINT_TYPE, + DESTINATION, DESCRIPTION, OFFERS, DESTINATION_COUNT, diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index 8d90326..0fc8be5 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -83,6 +83,7 @@ export default class PointPresenter { resetView() { if (this.#mode !== Mode.DEFAULT) { + this.#pointEditComponent.reset(this.#point); this.#replaceEditToPoint(); } } diff --git a/src/template/editing-form-template.js b/src/template/editing-form-template.js index 15fc8ad..9d6fb4d 100644 --- a/src/template/editing-form-template.js +++ b/src/template/editing-form-template.js @@ -2,6 +2,24 @@ import { POINT_TYPE, OFFERS } from '../const'; import { formatFullDate } from '../utils/day'; import { getRandomValue } from '../utils/common'; +function createPointType() { + return POINT_TYPE.map((type) => `
+ + +
`).join(''); +} + +function createPointOffer() { + return OFFERS.map((offer) => `
+ + +
`).join('') +} + function createEditPointTemplate({point}) { return `
  • @@ -16,11 +34,7 @@ function createEditPointTemplate({point}) {
    - - ${POINT_TYPE.map((type) => `
    - - -
    `).join('')} + ${createPointType()}
    @@ -64,14 +78,7 @@ function createEditPointTemplate({point}) {

    Offers

    - ${OFFERS.map((offer) => `
    - - -
    `).join('')} + ${createPointOffer()}
    diff --git a/src/view/editing-form-view.js b/src/view/editing-form-view.js index 87a63c2..cdef018 100644 --- a/src/view/editing-form-view.js +++ b/src/view/editing-form-view.js @@ -1,46 +1,124 @@ -import AbstractView from '../framework/view/abstract-view.js'; +import AbstractStatefulView from '../framework/view/abstract-stateful-view.js'; import { createEditPointTemplate } from '../template/editing-form-template.js'; import { POINT_EMPTY } from '../const.js'; -export default class EditPointView extends AbstractView { - #point = null; +export default class EditPointView extends AbstractStatefulView { + //#point = null; #pointDestinations = null; #pointOffers = null; - #onResetClick = null; - #onSubmitClick = null; + #handleResetClick = null; + #handleSubmitClick = null; constructor({point = POINT_EMPTY, pointDestinations, pointOffers, onResetClick, onSubmitClick}) { super(); - this.#point = point; + //this.#point = point; this.#pointDestinations = pointDestinations; this.#pointOffers = pointOffers; - this.#onResetClick = onResetClick; - this.#onSubmitClick = onSubmitClick; + this.#handleResetClick = onResetClick; + this.#handleSubmitClick = onSubmitClick; - this.element - .querySelector('form') - .addEventListener('submit', this.#formSubmitHandler); + this._setState(EditPointView.parsePointToState({point})); - this.element - .querySelector('.event__rollup-btn') - .addEventListener('click', this.#resetButtonClickHandler); + this._restoreHandlers(); } get template() { return createEditPointTemplate({ - point: this.#point, + point: this._state, pointDestinations: this.#pointDestinations, pointOffers: this.#pointOffers }); } + reset({point}) { + this.updateElement( + EditPointView.parsePointToState({point}), + ); + } + + _restoreHandlers = () => { + this.element + .querySelector('form') + .addEventListener('submit', this.#formSubmitHandler); + + this.element + .querySelector('.event__rollup-btn') + .addEventListener('click', this.#resetButtonClickHandler); + + this.element + .querySelector('.event__type-group') + .addEventListener('change', this.#typeChangeHandler); + + this.element + .querySelector('.event__available-offers') + .addEventListener('change', this.#offerChangeHandler); + + this.element + .querySelector('.event__input--price') + .addEventListener('change', this.#priceChangeHandler); + + this.element + .querySelector('.event__input--destination') + .addEventListener('change', this.#destinationChangeHandler); + }; + #formSubmitHandler = (evt) => { evt.preventDefalt(); - this.#onSubmitClick(this.#point); + this.#handleSubmitClick(EditPointView.parseStateToPoint(this._state)); }; #resetButtonClickHandler = (evt) => { evt.preventDefalt(); - this.#onResetClick(this.#point); + this.#handleResetClick(EditPointView.parseStateToPoint(this._state)); + }; + + #typeChangeHandler = (evt) => { + evt.preventDefalt(); + this.updateElement( { + point: { + ...this._state.point, + type: evt.target.value, + offers: [] + } + }); + }; + + #offerChangeHandler = (evt) => { + evt.preventDefalt(); + + const checkedOffers = Array.from(this.element.querySelectorAll('.event__offer-checkbox:checked')); + this._setState({ + point: { + ...this._state.point, + offers: checkedOffers.map((element) => element.dataset.offerId) + } + }); + }; + + #priceChangeHandler = (evt) => { + evt.preventDefalt(); + this._setState({ + point: { + ...this._state.point, + basePrice: evt.target.valueAsNumber + } + }); }; + + #destinationChangeHandler = (evt) => { + evt.preventDefalt(); + const selectedDestination = this.#pointDestinations + .find((pointDestination) => pointDestination.name === evt.target.value); + + const selectedDestinationId = (selectedDestination) ? selectedDestination.id : null; + this.updateElement({ + point: { + ...this._state.point, + destination: selectedDestinationId + } + }); + }; + + static parsePointToState = (point) => ({point}); + static parseStateToPoint = (state) => ({...state}); } From a6881c11518beb645d3f082fd70d5b7a0853d7f8 Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Wed, 22 May 2024 19:03:51 +0500 Subject: [PATCH 2/2] =?UTF-8?q?6.6.=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=B5=D0=BA=D0=B0=20(=D1=87?= =?UTF-8?q?=D0=B0=D1=81=D1=82=D1=8C=201)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/template/editing-form-template.js | 2 +- src/view/editing-form-view.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/template/editing-form-template.js b/src/template/editing-form-template.js index 9d6fb4d..b65d676 100644 --- a/src/template/editing-form-template.js +++ b/src/template/editing-form-template.js @@ -17,7 +17,7 @@ function createPointOffer() { +€  ${getRandomValue()} - `).join('') + `).join(''); } function createEditPointTemplate({point}) { diff --git a/src/view/editing-form-view.js b/src/view/editing-form-view.js index cdef018..33072da 100644 --- a/src/view/editing-form-view.js +++ b/src/view/editing-form-view.js @@ -86,7 +86,7 @@ export default class EditPointView extends AbstractStatefulView { #offerChangeHandler = (evt) => { evt.preventDefalt(); - const checkedOffers = Array.from(this.element.querySelectorAll('.event__offer-checkbox:checked')); + const checkedOffers = Array.from(this.element.querySelectorAll('.event__offer-checkbox:checked')); this._setState({ point: { ...this._state.point, @@ -120,5 +120,5 @@ export default class EditPointView extends AbstractStatefulView { }; static parsePointToState = (point) => ({point}); - static parseStateToPoint = (state) => ({...state}); + static parseStateToPoint = (state) => ({...state}); }