Merge pull request #9 from Jey-Key30/module6-task1

src/framework/view/abstract-stateful-view.js

@@ -15,9 +15,7 @@ export default class AbstractStatefulView extends AbstractView {
     if (!update) {
       return;
     }
-
     this._setState(update);
-
     this.#rerenderElement();
   }
 

src/main.js

@@ -12,6 +12,8 @@ const destinationsModel = new DestinationModel(mockService);
 const pointsModel = new PointModel(mockService);
 const offersModel = new OfferModel(mockService);
 
+// console.log(destinationsModel.get()[0]);
+
 const tripPresenterElement = new TripPresenter({
   tripContainer: bodyElement,
   destinationsModel,

src/mock/const.js

@@ -1,12 +1,14 @@
+import {getRandomIntFromRange} from '../utils.js';
+
 export const DATE_FORMAT = 'MMM D';
 export const TIME_FORMAT = 'HH:mm';
 export const DAY_FOMAT = 'D';
 export const FULL_TIME_FOMAT = 'YYYY-MM-DDTHH:mm';
 export const SLASH_TIME_FOMAT = 'DD/MM/YY HH:mm';
 export const MILLISECONDS_IN_DAY = 86400000;
 export const MILLISECONDS_IN_HOUR = 3600000;
-export const POINT_COUNT = 10;
-export const DESTINATION_COUNT = POINT_COUNT;
+//понимаю, что в константах должны быть константы, а не рандомные данные. сделал ради эксперимента
+export const POINT_COUNT = getRandomIntFromRange(0, 10);
 export const OFFER_COUNT = 10;
 
 export const BooleanValues = [
@@ -81,6 +83,8 @@ export const CITIES = [
   'Chelmsford',
 ];
 
+export const DESTINATION_COUNT = CITIES.length;
+
 export const FilterType = {
   EVERYTHING: 'EVERYTHING',
   FUTURE: 'FUTURE',

src/mock/destination.js

@@ -1,8 +1,8 @@
 import {getRandomArrayElement, getPicturesArray} from '../utils.js';
 import {CITIES, DESCRIPTION} from './const.js';
 
-export const generateDestination = () => {
-  const city = getRandomArrayElement(CITIES);
+export const generateDestination = (index) => {
+  const city = CITIES[index];
 
   return {
     id: crypto.randomUUID(),

src/model/destination-model.js

@@ -12,4 +12,8 @@ export default class DestinationModel {
   getById(id) {
     return this.#destinations.find((destinations) => destinations.id === id);
   }
+
+  getByName(name) {
+    return this.#destinations.find((destinations) => destinations.name === name);
+  }
 }

src/presenter/point-presenter.js

@@ -42,15 +42,16 @@ export default class PointPresenter {
 
     this.#pointEditComponent = new EditPointView({
       point: this.#point,
-      pointDestination: this.#destinationsModel.getById(this.#point.destination),
-      pointOffers: this.#offersModel.getByType(this.#point.type),
+      pointDestination: this.#destinationsModel,
+      pointOffers: this.#offersModel,
       onSubmitClick: () => {
         this.#handleFormSubmit(this.#point);
       },
       onDeleteClick: () => {
         this.destroy();
       },
       onRollUpClick: () => {
+        this.#pointEditComponent.resetPoint(this.#point);
         this.#replaceFormToPoint();
       }
     });
@@ -87,6 +88,7 @@ export default class PointPresenter {
   #escKeyDownHandler = (evt) => {
     if (evt.key === 'Escape') {
       evt.preventDefault();
+      this.#pointEditComponent.resetPoint(this.#point);
       this.#replaceFormToPoint();
     }
   };

src/presenter/trip-presenter.js

@@ -21,7 +21,7 @@ export default class TripPresenter {
   #pointPresenterArray = new Map();
 
   #currentSortType = SortType.DAY;
-  #sourcedBoardTasks = [];
+  #sourcedTripPoints = [];
 
   #sortComponent = null;
   #filterComponent = null;
@@ -40,10 +40,10 @@ export default class TripPresenter {
     this.#tripInfoElement = this.#tripContainer.querySelector('.trip-main');
     this.#newEventElement = document.querySelector('.trip-main__event-add-btn');
 
-    this.#sourcedBoardTasks = [...this.#pointsModel.get()];
+    this.#sourcedTripPoints = [...this.#pointsModel.get()];
     this.#points = [...this.#pointsModel.get()];
     this.#points.sort(sortPointDay);
-    this.#sourcedBoardTasks.sort(sortPointDay);
+    this.#sourcedTripPoints.sort(sortPointDay);
 
     this.#newEventElement.addEventListener('click', () => this.#addPointHandler(this.#newEventElement));
     this.#renderFilter();
@@ -66,7 +66,7 @@ export default class TripPresenter {
 
   #handlePointChange = (updatedPoint) => {
     this.#points = updateItem(this.#points, updatedPoint);
-    this.#sourcedBoardTasks = updateItem(this.#sourcedBoardTasks, updatedPoint);
+    this.#sourcedTripPoints = updateItem(this.#sourcedTripPoints, updatedPoint);
     this.#pointPresenterArray.get(updatedPoint.id).init(updatedPoint);
   };
 
@@ -92,7 +92,7 @@ export default class TripPresenter {
         this.#points.sort(sortPointTime);
         break;
       default:
-        this.#points = [...this.#sourcedBoardTasks];
+        this.#points = [...this.#sourcedTripPoints];
     }
 
     this.#currentSortType = sortType;

src/service/mock-service.js

@@ -28,7 +28,7 @@ export default class MockService {
   }
 
   generateDestinations() {
-    return Array.from({length: DESTINATION_COUNT}, () => generateDestination());
+    return Array.from({length: DESTINATION_COUNT}, (_, index) => generateDestination(index));
   }
 
   generateOffers() {

src/utils.js

@@ -72,10 +72,10 @@ export const updateItem = (items, update) => items.map((item) => item.id === upd
 
 export const sortPointDay = (pointA, pointB) => dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom));
 
-export const sortPointPrice = (pointA, pointB) => pointA.basePrice - pointB.basePrice;
+export const sortPointPrice = (pointA, pointB) => pointB.basePrice - pointA.basePrice;
 
 export const sortPointTime = (pointA, pointB) => {
   const timeDifferencePointA = dayjs(pointA.dateTo).diff(dayjs(pointA.dateFrom));
   const timeDifferencePointB = dayjs(pointB.dateTo).diff(dayjs(pointB.dateFrom));
-  return timeDifferencePointA - timeDifferencePointB;
+  return timeDifferencePointB - timeDifferencePointA;
 };

src/view/edit-point-view.js

@@ -1,6 +1,6 @@
 import {formatToSlashDate} from '../utils.js';
 import {CITIES, POINT_EMPTY, ROUTE_TYPE} from '../mock/const.js';
-import AbstractView from '../framework/view/abstract-view.js';
+import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
 
 const getPicrtureItem = (picture) => `<img class="event__photo" src="${picture.src}" alt="${picture.description}">`;
 
@@ -22,12 +22,15 @@ const getOfferItem = (offer, pointOffers) => `<div class="event__offer-selector"
         </label>
     </div>`;
 
-const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {
-  const {basePrice, dateFrom, dateTo, type, id} = point;
-  const pictureItemsTemplate = pointDestination.pictures.map((picture) => getPicrtureItem(picture)).join('');
+const createEditPointTemplate = ({state, pointDestinations, pointOffers}) => {
+  const {basePrice, dateFrom, dateTo, type, id, destination, offers} = state;
+  const pointDestination = pointDestinations.getById(destination);
+  const pictureItemsTemplate = pointDestinations
+    .getById(destination)
+    .pictures.map((picture) => getPicrtureItem(picture)).join('');
   const typeItemsTemplate = ROUTE_TYPE.map((typeItem) => getEventTypeItem(typeItem, type)).join('');
   const cityItemsTemplate = CITIES.map((cityItem) => getDestinationItem(cityItem)).join('');
-  const offerItemsTemplate = pointOffers.map((offer) => getOfferItem(offer, point.offers)).join('');
+  const offerItemsTemplate = pointOffers.map((offer) => getOfferItem(offer, offers)).join('');
 
   return `<li class="trip-events__item">
 <form class="event event--edit" action="#" method="post">
@@ -70,8 +73,8 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {
         <span class="visually-hidden">Price</span>
         €
       </label>
-      <input class="event__input  event__input--price" id="event-price-1" type="text" name="event-price" value="
-      ${basePrice}">
+      <input class="event__input  event__input--price" id="event-price-1" type="text" name="event-price"
+      value="${basePrice}">
     </div>
 
     <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
@@ -81,7 +84,7 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {
     </button>
   </header>
   <section class="event__details">
-  ${pointOffers.length !== 0
+  ${state.offers.length !== 0
     ? `<section class="event__section  event__section--offers">
   <h3 class="event__section-title  event__section-title--offers">Offers</h3>
   <div class="event__available-offers">
@@ -90,54 +93,74 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {
   </section>`
     : ''}
     <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">
-          <div class="event__photos-tape">
-            ${pictureItemsTemplate}
-          </div>
-        </div>
+    ${pointDestination.description !== null
+    ? `<h3 class="event__section-title  event__section-title--destination">Destination</h3>
+      <p class="event__destination-description">${pointDestination.description}</p>`
+    : ''}
+
+  ${pointDestination.pictures.length !== 0
+    ? `<div class="event__photos-container">
+     <div class="event__photos-tape">
+       ${pictureItemsTemplate}
+     </div>
+   </div>`
+    : ''}
     </section>
   </section>
 </form>
 </li>`;
 };
 
-export default class EditPointView extends AbstractView{
-  #point = null;
+export default class EditPointView extends AbstractStatefulView{
   #pointDestination = [];
+  #offers = [];
+  #destinations = [];
   #pointOffers = [];
   #handleSubmitClick = null;
   #handleDeleteClick = null;
   #handleRollUpClick = null;
 
   constructor({point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onDeleteClick, onRollUpClick}) {
     super();
-    this.#point = point;
-    this.#pointDestination = pointDestination;
-    this.#pointOffers = pointOffers;
+    this.#destinations = pointDestination;
+    this.#pointDestination = pointDestination.getById(point.destination);
+    this.#offers = pointOffers;
+    this.#pointOffers = pointOffers.getByType(point.type);
+
+    this._setState(EditPointView.parsePointToState(point));
 
     this.#handleSubmitClick = onSubmitClick;
     this.#handleDeleteClick = onDeleteClick;
     this.#handleRollUpClick = onRollUpClick;
 
-    this.element.querySelector('.event__save-btn').addEventListener('click', this.#submitClickHandler);
-    this.element.querySelector('.event__reset-btn').addEventListener('click', this.#deleteClickHandler);
-    this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#rollUpClickHandler);
+    this._restoreHandlers();
   }
 
   get template() {
     return createEditPointTemplate({
-      point:  this.#point,
-      pointDestination: this.#pointDestination,
+      state:  this._state,
+      pointDestinations: this.#destinations,
       pointOffers: this.#pointOffers
     });
   }
 
+  resetPoint = (point) => {
+    this.#pointOffers = this.#offers.getByType(point.type);
+    this.updateElement(point);
+  };
+
+  _restoreHandlers() {
+    this.element.querySelector('form').addEventListener('submit', this.#submitClickHandler);
+    this.element.querySelector('.event__reset-btn').addEventListener('click', this.#deleteClickHandler);
+    this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#rollUpClickHandler);
+    this.element.querySelector('.event__type-group').addEventListener('change', this.#routeTypeChangeHandler);
+    this.element.querySelector('.event__input--destination').addEventListener('change', this.#destinationChangeHandler);
+    this.element.querySelector('.event__input--price').addEventListener('change', this.#priceChangeHandler);
+  }
+
   #submitClickHandler = (evt) => {
     evt.preventDefault();
-    this.#handleSubmitClick(this.#point);
+    this.#handleSubmitClick(this._state);
   };
 
   #deleteClickHandler = (evt) => {
@@ -149,4 +172,37 @@ export default class EditPointView extends AbstractView{
     evt.preventDefault();
     this.#handleRollUpClick();
   };
+
+  #routeTypeChangeHandler = (evt) => {
+    const routeType = evt.target.value.charAt(0).toUpperCase() + evt.target.value.slice(1);
+
+    this.#pointOffers = this.#offers.getByType(routeType);
+
+    this.updateElement({
+      type: routeType,
+      offers: this.#pointOffers
+    });
+  };
+
+  #destinationChangeHandler = (evt) => {
+    const selectedDestination = this.#destinations.getByName(evt.target.value);
+
+    const destinationId = (selectedDestination)
+      ? selectedDestination.id
+      : null;
+
+    this.updateElement({
+      destination: destinationId,
+    });
+  };
+
+  #priceChangeHandler = (evt) => {
+    this._setState({
+      basePrice: evt.target.value
+    });
+  };
+
+  static parsePointToState(point) {
+    return {...point};
+  }
 }