Merge pull request #12 from TeaWithSalt/module6-task2

htmlacademy-univer-js2 · May 27, 2024 · cb2e902 · cb2e902
2 parents 3d40be5 + 9c0308d
commit cb2e902
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -21,8 +21,6 @@ <h2 class="visually-hidden">Filter events</h2>
               <!-- Фильтры -->
             </div>
           </div>
-
-          <button class="trip-main__event-add-btn  btn  btn--big  btn--yellow" type="button">New event</button>
         </div>
       </div>
     </header>

diff --git a/src/const.js b/src/const.js
@@ -13,7 +13,7 @@ const UPDATE_TYPE = {
   MAJOR: 'MAJOR',
 };
 
-const DATE_FORMAT_EDIT = 'DD/MM/YY hh:mm';
+const DATE_FORMAT_EDIT = 'd/m/y H:i';
 const DATE_FORMAT_DAY = 'MMM DD';
 const DATE_FORMAT_HOURS = 'hh:mm';
 

diff --git a/src/model/waypoint-model.js b/src/model/waypoint-model.js
@@ -67,7 +67,6 @@ export default class WaypointsModel extends Observable {
       throw new Error('The point doesn\'t exist!');
     }
 
-
     try {
       const response = await this.#waypointsService.updateEvent(update);
       const adaptedWaypoint = this.#adapter(response);

diff --git a/src/presenter/new-waypoint-presenter.js b/src/presenter/new-waypoint-presenter.js
@@ -31,7 +31,7 @@ export default class NewWaypointPresenter {
     this.#newWaypointComponent = new EditingFormView({
       offers: this.#offers,
       destinations: this.#destinations,
-      waypoint: {type: 'flight', destination: '', basePrice: 0, offers: []},
+      waypoint: {type: 'flight', destination: '', basePrice: 0, offers: [], isFavorite: false},
       onFormSubmit: (newWaypoint) => this.#handleSaveClick(newWaypoint),
       onClose: () => this.#handleCancelClick(),
       onDelete: this.#handleCancelClick

diff --git a/src/utils.js b/src/utils.js
@@ -1,23 +1,10 @@
 import dayjs from 'dayjs';
 import {FILTER_TYPE, SORTING_TYPES} from './const';
 
-function getRandomArrayElement(items) {
-  return items[Math.floor(Math.random() * items.length)];
-}
-
-function getRandomArrayElements(items, n) {
-  const shuffled = items.sort(() => 0.5 - Math.random());
-  return shuffled.slice(0, n).sort();
-}
-
 function humanizeWaypointDueDate(dueDate, format) {
   return dueDate ? dayjs(dueDate).format(format) : '';
 }
 
-function getRandomInt(max) {
-  return Math.floor(Math.random() * max);
-}
-
 function countDuration(dateFrom, dateTo) {
   return dayjs(dateTo).diff(dateFrom, 'm');
 }
@@ -85,10 +72,7 @@ const sorts = {
 
 
 export {
-  getRandomArrayElement,
-  getRandomArrayElements,
   humanizeWaypointDueDate,
-  getRandomInt,
   countDuration,
   formatDuration,
   stringToDate,

diff --git a/src/view/editing-form-view.js b/src/view/editing-form-view.js
@@ -1,12 +1,14 @@
-import {humanizeWaypointDueDate, stringToDate} from '../utils.js';
+import {humanizeWaypointDueDate} from '../utils.js';
 import {ACTIONS, DATE_FORMAT_EDIT} from '../const.js';
 import AbstractStatefulView from '../framework/view/abstract-stateful-view';
-import dayjs from 'dayjs';
+import 'flatpickr/dist/flatpickr.min.css';
+import flatpickr from 'flatpickr';
+import he from 'he';
 
 function getEventOffer({id, title, price, isChecked}) {
   return `
     <div class="event__offer-selector">
-      <input class="event__offer-checkbox  visually-hidden" id="event-offer-${id}" type="checkbox" name="event-offer-${id}" data-offer-id="${id}" ${isChecked ? 'checked' : ''}>
+      <input class="event__offer-checkbox  visually-hidden" id="event-offer-${id}" type="checkbox" name="${he.encode(title)}" data-offer-id="${id}" ${isChecked ? 'checked' : ''}>
       <label class="event__offer-label" for="event-offer-${id}">
         <span class="event__offer-title">${title}</span>
         &plus;&euro;&nbsp;
@@ -27,7 +29,7 @@ function getEventOffers(allOffers, checkedOffers, type) {
 function getEventOfferType(allOffers, n) {
   return `
     <div class="event__type-item">
-    <input id="event-type-${allOffers[n].type}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${allOffers[n].type}">
+    <input id="event-type-${allOffers[n].type}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${he.encode(allOffers[n].type)}">
     <label class="event__type-label  event__type-label--${allOffers[n].type}" for="event-type-${allOffers[n].type}-1">${allOffers[n].type}</label>
     </div>
   `;
@@ -59,8 +61,7 @@ function getDestinations(destinations) {
   return result;
 }
 
-function createEditingFormTemplate(allDestinations, allOffers, {
-  editMode,
+function createEditingFormTemplate(allDestinations, allOffers, editMode, {
   type,
   destination,
   offers,
@@ -96,18 +97,18 @@ function createEditingFormTemplate(allDestinations, allOffers, {
             <label class="event__label  event__type-output" for="event-destination-1">
               ${waypointType}
             </label>
-            <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${destinationObject?.name || ''}" list="destination-list-1">
+            <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${he.encode(destinationObject?.name || '')}" list="destination-list-1">
             <datalist id="destination-list-1">
               ${getDestinations(allDestinations)}
             </datalist>
           </div>
 
           <div class="event__field-group  event__field-group--time">
             <label class="visually-hidden" for="event-start-time-1">From</label>
-            <input class="event__input  event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="${humanizeWaypointDueDate(dateFrom, DATE_FORMAT_EDIT)}">
+            <input class="event__input  event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="${he.encode(humanizeWaypointDueDate(dateFrom, DATE_FORMAT_EDIT))}">
             &mdash;
             <label class="visually-hidden" for="event-end-time-1">To</label>
-            <input class="event__input  event__input--time" id="event-end-time-1" type="text" name="event-end-time" value="${humanizeWaypointDueDate(dateTo, DATE_FORMAT_EDIT)}">
+            <input class="event__input  event__input--time" id="event-end-time-1" type="text" name="event-end-time" value="${he.encode(humanizeWaypointDueDate(dateTo, DATE_FORMAT_EDIT))}">
           </div>
 
           <div class="event__field-group  event__field-group--price">
@@ -119,7 +120,7 @@ function createEditingFormTemplate(allDestinations, allOffers, {
           </div>
 
           <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
-          <button class="event__reset-btn" type="reset">${editMode === ACTIONS.ADD_POINT ? 'Delete' : 'Cancel'}</button>
+          <button class="event__reset-btn" type="reset">${editMode === ACTIONS.UPDATE_POINT ? 'Delete' : 'Cancel'}</button>
           <button class="event__rollup-btn" type="button">
             <span class="visually-hidden">Open event</span>
           </button>
@@ -152,35 +153,50 @@ export default class EditingFormView extends AbstractStatefulView {
   #destinations;
   #onDelete;
   #editMode;
+  #datepickerFrom = null;
+  #datepickerTo = null;
 
   constructor({offers, destinations, waypoint, onFormSubmit, onClose, onDelete}) {
     super();
-    this.#editMode = this.#getEditMode();
     this._state = waypoint;
     this.#offers = offers;
     this.#destinations = destinations;
     this.editingForm = Object.assign({}, waypoint);
     this.#onFormSubmit = onFormSubmit;
     this.#onClose = onClose;
     this.#onDelete = onDelete;
+    this.#editMode = this.#getEditMode();
 
     this._restoreHandlers();
   }
 
   get template() {
-    return createEditingFormTemplate(this.#destinations, this.#offers, {editMode: this.#editMode, ...this._state});
+    return createEditingFormTemplate(this.#destinations, this.#offers,this.#editMode, {...this._state});
   }
 
   reset(waypoint) {
     waypoint = this.editingForm;
     this.updateElement(waypoint);
   }
 
+  removeElement() {
+    super.removeElement();
+
+    if (this.#datepickerFrom) {
+      this.#datepickerFrom.destroy();
+      this.#datepickerFrom = null;
+    }
+
+    if (this.#datepickerTo) {
+      this.#datepickerTo.destroy();
+      this.#datepickerTo = null;
+    }
+  }
+
   #getEditMode() {
     return this._state.id ? ACTIONS.UPDATE_POINT : ACTIONS.ADD_POINT;
   }
 
-
   #closeFormHandler = (event) => {
     event.preventDefault();
     this.#onClose();
@@ -217,24 +233,12 @@ export default class EditingFormView extends AbstractStatefulView {
     });
   };
 
-  #changeStartTimeHandler = (event) => {
-    event.preventDefault();
-    const dateValue = `${event.target.value}`;
-    const data = stringToDate(dateValue, 'dd/mm/yy hh:ii');
-    this._state.dateFrom = dayjs(data).format('YYYY-MM-DDTHH:mm:ss');
-    this.updateElement({
-      dateFrom: this._state.dateFrom,
-    });
+  #dateFromCloseHandler = ([userDate]) => {
+    this._setState({ dateFrom: userDate });
   };
 
-  #changeEndTimeHandler = (event) => {
-    event.preventDefault();
-    const dateValue = `${event.target.value}`;
-    const data = stringToDate(dateValue, 'dd/mm/yy hh:ii');
-    this._state.dateTo = dayjs(data).format('YYYY-MM-DDTHH:mm:ss');
-    this.updateElement({
-      dateTo: this._state.dateTo,
-    });
+  #dateToCloseHandler = ([userDate]) => {
+    this._setState({ dateTo: userDate });
   };
 
   #changeOffersHandler = (event) => {
@@ -249,12 +253,38 @@ export default class EditingFormView extends AbstractStatefulView {
     });
   };
 
-
   #deleteFromHandler = (evt) => {
     evt.preventDefault();
     this.#onDelete(this.editingForm);
   };
 
+  #initDatepickerFrom = () => {
+    this.#datepickerFrom = flatpickr(
+      this.element.querySelector('#event-start-time-1'),
+      {
+        ['time_24hr']: true,
+        dateFormat: DATE_FORMAT_EDIT,
+        defaultDate: this._state.dateFrom,
+        enableTime: true,
+        onChange: this.#dateFromCloseHandler,
+      }
+    );
+  };
+
+  #initDatepickerTo = () => {
+    this.#datepickerTo = flatpickr(
+      this.element.querySelector('#event-end-time-1'),
+      {
+        ['time_24hr']: true,
+        dateFormat: 'd/m/y H:i',
+        defaultDate: this._state.dateTo,
+        minDate: this.#datepickerFrom.selectedDates[0],
+        enableTime: true,
+        onChange: this.#dateToCloseHandler,
+      }
+    );
+  };
+
   _restoreHandlers() {
     this.element.querySelector('.event--edit').addEventListener('submit', this.#submitFormHandler);
     this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#closeFormHandler);
@@ -263,11 +293,12 @@ export default class EditingFormView extends AbstractStatefulView {
     });
     this.element.querySelector('.event__input--destination').addEventListener('input', this.#changeDestinationHandler);
     this.element.querySelector('.event__input--price').addEventListener('change', this.#changePriceHandler);
-    this.element.querySelector('input[name="event-start-time"]').addEventListener('change', this.#changeStartTimeHandler);
-    this.element.querySelector('input[name="event-end-time"]').addEventListener('change', this.#changeEndTimeHandler);
     this.element.querySelectorAll('.event__offer-checkbox').forEach((element) => {
       element.addEventListener('click', this.#changeOffersHandler);
     });
     this.element.querySelector('.event__reset-btn').addEventListener('click', this.#deleteFromHandler);
+
+    this.#initDatepickerFrom();
+    this.#initDatepickerTo();
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,8 +21,6 @@ <h2 class="visually-hidden">Filter events</h2> @@
                   <!-- Фильтры -->
                 </div>
               </div>
-              <button class="trip-main__event-add-btn  btn  btn--big  btn--yellow" type="button">New event</button>
             </div>
           </div>
         </header>
@@ Expand Down @@