Merge pull request #20 from lunianka/module6-task2

htmlacademy-univer-js2 · May 27, 2024 · e3fb8a9 · e3fb8a9
2 parents c833e98 + eb027a7
commit e3fb8a9
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "eslint": "8.28.0",
     "eslint-config-htmlacademy": "8.0.0",
     "html-webpack-plugin": "5.6.0",
-    "style-loader": "^3.3.1",
+    "style-loader": "3.3.1",
     "webpack": "5.75.0",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1"
@@ -33,6 +33,8 @@
     "node": "18"
   },
   "dependencies": {
-    "dayjs": "1.11.6"
+    "dayjs": "1.11.6",
+    "flatpickr": "4.6.13",
+    "he": "1.2.0"
   }
 }
diff --git a/src/service/mock-service.js b/src/service/mock-service.js
@@ -36,19 +36,10 @@ export default class MockService {
   }
 
   generateOffers() {
-    return TYPES.map((type) => {
-      const offers = Array.from({ length: getRandomInteger(0, OFFER_COUNT) }, () => generateOffer(type));
-
-      const offersWithRandomSelection = offers.map((offer, index) => ({
-        ...offer,
-        included: index < getRandomInteger(0, offers.length - 1)
-      }));
-
-      return {
-        type,
-        offers: offersWithRandomSelection
-      };
-    });
+    return TYPES.map((type) => ({
+      type,
+      offers: Array.from({ length: getRandomInteger(0, OFFER_COUNT) }, () => generateOffer(type))
+    }));
   }
 
   generatePoints() {

diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js
@@ -1,6 +1,8 @@
 import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
 import { POINT_EMPTY, TYPES, CITIES } from "../const.js";
 import { formatStringToDateTime } from '../utils.js';
+import 'flatpickr/dist/flatpickr.min.css';
+import flatpickr from 'flatpickr';
 
 const createPointCitiesOptionsTemplate = () => {
   return (
@@ -27,12 +29,13 @@ const createPointTypesTemplate = (currentType) => {
         </div>`).join('');
 }
 
-const createPointOffersTemplate = ({ currentOffers }) => {
-  const offerItems = currentOffers.map(offer => {
-    const isChecked = offer.included ? 'checked' : '';
+const createPointOffersTemplate = ({ offersId, currentOffers }) => {
+  console.log(offersId)
+  const offerItems = currentOffers.map((offer) => {
+    const isChecked = offersId.includes(offer.id) ? 'checked' : '';
     return (
       `<div class="event__offer-selector">
-                <input class="event__offer-checkbox  visually-hidden" id="${offer.id}" type="checkbox" name="event-offer-luggage" ${isChecked ? 'checked' : ''}>
+                <input class="event__offer-checkbox  visually-hidden" id="${offer.id}" type="checkbox" name="event-offer-luggage" ${isChecked}>
                 <label class="event__offer-label" for="${offer.id}">
                     <span class="event__offer-title">${offer.title}</span>
                     &plus;&euro;&nbsp;
@@ -99,7 +102,7 @@ const createEditPointTemplate = ({ state, pointDestination, pointOffers }) => {
                 <section class="event__details">
                     ${(currentOffers.length !== 0) ? `<section class="event__section  event__section--offers">
                         <h3 class="event__section-title  event__section-title--offers">Offers</h3>
-                        ${createPointOffersTemplate({ currentOffers })}
+                        ${createPointOffersTemplate({ offersId: point.offers, currentOffers })}
                     </section>` : ''}
                     ${(currentDestination) ? `<section class="event__section  event__section--destination">
                         <h3 class="event__section-title  event__section-title--destination">Destination</h3>
@@ -119,6 +122,8 @@ export default class EditPointView extends AbstractStatefulView {
   #pointOffers = null;
   #handleSubmitClick = null;
   #handleResetClick = null;
+  #datepickerFrom = null;
+  #datepickerTo = null;
 
   constructor({ point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onResetClick }) {
     super();
@@ -142,6 +147,20 @@ export default class EditPointView extends AbstractStatefulView {
 
   reset = (point) => this.updateElement({ point });
 
+  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('form').addEventListener('submit', this.#formSubmitHandler);
 
@@ -156,6 +175,8 @@ export default class EditPointView extends AbstractStatefulView {
     this.element.querySelector('.event__available-offers')?.addEventListener('change', this.#offerChangeHandler);
 
     this.element.querySelector('.event__input--price').addEventListener('change', this.#priceChangeHandler);
+
+    this.#setDatepickers();
   }
 
   #formSubmitHandler = (evt) => {
@@ -210,6 +231,60 @@ export default class EditPointView extends AbstractStatefulView {
     });
   };
 
+  #dateFromCloseHandler = ([userDate]) => {
+    this._setState({
+      point: {
+        ...this._state.point,
+        dateFrom: userDate
+      }
+    });
+
+    this.#datepickerTo.set('minDate', this._state.point.dateFrom);
+  }
+
+  #dateToCloseHandler = ([userDate]) => {
+    this._setState({
+      point: {
+        ...this._state.point,
+        dateTo: userDate
+      }
+    });
+
+    this.#datepickerFrom.set('maxDate', this._state.point.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.point.dateFrom,
+        onClose: this.#dateFromCloseHandler,
+        maxDate: this._state.point.dateTo,
+      },
+    );
+
+    this.#datepickerTo = flatpickr(
+      dateToElement,
+      {
+        ...commonConfig,
+        defaultDate: this._state.point.dateTo,
+        onClose: this.#dateToCloseHandler,
+        maxDate: this._state.point.dateFrom,
+      },
+    )
+  };
+
   static parsePointToState = ({ point }) => ({ point });
 
   static parseStateToPoint = (state) => state.point;

diff --git a/src/view/point-view.js b/src/view/point-view.js
@@ -1,8 +1,10 @@
 import AbstractView from '../framework/view/abstract-view.js';
 import { formatStringToDateTime, formatStringToShortDate, formatStringToTime, getPointDuration } from '../utils.js';
 
-const createPointOffersTemplate = ({ pointOffers }) => {
-  const selectedOffers = pointOffers.filter((offer) => offer.included);
+const createPointOffersTemplate = ({ offersId, pointOffers }) => {
+
+  const selectedOffers = pointOffers.filter((offer) => offersId.includes(offer.id));
+  console.log(selectedOffers)
 
   if (selectedOffers.length === 0) {
     return '';
@@ -45,7 +47,7 @@ const createPointTemplate = ({ point, pointDestination, pointOffers }) => {
                 &euro;&nbsp;<span class="event__price-value">${basePrice}</span>
             </p>
             <h4 class="visually-hidden">Offers:</h4>
-            ${createPointOffersTemplate({ pointOffers })}
+            ${createPointOffersTemplate({ offersId: point.offers, pointOffers })}
             <button class="event__favorite-btn ${favoriteClassName}" type="button">
                 <span class="visually-hidden">Add to favorite</span>
                 <svg class="event__favorite-icon" width="28" height="28" viewBox="0 0 28 28">