From eb027a7dd31b6f5eb32bbe7bd8bf8a784232bfbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D1=81=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=A2=D0=BE=D0=BF=D0=BE=D1=80=D0=BA=D0=BE=D0=B2=D0=B0?=
 <belle_anastasiya@mail.ru>
Date: Tue, 28 May 2024 03:40:11 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=B5=D0=BA=D0=B0=20(=D1=87=D0=B0?=
 =?UTF-8?q?=D1=81=D1=82=D1=8C=202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json           | 15 ++++++-
 package.json                |  6 ++-
 src/service/mock-service.js | 17 ++------
 src/view/edit-point-view.js | 85 ++++++++++++++++++++++++++++++++++---
 src/view/point-view.js      |  8 ++--
 5 files changed, 106 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9d5e77..ff003bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "big-trip",
       "version": "19.0.0",
       "dependencies": {
-        "dayjs": "1.11.6"
+        "dayjs": "1.11.6",
+        "flatpickr": "4.6.13"
       },
       "devDependencies": {
         "@babel/core": "7.20.5",
@@ -19,7 +20,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"
@@ -4286,6 +4287,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="
+    },
     "node_modules/flatted": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
@@ -11089,6 +11095,11 @@
         "rimraf": "^3.0.2"
       }
     },
+    "flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="
+    },
     "flatted": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
diff --git a/package.json b/package.json
index 2c9d1a4..779fe47 100644
--- 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
index fbcf25b..8b2d2bf 100644
--- 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
index 63cab6b..5a3911d 100644
--- 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
index dc54526..6d13c8a 100644
--- 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">