Merge pull request #11 from NikitaBystritsky/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/mock/const.js

@@ -5,8 +5,7 @@ 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 = 5;
-export const DESTINATION_COUNT = POINT_COUNT;
+export const POINT_COUNT = 10;
 export const OFFER_COUNT = 10;
 
 export const BooleanValues = [
@@ -81,11 +80,13 @@ export const CITIES = [
   'Chelmsford',
 ];
 
+export const DESTINATION_COUNT = CITIES.length;
+
 export const FilterType = {
-  EVERYTHING: 'Everything',
-  FUTURE: 'Future',
-  PRESENT: 'Present',
-  PAST: 'Past'
+  EVERYTHING: 'EVERYTHING',
+  FUTURE: 'FUTURE',
+  PRESENT: 'PRESENT',
+  PAST: 'PAST'
 };
 
 export const SortType = {
@@ -95,3 +96,10 @@ export const SortType = {
   PRICE: 'price',
   OFFERS: 'offers'
 };
+
+export const EmptyListMessage = {
+  EVERYTHING: '<p class="trip-events__msg">Click New Event to create your first point</p>',
+  FUTURE: '<p class="trip-events__msg">There are no past events now</p>',
+  PRESENT: '<p class="trip-events__msg">There are no present events now</p>',
+  PAST: '<p class="trip-events__msg">There are no future events now</p>'
+};

src/mock/destination.js

@@ -1,7 +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(),
     description: getRandomArrayElement(DESCRIPTION),

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/filter-presenter.js

@@ -1,6 +1,7 @@
 import {render} from '../framework/render.js';
 import FilterView from '../view/filter-view.js';
 import {generateFilter} from '../mock/filters.js';
+import {EmptyListMessage} from '../mock/const.js';
 
 export default class FilterPresenter{
   #filterContainer = null;
@@ -18,16 +19,20 @@ export default class FilterPresenter{
     render(new FilterView({
       filters,
       onFilterClick: (filterType) => {
-        this.#renderFilteredPoints(filters.filter((filter) => (filter.type === filterType))[0]);
+        this.#renderFilteredPoints(filters.filter((filter) => (filter.type === filterType))[0], filterType);
       }
     }), tripControlFiltersElement);
   }
 
-  #renderFilteredPoints(points){
-    points.filteredPoints.forEach((point) => {
-      //Заглушка, пока не знаю, как решить
+  #renderFilteredPoints(points, filterType){
+    if (points.filteredPoints.length !== 0) {
+      points.filteredPoints.forEach((point) => {
+        // eslint-disable-next-line no-console
+        console.log(point);
+      });
+    } else {
       // eslint-disable-next-line no-console
-      console.log(point);
-    });
+      console.log(EmptyListMessage[filterType]);
+    }
   }
 }

src/presenter/point-presenter.js

@@ -1,7 +1,6 @@
 import {render, replace, remove} from '../framework/render.js';
 import EditPointView from '../view/edit-point-view.js';
 import EventPointView from '../view/event-point-view.js';
-
 import {MODE} from '../mock/const.js';
 
 export default class PointPresenter {
@@ -35,7 +34,6 @@ export default class PointPresenter {
       pointOffers: this.#offersModel.getByType(this.#point.type),
       onEditClick: () => {
         this.#replacePointToForm();
-        document.addEventListener('keydown', this.#escKeyDownHandler);
       },
       onFavoriteClick: () => {
         this.#handleFavoriteClick();
@@ -44,22 +42,17 @@ 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);
-        document.addEventListener('keydown', this.#escKeyDownHandler);
       },
       onDeleteClick: () => {
-        // if (document.querySelectorAll('.trip-events__item').length - 1 === 0) {
-        //   this.#renderNoPointComponent();
-        // }
         this.destroy();
-        document.addEventListener('keydown', this.#escKeyDownHandler);
       },
       onRollUpClick: () => {
+        this.#pointEditComponent.resetPoint(this.#point);
         this.#replaceFormToPoint();
-        document.addEventListener('keydown', this.#escKeyDownHandler);
       }
     });
 
@@ -83,6 +76,7 @@ export default class PointPresenter {
   destroy(){
     remove(this.#pointComponent);
     remove(this.#pointEditComponent);
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
   }
 
   resetView() {
@@ -94,8 +88,8 @@ export default class PointPresenter {
   #escKeyDownHandler = (evt) => {
     if (evt.key === 'Escape') {
       evt.preventDefault();
+      this.#pointEditComponent.resetPoint(this.#point);
       this.#replaceFormToPoint();
-      document.removeEventListener('keydown', this.#escKeyDownHandler);
     }
   };
 
@@ -109,12 +103,14 @@ export default class PointPresenter {
   };
 
   #replacePointToForm() {
+    document.addEventListener('keydown', this.#escKeyDownHandler);
     replace(this.#pointEditComponent, this.#pointComponent);
     this.#handleModeChange();
     this.#mode = MODE.EDITING;
   }
 
   #replaceFormToPoint() {
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
     replace(this.#pointComponent, this.#pointEditComponent);
     this.#mode = MODE.DEFAULT;
   }

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;
@@ -33,25 +33,26 @@ export default class TripPresenter {
     this.#destinationsModel = destinationsModel;
     this.#offersModel = offersModel;
     this.#pointsModel = pointsModel;
+  }
+
+  init(){
     this.#tripEventsElement = this.#tripContainer.querySelector('.trip-events');
     this.#tripInfoElement = this.#tripContainer.querySelector('.trip-main');
     this.#newEventElement = document.querySelector('.trip-main__event-add-btn');
-  }
 
-  init(){
-    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();
 
     if (this.#points.length === 0) {
       this.#renderNoPointComponent();
       return;
     }
 
-    this.#newEventElement.addEventListener('click', () => this.#addPointHandler(this.#newEventElement));
-
-    this.#renderFilter();
     this.#renderSort();
     this.#renderPoints();
     this.#renderTripInfo();
@@ -65,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);
   };
 
@@ -76,16 +77,12 @@ export default class TripPresenter {
   #renderFilter = () => {
     this.#filterComponent = new FilterPresenter({
       filterContainer: this.#tripContainer,
-      pointsModel: this.#points
+      pointsModel: this.#points,
     });
 
     this.#filterComponent.init();
   };
 
-  #removeFilter = () => {
-    remove(this.#filterComponent);
-  };
-
   #sortPoints = (sortType) => {
     switch (sortType) {
       case SortType.PRICE:
@@ -95,7 +92,7 @@ export default class TripPresenter {
         this.#points.sort(sortPointTime);
         break;
       default:
-        this.#points = [...this.#sourcedBoardTasks];
+        this.#points = [...this.#sourcedTripPoints];
     }
 
     this.#currentSortType = sortType;
@@ -115,8 +112,7 @@ export default class TripPresenter {
   #renderTripInfo() {
     render(new TripInfoView({
       points: this.#points,
-      pointDestination: this.#destinationsModel.get(),
-      pointOffers: this.#offersModel.get(),
+      pointDestination: this.#destinationsModel.get()
     }), this.#tripInfoElement, 'afterbegin');
   }
 

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(pointA.dateTo).diff(dayjs(pointB.dateFrom));
-  return timeDifferencePointA - timeDifferencePointB;
+  const timeDifferencePointB = dayjs(pointB.dateTo).diff(dayjs(pointB.dateFrom));
+  return timeDifferencePointB - timeDifferencePointA;
 };

src/view/add-point-view.js

@@ -98,7 +98,6 @@ const createAddPointTemplate = ({point, pointOffers}) => {
 
 export default class AddPointView extends AbstractView{
   #point = null;
-  #pointDestination = [];
   #pointOffers = [];
 
   #handleSaveClick = null;