Merge pull request #13 from DashaKukartseva/module6-task2

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);
   }
-}
+}

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;}
+  }

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();