Реализована работа с датами, добавлена библиотека flatpickr

package.json

@@ -33,6 +33,7 @@
     "node": "20"
   },
   "dependencies": {
-    "dayjs": "1.11.7"
+    "dayjs": "1.11.7",
+    "flatpickr": "4.6.13"
   }
 }

src/const.js

@@ -1,15 +1,5 @@
 export const EVENT_TYPES = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant'];
 
-export const getDefaultPoint = () => ({
-  'basePrice': 0,
-  'dateFrom': new Date().toISOString(),
-  'dateTo': new Date().toISOString(),
-  'destination': '',
-  'isFavorite': false,
-  'offers': [],
-  'type': EVENT_TYPES[0],
-});
-
 export const FilterTypes = {
   EVERYTHING: 'everything',
   FUTURE: 'future',
@@ -31,3 +21,13 @@ export const DateFormats = {
   DATE_TIME: 'YYYY-MM-DDTHH:mm',
   MONTH_DAY: 'MMM D',
 };
+
+export function idCounter() {
+  let id = 1;
+
+  return {
+    getId: function() {
+      return id++;
+    }
+  };
+}

src/main.js

@@ -3,8 +3,9 @@ import TripPlanPresenter from './presenter/trip-plan-presenter';
 
 const headerContainer = document.querySelector('.trip-controls__filters');
 const mainContainer = document.querySelector('.trip-events');
+const newPointButton = document.querySelector('.trip-main__event-add-btn');
 const pointModel = new PointModel();
 pointModel.init();
 
-const tripPlanPresenter = new TripPlanPresenter(headerContainer, mainContainer, pointModel);
+const tripPlanPresenter = new TripPlanPresenter(headerContainer, mainContainer, pointModel, newPointButton);
 tripPlanPresenter.init();

src/mock/points.js

@@ -1,42 +1,55 @@
+import { idCounter } from '../const.js';
+export const id = idCounter();
+
+export const getDefaultPoint = () => ({
+  basePrice: 0,
+  dateFrom: new Date().toISOString(),
+  dateTo: new Date().toISOString(),
+  destination: '2',
+  isFavorite: false,
+  offers: [],
+  type: 'flight',
+});
+
 export const points = [
   {
-    'id': '1',
-    'basePrice': 1200,
-    'dateFrom': '2019-07-09T18:15:56.845Z',
-    'dateTo': '2019-07-10T19:55:56.845Z',
-    'destination': '1',
-    'isFavorite': true,
-    'offers': [ '2' ],
-    'type': 'taxi'
+    id: id.getId(),
+    basePrice: 1200,
+    dateFrom: '2019-07-09T18:15:56.845Z',
+    dateTo: '2019-07-10T19:55:56.845Z',
+    destination: '1',
+    isFavorite: true,
+    offers: ['2'],
+    type: 'taxi',
   },
   {
-    'id': '2',
-    'basePrice': 1100,
-    'dateFrom': '2019-06-10T21:55:56.845Z',
-    'dateTo': '2019-06-11T12:22:13.375Z',
-    'destination': '2',
-    'isFavorite': false,
-    'offers': [ '5', '6' ],
-    'type': 'bus'
+    id: id.getId(),
+    basePrice: 1100,
+    dateFrom: '2019-06-10T21:55:56.845Z',
+    dateTo: '2019-06-11T12:22:13.375Z',
+    destination: '2',
+    isFavorite: false,
+    offers: ['5', '6'],
+    type: 'bus',
   },
   {
-    'id': '3',
-    'basePrice': 1500,
-    'dateFrom': '2019-07-10T07:55:56.845Z',
-    'dateTo': '2019-07-10T17:19:13.375Z',
-    'destination': '3',
-    'isFavorite': true,
-    'offers': [ '7' ],
-    'type': 'flight'
+    id: id.getId(),
+    basePrice: 1500,
+    dateFrom: '2019-07-10T07:55:56.845Z',
+    dateTo: '2019-07-10T17:19:13.375Z',
+    destination: '3',
+    isFavorite: true,
+    offers: ['7'],
+    type: 'flight',
   },
   {
-    'id': '4',
-    'basePrice': 1900,
-    'dateFrom': '2019-08-12T07:55:56.845Z',
-    'dateTo': '2019-08-12T11:19:13.375Z',
-    'destination': '2',
-    'isFavorite': false,
-    'offers': [],
-    'type': 'train'
+    id: id.getId(),
+    basePrice: 1900,
+    dateFrom: '2019-08-12T07:55:56.845Z',
+    dateTo: '2019-08-12T11:19:13.375Z',
+    destination: '2',
+    isFavorite: false,
+    offers: [],
+    type: 'train',
   },
 ];

src/model/point-model.js

@@ -1,4 +1,4 @@
-import { points } from '../mock/points';
+import { points, id } from '../mock/points';
 import { destinations } from '../mock/destinations';
 import { offers } from '../mock/offers';
 import { FilterTypes } from '../const';
@@ -37,4 +37,15 @@ export default class PointModel {
       item.id === point.id ? point : item
     );
   }
+
+  addPoint(newPoint) {
+    const point = { ...newPoint, id: id.getId() };
+    this.#points.push(point);
+    return point;
+  }
+
+  deletePoint(point) {
+    const newPoints = this.#points.filter((item) => item.id !== point.id);
+    this.#points = newPoints;
+  }
 }

src/presenter/point-presenter.js

@@ -8,19 +8,21 @@ export default class PointPresenter {
   #offers = null;
   #view = null;
   #changeEditingPoint = null;
+  #deletePoint = null;
 
-  constructor({ destinations, offers, container, updatePoint, changeEditingPoint }) {
+  constructor({ destinations, offers, container, updatePoint, changeEditingPoint, deletePoint }) {
     this.#pointsListComponent = container;
     this.updatePoint = updatePoint;
     this.#destinations = destinations;
     this.#offers = offers;
     this.#changeEditingPoint = changeEditingPoint;
+    this.#deletePoint = deletePoint;
   }
 
-  init(point) {
+  init(point, renderPosition) {
     this.point = point;
     this.#view = this.createPointView();
-    render(this.#view, this.#pointsListComponent);
+    render(this.#view, this.#pointsListComponent, renderPosition);
   }
 
   createPointView() {
@@ -43,7 +45,8 @@ export default class PointPresenter {
       destinations: this.#destinations,
       offers: this.#offers,
       onFormClose: this.#onFormClose,
-      onFormSubmit: this.#onFormSubmit
+      onFormSubmit: this.#onFormSubmit,
+      onDeletePoint: this.#onDeletePoint,
     });
   }
 
@@ -87,4 +90,9 @@ export default class PointPresenter {
   #onFormSubmit = (updatedPoint) => {
     this.updatePoint(updatedPoint);
   };
+
+  #onDeletePoint = (deletedPoint) => {
+    this.#deletePoint(deletedPoint);
+  };
+
 }

src/presenter/trip-plan-presenter.js

@@ -2,9 +2,10 @@ import FilterForm from '../view/filter';
 import SortForm from '../view/sort';
 import PointsList from '../view/points-list';
 import EmptyPointsListView from '../view/empty-points-list.js';
-import { render } from '../framework/render.js';
+import { render, RenderPosition } from '../framework/render.js';
 import PointPresenter from './point-presenter.js';
 import { sortByDay, sortByTime, sortByPrice } from '../helpers.js';
+import { getDefaultPoint } from '../mock/points.js';
 
 export default class TripPlanPresenter {
   #pointsListComponent = new PointsList();
@@ -14,16 +15,20 @@ export default class TripPlanPresenter {
   #pointPresenters = new Map();
   editingPointId = null;
   #currentSortType = 'sort-day';
+  #newPointButton = null;
+  #newPointPresenter = null;
 
-  constructor(headerContainer, mainContainer, pointModel) {
+  constructor(headerContainer, mainContainer, pointModel, newPointButton) {
     this.#filterContainer = headerContainer;
     this.#eventsContainer = mainContainer;
     this.#pointModel = pointModel;
+    this.#newPointButton = newPointButton;
   }
 
   init() {
     render(new FilterForm(), this.#filterContainer);
     this.#renderPointsList();
+    this.#newPointButton.addEventListener('click', this.#onNewEventClick);
   }
 
   #renderPointsList() {
@@ -70,11 +75,30 @@ export default class TripPlanPresenter {
       container: this.#pointsListComponent.element,
       updatePoint: this.updatePoint,
       changeEditingPoint: this.changeEditingPoint,
+      deletePoint: this.#deletePoint,
     });
     pointPresenter.init(point);
     this.#pointPresenters.set(point.id, pointPresenter);
   };
 
+  #onNewEventClick = () => {
+    this.#newPointPresenter = new PointPresenter({
+      destinations: this.#pointModel.destinations,
+      offers: this.#pointModel.offers,
+      container: this.#pointsListComponent.element,
+      updatePoint: () => console.log('NEW POINT: UPDATE POINT'),
+      changeEditingPoint: this.#onCancelButton,
+
+    });
+    this.#newPointPresenter.init(getDefaultPoint(), RenderPosition.AFTERBEGIN);
+    this.#newPointPresenter.enableEditMode();
+  };
+
+  #onCancelButton = () => {
+    this.#newPointPresenter.removeComponent();
+    this.#newPointPresenter = null;
+  };
+
   changeEditingPoint = (pointId) => {
     if (pointId === null) {
       this.#pointPresenters.get(this.editingPointId).disableEditMode();
@@ -114,4 +138,9 @@ export default class TripPlanPresenter {
     this.#clearPointsList();
     this.#renderPoints();
   };
+
+  #deletePoint = (deletedPoint) => {
+    this.#pointPresenters.get(deletedPoint.id).removeComponent();
+    this.#pointModel.deletePoint(deletedPoint);
+  };
 }