Merge pull request #13 from TatyanaNem/module8-task2

src/const.js

@@ -82,7 +82,7 @@ const FilterTypeNoItemsMessage = {
 };
 
 const AUTHORIZATION = 'Basic eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9';
-const END_POINT = 'https://23.objects.htmlacademy.pro/big-trip';
+const END_POINT = 'https://22.objects.htmlacademy.pro/big-trip';
 
 const Method = {
   GET: 'GET',
@@ -102,6 +102,11 @@ const LoadingMessage = {
   FAILED: 'Failed to load latest route information'
 };
 
+const TimeLimit = {
+  LOWER_LIMIT: 300,
+  UPPER_LIMIT: 1000,
+};
+
 export {
   BLANK_POINT,
   Price,
@@ -123,5 +128,6 @@ export {
   END_POINT,
   Method,
   Url,
-  LoadingMessage
+  LoadingMessage,
+  TimeLimit
 };

src/presenter/new-point-presenter.js

@@ -72,4 +72,23 @@ export default class NewPointPresenter {
       this.destroy();
     }
   };
+
+  setSaving () {
+    this.#pointEditComponent.updateElement({
+      isDisabled: true,
+      isSaving: true
+    });
+  }
+
+  setAborting() {
+    const resetFormState = () => {
+      this.#pointEditComponent.updateElement({
+        isDisabled: false,
+        isSaving: false,
+        isDeleting: false,
+      });
+    };
+
+    this.#pointEditComponent.shake(resetFormState);
+  }
 }

src/presenter/point-presenter.js

@@ -56,7 +56,7 @@ export default class PointPresenter {
     }
 
     if (this.#mode === Mode.EDIT) {
-      replace(this.#pointEditComponent, prevPointEditComponent);
+      replace(this.#pointComponent, prevPointEditComponent);
       this.#mode = Mode.DEFAULT;
     }
 
@@ -116,7 +116,6 @@ export default class PointPresenter {
       isMinorUpdate ? UpdateType.MINOR : UpdateType.PATCH,
       updatedPoint
     );
-    this.#replaceFormToCard();
   };
 
   #handleFavouriteClick = () => {
@@ -135,4 +134,43 @@ export default class PointPresenter {
       update,
     );
   };
+
+  setSaving () {
+    if (this.#mode !== Mode.EDIT) {
+      return;
+    }
+
+    this.#pointEditComponent.updateElement({
+      isDisabled: true,
+      isSaving: true
+    });
+  }
+
+  setDeleting () {
+    if (this.#mode !== Mode.EDIT) {
+      return;
+    }
+
+    this.#pointEditComponent.updateElement({
+      isDisabled: true,
+      isDeleting: true
+    });
+  }
+
+  setAborting() {
+    if (this.#mode === Mode.DEFAULT) {
+      this.#pointComponent.shake();
+      return;
+    }
+
+    const resetFormState = () => {
+      this.#pointEditComponent.updateElement({
+        isDisabled: false,
+        isSaving: false,
+        isDeleting: false,
+      });
+    };
+
+    this.#pointEditComponent.shake(resetFormState);
+  }
 }

src/presenter/points-board-presenter.js

@@ -1,5 +1,6 @@
-import { DEFAULT_FILTER_TYPE, DEFAULT_SORT_TYPE, LoadingMessage, UpdateType, UserAction } from '../const.js';
+import { DEFAULT_FILTER_TYPE, DEFAULT_SORT_TYPE, LoadingMessage, TimeLimit, UpdateType, UserAction } from '../const.js';
 import { remove, render, RenderPosition } from '../framework/render.js';
+import UiBlocker from '../framework/ui-blocker/ui-blocker.js';
 import { filterPoints } from '../utils/filter.js';
 import {sortItems} from '../utils/sorting.js';
 import LoadingMessageView from '../view/loading-message-view.js';
@@ -33,6 +34,11 @@ export default class PointsBoardPresenter {
 
   #handleNewPointFormClose = null;
 
+  #uiBlocker = new UiBlocker({
+    lowerLimit: TimeLimit.LOWER_LIMIT,
+    upperLimit: TimeLimit.UPPER_LIMIT,
+  });
+
   constructor({tripMainContainer, pointsBoardContainer, pointsModel, filtersModel, onNewPointFormClose}) {
     this.#pointsBoardContainer = pointsBoardContainer;
     this.#tripMainContainer = tripMainContainer;
@@ -62,18 +68,35 @@ export default class PointsBoardPresenter {
     this.#renderBoard();
   }
 
-  #handleViewAction = (actionType, updateType, updatedItem) => {
+  #handleViewAction = async (actionType, updateType, updatedItem) => {
+    this.#uiBlocker.block();
     switch (actionType) {
       case UserAction.UPDATE_POINT:
-        this.#pointsModel.updatePoint(updateType, updatedItem);
+        this.#pointsPresenters.get(updatedItem.id).setSaving();
+        try {
+          await this.#pointsModel.updatePoint(updateType, updatedItem);
+        } catch (error) {
+          this.#pointsPresenters.get(updatedItem.id).setAborting();
+        }
         break;
       case UserAction.ADD_POINT:
-        this.#pointsModel.addPoint(updateType, updatedItem);
+        this.#newPointPresenter.setSaving();
+        try {
+          await this.#pointsModel.addPoint(updateType, updatedItem);
+        } catch (error) {
+          this.#newPointPresenter.setAborting();
+        }
         break;
       case UserAction.DELETE_POINT:
-        this.#pointsModel.deletePoint(updateType, updatedItem);
+        this.#pointsPresenters.get(updatedItem.id).setDeleting();
+        try {
+          await this.#pointsModel.deletePoint(updateType, updatedItem);
+        } catch (error) {
+          this.#pointsPresenters.get(updatedItem.id).setAborting();
+        }
         break;
     }
+    this.#uiBlocker.unblock();
   };
 
   #handleModelEvent = (updateType, data) => {
@@ -107,6 +130,7 @@ export default class PointsBoardPresenter {
         this.#isFailed = true;
         remove(this.#loadingComponent);
         remove(this.#noPointsComponent);
+        remove(this.#tripSortComponent);
         this.#renderFailedLoading();
         break;
     }
@@ -117,7 +141,7 @@ export default class PointsBoardPresenter {
   }
 
   #renderFailedLoading () {
-    render(this.#failedLoadingComponent, this.#pointsBoardComponent.element, RenderPosition.AFTERBEGIN);
+    render(this.#failedLoadingComponent, this.#pointsBoardComponent.element, RenderPosition.BEFOREEND);
   }
 
   createNewPoint() {
@@ -197,7 +221,9 @@ export default class PointsBoardPresenter {
 
   #clearBoard (resetSortType = false) {
     this.#newPointPresenter.destroy();
-    this.#tripInfoPresenter.destroy();
+    if (this.#tripInfoPresenter !== null) {
+      this.#tripInfoPresenter.destroy();
+    }
     this.#pointsPresenters.forEach((presenter) => presenter.destroy());
     this.#pointsPresenters.clear();
 

src/utils/date.js

@@ -5,14 +5,6 @@ import durationPlugin from 'dayjs/plugin/duration';
 dayjs.extend(minMax);
 dayjs.extend(durationPlugin);
 
-const MSEC_IN_SEC = 1000;
-const SEC_IN_MIN = 60;
-const MIN_IN_HOUR = 60;
-const HOUR_IN_DAY = 24;
-
-const MSEC_IN_HOUR = MSEC_IN_SEC * SEC_IN_MIN * MIN_IN_HOUR;
-const MSEC_IN_DAY = MSEC_IN_HOUR * HOUR_IN_DAY;
-
 /**
  * Функция, возвращающая отформатированную дату
  * @param {dayjs.ConfigType} date
@@ -31,16 +23,30 @@ function formatDate(date, dateFormat) {
  * @returns {string}
  */
 
-function getDuration(dateFrom, dateTo){
-  const diff = dayjs(dateTo).diff(dayjs(dateFrom));
+function getDuration (dateFrom, dateTo) {
+  if (!dateFrom && !dateTo) {
+    return '';
+  }
 
-  if (diff >= MSEC_IN_DAY) {
-    return dayjs.duration(diff).format('DD[D] HH[H] mm[M]');
+  const dateStart = dayjs(dateFrom);
+  const dateEnd = dayjs(dateTo);
+  const durationInUnits = dayjs.duration(dateEnd.diff(dateStart));
+  const { $d: durationUnitsObject } = durationInUnits;
+  if (durationUnitsObject.months > 0) {
+    const monthsInMilliseconds = dayjs.duration(durationUnitsObject.months, 'month');
+    durationUnitsObject.days += dayjs.duration(monthsInMilliseconds.$ms).asDays();
+  }
+  if (durationUnitsObject.years > 0) {
+    const yearsInMilliseconds = dayjs.duration(durationUnitsObject.years, 'year');
+    durationUnitsObject.days += dayjs.duration(yearsInMilliseconds.$ms).asDays();
+  }
+  if (durationUnitsObject.days > 0) {
+    return durationInUnits.format('DD[D] HH[H] mm[M]');
   }
-  if (diff >= MSEC_IN_HOUR) {
-    return dayjs.duration(diff).format('HH[H] mm[M]');
+  if (durationUnitsObject.hours > 0) {
+    return durationInUnits.format('HH[H] mm[M]');
   }
-  return dayjs.duration(diff).format('mm[M]');
+  return durationInUnits.format('mm[M]');
 }
 
 function isDatesEqual (dateA, dateB) {

src/utils/filter.js

@@ -6,7 +6,7 @@ function isPointFuture(point) {
 }
 
 function isPointPresent(point) {
-  return dayjs().isBefore(point.dateFrom) && dayjs().isAfter(point.dateTo);
+  return dayjs().isAfter(point.dateFrom) && dayjs().isBefore(point.dateTo);
 }
 
 function isPointPast(point) {
@@ -15,15 +15,12 @@ function isPointPast(point) {
 
 const filter = {
   [FilterType.EVERYTHING]: (points) => [...points],
-  [FilterType.PAST]: (points) => points.filter((point) => isPointPast(point)),
   [FilterType.FUTURE]: (points) => points.filter((point) => isPointFuture(point)),
-  [FilterType.PRESENT]: (points) => points.filter((point) => isPointPresent(point))
+  [FilterType.PRESENT]: (points) => points.filter((point) => isPointPresent(point)),
+  [FilterType.PAST]: (points) => points.filter((point) => isPointPast(point)),
 };
 
-const filterPoints = (points, filterType) => {
-  const newFilteredPoints = filter[filterType](points);
-  return newFilteredPoints;
-};
+const filterPoints = (points, filterType) => (filter[filterType])(points);
 
 const generateFilters = (points) => Object.entries(filter).map(
   ([filterType, filterMethod]) => ({