Защита

package.json

@@ -14,8 +14,8 @@
     "start": "webpack serve --mode development --open"
   },
   "devDependencies": {
-    "eslint": "^8.28.0",
-    "eslint-config-htmlacademy": "^8.0.0"
+    "eslint": "8.28.0",
+    "eslint-config-htmlacademy": "8.0.0"
   },
   "engines": {
     "node": "18"
@@ -28,6 +28,7 @@
     "css-loader": "6.7.2",
     "dayjs": "1.11.10",
     "flatpickr": "4.6.13",
+    "he": "1.2.0",
     "html-webpack-plugin": "5.6.0",
     "style-loader": "3.3.1",
     "webpack": "5.75.0",

src/const.js

@@ -17,9 +17,15 @@ export const POINT_EMPTY = {
   dateFrom: null,
   dateTo: null,
   destination: null,
-  ifFavorite: false,
-  offers: [],
-  type: 'Flight',
+  isFavorite: false,
+  offers: ['f6ddb8b3-e341-4f35-a213-0bcae36317fd',
+    'ad4f8e0c-6078-4976-8d74-dccbde695ab4',
+    '8420a013-28c9-47a8-85e7-1d430afc1580',
+    'e6f5e9f5-381a-45cd-b15f-780ebb99ba7f',
+    '7850ca85-fcd0-4aa5-aabe-ca5263bd34e2',
+    '0e07a8a3-b358-4310-a9f3-a035eaf13029'
+  ],
+  type: 'flight'
 };
 
 export const ROUTE_TYPE = [

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 09SVykjhUhHbMdig';
+const AUTHORIZATION = 'Basic 09SVykjhUhHbMdigAaa';
 const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip';
 
 const bodyElement = document.querySelector('body');

src/model/destination-model.js

@@ -7,8 +7,13 @@ export default class DestinationModel {
   }
 
   async init() {
-    this.#destinations = await this.#service.getDestinations();
-    return this.#destinations;
+    try {
+      this.#destinations = await this.#service.getDestinations();
+      return this.#destinations;
+    }
+    catch {
+      throw new Error('The list of destinations could not be loaded');
+    }
   }
 
   get() {

src/model/offers-model.js

@@ -7,8 +7,13 @@ export default class OfferModel {
   }
 
   async init() {
-    this.#offers = await this.#service.getOffers();
-    return this.#offers;
+    try {
+      this.#offers = await this.#service.getOffers();
+      return this.#offers;
+    }
+    catch {
+      throw new Error('The list of offers could not be loaded');
+    }
   }
 
   get() {

src/model/point-model.js

@@ -53,10 +53,11 @@ export default class PointModel extends Observable {
   }
 
   async add(updateType, point) {
+    delete point.id;
     try {
       const addedPoint = await this.#service.addPoint(adaptToServer(point));
       const adaptedPoint = adaptToClient(addedPoint);
-      this.points.push(adaptedPoint);
+      this.#points.push(adaptedPoint);
       this._notify(updateType, adaptedPoint);
     }
     catch {

src/presenter/board-presenter.js

@@ -7,11 +7,11 @@ import TripInfoView from '../view/trip-info-view.js';
 import {sortPointDay, sortPointPrice, sortPointTime} from '../utils.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';
 import UiBlocker from '../framework/ui-blocker/ui-blocker.js';
 import LoadingView from '../view/loading-view.js';
+import NoConnectionView from '../view/no-connection-view.js';
 
 export default class BoardPresenter {
   #tripContainer = null;
@@ -31,13 +31,13 @@ export default class BoardPresenter {
 
   #currentSortType = SortType.DAY;
   #currentFilteType = FilterType.EVERYTHING;
-  #sourcedTripPoints = [];
   #isCreating = false;
 
   #sortComponent = null;
   #tripInfoComponent = null;
   #filterComponent = null;
   #loadingComponent = new LoadingView();
+  #noConnectionComponent = new NoConnectionView();
   #pointsListComponent = new EventListView();
   #messageComponent = null;
   #uiBlocker = new UiBlocker({
@@ -83,7 +83,6 @@ export default class BoardPresenter {
     this.#tripFliterElement = this.#tripContainer.querySelector('.trip-controls__filters');
     this.#renderFilters();
     this.#renderLoading();
-    // this.#renderBoard();
   }
 
   newPointButtonClickHandler = () => {
@@ -217,12 +216,12 @@ export default class BoardPresenter {
         }
         break;
       case UserAction.CREATE_POINT:
-        this.#newPointPresenter.get(update.id).setSaving();
+        this.#newPointPresenter.setSaving();
         try {
           await this.#pointsModel.add(updateType, update);
         }
         catch {
-          this.#newPointPresenter.get(update.id).setAborting();
+          this.#newPointPresenter.setAborting();
         }
         break;
     }
@@ -237,16 +236,23 @@ export default class BoardPresenter {
         break;
       case UpdateType.MINOR:
         this.#clearBoard();
+        this.#sortPoints(this.#currentSortType);
         this.#renderBoard();
         break;
       case UpdateType.MAJOR:
         this.#clearBoard({resetSortType: true});
         this.#renderBoard();
         break;
       case UpdateType.INIT:
-        this.#isLoading = false;
-        remove(this.#loadingComponent);
-        this.#renderBoard();
+        if (data.isError) {
+          remove(this.#loadingComponent);
+          render(this.#noConnectionComponent, this.#tripEventsElement);
+        }
+        else {
+          this.#isLoading = false;
+          remove(this.#loadingComponent);
+          this.#renderBoard();
+        }
         break;
     }
   };

src/presenter/new-point-button-presenter.js

@@ -1,5 +1,5 @@
 import NewPointButtonView from '../view/new-point-button-view.js';
-import { render } from '../framework/render.js';
+import {render} from '../framework/render.js';
 
 export default class NewPointButtonPresenter {
   #container = null;

src/presenter/new-point-presenter.js

@@ -1,6 +1,6 @@
 import EditPointView from '../view/edit-point-view';
 import {RenderPosition, remove, render} from '../framework/render.js';
-import { UserAction, UpdateType, EditType } from '../const.js';
+import {MODE, UserAction, UpdateType, EditType } from '../const.js';
 
 export default class NewPointPresenter {
   #container = null;
@@ -9,6 +9,7 @@ export default class NewPointPresenter {
   #pointNewComponent = null;
   #handleDataChange = null;
   #handleDestroy = null;
+  #mode = MODE.EDITING;
 
   constructor({container, destinationsModel, offersModel, onDataChange, onDestroy}) {
     this.#container = container;
@@ -26,24 +27,59 @@ export default class NewPointPresenter {
     this.#pointNewComponent = new EditPointView({
       pointDestination: this.#destinationsModel,
       pointOffers: this.#offersModel,
-      onResetClick: this.#resetClickHandler,
-      onFormSubmit: this.#formSubmitHandler,
+      onCancelClick: this.#resetClickHandler,
+      onSubmitClick: this.#formSubmitHandler,
       type: EditType.CREATING,
     });
 
     render(this.#pointNewComponent, this.#container, RenderPosition.AFTERBEGIN);
     document.addEventListener('keydown', this.#escKeyDownHandler);
   }
 
-  // eslint-disable-next-line no-unused-vars
+  setSaving = () => {
+    if (this.#mode === MODE.EDITING) {
+      this.#pointNewComponent.updateElement({
+        isDisabled: true,
+        isSaving: true
+      });
+    }
+  };
+
+  // setDeleting = () => {
+  //   this.#pointNewComponent.updateElement({
+  //     isDeleting: true,
+  //     isDisabled: true,
+  //   });
+  // };
+
+  setAborting = () => {
+    if (this.#mode === MODE.DEFAULT) {
+      this.#pointNewComponent.shake();
+    }
+
+    if (this.#mode === MODE.EDITING) {
+      const resetFormState = () => {
+        this.#pointNewComponent.updateElement({
+          isDisabled: false,
+          isSaving: false,
+          isDeleting: false
+        });
+      };
+
+      this.#pointNewComponent.shake(resetFormState);
+    }
+  };
+
   destroy = ({isCanceled = true} = {}) => {
     if (this.#pointNewComponent === null) {
       return;
     }
 
     remove (this.#pointNewComponent);
     this.#pointNewComponent = null;
-    document.removeEventListener('keydown', this.escKeyDownHandler);
+    document.removeEventListener('keydown', this.#escKeyDownHandler);
+
+    this.#handleDestroy({isCanceled});
   };
 
   #formSubmitHandler = (point) => {
@@ -53,7 +89,7 @@ export default class NewPointPresenter {
       point,
     );
 
-    this.destroy({isCanceled: false});
+    // this.destroy({isCanceled: false});
   };
 
   #resetClickHandler = () => {

src/presenter/point-presenter.js

@@ -26,7 +26,6 @@ export default class PointPresenter {
 
   init(point){
     this.#point = point;
-
     const prevPointComponent = this.#pointComponent;
     const prevPointEditComponent = this.#pointEditComponent;
 
@@ -45,7 +44,6 @@ export default class PointPresenter {
       onSubmitClick: this.#formSubmitHandler,
       onDeleteClick:  this.#deleteClickHandler,
       onResetClick: this.#resetClickHandler,
-      onCancelClick: this.#cancelClickHandler
     });
 
     if (prevPointComponent === null || prevPointEditComponent === null) {
@@ -98,7 +96,7 @@ export default class PointPresenter {
       this.#pointComponent.shake();
     }
 
-    if (this.#mode === MODE.EDITING){
+    if (this.#mode === MODE.EDITING) {
       const resetFormState = () => {
         this.#pointEditComponent.updateElement({
           isDisabled: false,
@@ -132,14 +130,6 @@ export default class PointPresenter {
     );
   };
 
-  #cancelClickHandler = (point) => {
-    this.#handleDataChange(
-      UserAction.DELETE_POINT,
-      UpdateType.MINOR,
-      point
-    );
-  };
-
   #escKeyDownHandler = (evt) => {
     if (evt.key === 'Escape') {
       evt.preventDefault();
@@ -172,7 +162,5 @@ export default class PointPresenter {
       UpdateType.MINOR,
       updatedPoint
     );
-
-    this.#replaceFormToPoint();
   };
 }

src/service/point-api-service.js

@@ -2,6 +2,7 @@ import ApiService from '../framework/api-service.js';
 
 const Method = {
   GET: 'GET',
+  POST: 'POST',
   PUT: 'PUT',
   DELETE: 'DELETE'
 };