Merge pull request #6 from BogdanBigBoss/module4-task2

src/const.js

@@ -10,4 +10,18 @@ const EVENT_TYPES = [
   'restaurant'
 ];
 
-export {EVENT_TYPES};
+const FilterType = {
+  EVERYTHING: 'everything',
+  FUTURE: 'future',
+  PRESENT: 'present',
+  PAST: 'past',
+};
+
+const NoEventsText = {
+  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',
+};
+
+export {EVENT_TYPES, FilterType, NoEventsText};

src/main.js

@@ -1,6 +1,7 @@
 import FilterView from './view/filter-view.js';
 import TripPresenter from './presenter/trip-presenter.js';
 import PointsModel from './model/points-model.js';
+import {generateFilter} from './mock/filter.js';
 import { render } from './framework/render.js';
 
 const pageHeaderElement = document.querySelector('.page-header');
@@ -15,6 +16,8 @@ const tripPresenter = new TripPresenter({
   pointsModel,
 });
 
-render(new FilterView(), filtersElement);
+const filters = generateFilter(pointsModel.points);
+
+render(new FilterView({filters}), filtersElement);
 
 tripPresenter.init();

src/mock/filter.js

@@ -0,0 +1,12 @@
+import { filter } from '../utils.js';
+
+function generateFilter(events) {
+  return Object.entries(filter).map(
+    ([filterType, filterEvents]) => ({
+      type: filterType,
+      count: filterEvents(events).length,
+    }),
+  );
+}
+
+export {generateFilter};

src/presenter/trip-presenter.js

@@ -3,6 +3,7 @@ import SortView from '../view/sort-view.js';
 import PointListView from '../view/point-list-view.js';
 import PointView from '../view/point-view.js';
 import PointEditView from '../view/point-edit-view.js';
+import PointListEmptyView from '../view/point-list-empty-view.js';
 import {render, replace} from '../framework/render.js';
 
 export default class TripPresenter {
@@ -75,11 +76,16 @@ export default class TripPresenter {
 
   #renderTrip() {
     render(this.#tripComponent, this.#tripContainer);
-    render(new SortView(), this.#tripComponent.element);
-    render(this.#pointListComponent, this.#tripComponent.element);
 
-    for (const point of this.#tripPoints) {
-      this.#renderPoint(point);
+    if (this.#tripPoints.length === 0) {
+      render(new PointListEmptyView(), this.#tripComponent.element);
+    } else {
+      render(new SortView(), this.#tripComponent.element);
+      render(this.#pointListComponent, this.#tripComponent.element);
+
+      for (const point of this.#tripPoints) {
+        this.#renderPoint(point);
+      }
     }
   }
 }

src/utils.js

@@ -1,3 +1,4 @@
+import { FilterType } from './const.js';
 import dayjs from 'dayjs';
 
 const MINUTES_IN_HOUR = 60;
@@ -58,6 +59,23 @@ function createIdGenerator() {
 
 const idGenerator = createIdGenerator();
 
+function compareDates({dateFrom, dateTo}) {
+  if (new Date(dateFrom) > new Date()) {
+    return 'future';
+  } else if (new Date(dateTo) < new Date()) {
+    return 'past';
+  } else {
+    return 'present';
+  }
+}
+
+const filter = {
+  [FilterType.EVERYTHING]: (events) => events,
+  [FilterType.FUTURE]: (events) => events.filter((event) => compareDates(event) === 'future'),
+  [FilterType.PRESENT]: (events) => events.filter((event) => compareDates(event) === 'present'),
+  [FilterType.PAST]: (events) => events.filter((event) => compareDates(event) === 'past'),
+};
+
 export {
   getRandomInteger,
   getRandomArrayElement,
@@ -67,5 +85,6 @@ export {
   getEventDuration,
   transformIntoKebabCase,
   capitalizeString,
-  idGenerator
+  idGenerator,
+  filter,
 };

src/view/filter-view.js

@@ -1,35 +1,45 @@
 import AbstractView from '../framework/view/abstract-view.js';
+import { capitalizeString } from '../utils.js';
 
-function createFilterTemplate() {
-  return (
-    `<form class="trip-filters" action="#" method="get">
-                <div class="trip-filters__filter">
-                  <input id="filter-everything" class="trip-filters__filter-input  visually-hidden" type="radio" name="trip-filter" value="everything">
-                  <label class="trip-filters__filter-label" for="filter-everything">Everything</label>
-                </div>
-
-                <div class="trip-filters__filter">
-                  <input id="filter-future" class="trip-filters__filter-input  visually-hidden" type="radio" name="trip-filter" value="future">
-                  <label class="trip-filters__filter-label" for="filter-future">Future</label>
-                </div>
+function createFilterItemTemplate(filter, isChecked) {
+  const {type, count} = filter;
 
-                <div class="trip-filters__filter">
-                  <input id="filter-present" class="trip-filters__filter-input  visually-hidden" type="radio" name="trip-filter" value="present">
-                  <label class="trip-filters__filter-label" for="filter-present">Present</label>
-                </div>
+  return (
+    `<div class="trip-filters__filter">
+      <input id="filter-${type}"
+      class="trip-filters__filter-input  visually-hidden"
+      type="radio"
+      name="trip-filter"
+      value="${type}"
+      ${isChecked ? 'checked' : ''}
+      ${count === 0 ? 'disabled' : ''}>
+      <label class="trip-filters__filter-label" for="filter-${type}">${capitalizeString(type)}</label>
+    </div>`
+  );
+}
 
-                <div class="trip-filters__filter">
-                  <input id="filter-past" class="trip-filters__filter-input  visually-hidden" type="radio" name="trip-filter" value="past" checked>
-                  <label class="trip-filters__filter-label" for="filter-past">Past</label>
-                </div>
+function createFilterTemplate(filterItems) {
+  const filterItemsTemplate = filterItems
+    .map((filter, index) => createFilterItemTemplate(filter, index === 0))
+    .join('');
 
-                <button class="visually-hidden" type="submit">Accept filter</button>
-              </form>`
+  return (
+    `<form class="trip-filters" action="#" method="get">
+      ${filterItemsTemplate}
+      <button class="visually-hidden" type="submit">Accept filter</button>
+    </form>`
   );
 }
 
 export default class FilterView extends AbstractView {
+  #filters = null;
+
+  constructor({filters}) {
+    super();
+    this.#filters = filters;
+  }
+
   get template() {
-    return createFilterTemplate();
+    return createFilterTemplate(this.#filters);
   }
 }

src/view/point-list-empty-view.js

@@ -1,7 +1,12 @@
+import { NoEventsText } from '../const.js';
 import AbstractView from '../framework/view/abstract-view.js';
 
 function createPointListEmptyTemplate() {
-  return '<p class="trip-events__msg">Click New Event to create your first point</p>';
+  return (
+    `<p class="trip-events__msg">
+    ${NoEventsText.EVERYTHING}
+    </p>`
+  );
 }
 
 export default class PointListEmptyView extends AbstractView {