Merge pull request #9 from PavelUd/module6-task1

htmlacademy-univer-js2 · May 23, 2024 · a4c6c39 · a4c6c39
2 parents fd601dc + 0496073
commit a4c6c39
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 40 deletions.
diff --git a/src/mock/destination.js b/src/mock/destination.js
@@ -11,7 +11,7 @@ export const getRandomDestination = () => {
     description: description,
     pictures: [
       {
-        'scr': `https://loremflickr.com/248/152?random=${crypto.randomUUID()}`,
+        'src': `https://loremflickr.com/248/152?random=${crypto.randomUUID()}`,
         'description' : `${city} description`
       }
     ]

diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js
@@ -47,8 +47,8 @@ export default class PointPresenter {
 
     this.#editPointElement = new PointEditView({
       point: this.#point,
-      pointDestination: this.#destinationsModel.getById(point.destination),
-      pointOffers: this.#offersModel.getByType(point.type),
+      destinations: this.#destinationsModel.getAll(),
+      offers: this.#offersModel.getAll(),
       onCloseEditPoint: this.#onCloseEditClick,
       onSubmiClick: this.#onSubmiClick,
     });
@@ -94,6 +94,7 @@ export default class PointPresenter {
   resetView = () =>{
     if(this.#mode !== Mode.DEFAULT){
       this.#replaceToPoint();
+      this.#editPointElement.reset(this.#point);
     }
   };
 

diff --git a/src/view/point-edit-view.js b/src/view/point-edit-view.js
@@ -1,43 +1,63 @@
 import { POINT_EMPTY, TYPES } from '../const.js';
-import AbstractView from '../framework/view/abstract-view.js';
+import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
 import {formatToSlashDate} from '../utils.js';
 
 function createTypesElements(typeArray){
 
   let typesElements = '';
   typeArray.forEach((type) => {
     typesElements += `<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()}">
-  <label class="event__type-label  event__type-label--${type.toLowerCase()}" for="event-type-taxi-1">${type}</label>
+  <input id="event-type-${type.toLowerCase()}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type}">
+  <label class="event__type-label  event__type-label--${type.toLowerCase()}" for="event-type-${type}-1">${type}</label>
 </div>`;
   });
 
   return typesElements;
 
 }
 
-function createOfferSelector(offersArray){
+function createDestinationPhotos(pointDestination){
+  let photos = '<div class="event__photos-tape">';
+  pointDestination.pictures.forEach((picture) =>{
+    photos += `<img class="event__photo" src="${picture.src}" alt="${picture.description}">`;
+  });
+  return `${photos}</div>`;
+}
+
+function createDestinationList(destinations){
+  let dataset = '<datalist id="destination-list-1">';
+  destinations.forEach((destination) =>{
+    dataset += `<option value="${destination.name}"></option>`;
+  });
+  return `${dataset}</datalist>`;
+
+}
 
+function createOfferSelector(pointOffers, offersArray){
   let offersElements = `<section class="event__section  event__section--offers">
-          <h3 class="event__section-title  event__section-title--offers">Offers</h3>`;
+          <h3 class="event__section-title  event__section-title--offers">Offers</h3>
+          <div class="event__available-offers">`;
 
-  offersArray.offers.forEach((offer, i) => {
+  offersArray.forEach((offer) => {
+    const checked = pointOffers.some((offerId) => offerId === offer.id) ? 'checked' : '';
     offersElements += `<div class="event__offer-selector">
-      <input class="event__offer-checkbox  visually-hidden" id="event-offer-meal-${++i}" type="checkbox" name="event-offer-meal">
-      <label class="event__offer-label" for="event-offer-meal-${i}">
+      <input class="event__offer-checkbox  visually-hidden" id="event-offer-meal-${offer.id}" type="checkbox" name="event-offer-meal" ${checked}>
+      <label class="event__offer-label" for="event-offer-meal-${offer.id}">
         <span class="event__offer-title">${offer.title}</span>
         &plus;&euro;&nbsp;
         <span class="event__offer-price">${offer.price}</span>
       </label>
     </div>`;
   });
 
-  offersElements += '</section>';
+  offersElements += '</div></section>';
 
   return offersElements;
 }
 
-function createPointEditElement({point, pointDestination, pointOffers}) {
+function createPointEditElement({point, destinations, offers}) {
+  const pointDestination = destinations.find((destination) => destination.id === point.destination);
+  const pointOffers = offers.find((subOffers) => subOffers.type === point.type).offers;
 
   const {basePrice, dateFrom, dateTo, type} = point;
 
@@ -65,11 +85,7 @@ function createPointEditElement({point, pointDestination, pointOffers}) {
           ${type}
           </label>
           <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${pointDestination.name}" list="destination-list-1">
-          <datalist id="destination-list-1">
-            <option value="Amsterdam"></option>
-            <option value="Geneva"></option>
-            <option value="Chamonix"></option>
-          </datalist>
+          ${createDestinationList(destinations)}
         </div>
 
         <div class="event__field-group  event__field-group--time">
@@ -95,56 +111,120 @@ function createPointEditElement({point, pointDestination, pointOffers}) {
         </button>
       </header>
       <section class="event__details">
-      ${createOfferSelector(pointOffers)}
+      ${createOfferSelector(point.offers, pointOffers)}
 
         <section class="event__section  event__section--destination">
           <h3 class="event__section-title  event__section-title--destination">Destination</h3>
           <p class="event__destination-description">${pointDestination.description}</p>
+          <div class="event__photos-container">
+          ${createDestinationPhotos(pointDestination)}
+          </div>
         </section>
       </section>
     </form>
   </li>`;
 }
 
-export default class EditPointView extends AbstractView{
+export default class EditPointView extends AbstractStatefulView{
 
-  #pointDestination;
-  #pointOffers;
-  #point;
+  #destinations;
+  #offers;
   #onCloseEditPoint;
   #onSubmiClick;
 
-  constructor({point = POINT_EMPTY, pointDestination, pointOffers, onCloseEditPoint, onSubmiClick}) {
+  constructor({point = POINT_EMPTY, destinations, offers, onCloseEditPoint, onSubmiClick}) {
     super();
-    this.#point = point;
-    this.#pointDestination = pointDestination;
-    this.#pointOffers = pointOffers;
+    this.#destinations = destinations;
+    this.#offers = offers;
     this.#onCloseEditPoint = onCloseEditPoint;
     this.#onSubmiClick = onSubmiClick;
-    this.#closeEditPoint();
+    this._setState(EditPointView.parsePointToState({point}));
     this.#submitEditPoint();
+    this._restoreHandlers();
   }
 
+  _restoreHandlers = () =>{
+    this.element
+      .querySelector('.event__rollup-btn')
+      .addEventListener('click', this.#closeEditPointHandler);
+
+    this.element
+      .querySelector('.event__input--destination')
+      .addEventListener('change', this.#onDestinationChange);
+
+    this.element
+      .querySelector('.event__available-offers')
+      .addEventListener('change', this.#offerChangeHandler);
+
+    this.element
+      .querySelector('.event__input--price')
+      .addEventListener('change', this.#priceChangeHandler);
+
+    this.element
+      .querySelector('.event__type-group')
+      .addEventListener('change', this.#typeChangeHandler);
+  };
+
   get template() {
     return createPointEditElement({
-      point: this.#point,
-      pointDestination: this.#pointDestination,
-      pointOffers: this.#pointOffers
+      point: this._state.point,
+      destinations: this.#destinations,
+      offers: this.#offers
     });
   }
 
-  #closeEditPoint = () => {
-    this.element
-      .querySelector('.event__rollup-btn')
-      .addEventListener('click', this.#closeEditPointHandler);
-  };
+  reset = (point) => this.updateElement({ point });
 
   #submitEditPoint = () =>{
     this.element
       .querySelector('form')
       .addEventListener('submit', this.#submiClickHandler);
   };
 
+  #onDestinationChange = (evt) => {
+    const newDestinationName = evt.target.value;
+    const newDestination = this.#destinations.find((dest) => dest.name === newDestinationName);
+    this.updateElement({
+      point: {
+        ...this._state.point,
+        destination: newDestination.id,
+      }
+    });
+  };
+
+  #offerChangeHandler = () => {
+    const selectedOffers = Array.from(this.element.querySelectorAll('.event__offer-checkbox:checked'))
+      .map(({id}) => id.split('-').slice(3).join('-'));
+
+    this._setState({
+      point: {
+        ...this._state.point,
+        offers: selectedOffers
+      }
+    });
+  };
+
+  #priceChangeHandler = (evt) => {
+    this._setState({
+      point: {
+        ...this._state.point,
+        basePrice: evt.target.value,
+      }
+    });
+  };
+
+
+  #typeChangeHandler = (evt) => {
+    evt.preventDefault();
+    this.updateElement({
+      point: {
+        ...this._state.point,
+        type: evt.target.value,
+        offers: [],
+      },
+    });
+  };
+
   #closeEditPointHandler = (evt) => {
     evt.preventDefault();
     this.#onCloseEditPoint();
@@ -154,4 +234,7 @@ export default class EditPointView extends AbstractView{
     evt.preventDefault();
     this.#onSubmiClick();
   };
+
+  static parsePointToState = ({ point }) => ({ point });
+  static parseStateToPoint = (state) => state.point;
 }
diff --git a/src/view/point-view.js b/src/view/point-view.js
@@ -3,9 +3,9 @@ import AbstractView from '../framework/view/abstract-view.js';
 import{formatStringDateTime, getPointDuration, formatStringTime, formatStringDate} from '../utils.js';
 
 
-function createOfferElements(pointOffers) {
+function createOfferElements(pointOffers, selectedOffers) {
   let elements = '';
-  pointOffers.offers.forEach((offer) => {
+  pointOffers.offers.filter((offer) => selectedOffers.includes(offer.id)).forEach((offer) => {
     elements += `<li class="event__offer">
   <span class="event__offer-title">${offer.title}</span>
   +€&nbsp;
@@ -23,7 +23,7 @@ function createPointElement({point, pointDestination, pointOffers}) {
       <div class="event">
         <time class="event__date" datetime="${formatStringDate(dateFrom)}">${formatStringDate(dateFrom)}</time>
         <div class="event__type">
-          <img class="event__type-icon" width="42" height="42" src="img/icons/taxi.png" alt="Event type icon">
+          <img class="event__type-icon" width="42" height="42" src="img/icons/${type}.png" alt="Event type icon">
         </div>
         <h3 class="event__title">${type} ${pointDestination.name}</h3>
         <div class="event__schedule">
@@ -39,7 +39,7 @@ function createPointElement({point, pointDestination, pointOffers}) {
         </p>
         <h4 class="visually-hidden">Offers:</h4>
         <ul class="event__selected-offers">
-        ${createOfferElements(pointOffers)}
+        ${createOfferElements(pointOffers, point.offers)}
         </ul>
         <button class="event__favorite-btn ${isFavorite ? 'event__favorite-btn--active' : ''}" type="button">
           <span class="visually-hidden">Add to favorite</span>