feat: 4.15. Шаблонизируй то done

src/main.js

@@ -1,19 +1,29 @@
-import BoardPresenter from './presenter/board-presenter.js';
+import TripPresenter from './presenter/trip-presenter.js';
+import FilterPresenter from './presenter/filter-presenter.js';
+
 import DestinationModel from './model/destination-model.js';
 import OfferModel from './model/offers-model.js';
 import PointModel from './model/point-model.js';
 import MockService from './service/mock-service.js';
 
 const bodyElement = document.querySelector('body');
+
 const mockService = new MockService();
 const destinationsModel = new DestinationModel(mockService);
 const pointsModel = new PointModel(mockService);
 const offersModel = new OfferModel(mockService);
-const boardPresenterElement = new BoardPresenter({
-  boardContainer: bodyElement,
+
+const filterPresenterElement = new FilterPresenter({
+  filterContainer: bodyElement,
+  pointsModel
+});
+
+const tripPresenterElement = new TripPresenter({
+  tripContainer: bodyElement,
   destinationsModel,
   offersModel,
   pointsModel
 });
 
-boardPresenterElement.init();
+filterPresenterElement.init();
+tripPresenterElement.init();

src/mock/const.js

@@ -5,23 +5,31 @@ 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 DESTINATION_COUNT = 4;
-export const POINT_COUNT = 4;
-export const OFFER_COUNT = 7;
+export const POINT_COUNT = 5;
+export const DESTINATION_COUNT = POINT_COUNT;
+export const OFFER_COUNT = 10;
 
 export const BooleanValues = [
   true,
   false
 ];
 
 export const POINT_EMPTY = {
+  id: 1,
   basePrice: 0,
-  dateFrom: null,
-  dateTo: null,
-  destination: null,
+  dateFrom: '',
+  dateTo: '',
+  destination: '',
   ifFavorite: false,
   offers: [],
-  type: 'flight',
+  type: 'Flight',
+};
+
+export const EMPTY_WARNINGS = {
+  EVERYTHING: 'Click New Event to create your first',
+  FUTURE: 'There are no past events now',
+  PRESENT: 'There are no present events now',
+  PAST: 'There are no future events now'
 };
 
 export const DESCRIPTION = [
@@ -37,10 +45,10 @@ export const OFFERS = [
   'Close But No Cigar',
   'On the Same Page',
   'Jaws of Death',
-  'Every Cloud Has a Silver Lining',
+  'Every Cloud Has a Silver',
   'Jig Is Up',
   'In a Pickle',
-  'What Goes Up Must Come Down',
+  'What Goes Up Must Come',
   'Break The Ice',
   'In the Red',
 ];
@@ -59,12 +67,26 @@ export const ROUTE_TYPE = [
 
 export const CITIES = [
   'Salisbury',
-  'Kingston upon Hull',
+  'Kingston',
   'Ripon',
   'Liverpool',
   'Carlisle',
   'Oxford',
   'Manchester',
   'Chelmsford',
-  'Carlisle'
 ];
+
+export const FilterType = {
+  EVERYTHING: 'Everything',
+  FUTURE: 'Future',
+  PRESENT: 'Present',
+  PAST: 'Past'
+};
+
+export const SortType = {
+  DAY: 'DAY',
+  EVENT: 'EVENT',
+  TIME: 'TIME',
+  PRICE: 'PRICE',
+  OFFERS: 'OFFERS'
+};

src/mock/filters.js

@@ -0,0 +1,16 @@
+import {FilterType} from './const.js';
+import {ispointExpired} from '../utils.js';
+
+const filter = {
+  [FilterType.EVERYTHING]: (points) => points.filter((point) => point),
+  [FilterType.FUTURE]:(points) => points.filter((point) => !ispointExpired(point.dateFrom) && !ispointExpired(point.dateTo)),
+  [FilterType.PRESENT]:(points) => points.filter((point) => ispointExpired(point.dateFrom) && !ispointExpired(point.dateTo)),
+  [FilterType.PAST]: (points) => points.filter((point) => ispointExpired(point.dateFrom) && ispointExpired(point.dateTo))
+};
+
+export const generateFilter = (points) => (
+  Object.entries(filter).map(([filterType, filterPoints]) => ({
+    type: filterType,
+    filteredPoints: filterPoints(points)
+  }))
+);

src/mock/offer.js

@@ -1,10 +1,8 @@
 import {getRandomArrayElement, getRandomInt} from '../utils.js';
 import {OFFERS} from './const.js';
+
 export const generateOffer = () => ({
-  offers:
-    {
-      id: crypto.randomUUID(),
-      title: getRandomArrayElement(OFFERS),
-      price: getRandomInt()
-    }
+  id: crypto.randomUUID(),
+  title: getRandomArrayElement(OFFERS),
+  price: getRandomInt()
 });

src/mock/point.js

@@ -1,12 +1,13 @@
-import {getRandomInt, getRandomBulValue, getDate} from '../utils.js';
+import {getRandomInt, getRandomBulValue, getDate, getRandomArrayElement} from '../utils.js';
+
 export const generatePoint = (offerType, destinationId, offerIds) => ({
   id: crypto.randomUUID(),
   basePrice: getRandomInt(),
-  dateFrom: getDate(false),
+  dateFrom: getDate(true),
   dateTo: getDate(true),
   destination: destinationId,
   isFavorite: getRandomBulValue(),
-  offers: offerIds,
+  offers: offerIds.map(() => (getRandomArrayElement(offerIds))),
   type: offerType
 }
 );

src/mock/sort.js

@@ -0,0 +1,17 @@
+import {SortType} from './const.js';
+import {getPointDuration} from '../utils.js';
+
+const sort = {
+  [SortType.DAY]: (points) => points.sort((point) => point.dateFrom),
+  [SortType.EVENT]: (points) => points.sort((point) => point),
+  [SortType.TIME]:(points) => points.sort((point) => getPointDuration(point.dateFrom, point.dateTo)),
+  [SortType.PRICE]: (points) => points.sort((point) => point.basePrice),
+  [SortType.OFFERS]: (points) => points.sort((point) => point),
+};
+
+export const generateSorter = (points) => (
+  Object.entries(sort).map(([sortType, sortPoints]) => ({
+    type: sortType,
+    sortedPoints: sortPoints(points)
+  }))
+);

src/model/destination-model.js

@@ -1,13 +1,15 @@
 export default class DestinationModel {
+  #destinations = null;
+
   constructor(service){
-    this.destinations = service.getDestinations();
+    this.#destinations = service.getDestinations();
   }
 
   get() {
-    return this.destinations;
+    return this.#destinations;
   }
 
   getById(id) {
-    return this.destinations.find((destinations) => destinations.id === id);
+    return this.#destinations.find((destinations) => destinations.id === id);
   }
 }

src/model/offers-model.js

@@ -1,13 +1,15 @@
 export default class OfferModel {
+  #offers = null;
+
   constructor(service){
-    this.offers = service.getOffers();
+    this.#offers = service.getOffers();
   }
 
   get() {
-    return this.offers;
+    return this.#offers;
   }
 
   getByType(type) {
-    return this.offers.find((offers) => offers.type === type).offers;
+    return this.#offers.find((offers) => offers.type === type).offers;
   }
 }

src/model/point-model.js

@@ -1,13 +1,15 @@
 export default class PointModel {
+  #points = null;
+
   constructor(service) {
-    this.points = service.getPoints();
+    this.#points = service.getPoints();
   }
 
   get() {
-    return this.points;
+    return this.#points;
   }
 
   getById(id) {
-    return this.points.find((points) => points.id === id);
+    return this.#points.find((points) => points.id === id);
   }
 }

src/presenter/filter-presenter.js

@@ -0,0 +1,34 @@
+import {render} from '../framework/render.js';
+import FilterView from '../view/filter-view.js';
+import {generateFilter} from '../mock/filters.js';
+
+export default class FilterPresenter{
+  #filterContainer = null;
+  #pointsModel = null;
+
+  constructor({filterContainer, pointsModel}) {
+    this.#filterContainer = filterContainer;
+    this.#pointsModel = pointsModel;
+  }
+
+  init(){
+    const points = [...this.#pointsModel.get()];
+    const tripControlFiltersElement = this.#filterContainer.querySelector('.trip-controls__filters');
+    const filters = generateFilter(points);
+
+    render(new FilterView({
+      filters,
+      onFilterClick: (filterType) => {
+        this.#renderFilteredPoints(filters.filter((filter) => (filter.type === filterType))[0]);
+      }
+    }), tripControlFiltersElement);
+  }
+
+  #renderFilteredPoints(points){
+    points.filteredPoints.forEach((point) => {
+      //Заглушка, пока не знаю, как решить
+      // eslint-disable-next-line no-console
+      console.log(point);
+    });
+  }
+}