Merge pull request #11 from InsomniaRolodex/module7-task1

package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "dayjs": "1.11.6",
-    "flatpickr": "4.6.13"
+    "flatpickr": "4.6.13",
+    "he": "1.2.0"
   }
 }

src/const.js

@@ -17,4 +17,23 @@ const EventType = {
   RESTAURANT: 'restaurant'
 };
 
-export {SortingType, EventType};
+const UserAction = {
+  UPDATE_POINT: 'UPDATE_POINT',
+  ADD_POINT: 'ADD_POINT',
+  DELETE_POINT: 'DELETE_POINT'
+};
+
+const UpdateType = {
+  PATCH: 'PATCH',
+  MINOR: 'MINOR',
+  MAJOR: 'MAJOR'
+};
+
+const FilterType = {
+  EVERYTHING: 'everything',
+  FUTURE: 'future',
+  PRESENT: 'present',
+  PAST: 'past'
+};
+
+export {SortingType, EventType, UserAction, UpdateType, FilterType};

src/main.js

@@ -1,15 +1,21 @@
 import TripPresenter from './presenter/trip-presenter.js';
 import HeaderPresenter from './presenter/header-presenter.js';
+import FilterPresenter from './presenter/filter-presenter.js';
+import FilterModel from './model/filter-model.js';
+import PointModel from './model/point-model.js';
 
 const tripSection = document.querySelector('.trip-events');
 const headerContainer = document.querySelector('.trip-main');
 const filtersContainer = document.querySelector('.trip-controls__filters');
 
+const filterModel = new FilterModel();
+const pointsModel = new PointModel();
 
-const tripSectionPresenter = new TripPresenter({container: tripSection});
+
+const tripSectionPresenter = new TripPresenter({container: tripSection, filterModel});
 const tripInfoPresenter = new HeaderPresenter({container: headerContainer});
-const filtersPresenter = new HeaderPresenter({ container: filtersContainer });
+const filterPresenter = new FilterPresenter({ filtersContainer, filterModel, pointsModel });
 
 tripInfoPresenter.initInfo();
-filtersPresenter.initFilters();
+filterPresenter.init();
 tripSectionPresenter.init();

src/mock/points.js

@@ -37,6 +37,18 @@ export const points = [
     ],
     type: 'taxi'
   },
+  {
+    id: 'f4b62099-293f-4c3d-a702-94eec4a2808g',
+    basePrice: 11300,
+    dateFrom: '2023-07-10T00:55:56.845Z',
+    dateTo: '2023-07-11T11:01:13.375Z',
+    destination: 'bfa5cb75-a1fe-4b77-a83c-0e528e910e04',
+    isFavorite: false,
+    offers: [
+      'b4c3e4e6-9053-42ce-b747-e281314baa31'
+    ],
+    type: 'sightseeing'
+  },
   {
     id: 'f4b62099-293f-4c3d-a702-94eec4a2808f',
     basePrice: 11100,
@@ -46,12 +58,21 @@ export const points = [
     isFavorite: false,
     offers: [],
     type: 'flight'
+  },
+  {
+    id: 'f4b62099-293f-4c3d-a702-94eec4a2808h',
+    basePrice: 21100,
+    dateFrom: '2024-08-14T12:55:56.845Z',
+    dateTo: '2025-08-15T14:22:13.375Z',
+    destination: 'bfa5cb75-a1fe-4b77-a83c-0e528e910e06',
+    isFavorite: true,
+    offers: [],
+    type: 'ship'
   }];
 
 export const defaultPoint = [
   {
-    id: '000',
-    basePrice: '000',
+    basePrice: '0',
     dateFrom: '2001-01-01T00:00:00.845Z',
     dateTo: '2001-01-01T00:00:00.845Z',
     destination: '',

src/model/filter-model.js

@@ -0,0 +1,15 @@
+import Observable from '../framework/observable.js';
+import { FilterType } from '../const.js';
+
+export default class FilterModel extends Observable {
+  #filter = FilterType.EVERYTHING;
+
+  get filter() {
+    return this.#filter;
+  }
+
+  setFilter(updateType, filter) {
+    this.#filter = filter;
+    this._notify(updateType, filter);
+  }
+}

src/model/point-model.js

@@ -1,14 +1,16 @@
 import { points, defaultPoint } from '../mock/points.js';
 import { destinations } from '../mock/destinations.js';
 import { offers } from '../mock/offers.js';
+import Observable from '../framework/observable.js';
 
-export default class PointModel {
+export default class PointModel extends Observable {
   #points;
   #destinations;
   #offers;
   #defaultPoint;
 
   constructor() {
+    super();
     this.#points = [];
     this.#destinations = [];
     this.#offers = [];
@@ -37,4 +39,44 @@ export default class PointModel {
   get defaultPoint() {
     return this.#defaultPoint;
   }
+
+  updatePoint(updateType, update) {
+    const index = this.#points.findIndex((point) => point.id === update.id);
+
+    if (index === -1) {
+      throw new Error ('Can\'t update unexisting point');
+    }
+
+    this.#points = [
+      ...this.#points.slice(0, index),
+      update,
+      ...this.#points.slice(index + 1)
+    ];
+
+    this._notify(updateType, update);
+  }
+
+  addPoint(updateType, update) {
+    this.#points = [
+      update,
+      ...this.#points
+    ];
+
+    this._notify(updateType, update);
+  }
+
+  deleteTask(updateType, update) {
+    const index = this.#points.findIndex((point) => point.id === update.id);
+
+    if (index === -1) {
+      throw new Error ('Can\'t delete unexisting point');
+    }
+
+    this.#points = [
+      ...this.#points.slice(0, index),
+      ...this.#points.slice(index + 1)
+    ];
+
+    this._notify(updateType);
+  }
 }

src/presenter/filter-presenter.js

@@ -0,0 +1,82 @@
+
+import FiltersView from '../view/filters-view';
+import { FilterType, UpdateType } from '../const';
+import { remove, replace, render } from '../framework/render';
+import { filter } from '../util.js';
+
+export default class FilterPresenter {
+  #filtersContainer;
+  #pointsModel;
+  #filterComponent = null;
+  #filterModel;
+
+  constructor ({filtersContainer, filterModel, pointsModel}) {
+    this.#filtersContainer = filtersContainer;
+    this.#filterModel = filterModel;
+    this.#pointsModel = pointsModel;
+
+    this.#pointsModel.addObserver(this.#handleModelEvent);
+    this.#filterModel.addObserver(this.#handleModelEvent);
+  }
+
+  get filters () {
+    const points = this.#pointsModel.points;
+
+    return [
+      {
+        type: FilterType.EVERYTHING,
+        name: 'Everything',
+        count: filter[FilterType.EVERYTHING](points).length
+      },
+      {
+        type: FilterType.FUTURE,
+        name: 'Future',
+        count: filter[FilterType.FUTURE](points).length
+      },
+      {
+        type: FilterType.PRESENT,
+        name: 'Present',
+        count: filter[FilterType.PRESENT](points).length
+      },
+      {
+        type: FilterType.PAST,
+        name: 'Past',
+        count: filter[FilterType.PAST](points).length
+      }
+    ];
+  }
+
+  init () {
+    const filters = this.filters;
+    const prevFilterComponent = this.#filterComponent;
+
+    this.#filterComponent = new FiltersView(
+      this.#pointsModel.points,
+      {
+        filters,
+        currentFilterType: this.#filterModel.filter,
+        onFilterTypeChange: this.#handleFilterTypeChange
+      });
+
+    if (prevFilterComponent === null) {
+      render(this.#filterComponent, this.#filtersContainer);
+      return;
+    }
+
+    replace(this.#filterComponent, prevFilterComponent);
+    remove(prevFilterComponent);
+  }
+
+  #handleModelEvent = () => {
+    this.init();
+  };
+
+  #handleFilterTypeChange = (filterType) => {
+    if (this.#filterModel.filter === filterType) {
+
+      return;
+    }
+
+    this.#filterModel.setFilter(UpdateType.MAJOR, filterType);
+  };
+}

src/presenter/header-presenter.js

@@ -1,5 +1,4 @@
 import { render, RenderPosition } from '../framework/render.js';
-import FiltersView from '../view/filters-view.js';
 import TripInfoView from '../view/trip-info-view.js';
 import PointModel from '../model/point-model.js';
 
@@ -16,9 +15,9 @@ export default class HeaderPresenter {
     render (new TripInfoView, this.#container, RenderPosition.AFTERBEGIN);
   }
 
-  initFilters () {
-    this.#pointModel.init();
-    const points = this.#pointModel.points;
-    render(new FiltersView(points), this.#container);
-  }
+  // initFilters () {
+  //   this.#pointModel.init();
+  //   const points = this.#pointModel.points;
+  //   render(new FiltersView(points), this.#container);
+  // }
 }

src/presenter/new-point-presenter.js

@@ -0,0 +1,73 @@
+import {remove, render, RenderPosition} from '../framework/render.js';
+import CreateFormView from '../view/create-form-view.js';
+import { UserAction, UpdateType } from '../const.js';
+
+export default class NewPointPresenter {
+  #tripList;
+  #handleDataChange;
+  #handleDestroy;
+  #createTripForm = null;
+
+  constructor ({tripList, onDataChange}) {
+    this.#tripList = tripList;
+    this.#handleDataChange = onDataChange;
+  }
+
+  init(point, destination, offer) {
+    if(this.#createTripForm !== null) {
+      return;
+    }
+
+    this.#createTripForm = new CreateFormView(point, destination, offer,
+      {
+        onFormSubmit: (newPoint) => {
+          this.#handleFormSubmit(newPoint);
+        },
+        onDeleteClick: () => {
+          this.#handleDeleteClick(point);
+        },
+        onNewEventClick: () => {
+          this.#handleNewEventClick(point, destination, offer);
+        }
+      });
+
+    document.addEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  destroy() {
+    if (this.#createTripForm === null) {
+      return;
+    }
+
+    remove(this.#createTripForm);
+    this.#createTripForm = null;
+
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  #handleFormSubmit = (point) => {
+    this.#handleDataChange(
+      UserAction.ADD_POINT,
+      UpdateType.MINOR,
+      {id: `test${Math.random().toString()}`, ...point}
+    );
+
+    this.destroy();
+  };
+
+  #handleDeleteClick = () => {
+    this.destroy();
+  };
+
+  #escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape' || evt.key === 'Esc') {
+      evt.preventDefault();
+      this.destroy();
+    }
+  };
+
+  #handleNewEventClick(point, destination, offer) {
+    this.init(point, destination, offer);
+    render(this.#createTripForm, this.#tripList.element, RenderPosition.AFTERBEGIN);
+  }
+}