diff --git a/src/presenters/trippresenter.js b/src/presenters/trippresenter.js index a3fced7..70bf73c 100644 --- a/src/presenters/trippresenter.js +++ b/src/presenters/trippresenter.js @@ -3,7 +3,7 @@ import ListView from '../view/list.js'; import PointPresenter from './pointpresenter.js'; import NoPointView from '../view/nopoint.js'; import { updateItem } from '../utils.js'; -import { render, RenderPosition } from '../framework/render.js';; +import { render, RenderPosition } from '../framework/render.js'; export default class TripPointsPresenter { #listComponent = new ListView(); @@ -79,4 +79,4 @@ export default class TripPointsPresenter { pointPresenter.init(point); this.#pointPresenters.set(point.id, pointPresenter); } -} \ No newline at end of file +} diff --git a/src/service/mockservice.js b/src/service/mockservice.js index 4d454fb..2489fb9 100644 --- a/src/service/mockservice.js +++ b/src/service/mockservice.js @@ -8,36 +8,25 @@ export default class MockService { #destinations = null; #offers = null; #points = null; - constructor() { - this.#destinations = mockDestinations; - this.#offers = mockOffer; - this.#points = this.#generatePoints(); - } + constructor() { + this.#destinations = mockDestinations; + this.#offers = mockOffer; + this.#points = this.#generatePoints();} - #generatePoints() { - return Array.from({length: EVENT_COUNT}, () => { - const type = getRandomValue(POINT_TYPES); - const destinationIDs = (getRandomInteger(0, 1)) ? getRandomValue(this.#destinations).id : null; - const offersByType = this.#offers.find((offerByType) => offerByType.type === type); - const offersIDs = []; - offersByType.offers.forEach((offer) => { - if (getRandomInteger(0, 1)) { - offersIDs.push(offer.id); - } - }); - return generatePoint(type, offersIDs, destinationIDs); + #generatePoints() { + return Array.from({length: EVENT_COUNT}, () => { + const type = getRandomValue(POINT_TYPES); + const destinationIDs = (getRandomInteger(0, 1)) ? getRandomValue(this.#destinations).id : null; + const offersByType = this.#offers.find((offerByType) => offerByType.type === type); + const offersIDs = []; + offersByType.offers.forEach((offer) => { + if (getRandomInteger(0, 1)) { + offersIDs.push(offer.id);} }); - } - - get destinations() { - return this.#destinations; - } - - get offers() { - return this.#offers; - } - - get events() { - return this.#points; - } + return generatePoint(type, offersIDs, destinationIDs); + }); } + get destinations() {return this.#destinations;} + get offers() {return this.#offers;} + get events() {return this.#points;} + } diff --git a/src/view/modpoint.js b/src/view/modpoint.js index f313c78..d27ff74 100644 --- a/src/view/modpoint.js +++ b/src/view/modpoint.js @@ -111,12 +111,12 @@ export default class EditablePointView extends AbstractStatefulView { #datepickerFrom = null; #datepickerTo = null; - constructor({point = POINT_EMPTY, pointDestination, pointOffers, onEditSubmit, onResetClick}) { + constructor({point = POINT_EMPTY, pointDestination, pointOffers, onEditSubmit, onRollupClick}) { super(); this.#pointDestination = pointDestination; this.#pointOffers = pointOffers; this.#onEditSubmit = onEditSubmit; - this.#onRollupClick = onResetClick; + this.#onRollupClick = onRollupClick; this._setState(EditablePointView.parseEventToState(point)); this._restoreHandlers(); @@ -136,6 +136,19 @@ export default class EditablePointView extends AbstractStatefulView { ); } + removeElement() { + super.removeElement(); + + if (this.#datepickerFrom) { + this.#datepickerFrom.destroy(); + this.#datepickerFrom = null; + } + + if (this.#datepickerTo) { + this.#datepickerTo.destroy(); + this.#datepickerTo = null; + } + } _restoreHandlers() { this.element.querySelector('.event--edit') .addEventListener('submit', this.#editSubmitHandler); @@ -149,7 +162,54 @@ export default class EditablePointView extends AbstractStatefulView { .addEventListener('change', this.#destinationChangeHandler); this.element.querySelector('.event__input--price') .addEventListener('change', this.#priceChangeHandler); - } + this.#setDatepickers(); + } + + #dateFromCloseHandler = ([userDate]) => { + this._setState({ + ...this._state, + dateFrom: userDate}); + this.#datepickerTo.set('minDate', this._state.dateFrom); + }; + + #dateToCloseHandler = ([userDate]) => { + this._setState({ + ...this._state, + dateTo: userDate}); + this.#datepickerFrom.set('maxDate', this._state.dateTo); + }; + + #setDatepickers() { + const [dateFromElement, dateToElement] = this.element.querySelectorAll('.event__input--time'); + const commonConfig = { + dateFormat: 'd/m/y H:i', + enableTime: true, + locale: { + firstDayOfWeek: 1, + }, + 'time_24hr': true + }; + + this.#datepickerFrom = flatpickr( + dateFromElement, + { + ...commonConfig, + defaultDate: this._state.dateFrom, + onClose: this.#dateFromCloseHandler, + maxDate: this._state.dateTo, + }, + ); + + this.#datepickerTo = flatpickr( + dateToElement, + { + ...commonConfig, + defaultDate: this._state.dateTo, + onClose: this.#dateToCloseHandler, + minDate: this._state.dateFrom, + }, + ); + } #editSubmitHandler = (evt) => { evt.preventDefault();