Merge pull request #13 from Jey-Key30/module8-task2

public/index.html

@@ -21,8 +21,6 @@ <h2 class="visually-hidden">Filter events</h2>
               <!-- Фильтры -->
             </div>
           </div>
-
-          <!-- <button class="trip-main__event-add-btn  btn  btn--big  btn--yellow" type="button">New event</button> -->
         </div>
       </div>
     </header>

src/main.js

@@ -9,7 +9,7 @@ import FilterModel from './model/filter-model.js';
 
 import PointApiService from '../src/service/point-api-service.js';
 
-const AUTHORIZATION = 'Basic 09SVykjhUhHbMdik';
+const AUTHORIZATION = 'Basic 09SVykjhUhHbMdig';
 const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip';
 
 const bodyElement = document.querySelector('body');

src/model/point-model.js

@@ -1,5 +1,5 @@
 import Observable from '../framework/observable.js';
-import { UpdateType } from '../const.js';
+import {UpdateType} from '../const.js';
 import {updateItem, adaptToClient, adaptToServer} from '../utils.js';
 
 export default class PointModel extends Observable {

src/presenter/board-presenter.js

@@ -1,11 +1,12 @@
-import {render, remove} from '../framework/render.js';
+import {render, remove, RenderPosition} from '../framework/render.js';
 import EventListView from '../view/event-list-view.js';
 import SortView from '../view/sort-view.js';
 import PointPresenter from './point-presenter.js';
-// import TripInfoView from '../view/trip-info-view.js';
+import FilterView from '../view/filter-view.js';
+import TripInfoView from '../view/trip-info-view.js';
 import {sortPointDay, sortPointPrice, sortPointTime} from '../utils.js';
-import {SortType, UpdateType, UserAction, TimeLimit} from '../const.js';
-import {FilterType} from '../model/filter-model.js';
+import {FilterType, SortType, UpdateType, UserAction, TimeLimit} from '../const.js';
+// import {FilterType} from '../model/filter-model.js';
 // import NewPointButtonPresenter from '../presenter/new-point-button-presenter.js';
 import NewPointPresenter from '../presenter/new-point-presenter.js';
 import MessageView from '../view/message-view.js';
@@ -22,16 +23,19 @@ export default class BoardPresenter {
 
   #tripEventsElement = null;
   #tripInfoElement = null;
+  #tripFliterElement = null;
 
   #pointPresenterArray = new Map();
   #newPointPresenter = null;
   #newPointButtonPresenter = null;
 
   #currentSortType = SortType.DAY;
+  #currentFilteType = FilterType.EVERYTHING;
   #sourcedTripPoints = [];
   #isCreating = false;
 
   #sortComponent = null;
+  #tripInfoComponent = null;
   #filterComponent = null;
   #loadingComponent = new LoadingView();
   #pointsListComponent = new EventListView();
@@ -41,7 +45,7 @@ export default class BoardPresenter {
     upperLimit: TimeLimit.UPPER_LIMIT
   });
 
-  #isLoading = true;
+  #isLoading = false;
 
   constructor({tripContainer, destinationsModel,
     offersModel, pointsModel, filterModel,
@@ -67,21 +71,18 @@ export default class BoardPresenter {
   }
 
   get points() {
-    // const filterType = this.#filterModel.get();
-    // const filteredPoints = filter[filterType](this.#pointsModel.get());
-
-    // return sort[this.#currentSortType](filteredPoints);
-    return this.#pointsModel.points;
-    // return filteredPoints;
+    const points = this.#pointsModel.points;
+    // const filteredPoints = filter[this.#currentFilteType](points);
+    // return filteredPoints.sort(sortPointDay);
+    return points;
   }
 
   init(){
     this.#tripEventsElement = this.#tripContainer.querySelector('.trip-events');
     this.#tripInfoElement = this.#tripContainer.querySelector('.trip-main');
-    // this.#sourcedTripPoints = [...this.#pointsModel.get()];
-    // this.points.sort(sortPointDay);
-    this.#sourcedTripPoints.sort(sortPointDay);
-
+    this.#tripFliterElement = this.#tripContainer.querySelector('.trip-controls__filters');
+    this.#renderFilters();
+    this.#renderLoading();
     // this.#renderBoard();
   }
 
@@ -140,10 +141,31 @@ export default class BoardPresenter {
     render(this.#loadingComponent, this.#tripEventsElement);
   };
 
+  #renderFilters = () => {
+    this.#filterComponent = new FilterView({
+      filters: FilterType,
+      onFilterTypeChange: this.#filterTypeChangeHandler
+    });
+
+    render(this.#filterComponent, this.#tripFliterElement);
+  };
+
   #renderPointsList = () => {
     render(this.#pointsListComponent, this.#tripEventsElement);
   };
 
+  #renderTripInfo = () => {
+    const points = this.points;
+    this.#tripInfoComponent = new TripInfoView({
+      points: points,
+      destinations: [...this.#destinationsModel.get()],
+      offers: [...this.#offersModel.get()]
+    });
+
+    if (this.#tripInfoComponent.element !== null)
+    {render(this.#tripInfoComponent, this.#tripInfoElement, RenderPosition.AFTERBEGIN);}
+  };
+
   #renderBoard = () => {
     if (this.points.length === 0 && !this.#isLoading) {
       this.#renderMessage();
@@ -152,8 +174,10 @@ export default class BoardPresenter {
 
     if (this.#isLoading) {
       this.#renderLoading();
+      return;
     }
 
+    this.#renderTripInfo();
     this.#renderSort();
     this.#renderPointsList();
     this.#renderPoints();
@@ -163,6 +187,7 @@ export default class BoardPresenter {
     this.#clearPoints();
     remove(this.#messageComponent);
     remove(this.#sortComponent);
+    remove(this.#tripInfoComponent);
     this.#sortComponent = null;
 
     if (resetSortType) {
@@ -226,6 +251,16 @@ export default class BoardPresenter {
     }
   };
 
+  #filterTypeChangeHandler = (filterType) => {
+    if (this.#currentFilteType === filterType) {
+      return;
+    }
+
+    // this.#filterPoints(filterType);
+    this.#clearPoints();
+    this.#renderPoints();
+  };
+
   #sortTypeChangeHandler = (sortType) => {
     if (this.#currentSortType === sortType) {
       return;
@@ -240,6 +275,11 @@ export default class BoardPresenter {
     this.#newPointPresenter.destroy();
   };
 
+  // #filterPoints = (filterType) => {
+  //   filter[filterType](this.#pointsModel.points);
+  //   console.log(filter[filterType](this.#pointsModel.points));
+  // };
+
   #sortPoints = (sortType) => {
     switch (sortType) {
       case SortType.PRICE:

src/presenter/point-presenter.js

@@ -2,7 +2,6 @@ import {render, replace, remove} from '../framework/render.js';
 import EditPointView from '../view/edit-point-view.js';
 import EventPointView from '../view/event-point-view.js';
 import {MODE, UpdateType, UserAction} from '../const.js';
-import {isBigDifference} from '../utils.js';
 
 export default class PointPresenter {
   #point = null;
@@ -168,11 +167,9 @@ export default class PointPresenter {
   };
 
   #formSubmitHandler = (updatedPoint) => {
-    const isMinor = isBigDifference(updatedPoint, this.#point);
-
     this.#handleDataChange(
       UserAction.UPDATE_POINT,
-      isMinor ? UpdateType.MINOR : UpdateType.PATCH,
+      UpdateType.MINOR,
       updatedPoint
     );
 

src/view/edit-point-view.js

@@ -7,7 +7,7 @@ import 'flatpickr/dist/flatpickr.min.css';
 
 const getPicrtureItem = (picture) => `<img class="event__photo" src="${picture.src}" alt="${picture.description}">`;
 
-const getDestinationItem = (city, isDisabled) => `<option value="${city} ${isDisabled ? 'disabled' : ''}"></option>`;
+const getDestinationItem = (city, isDisabled) => `<option value="${city}" ${isDisabled ? 'disabled' : ''}></option>`;
 
 const getEventTypeItem = (typeItem, type, isDisabled) => `<div class="event__type-item">
     <input id="event-type-${typeItem}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${typeItem}"
@@ -30,13 +30,12 @@ const createEditPointTemplate = ({state, pointDestinations, pointOffers, type})
 
   const {basePrice, dateFrom, dateTo, id,
     destination, offers, isSaving, isDeleting, isDisabled} = state;
-  const pointDestination = pointDestinations.getById(destination)
+  const pointDestination = pointDestinations
     ? pointDestinations.getById(destination)
     : null;
   const pictureItemsTemplate = pointDestinations
     .getById(destination)
     ?.pictures.map((picture) => getPicrtureItem(picture)).join('');
-
   const typeItemsTemplate = ROUTE_TYPE.map((typeItem) => getEventTypeItem(typeItem, state.type, isDisabled)).join('');
   const cityItemsTemplate = pointDestinations.get()
     .map((point) => point.name)

src/view/filter-view.js

@@ -1,31 +1,23 @@
 import AbstractView from '../framework/view/abstract-view.js';
 
-const createFilterItemTemplate = (filter, isChecked) => {
-  const {type} = filter;
-
-  return (`<div class="trip-filters__filter">
-  <input id="filter-${type.toLowerCase()}" class="trip-filters__filter-input  visually-hidden" type="radio" name="trip-filter" value="${type.toLowerCase()}"
-  ${isChecked ? 'checked' : ''}>
-  <label class="trip-filters__filter-label" for="filter-${type.toLowerCase()}">${type}</label>
+const createFilterItems = (filter, flag) => (`<div class="trip-filters__filter">
+  <input id="filter-${filter.toLowerCase()}" class="trip-filters__filter-input  visually-hidden" type="radio" name="trip-filter" value="${filter.toLowerCase()}"
+  ${flag === 0 ? 'checked' : ''}>
+  <label class="trip-filters__filter-label" for="filter-${filter.toLowerCase()}">${filter}</label>
 </div>`);
-};
-
-const createFilterTemplate = (filterItems) => {
-  const filterItemsTemplate = filterItems.map((filter, index) => createFilterItemTemplate(filter, index === 0)).join('');
 
-  return (`<form class="trip-filters" action="#" method="get">
-  ${filterItemsTemplate}
-<button class="visually-hidden" type="submit">Accept filter</button>
-</form>`);
-};
+const createFilterTemplate = (filters) => (`<form class="trip-filters" action="#" method="get">
+      ${filters.map((filter, index) => createFilterItems(filter, index)).join('')}
+      <button class="visually-hidden" type="submit">Accept filter</button>
+    </form>`);
 
 export default class FilterView extends AbstractView{
   #filters = null;
   #handleFilterTypeChange = null;
 
   constructor({filters, onFilterTypeChange}) {
     super();
-    this.#filters = filters;
+    this.#filters = Object.values(filters);
     this.#handleFilterTypeChange = onFilterTypeChange;
 
     this.element.querySelectorAll('.trip-filters__filter')
@@ -37,7 +29,7 @@ export default class FilterView extends AbstractView{
   }
 
   #filterClickHandler = (evt) => {
-    evt.preventDefault();
-    this.#handleFilterTypeChange (evt.target.innerHTML);
+    // evt.preventDefault();
+    this.#handleFilterTypeChange(evt.target.innerHTML);
   };
 }

src/view/trip-info-view.js

@@ -1,48 +1,66 @@
-import {POINT_EMPTY} from '../mock/const.js';
+import {POINT_EMPTY} from '../const.js';
 import {formatToShortDate, formatToDay} from '../utils.js';
 import AbstractView from '../framework/view/abstract-view.js';
 import dayjs from 'dayjs';
 
+const getOffersCoast = (offersIds = [], offers = []) => offersIds.reduce(
+  (result, id) => result + (offers.find((offer) => offer.id === id)?.price ?? 0),
+  0
+);
+
+const getTripCost = (points = [], offers = []) => points.reduce(
+  (result, point) => result + point.basePrice + getOffersCoast(point.offers, offers.find((offer) => point.type === offer.type)?.offers),
+  0
+);
+
 const findDestinationForPoint = (point, pointDestination) =>
   pointDestination.find((destination) => destination.id === point.destination);
 
-const createDestinationElement = (pointDestination) =>
-  pointDestination.length <= 3
-    ? pointDestination.map((destination) => (`${destination} - `)).join('').slice(0, -2)
-    : `${pointDestination[0]} - ... - ${pointDestination[pointDestination.length - 1]}`;
+const createDestinationElement = (destinations) =>
+  destinations.length <= 3
+    ? destinations.map((destination) => (`${destination} - `)).join('').slice(0, -2)
+    : `${destinations[0]} - ... - ${destinations[destinations.length - 1]}`;
 
-const createTripInfoTemplate = ({points, pointDestination}) => (`<section class="trip-main__trip-info  trip-info">
+const createTripInfoTemplate = ({points, destination, isEmpty, cost}) =>
+  (`${!isEmpty
+    ? `<section class="trip-main__trip-info  trip-info">
     <div class="trip-info__main">
-      <h1 class="trip-info__title">${createDestinationElement(pointDestination)}</h1>
+      <h1 class="trip-info__title">${createDestinationElement(destination)}</h1>
 
       <p class="trip-info__dates">${formatToShortDate(points[0].dateFrom)}&nbsp;—&nbsp;
       ${dayjs(points[points.length - 1].dateTo).month() === dayjs(points[0].dateFrom).month()
-    ? formatToDay(points[points.length - 1].dateTo)
-    : formatToShortDate(points[points.length - 1].dateTo)}</p>
+      ? formatToDay(points[points.length - 1].dateTo)
+      : formatToShortDate(points[points.length - 1].dateTo)}</p>
     </div>
 
     <p class="trip-info__cost">
       Total: €&nbsp;<span class="trip-info__cost-value">
-      ${points.reduce((x, point) => (x + point.basePrice), 0)}</span>
+      ${cost}</span>
     </p>
-    </section>`);
+    </section>`
+    : ''
+  }`);
 
 export default class TripInfoView extends AbstractView {
-  #points = null;
-  #pointDestination = [];
+  #points = 0;
+  #destination = [];
+  #offers = [];
 
-  constructor({points = POINT_EMPTY, pointDestination}) {
+  constructor({points = POINT_EMPTY, destinations, offers}) {
     super();
     this.#points = points;
-    this.#pointDestination = points
-      .map((point) => findDestinationForPoint(point, pointDestination))
+    this.#offers = offers;
+    this.#destination = points
+      .map((point) => findDestinationForPoint(point, destinations))
       .map((destination) => destination.name);
   }
 
   get template() {
     return createTripInfoTemplate({
       points: this.#points,
-      pointDestination: this.#pointDestination,
+      destination: this.#destination,
+      isEmpty: this.#points.length === 0,
+      cost: getTripCost(this.#points, this.#offers)
     });
   }
 }