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

src/const.js

@@ -8,7 +8,15 @@ const DESCRIPTIONS = [
   'Nullam nunc ex, convallis sed finibus eget, sollicitudin eget ante.',
   'Phasellus eros mauris, condimentum sed nibh vitae, sodales efficitur ipsum.'
 ];
+
+const LIST_EMPTY_TEXT = {
+  'everything' : 'Click New Event to create your first point',
+  'past' : 'There are no past events now',
+  'present' : 'There are no present events now',
+  'future' : 'There are no future events now'
+};
+
 const MIN_PRICE = 100;
 const MAX_PRICE = 5000;
 
-export {POINT_TYPE, CITIES, DESCRIPTIONS, MAX_PRICE, MIN_PRICE};
+export {POINT_TYPE, CITIES, DESCRIPTIONS, MAX_PRICE, MIN_PRICE, LIST_EMPTY_TEXT};

src/main.js

@@ -1,5 +1,3 @@
-import { render } from './framework/render.js';
-import FilterView from './view/filter-view.js';
 import TripEventsPresenter from './presenter/trip-events-presenter.js';
 import PointsModel from './model/points-model.js';
 import OffersModel from './model/offers-model.js';
@@ -10,9 +8,7 @@ const tripEvents = document.querySelector('.trip-events');
 const pointsModel = new PointsModel();
 const offersModel = new OffersModel();
 const destinationsModel = new DestinationsModel();
-const tripEventsPresenter = new TripEventsPresenter({tpipEventsContainer : tripEvents, pointsModel, offersModel, destinationsModel});
-
-render(new FilterView(), tripControlsFilters);
+const tripEventsPresenter = new TripEventsPresenter({tpipEventsContainer : tripEvents, tripFiltersContainer: tripControlsFilters, pointsModel, offersModel, destinationsModel});
 
 tripEventsPresenter.init();
 

src/presenter/trip-events-presenter.js

@@ -1,13 +1,18 @@
 import SortView from '../view/sort-view.js';
 import ListView from '../view/list-view.js';
+import FilterView from '../view/filter-view.js';
+import ListEmptyView from '../view/list-empty-view.js';
 import TripPointPresenter from './trip-point-presenter.js';
 import { render} from '../framework/render.js';
+import { LIST_EMPTY_TEXT } from '../const.js';
 
 
 export default class TripEventsPresenter {
   #listComponent = new ListView();
+  #listEmptyComponent = null;
 
   #tpipEventsContainer = null;
+  #tripFiltersContainer = null;
   #pointsModel = null;
   #offersModel = null;
   #destinationsModel = null;
@@ -16,19 +21,29 @@ export default class TripEventsPresenter {
 
   #points = [];
 
-  constructor({tpipEventsContainer, pointsModel, offersModel, destinationsModel}) {
+  #filterType = 'everything';
+
+  constructor({tpipEventsContainer, tripFiltersContainer, pointsModel, offersModel, destinationsModel}) {
     this.#tpipEventsContainer = tpipEventsContainer;
+    this.#tripFiltersContainer = tripFiltersContainer;
     this.#pointsModel = pointsModel;
     this.#offersModel = offersModel;
     this.#destinationsModel = destinationsModel;
   }
 
   init() {
     this.#points = [...this.#pointsModel.points];
+    this.#renderFilter();
+
+    if (this.#points.length === 0) {
+      this.#renderListEmpty('everything');
+    }
 
-    this.#renderSort();
-    this.#renderList();
-    this.#renderPoints(this.#points);
+    else {
+      this.#renderSort();
+      this.#renderList();
+      this.#renderPoints(this.#points);
+    }
   }
 
   #changePointFavorite = (point) => {
@@ -56,6 +71,10 @@ export default class TripEventsPresenter {
     }
   };
 
+  #changeFilterType = (type) => {
+    this.#filterType = type;
+  };
+
   #changeViewHandler = () => {
     this.#pointPresenters.forEach((presenter) => presenter.resetView());
   };
@@ -64,11 +83,27 @@ export default class TripEventsPresenter {
     render(new SortView(this.#changeSortType), this.#tpipEventsContainer);
   };
 
+  #renderFilter = () => {
+    render(new FilterView(this.#changeFilterType), this.#tripFiltersContainer);
+  };
+
   #renderList = () => {
     render(this.#listComponent, this.#tpipEventsContainer);
   };
 
+  #renderListEmpty = () => {
+    this.#listEmptyComponent = new ListEmptyView(LIST_EMPTY_TEXT[this.#filterType]);
+    render(this.#listEmptyComponent, this.#tpipEventsContainer);
+  };
+
   #renderPoints = (points) => {
+    this.#clearListEmptyText();
+
+    if (points.length === 0) {
+      this.#renderListEmpty('everything');
+      return;
+    }
+
     for (let i = 0; i < points.length; i++) {
       const point = points[i];
       const destination = this.#destinationsModel.getDestinationById(point.destination);
@@ -83,4 +118,10 @@ export default class TripEventsPresenter {
     this.#pointPresenters.forEach((presenter) => presenter.remove());
     this.#pointPresenters.clear();
   };
+
+  #clearListEmptyText = () => {
+    if (this.#listEmptyComponent !== null) {
+      this.#listEmptyComponent.remove();
+    }
+  };
 }

src/view/filter-view.js

@@ -54,7 +54,22 @@ function createFilterTemplate() {
 }
 
 export default class FilterView extends AbstractView {
+  #onFilterClick = null;
+
+  constructor(onFilterClick) {
+    super();
+    this.#onFilterClick = onFilterClick;
+
+    this.element.querySelectorAll('input')
+      .forEach((item) => item.addEventListener('change', this.#changeFilterType));
+  }
+
   get template() {
     return createFilterTemplate();
   }
+
+  #changeFilterType = (evt) => {
+    evt.preventDefault();
+    this.#onFilterClick(evt.target.value);
+  };
 }

src/view/list-empty-view.js

@@ -0,0 +1,18 @@
+import AbstractView from '../framework/view/abstract-view.js';
+
+function createListEmptyTemplate(text) {
+  return `<p class="trip-events__msg">${text}</p>`;
+}
+
+export default class ListEmptyView extends AbstractView {
+  #text = null;
+
+  constructor(text) {
+    super();
+    this.#text = text;
+  }
+
+  get template() {
+    return createListEmptyTemplate(this.#text);
+  }
+}