renamed, offers are working

htmlacademy-univer-js2 · Jun 17, 2024 · 28a79f5 · 28a79f5
1 parent a45f2a5
commit 28a79f5
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 75 deletions.
diff --git a/src/const.js b/src/const.js
@@ -14,7 +14,7 @@ const POINT_EMPTY = {
   type: DEFAULT_TYPE
 };
 
-const POINT_TYPE = [
+const pointTypes = [
   'Taxi',
   'Bus',
   'Train',
@@ -80,7 +80,7 @@ const TimeLimit = {
 export {POINT_EMPTY,
   AUTHORIZATION,
   END_POINT,
-  POINT_TYPE,
+  pointTypes,
   FilterType,
   SortType,
   UserAction,

diff --git a/src/model/offer-model.js b/src/model/offer-model.js
@@ -15,7 +15,7 @@ export default class OffersModel extends Observable{
   }
 
   getOffersByType(type) {
-    return this.#allOffers.find((offer) => offer.type === type);
+    return this.#allOffers.find((offer) => offer.type === type).offers;
   }
 
   async init(){

diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js
@@ -89,10 +89,12 @@ export default class PointPresenter {
   }
 
   setDeleting() {
-    this.#pointEditComponent.updateElement({
-      isDisabled: true,
-      isDeleting: true
-    });
+    if (this.#mode === Mode.EDITING){
+      this.#pointEditComponent.updateElement({
+        isDisabled: true,
+        isDeleting: true
+      });
+    }
   }
 
   setAborting() {
@@ -123,14 +125,6 @@ export default class PointPresenter {
     }
   }
 
-  #escKeyDownHandler = (evt) => {
-    if (evt.key === 'Escape' || evt.key === 'Esc') {
-      evt.preventDefault();
-      this.#pointEditComponent.reset(this.#point);
-      this.#replaceEditToPoint();
-    }
-  };
-
   #replacePointToEdit() {
     replace(this.#pointEditComponent, this.#pointComponent);
     document.addEventListener('keydown', this.#escKeyDownHandler);
@@ -145,6 +139,14 @@ export default class PointPresenter {
     this.#mode = Mode.DEFAULT;
   }
 
+  #escKeyDownHandler = (evt) => {
+      if (evt.key === 'Escape' || evt.key === 'Esc') {
+        evt.preventDefault();
+        this.#pointEditComponent.reset(this.#point);
+        this.#replaceEditToPoint();
+      }
+    };
+
   #handleFormSubmit = (update) => {
     const isMinorUpdate =
       !isDatesEqual(this.#point.dateFrom, update.dateFrom) ||

diff --git a/src/presenter/trip-info-presenter.js b/src/presenter/trip-info-presenter.js
@@ -1,6 +1,6 @@
 import { RenderPosition, remove, render, replace } from '../framework/render';
 import TripInfoView from '../view/trip-info-view';
-import { getInfofromPoints } from '../utils/trip-info';
+import { getInfoFromPoints } from '../utils/trip-info';
 
 export default class TripInfoPresenter {
   #tripInfoComponent = null;
@@ -30,7 +30,7 @@ export default class TripInfoPresenter {
     const destinations = this.#destinationModel.destinations;
     const offers = this.#offersModel.allOffers;
 
-    this.#tripInfoComponent = new TripInfoView({ info: getInfofromPoints({ points, destinations, offers }) });
+    this.#tripInfoComponent = new TripInfoView({ info: getInfoFromPoints({ points, destinations, offers }) });
 
     if (!prevTripInfoComponent) {
       render(

diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js
@@ -200,27 +200,45 @@ export default class TripPresenter {
         }
         break;
       case UserAction.ADD_POINT:
-        try {
-          this.#newPointPresenter.setSaving();
-          await this.#pointsModel.addPoint(updateType, update.point);
-        } catch (err) {
-          this.#newPointPresenter.setAborting();
+        if(update.point){
+          try {
+            this.#newPointPresenter.setSaving();
+            await this.#pointsModel.addPoint(updateType, update.point);
+          } catch (err) {
+            this.#newPointPresenter.setAborting();
+          }
+        } else {
+          try {
+            this.#newPointPresenter.setSaving();
+            await this.#pointsModel.addPoint(updateType, update);
+          } catch (err) {
+            this.#newPointPresenter.setAborting();
+          }
         }
         break;
       case UserAction.DELETE_POINT:
-        try {
-          this.#pointPresenters.get(update.point.id).setDeleting();
-          await this.#pointsModel.deletePoint(updateType, update.point);
-        } catch (err) {
-          this.#pointPresenters.get(update.point.id).setAborting();
+        if (update.point){
+          try {
+            this.#pointPresenters.get(update.point.id).setDeleting();
+            await this.#pointsModel.deletePoint(updateType, update.point);
+          } catch (err) {
+            this.#pointPresenters.get(update.point.id).setAborting();
+          }
+        } else {
+          try {
+            this.#pointPresenters.get(update.id).setDeleting();
+            await this.#pointsModel.deletePoint(updateType, update);
+          } catch (err) {
+            this.#pointPresenters.get(update.id).setAborting();
+          }
         }
         break;
     }
 
     this.#uiBlocker.unblock();
   };
 
-  #clearBoard = ({resetSortType = false} = {}) => {
+  #clearBoard = ({ resetSortType = false } = {}) => {
     this.#newPointPresenter.destroy();
     this.#pointPresenters.forEach((presenter) => presenter.destroy());
     this.#pointPresenters.clear();
@@ -248,7 +266,7 @@ export default class TripPresenter {
         this.#renderBoard();
         break;
       case UpdateType.MAJOR:
-        this.#clearBoard({resetSortType: true});
+        this.#clearBoard({ resetSortType: true });
         this.#renderBoard();
         break;
       case UpdateType.INIT:

diff --git a/src/template/editing-form-template.js b/src/template/editing-form-template.js
@@ -1,25 +1,27 @@
-import { POINT_TYPE, ButtonLabels, EditingType } from '../const';
+import { pointTypes, ButtonLabels, EditingType } from '../const';
 import { formatFullDate } from '../utils/day';
 import he from 'he';
 
-function createPointType({ currentType, isDisabled }) {
-  return POINT_TYPE.map((type) =>
+function createPointType(point) {
+  return pointTypes.map((type) =>
     `<div class="event__type-item">
-      <input id="event-type-${type.toLowerCase()}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type.toLowerCase()}"${currentType === type ? 'checked' : ''} ${isDisabled ? 'disabled' : ''}>
-      <label class="event__type-label  event__type-label--${type.toLowerCase()}" for="event-type-${type.toLowerCase()}-1" ${currentType === type ? 'checked' : ''}>${type}</label>
+      <input id="event-type-${type.toLowerCase()}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type.toLowerCase()}"${point.type === type ? 'checked' : ''}>
+      <label class="event__type-label  event__type-label--${type.toLowerCase()}" for="event-type-${type.toLowerCase()}-1" ${point.type === type ? 'checked' : ''}>${type}</label>
     </div>`).join('');
 }
 
-function createPointOffer({ offers, currentOffers, isDisabled }) {
-  return currentOffers.offers?.map((offer) => `
+function createPointOffer({ currentOffers, point, isDisabled }) {
+  return currentOffers.map((offer) => `
     <div class="event__offer-selector">
-      <input class="event__offer-checkbox  visually-hidden" ${isDisabled ? 'disabled' : ''} data-offer-id="${offer.id}"
-        id="event-offer-${he.encode(offer.id)}-1" type="checkbox" name="event-offer-${he.encode(offer.title)}" ${offers.includes(offer.id) ? 'checked' : ''}>
-        <label class="event__offer-label" for="event-offer-${he.encode(offer.id)}">
-        <span class="event__offer-title">${he.encode(offer.title)}</span>
-          &plus;&euro;&nbsp;
-        <span class="event__offer-price">${he.encode(String(offer.price))}</span>
-       </label>
+      <input class="event__offer-checkbox  visually-hidden" data-offer-id="${offer.id}"
+        id="event-offer-${offer.id}-1" type="checkbox" name="event-offer-${offer.id}"
+        ${point.offers.includes(offer.id) ? 'checked' : ''}
+        ${isDisabled ? 'disabled' : ''}>
+      <label class="event__offer-label" for="event-offer-${offer.id}-1">
+        <span class="event__offer-title">${offer.title}</span>
+        &plus;&euro;&nbsp;
+        <span class="event__offer-price">${offer.price}</span>
+      </label>
     </div>`).join('');
 }
 
@@ -43,10 +45,10 @@ function createDestination(destination) {
 }
 
 function createPointDestinations(destinations) {
-  return ( `${destinations.map((destination) => `<option value="${destination.name}"></option>`).join('')} `);
+  return ( `${destinations.map((destination) => `<option value="${he.encode(destination.name)}"></option>`).join('')} `);
 }
 
-function createResetButtonTemplate({ pointType, isDisabled, isDeleting }) {
+function createResetButton({ pointType, isDisabled, isDeleting }) {
   let label;
 
   if (pointType === EditingType.NEW) {
@@ -58,7 +60,7 @@ function createResetButtonTemplate({ pointType, isDisabled, isDeleting }) {
     ${isDisabled ? 'disabled' : ''}>${label}</button>`;
 }
 
-function createSaveButtonTemplate({ isSaving, isDisabled }) {
+function createSaveButton({ isSaving, isDisabled }) {
   const label = isSaving ? ButtonLabels.SAVE_IN_PROGRESS : ButtonLabels.SAVE_DEFAULT;
   return `<button class="event__save-btn  btn  btn--blue" type="submit"
     ${isDisabled ? 'disabled' : ''}>${label}</button>`;
@@ -71,18 +73,17 @@ function createRollupButton(isDisabled) {
     </button>`;
 }
 
-function createButtonsTemplate({ pointType, isSaving, isDeleting, isDisabled }) {
-  return `${createSaveButtonTemplate({ isSaving, isDisabled })}
-        ${createResetButtonTemplate({ pointType, isDeleting, isDisabled })}
+function createButtons({ pointType, isSaving, isDeleting, isDisabled }) {
+  return `${createSaveButton({ isSaving, isDisabled })}
+        ${createResetButton({ pointType, isDeleting, isDisabled })}
         ${pointType === EditingType.UPDATE ? createRollupButton(isDisabled) : ''}`;
 }
 
-function createEditPointTemplate({state, pointDestinations, pointOffers, pointType}) {
+function createEditPointTemplate({ state, pointDestinations, pointOffers, pointType }) {
   const { point, isDisabled, isSaving, isDeleting } = state;
-  const { dateFrom, dateTo, basePrice, offers, type } = point;
 
   const currentDestination = pointDestinations.find((destination) => destination.id === point.destination);
-  const currentOffers = pointOffers.find((offer) => offer.type === point.type);
+  const currentOffers = pointOffers.find((offer) => offer.type === point.type).offers;
   const destinationName = (currentDestination) ? currentDestination.name : '';
 
   return (`
@@ -92,19 +93,19 @@ function createEditPointTemplate({state, pointDestinations, pointOffers, pointTy
         <div class="event__type-wrapper">
           <label class="event__type  event__type-btn" for="event-type-toggle-1">
             <span class="visually-hidden">Choose event type</span>
-            <img class="event__type-icon" width="17" height="17" src="img/icons/${point.type}.png" alt="Event type icon">
+            <img class="event__type-icon" width="17" height="17" src="img/icons/${he.encode(point.type)}.png" alt="Event type icon">
           </label>
-          <input class="event__type-toggle  visually-hidden" id="event-type-toggle-1" type="checkbox">
+          <input class="event__type-toggle  visually-hidden" id="event-type-toggle-1" type="checkbox" ${isDisabled ? 'disabled' : ''}>
           <div class="event__type-list">
             <fieldset class="event__type-group">
               <legend class="visually-hidden">Event type</legend>
-              ${createPointType({ type, isDisabled })}
+              ${createPointType(point)}
             </fieldset>
           </div>
         </div>
         <div class="event__field-group  event__field-group--destination">
           <label class="event__label  event__type-output" for="event-destination-1">
-            ${point.type}
+            ${he.encode(point.type)}
           </label>
           <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${he.encode(destinationName)}" list="destination-list-1" ${isDisabled ? 'disabled' : ''}>
           <datalist id="destination-list-1"/>
@@ -113,32 +114,31 @@ function createEditPointTemplate({state, pointDestinations, pointOffers, pointTy
         </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="${dateFrom ? formatFullDate(dateFrom) : ''}" ${isDisabled ? 'disabled' : ''}>
+          <input class="event__input  event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="${point.dateFrom ? formatFullDate(point.dateFrom) : ''}" ${isDisabled ? 'disabled' : ''}>
           &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=${dateTo ? formatFullDate(dateTo) : ''} ${isDisabled ? 'disabled' : ''}>
+          <input class="event__input  event__input--time" id="event-end-time-1" type="text" name="event-end-time" value=${point.dateTo ? formatFullDate(point.dateTo) : ''} ${isDisabled ? 'disabled' : ''}>
         </div>
         <div class="event__field-group  event__field-group--price">
           <label class="event__label" for="event-price-1">
             <span class="visually-hidden">Price</span>
             &euro;
           </label>
-          <input class="event__input  event__input--price" id="event-price-1" type="number" name="event-price" value="${he.encode(String(basePrice))}" ${isDisabled ? 'disabled' : ''}>
+          <input class="event__input  event__input--price" id="event-price-1" type="number" name="event-price" value="${he.encode(String(point.basePrice))}" ${isDisabled ? 'disabled' : ''}>
         </div>
-        ${createButtonsTemplate({ pointType, isSaving, isDeleting, isDisabled })}
+        ${createButtons({ pointType, isSaving, isDeleting, isDisabled })}
       </header>
       <section class="event__details">
-      ${currentOffers.offers.length ? `
-        <section class="event__section  event__section--offers">
+        ${currentOffers.length ?
+        `<section class="event__section  event__section--offers">
           <h3 class="event__section-title  event__section-title--offers">Offers</h3>
 
           <div class="event__available-offers">
-            ${createPointOffer({ offers, currentOffers, isDisabled })}
+            ${createPointOffer({ currentOffers, point, isDisabled })}
           </div>
         </section>` : ''}
-        ${currentDestination?.description && currentDestination?.pictures.length ? `<section class="event__section  event__section--destination">
-          ${createDestination(currentDestination)}
-        </section>` : ''}
+
+        ${point.destination ? createDestination(currentDestination) : ''}
       </section>
     </form>
   </li>`);

diff --git a/src/template/list-points-template.js b/src/template/list-points-template.js
@@ -3,7 +3,7 @@ import he from 'he';
 
 function createOffers({ currentOffers, offers }) {
   return `<ul class="event__selected-offers">
-    ${currentOffers.offers.filter((offer) => offers.includes(offer.id)).map((offer) => `
+    ${currentOffers.filter((offer) => offers.includes(offer.id)).map((offer) => `
       <li class="event__offer">
         <span class="event__offer-title">${offer.title}</span>
         &plus;&euro;&nbsp;

diff --git a/src/utils/trip-info.js b/src/utils/trip-info.js
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import { sortPointsByDay } from '../utils/points';
 
-function getInfofromPoints({ points, destinations, offers }) {
+function getInfoFromPoints({ points, destinations, offers }) {
   if (!points || !destinations || !offers) {
     return {
       destinationsString: '',
@@ -11,12 +11,12 @@ function getInfofromPoints({ points, destinations, offers }) {
   }
 
   const sortedPoints = [...points.sort(sortPointsByDay)];
-  const arrayOfDestinations = [];
+  const destinationsList = [];
   let totalPrice = 0;
 
   sortedPoints.forEach((point) => {
     const destination = destinations.find((dest) => dest.id === point.destination).name;
-    arrayOfDestinations.push(destination);
+    destinationsList.push(destination);
 
     const offersOfCurrentType = offers.find((offer) => offer.type === point.type);
     offersOfCurrentType.offers.forEach((offer) => {
@@ -28,7 +28,7 @@ function getInfofromPoints({ points, destinations, offers }) {
   });
 
   return {
-    destinationsString: createViewOfPath(arrayOfDestinations),
+    destinationsString: createViewOfPath(destinationsList),
     datesString: createViewOfDates(sortedPoints[0]?.dateFrom, sortedPoints[sortedPoints.length - 1]?.dateTo),
     totalPrice: `&euro;&nbsp;${totalPrice}`
   };
@@ -56,4 +56,4 @@ function createViewOfDates(dateA, dateB) {
   return dateA && dateB ? `${dayjs(dateA).format('D MMM').toUpperCase()}&nbsp;&mdash;&nbsp;${dayjs(dateB).format('D MMM').toUpperCase()}` : '';
 }
 
-export { getInfofromPoints };
+export { getInfoFromPoints };
diff --git a/src/view/editing-form-view.js b/src/view/editing-form-view.js
@@ -56,7 +56,7 @@ export default class EditPointView extends AbstractStatefulView {
     }
   };
 
-  reset = (point) => { this.updateElement(EditPointView.parsePointToState(point),);};
+  reset = (point) => { this.updateElement(EditPointView.parsePointToState(point),); };
 
   _restoreHandlers = () => {
     this.element
@@ -98,7 +98,7 @@ export default class EditPointView extends AbstractStatefulView {
 
   #resetClickHandler = (evt) => {
     evt.preventDefault();
-    this.#handleResetClick(EditPointView.parseStateToPoint(this._state));
+    this.#handleResetClick();
   };
 
   #deleteClickHandler = (evt) => {
@@ -121,7 +121,7 @@ export default class EditPointView extends AbstractStatefulView {
     this._setState({
       point: {
         ...this._state.point,
-        offers: checkedOffers.map((element) => element.dataset.offerId)
+        offers: checkedOffers.map((element)  => element.dataset.offerId)
       }
     });
   };