Шаблонизируй то

src/main.js

@@ -1,19 +1,18 @@
 import { render } from './framework/render.js';
-import NewFiltersTitle from './view/filters-title-view.js';
 import DataInfoTrip from './view/data-info-view.js';
 import TripPresenter from './presenter/trip-presenter.js';
 import PointsModel from './model/point-model.js';
 
-const tripFilters = document.querySelector('.trip-controls__filters');
+
 const pointsContainer = document.querySelector('.trip-events');
 const tripMain = document.querySelector('.trip-main');
 
 
 render(new DataInfoTrip(), tripMain, 'afterbegin');
-render(new NewFiltersTitle(), tripFilters);
 
 const pointsModel = new PointsModel();
 const createNewPoint = new TripPresenter({pointsContainer: pointsContainer, pointsModel});
 
 createNewPoint.init();
 
+

src/mocks/points.js

@@ -4,8 +4,8 @@ const mockPoints = [
   {
     id: 1,
     basePrice: 130,
-    dateFrom: '2024-07-09T12:55:00.000Z',
-    dateTo: '2024-07-09T13:25:00.000Z',
+    dateFrom: '2025-07-09T12:55:00.000Z',
+    dateTo: '2025-07-09T13:25:00.000Z',
     destination: 1,
     isFavorite: false,
     offers: [2,4],
@@ -14,8 +14,8 @@ const mockPoints = [
   {
     id: 2,
     basePrice: 1100,
-    dateFrom: '2024-07-10T13:55:00.000Z',
-    dateTo: '2024-07-11T10:22:00.000Z',
+    dateFrom: '2024-09-28T10:00:00.000Z',
+    dateTo: '2024-09-28T10:01:00.000Z',
     destination: 2,
     isFavorite: true,
     offers: [3,8,10],

src/presenter/trip-presenter.js

@@ -1,64 +1,123 @@
 import { render, replace, remove } from '../framework/render.js';
-import NewSort from '../view/sort-view.js';
+import NewSortView from '../view/sort-view.js';
 import ContainerPointsView from '../view/container-points-view.js';
 import NewPointView from '../view/point-view.js';
 import EditFormView from '../view/edit-form-view.js';
+import FiltersTitleView from '../view/filters-title-view.js';
+import { getDifferencesDates, compareNumbers } from '../utils.js';
 
+
+const tripFilters = document.querySelector('.trip-controls__filters');
 export default class TripPresenter {
   containerPointsView = new ContainerPointsView();
-  sort = new NewSort();
-
+  sort = new NewSortView();
+  filtersTitle = new FiltersTitleView();
 
   constructor({pointsContainer, pointsModel}) {
     this.pointsContainer = pointsContainer;
     this.pointsModel = pointsModel;
   }
 
-
   init() {
 
     this.boardPoints = [...this.pointsModel.getPoints()];
     this.boardOffers = this.pointsModel.getOffers();
     this.boardDestinations = this.pointsModel.getDestinations();
+    this.activeFilter = this.boardPoints;
+
+    const deleteAllPoints = () => {
+      document.querySelectorAll('.trip-events__item').forEach((point) => point.remove());
+      document.querySelectorAll('.event--edit').forEach((editPoint) => editPoint.remove());
+    };
+
+    const redrawPoints = (boardPoints) => {
+      deleteAllPoints();
+      for(let i = 0; i < boardPoints.length; i++) {
+        const pointView = new NewPointView({
+          points: boardPoints[i],
+          offers: this.boardOffers,
+          destinations: this.boardDestinations,
+        });
+
+        const editPointView = new EditFormView({
+          points: boardPoints[i],
+          offers: this.boardOffers,
+          destinations: this.boardDestinations,
+        });
+        render(pointView, this.containerPointsView.element);
+
+
+        const handlerEsc = (evt) => {
+          if (evt.key === 'Escape') {
+            if (editPointView) {
+              replace(pointView, editPointView);
+            }
+          }
+          window.removeEventListener('keydown', handlerEsc);
+        };
+
+        pointView.setListenerClick(() => {
+          replace(editPointView, pointView);
+          window.addEventListener('keydown', handlerEsc);
+        });
+        pointView.getListenerClick();
+
+        editPointView.setListenerClick(() => {
+          replace(pointView, editPointView);
+          window.removeEventListener('keydown', handlerEsc);
+        });
+        editPointView.getListenerClick();
+
+      }
+    };
+
+
+    const detectClickOnFilter = () => {
+      if (this.filtersTitle.element.querySelector('#filter-future').checked) {
+        const boardPointsFuture = this.boardPoints.filter((point) => point.dateFrom < new Date().toISOString());
+        redrawPoints(boardPointsFuture);
+        this.activeFilter = boardPointsFuture;
+      }
+      if (this.filtersTitle.element.querySelector('#filter-everything').checked) {
+        redrawPoints(this.boardPoints);
+        this.activeFilter = this.boardPoints;
+      }
+      if (this.filtersTitle.element.querySelector('#filter-present').checked) {
+        const boardPointsPresent = this.boardPoints.filter((point) => point.dateFrom === new Date().toISOString());
+        redrawPoints(boardPointsPresent);
+        this.activeFilter = boardPointsPresent;
+      }
+      if (this.filtersTitle.element.querySelector('#filter-past').checked) {
+        const boardPointsPast = this.boardPoints.filter((point) => point.dateFrom > new Date().toISOString());
+        redrawPoints(boardPointsPast);
+        this.activeFilter = boardPointsPast;
+      }
+    };
+
+    const detectClickOnSort = () => {
+      if (this.sort.element.querySelector('#sort-day').checked) {
+        const boardPointsSortDay = this.activeFilter.sort((a, b) => b.dateFrom > a.dateFrom ? 1 : -1);
+        redrawPoints(boardPointsSortDay);
+      }
+      if (this.sort.element.querySelector('#sort-time').checked) {
+        const boardPointsSortDay = this.activeFilter.sort((a, b) => getDifferencesDates(b.dateFrom, b.dateTo) > getDifferencesDates(a.dateFrom, a.dateTo) ? 1 : -1);
+        redrawPoints(boardPointsSortDay);
+      }
+      if (this.sort.element.querySelector('#sort-price').checked) {
+        const boardPointsSortDay = this.activeFilter.sort((a, b) => b.basePrice > a.basePrice ? 1 : -1);
+        redrawPoints(boardPointsSortDay);
+      }
+    };
+
+    render(this.filtersTitle, tripFilters);
+    this.filtersTitle.getListenerFilters(detectClickOnFilter);
 
     render(this.sort, this.pointsContainer);
-    render(this.containerPointsView, this.pointsContainer);
-
-    for(let i = 0; i < this.boardPoints.length; i++) {
-      const pointView = new NewPointView({
-        points: this.boardPoints[i],
-        offers: this.boardOffers,
-        destinations: this.boardDestinations,
-      });
-
-      const editPointView = new EditFormView({
-        points: this.boardPoints[i],
-        offers: this.boardOffers,
-        destinations: this.boardDestinations,
-      });
-      render(pointView, this.containerPointsView.element);
-
-
-      pointView.setListenerClick(() => {
-        replace(editPointView, pointView);
-      });
-      pointView.getListenerClick();
-
-      editPointView.setListenerClick(() => {
-        replace(pointView, editPointView);
-      });
-
-      editPointView.getListenerClick();
-
-      window.addEventListener('keydown', (evt) => {
-        if (evt.key === 'Escape') {
-          remove(editPointView);
-          render(pointView, this.containerPointsView.element);
-        }
-      });
+    this.sort.getListenerSort(detectClickOnSort);
 
+    render(this.containerPointsView, this.pointsContainer);
 
-    }
+    redrawPoints(this.boardPoints.sort((a, b) => b.dateFrom > a.dateFrom ? 1 : -1));
 
   }
 }

src/utils.js

@@ -46,4 +46,8 @@ function getDifferencesDates(dateFrom, dateTo) {
   }
 }
 
-export { getRandomArrayElement, getDifferencesDates, getMonthDay, getFullDateTime, getHoursMinutes, getYearMonthDay, getFullDateIncompleteYear };
+function compareNumbers(a,b) {
+  return b - a;
+}
+
+export { compareNumbers, getRandomArrayElement, getDifferencesDates, getMonthDay, getFullDateTime, getHoursMinutes, getYearMonthDay, getFullDateIncompleteYear };

src/view/filters-title-view.js

@@ -1,5 +1,6 @@
 import AbstractView from '../framework/view/abstract-view.js';
 
+
 function createNewFilterTitle () {
   return `<form class="trip-filters" action="#" method="get">
                 <div class="trip-filters__filter">
@@ -26,12 +27,14 @@ function createNewFilterTitle () {
               </form>`;
 }
 
-export default class NewFiltersTitle extends AbstractView{
+export default class FiltersTitleView extends AbstractView {
 
   get template() {
     return createNewFilterTitle();
   }
 
+  getListenerFilters(handler) {
+    this.element.addEventListener('change', handler);
+  }
 }
 
-

src/view/sort-view.js

@@ -1,9 +1,10 @@
 import AbstractView from '../framework/view/abstract-view.js';
 
-function createNewSort () {
+
+function createNewSortView () {
   return `<form class="trip-events__trip-sort  trip-sort" action="#" method="get">
             <div class="trip-sort__item  trip-sort__item--day">
-              <input id="sort-day" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-day">
+              <input id="sort-day" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-day" checked>
               <label class="trip-sort__btn" for="sort-day">Day</label>
             </div>
 
@@ -18,7 +19,7 @@ function createNewSort () {
             </div>
 
             <div class="trip-sort__item  trip-sort__item--price">
-              <input id="sort-price" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-price" checked>
+              <input id="sort-price" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-price">
               <label class="trip-sort__btn" for="sort-price">Price</label>
             </div>
 
@@ -29,10 +30,14 @@ function createNewSort () {
           </form>`;
 }
 
-export default class NewSort extends AbstractView{
+export default class NewSortView extends AbstractView{
 
   get template() {
-    return createNewSort();
+    return createNewSortView();
+  }
+
+  getListenerSort(handler) {
+    this.element.addEventListener('change', handler);
   }
 
 }