Большие перемены (часть 2)

src/view/modpoint.js

@@ -1,5 +1,7 @@
 import AbstractView from '../framework/view/abstract-view.js';
 import { POINT_TYPES, CITIES, POINT_EMPTY } from '../const.js';
+import flatpickr from 'flatpickr';
+import 'flatpickr/dist/flatpickr.min.css';
 import { firstLetterToUpperCase, firstLetterToLowerCase,formatStringToDateTime } from '../utils.js';
 
 function createPointTypesListElement(currentType) {
@@ -103,6 +105,9 @@ export default class EditablePointView extends AbstractView {
   #pointOffers = null;
   #onEditSubmit = null;
   #onRollupClick = null;
+  #datepickerFrom = null;
+  #datepickerTo = null;
+
   constructor({point = POINT_EMPTY, pointDestination, pointOffers, onEditSubmit, onResetClick}) {
     super();
     this.#point = point;
@@ -111,10 +116,8 @@ export default class EditablePointView extends AbstractView {
     this.#onEditSubmit = onEditSubmit;
     this.#onRollupClick = onResetClick;
 
-    this.element.querySelector('.event--edit')
-      .addEventListener('submit', this.#editSubmitHandler);
-    this.element.querySelector('.event__reset-btn')
-      .addEventListener('click', this.#resetClickHandler);
+    this._setState(EditablePointView.parseEventToState(point));
+    this._restoreHandlers();
   }
 
   get template() {
@@ -125,13 +128,129 @@ export default class EditablePointView extends AbstractView {
     });
   }
 
+  removeElement() {
+    super.removeElement();
+
+    if (this.#datepickerFrom) {
+      this.#datepickerFrom.destroy();
+      this.#datepickerFrom = null;
+    }
+
+    if (this.#datepickerTo) {
+      this.#datepickerTo.destroy();
+      this.#datepickerTo = null;
+    }
+  }
+  reset(event) {
+    this.updateElement(
+      EditablePointView.parseEventToState(event),
+    );
+  }
+
+  _restoreHandlers() {
+    this.element.querySelector('.event--edit')
+      .addEventListener('submit', this.#editSubmitHandler);
+    this.element.querySelector('.event__rollup-btn')
+      .addEventListener('click', this.#rollupClickHandler);
+    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--destination')
+      .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();
-    this.#onEditSubmit(this.#point);
+    this.#onEditSubmit(EventEditView.parseStateToEvent(this._state));
   };
-
-  #resetClickHandler = (evt) => {
+  #rollupClickHandler = (evt) => {
     evt.preventDefault();
     this.#onRollupClick();
   };
-}
+  #typeChangeHandler = (evt) => {
+    this.updateElement({
+      type: evt.target.value,
+      offers: [],
+    });
+  };
+  #offerChangeHandler = () => {
+    const checkedBoxes = Array.from(this.element.querySelectorAll('.event__offer-checkbox:checked'));
+    this._setState({
+      ...this._state,
+      offers: checkedBoxes.map((element) => element.id),
+    });
+  };
+  #destinationChangeHandler = (evt) => {
+    const selectedDestination = this.#pointDestination.find((destination) => destination.name === evt.target.value);
+    this.updateElement({
+      destination: (selectedDestination) ? selectedDestination.id : null,
+    });
+  };
+  #priceChangeHandler = (evt) => {
+    this._setState({
+      ...this._state,
+      price: evt.target.value,
+    });
+  };
+  static parseEventToState(event) {
+    return {...event};
+  }
+  static parseStateToEvent(state) {
+    return {...state};
+  }
+}