From 9819b263e1713ef921ceaae750a988dee77f33cf Mon Sep 17 00:00:00 2001
From: Rudovsky Egor <rudovskiy45@mail.ru>
Date: Mon, 15 Apr 2024 19:44:59 +0500
Subject: [PATCH] =?UTF-8?q?4.15.=20=D0=A8=D0=B0=D0=B1=D0=BB=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=B8=D1=80=D1=83=D0=B9=20=D1=82=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/const.js                           | 10 +++++-
 src/main.js                            |  6 +---
 src/presenter/trip-events-presenter.js | 49 +++++++++++++++++++++++---
 src/view/filter-view.js                | 15 ++++++++
 src/view/list-empty-view.js            | 18 ++++++++++
 5 files changed, 88 insertions(+), 10 deletions(-)
 create mode 100644 src/view/list-empty-view.js

diff --git a/src/const.js b/src/const.js
index d4765b2..f18646e 100644
--- a/src/const.js
+++ b/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};
diff --git a/src/main.js b/src/main.js
index 5e47bf4..67950c6 100644
--- a/src/main.js
+++ b/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();
 
diff --git a/src/presenter/trip-events-presenter.js b/src/presenter/trip-events-presenter.js
index bf4d092..c368880 100644
--- a/src/presenter/trip-events-presenter.js
+++ b/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,8 +21,11 @@ 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;
@@ -25,10 +33,17 @@ export default class TripEventsPresenter {
 
   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();
+    }
+  };
 }
diff --git a/src/view/filter-view.js b/src/view/filter-view.js
index 12f3e9b..701b287 100644
--- a/src/view/filter-view.js
+++ b/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);
+  };
 }
diff --git a/src/view/list-empty-view.js b/src/view/list-empty-view.js
new file mode 100644
index 0000000..9a4e4f6
--- /dev/null
+++ b/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);
+  }
+}