Merge pull request #7 from Borisod/module5-task2

src/const.js

@@ -0,0 +1,13 @@
+export const SortType = {
+  DAY: 'day',
+  PRICE: 'price',
+  TIME: 'time',
+};
+
+export const SORT_OPTIONS = [
+  { id: 'sort-day', value: 'day', label: 'Day', isDisabled: false, isChecked: true },
+  { id: 'sort-event', value: 'event', label: 'Event', isDisabled: true, isChecked: false },
+  { id: 'sort-time', value: 'time', label: 'Time', isDisabled: false, isChecked: false },
+  { id: 'sort-price', value: 'price', label: 'Price', isDisabled: false, isChecked: false },
+  { id: 'sort-offer', value: 'offer', label: 'Offers', isDisabled: true, isChecked: false },
+];

src/main.js

@@ -1,11 +1,11 @@
-import GeneralPresenter from './presenter/general-presenter';
+import BoardPresenter from './presenter/board-presenter';
 import PointModel from './model/model';
 
 const filtersContainer = document.querySelector('.trip-controls__filters');
 const eventsContainer = document.querySelector('.trip-events');
 const model = new PointModel();
 model.init();
-const generalPresenter = new GeneralPresenter({filtersContainer, eventsContainer, model});
+const boardPresenter = new BoardPresenter({filtersContainer, eventsContainer, model});
 
-generalPresenter.init();
+boardPresenter.init();
 

src/presenter/board-presenter.js

@@ -0,0 +1,107 @@
+import FiltersView from '../view/filters-view.js';
+import SortView from '../view/sorts-view.js';
+import NoEventItemView from '../view/no-events-item-view.js';
+import EventListView from '../view/events-list-view.js';
+import { RenderPosition } from '../render.js';
+import { render } from '../framework/render.js';
+import EventPresenter from './event-presenter.js';
+import {SortType} from '../const.js';
+
+export default class BoardPresenter {
+  #filtersContainer = null;
+  #eventsContainer = null;
+  #eventsListView = new EventListView();
+  #model = null;
+  #eventPresenters = new Map();
+  #currentSortType = 'day';
+
+  constructor({ filtersContainer, eventsContainer, model }) {
+    this.#filtersContainer = filtersContainer;
+    this.#eventsContainer = eventsContainer;
+    this.#model = model;
+  }
+
+  init() {
+    render(new FiltersView(), this.#filtersContainer, RenderPosition.BEFOREEND);
+
+    if (this.#model.events.length === 0) {
+      render(new NoEventItemView(), this.#eventsContainer);
+      return;
+    }
+
+    const sortView = new SortView({
+      onSortTypeChange: this.#handleSortTypeChange,
+    });
+    render(sortView, this.#eventsContainer);
+
+    render(this.#eventsListView, this.#eventsContainer);
+
+    this.#renderTripEvents();
+  }
+
+  #renderTripEvents() {
+    this.#clearTripEvents();
+
+    const sortedEvents = this.#getSortedEvents();
+    sortedEvents.forEach((event) => {
+      this.#renderEvent(event);
+    });
+  }
+
+  #renderEvent(event) {
+    const eventPresenter = new EventPresenter({
+      eventsContainer: this.#eventsListView.element,
+      model: this.#model,
+      onEventUpdate: this.#handleEventUpdate,
+      onEdit: this.#handleEditEvent,
+    });
+    eventPresenter.init(event);
+    this.#eventPresenters.set(event.id, eventPresenter);
+  }
+
+  #clearTripEvents() {
+    this.#eventPresenters.forEach((presenter) => presenter.resetView());
+    this.#eventPresenters.clear();
+    this.#eventsListView.element.replaceChildren();
+  }
+
+  #getSortedEvents() {
+    const events = [...this.#model.events];
+
+    switch (this.#currentSortType) {
+      case SortType.TIME:
+        return events.sort(
+          (a, b) =>
+            (new Date(b.dateTo) - new Date(b.dateFrom)) -
+            (new Date(a.dateTo) - new Date(a.dateFrom))
+        );
+      case SortType.PRICE:
+        return events.sort((a, b) => b.basePrice - a.basePrice);
+      case SortType.DAY:
+      default:
+        return events.sort((a, b) => new Date(a.dateFrom) - new Date(b.dateFrom));
+    }
+  }
+
+  #handleSortTypeChange = (sortType) => {
+    if (this.#currentSortType === sortType) {
+      return;
+    }
+
+    this.#currentSortType = sortType;
+    this.#renderTripEvents();
+  };
+
+  #handleEditEvent = () => {
+    this.#eventPresenters.forEach((presenter) => presenter.resetView());
+  };
+
+  #handleEventUpdate = (updatedEvent) => {
+    this.#model.updateEvent(updatedEvent);
+
+    if (this.#eventPresenters.has(updatedEvent.id)) {
+      const presenter = this.#eventPresenters.get(updatedEvent.id);
+      presenter.init(updatedEvent);
+    }
+  };
+}

src/presenter/event-presenter.js

@@ -1,39 +1,53 @@
 import EventItemView from '../view/event-item-view.js';
 import EditingForm from '../view/event-edit-view.js';
-import EventListView from '../view/events-list-view.js';
 import { render, replace } from '../framework/render.js';
 
 export default class EventPresenter {
   #eventsContainer = null;
   #model = null;
-  #eventListView = null;
   #onKeyDownHandler = null;
   #onEventUpdate = null;
   #onEdit = null;
-  #destinations = null;
-  #offers = null;
+  #destinations = [];
+  #offers = [];
   #tripEventView = null;
   #eventEditView = null;
 
   constructor({ eventsContainer, model, onEventUpdate, onEdit }) {
     this.#eventsContainer = eventsContainer;
     this.#model = model;
-    this.#eventListView = new EventListView();
     this.#onEventUpdate = onEventUpdate;
     this.#onEdit = onEdit;
-    this.#destinations = model.destinations;
-    this.#offers = model.offers;
   }
 
   init(event) {
+    this.#destinations = this.#model.destinations;
+    this.#offers = this.#model.offers;
+
+    const prevTripEventView = this.#tripEventView;
+    const prevEventEditView = this.#eventEditView;
+
     this.#tripEventView = new EventItemView({
       event,
       destinations: this.#destinations,
       offers: this.#offers,
       onClick: () => this.#switchToEditMode(event),
-      onFavoriteClick: () => this.#handleFavoriteClick(event)
+      onFavoriteClick: () => this.#handleFavoriteClick(event),
     });
-    render(this.#tripEventView, this.#eventsContainer);
+
+    if (!prevTripEventView && !prevEventEditView) {
+      render(this.#tripEventView, this.#eventsContainer);
+      return;
+    }
+
+    if (prevTripEventView) {
+      replace(this.#tripEventView, prevTripEventView);
+    }
+
+    if (prevEventEditView) {
+      replace(this.#tripEventView, prevEventEditView);
+      this.#eventEditView = null;
+    }
   }
 
   resetView() {
@@ -48,10 +62,10 @@ export default class EventPresenter {
     this.#eventEditView = new EditingForm({
       event,
       events: this.#model.events,
-      destinations: this.#model.destinations,
-      offers: this.#model.offers,
+      destinations: this.#destinations,
+      offers: this.#offers,
       onSubmit: () => this.#switchToViewMode(),
-      onClick: () => this.#switchToViewMode()
+      onClick: () => this.#switchToViewMode(),
     });
 
     replace(this.#eventEditView, this.#tripEventView);
@@ -78,19 +92,5 @@ export default class EventPresenter {
   #handleFavoriteClick(event) {
     const updatedEvent = { ...event, isFavorite: !event.isFavorite };
     this.#onEventUpdate(updatedEvent);
-    this.#rerenderEvent(updatedEvent);
-  }
-
-  #rerenderEvent(updatedEvent) {
-    const newTripEventView = new EventItemView({
-      event: updatedEvent,
-      destinations: this.#destinations,
-      offers: this.#offers,
-      onClick: () => this.#switchToEditMode(updatedEvent),
-      onFavoriteClick: () => this.#handleFavoriteClick(updatedEvent)
-    });
-
-    replace(newTripEventView, this.#tripEventView);
-    this.#tripEventView = newTripEventView;
   }
 }

src/view/event-edit-view.js

@@ -41,7 +41,6 @@ function getPictures(pictures){
 `;
 }
 
-
 function editEventFormTemplate(event, destinations, offers, events){
   const eventTypes = events.map((evt) => evt.type);
   const eventId = event.id;
@@ -115,10 +114,10 @@ ${getPictures(pictures)}
 }
 
 export default class EditingForm extends AbstractView {
-  #events = null;
+  #events = [];
   #event = null;
-  #destinations = null;
-  #offers = null;
+  #destinations = [];
+  #offers = [];
   #onClick = null;
   #onSubmit = null;
 

src/view/event-item-view.js

@@ -58,8 +58,8 @@ const createWayPointTemplate = (event, destinations, offers) => {
 
 export default class EventItemView extends AbstractView {
   #event = null;
-  #destinations = null;
-  #offers = null;
+  #destinations = [];
+  #offers = [];
   #onClick = null;
   #onFavoriteClick = null;
 

src/view/events-list-view.js

@@ -4,7 +4,7 @@ function createEventsListView(){
   return '<ul class="trip-events__list"></ul>';
 }
 
-export default class EventListView extends AbstractView{
+export default class EventsListView extends AbstractView{
   get template(){
     return createEventsListView();
   }