Меняй-удаляй

babel-config.json

@@ -0,0 +1,10 @@
+{
+    "presets": [
+     [
+      "@babel/preset-env",
+      {
+       "targets": "defaults"
+      }
+     ]
+    ]
+}

package.json

@@ -33,6 +33,7 @@
     "not < 0.25%"
   ],
   "dependencies": {
-    "dayjs": "1.11.9"
+    "dayjs": "1.11.9",
+    "flatpickr": "^4.6.13"
   }
 }

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/const.js

@@ -37,11 +37,30 @@ const DESCRIPTIONS = [
   'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ad eaque cupiditate praesentium maxime.',
 ];
 
+const DEFAULT_EVENT_TYPE = 'flight';
+
+const POINT_DUMMY = {
+  basePrice: 0,
+  dateFrom: null,
+  dateTo: null,
+  destination: null,
+  isFavorite: false,
+  offers: [],
+  type: DEFAULT_EVENT_TYPE,
+};
+
+const REQUIRED_POINT_FIELDS = ['dateFrom', 'dateTo', 'destination', 'type'];
+
 const PointMode = {
   IDLE: 'IDLE',
   EDITABLE: 'EDITABLE',
 };
 
+const EditType = {
+  EDITING: 'EDITING',
+  CREATING: 'CREATING',
+};
+
 const FilterType = {
   ANY: 'any',
   FUTURE: 'future',
@@ -101,6 +120,7 @@ const DateFormat = {
   SHORT: 'MMM DD',
   FULL: 'YYYY-MM-DDTHH:mm',
   WITH_DELIMITER: 'DD/MM/YY HH:mm',
+  WITH_DELIMITER_FLAT_PICKER: 'd/m/y H:i',
 };
 
 const DurationFormat = {
@@ -119,6 +139,13 @@ const MocksMaxCount = {
   POINTS: 5,
 };
 
+const UpdateType = {
+  PATCH: 'PATCH',
+  MINOR: 'MINOR',
+  MAJOR: 'MAJOR',
+  INIT: 'INIT',
+};
+
 export {
   POINTS_COUNT,
   EVENT_TYPES,
@@ -127,7 +154,10 @@ export {
   CITIES,
   DESCRIPTIONS,
   SORTING_COLUMNS,
+  POINT_DUMMY,
+  REQUIRED_POINT_FIELDS,
   PointMode,
+  EditType,
   FilterType,
   FilterSettings,
   SortType,
@@ -137,4 +167,5 @@ export {
   MocksMaxCount,
   MSEC_IN_HOUR,
   MSEC_IN_DAY,
+  UpdateType,
 };

src/framework/api-service.js

@@ -44,7 +44,7 @@ export default class ApiService {
   /**
    * Метод для обработки ответа
    * @param {Response} response Объект ответа
-   * @returns {Promise}
+   * @returns {Promise<JSON>}
    */
   static parseResponse(response) {
     return response.json();

src/framework/ui-blocker/ui-blocker.css

@@ -1,11 +1,11 @@
 .ui-blocker {
   display: none;
   place-content: center;
-  position: fixed;
+  position: absolute;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
-  min-width: 100%;
-  min-height: 100%;
   z-index: 1000;
   cursor: wait;
   background-color: rgba(255, 255, 255, 0.5);

src/framework/view/abstract-view.js

@@ -14,6 +14,9 @@ export default class AbstractView {
   /** @type {HTMLElement|null} Элемент представления */
   #element = null;
 
+  /** @type {Object} Объект с колбэками. Может использоваться для хранения обработчиков событий */
+  _callback = {};
+
   constructor() {
     if (new.target === AbstractView) {
       throw new Error('Can\'t instantiate AbstractView, only concrete one.');

src/main.js

@@ -5,24 +5,37 @@ import RoutePresenter from './presenter/route-presenter.js';
 import FiltersPresenter from './presenter/filters-presenter.js';
 import TripInfoPresenter from './presenter/trip-info-presenter.js';
 import MockService from './service/mock-service.js';
+import CreatePointPresenter from './presenter/create-point-presenter.js';
 
 const mockService = new MockService();
 const pointsModel = new PointsModel(mockService);
 const offersModel = new OffersModel(mockService);
 const destinationsModel = new DestinationsModel(mockService);
 
-const container = document.querySelector('.trip-events');
+const pointsContainer = document.querySelector('.trip-events');
+const filtersContainer = document.querySelector('.trip-controls__filters');
+const tripMainContainer = document.querySelector('.trip-main');
+
+const createPointPresenter = new CreatePointPresenter({
+  container: tripMainContainer,
+  editorContainer: pointsContainer,
+  pointsModel,
+  offersModel,
+  destinationsModel,
+});
 
 const routePresenter = new RoutePresenter({
-  container,
+  container: pointsContainer,
+  createPointBtnContainer: tripMainContainer,
   pointsModel,
   offersModel,
   destinationsModel
 });
 
-const filtersPresenter = new FiltersPresenter({ pointsModel });
-const tripInfoPresenter = new TripInfoPresenter();
+const filtersPresenter = new FiltersPresenter({ container: filtersContainer, pointsModel });
+const tripInfoPresenter = new TripInfoPresenter(tripMainContainer);
 
+createPointPresenter.init();
 routePresenter.init();
 filtersPresenter.init();
 tripInfoPresenter.init();

src/model/destinations-model.js

@@ -1,8 +1,12 @@
-export default class DestinationsModel {
+import Observable from '../framework/observable.js';
+import { deleteItem, updateItem } from '../utils.js';
+
+export default class DestinationsModel extends Observable {
   #service = null;
   #destinations = null;
 
   constructor(service) {
+    super();
     this.#service = service;
     this.#destinations = this.#service.destinations;
   }
@@ -14,4 +18,19 @@ export default class DestinationsModel {
   getById(id) {
     return this.#destinations.find((destination) => destination.id === id);
   }
+
+  add(type, destination) {
+    this.#destinations.push(type, destination);
+    this._notify(destination);
+  }
+
+  update(type, destination) {
+    this.#destinations = updateItem(this.#destinations, destination);
+    this._notify(type, destination);
+  }
+
+  delete(type, destination) {
+    this.#destinations = deleteItem(this.#destinations, destination);
+    this._notify(type, destination);
+  }
 }

src/model/offers-model.js

@@ -1,8 +1,12 @@
-export default class OffersModel {
+import Observable from '../framework/observable.js';
+import { deleteItem, updateItem } from '../utils.js';
+
+export default class OffersModel extends Observable {
   #service = null;
   #offers = null;
 
   constructor(service) {
+    super();
     this.#service = service;
     this.#offers = this.#service.offers;
   }
@@ -14,4 +18,19 @@ export default class OffersModel {
   getByType(type) {
     return this.#offers.find((offers) => offers.type === type.toLowerCase()).offers;
   }
+
+  add(type, offer) {
+    this.#offers.push(offer);
+    this._notify(type, offer);
+  }
+
+  update(type, offer) {
+    this.#offers = updateItem(this.#offers, offer);
+    this._notify(type, offer);
+  }
+
+  delete(type, offer) {
+    this.#offers = deleteItem(this.#offers, offer);
+    this._notify(type, offer);
+  }
 }

src/model/points-model.js

@@ -1,14 +1,33 @@
-export default class PointsModel {
+import Observable from '../framework/observable.js';
+import { deleteItem, updateItem } from '../utils.js';
+
+export default class PointsModel extends Observable {
   #service = null;
   #points = null;
 
   constructor(service) {
+    super();
     this.#service = service;
     this.#points = this.#service.points;
   }
 
   get() {
     return this.#points;
   }
+
+  add(type, point) {
+    this.#points.push(point);
+    this._notify(type, point);
+  }
+
+  update(type, point) {
+    this.#points = updateItem(this.#points, point);
+    this._notify(type, point);
+  }
+
+  delete(type, point) {
+    this.#points = deleteItem(this.#points, point);
+    this._notify(type, point);
+  }
 }
 

src/presenter/create-point-presenter.js

@@ -0,0 +1,77 @@
+import { EditType, POINT_DUMMY, UpdateType } from '../const.js';
+import {
+  RenderPosition,
+  remove,
+  render,
+} from '../framework/render.js';
+import CreatePointButtonView from '../view/create-point-button-view.js';
+import PointEditorView from '../view/point-editor-view.js';
+
+export default class CreatePointPresenter {
+  #container = null;
+  #editorContainer = null;
+  #pointsModel = null;
+  #destinationsModel = null;
+  #offersModel = null;
+  #createPointButtonComponent = null;
+  #pointEditorComponent = null;
+
+  constructor({ container, editorContainer, pointsModel, destinationsModel, offersModel }) {
+    this.#container = container;
+    this.#editorContainer = editorContainer;
+    this.#pointsModel = pointsModel;
+    this.#destinationsModel = destinationsModel;
+    this.#offersModel = offersModel;
+  }
+
+  init() {
+    if (this.#createPointButtonComponent) {
+      throw new Error('Cannot init create point button twice');
+    }
+
+    this.#createPointButtonComponent = new CreatePointButtonView({ onClick: this.#createPointClickHandler });
+    render(this.#createPointButtonComponent, this.#container);
+  }
+
+  destroy() {
+    if (!this.#pointEditorComponent) {
+      return;
+    }
+
+    remove(this.#pointEditorComponent);
+    this.#pointEditorComponent = null;
+
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+  }
+
+  #createPointClickHandler = () => {
+    this.#pointEditorComponent = new PointEditorView({
+      point: POINT_DUMMY,
+      destinations: this.#destinationsModel.get(),
+      offers: this.#offersModel.get(),
+      onCloseClick: this.#cancelClickHandler,
+      onDeleteClick: this.#cancelClickHandler,
+      onSubmitForm: this.#formSubmitHandler,
+      mode: EditType.CREATING
+    });
+
+    render(this.#pointEditorComponent, this.#editorContainer, RenderPosition.AFTERBEGIN);
+    document.addEventListener('keydown', this.#escKeyDownHandler);
+  };
+
+  #cancelClickHandler = () => {
+    this.destroy();
+  };
+
+  #formSubmitHandler = (point) => {
+    this.#pointsModel.add(UpdateType.MAJOR, point);
+    this.destroy();
+  };
+
+  #escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape') {
+      evt.preventDefault();
+      this.destroy();
+    }
+  };
+}