Merge pull request #15 from MaxSiryatov/master

src/const.js

@@ -1,11 +1,5 @@
 import { isPointPast, isPointPresent, isPointFuture, sortByDay, sortByEvent, sortByOffers, sortByPrice, sortByTime } from './utils';
 
-export const Duration = {
-  HOUR: 5,
-  DAY: 5,
-  MINUTE: 59
-};
-
 export const POINTS_TYPES = [
   'taxi',
   'bus',
@@ -86,9 +80,9 @@ export const EditingType = {
 
 export const EmptyListText = {
   [FilterTypes.EVERYTHING]: 'Click New Event to create your first point',
-  [FilterTypes.FUTURE]: 'There are no future events',
-  [FilterTypes.PRESENT]: 'There are no present events',
-  [FilterTypes.PAST]: 'There are no past events'
+  [FilterTypes.FUTURE]: 'There are no future events now',
+  [FilterTypes.PRESENT]: 'There are no present events now',
+  [FilterTypes.PAST]: 'There are no past events now'
 };
 
 export const ButtonText = {
@@ -104,7 +98,7 @@ export const TimeLimit = {
   UPPER_LIMIT: 1000
 };
 
-export const FilterHasPoints = {
+export const filterPointsByType = {
   [FilterTypes.EVERYTHING]: () => true,
   [FilterTypes.FUTURE]: (points) => points.some((point) => isPointFuture(point)),
   [FilterTypes.PRESENT]: (points) => points.some((point) => isPointPresent(point)),

src/model/filters-model.js

@@ -4,12 +4,12 @@ import Observable from '../framework/observable';
 export default class FiltersModel extends Observable {
   #filter = FilterTypes.EVERYTHING;
 
-  get filter() {
-    return this.#filter;
-  }
-
   set(updateType, filter) {
     this.#filter = filter;
     this._notify(updateType, filter);
   }
+
+  get filter() {
+    return this.#filter;
+  }
 }

src/presenter/filter-presenter.js

@@ -1,4 +1,4 @@
-import { FilterHasPoints, FilterTypes, UpdateType } from '../const';
+import { filterPointsByType, FilterTypes, UpdateType } from '../const';
 import { remove, render, replace } from '../framework/render';
 import FilterView from '../view/filter-view';
 
@@ -37,7 +37,7 @@ export default class FilterPresenter {
   }
 
   #getActiveFilters(points) {
-    return Object.values(FilterTypes).filter((type) => FilterHasPoints[type](points));
+    return Object.values(FilterTypes).filter((type) => filterPointsByType[type](points));
   }
 
   #filterTypeChangeHandler = (filterType) => {

src/presenter/new-point-presenter.js

@@ -2,21 +2,20 @@ import { UpdateType, EditingType } from '../const';
 import { isEscapeButton } from '../utils';
 import { RenderPosition, remove, render } from '../framework/render';
 import PointEditView from '../view/point-edit-view';
-
 export default class NewPointPresenter {
   #container = null;
   #destinationsModel = null;
   #offersModel = null;
   #pointEditComponent = null;
-  #onDataChange = null;
-  #onDestroy = null;
+  #handleDataChange = null;
+  #handleDestroy = null;
 
   constructor({ container, destinationsModel, offersModel, onDataChange, onDestroy }) {
     this.#container = container;
     this.#destinationsModel = destinationsModel;
     this.#offersModel = offersModel;
-    this.#onDataChange = onDataChange;
-    this.#onDestroy = onDestroy;
+    this.#handleDataChange = onDataChange;
+    this.#handleDestroy = onDestroy;
   }
 
   init() {
@@ -28,7 +27,7 @@ export default class NewPointPresenter {
       pointOffers: this.#offersModel.offers,
       isCreating: true,
       onRollUpPointClick: this.#cancelClickHandler,
-      onSubmitForm: this.#formSubmitHandler,
+      onFormSubmit: this.#formSubmitHandler,
       onCancelFormClick: this.#cancelClickHandler
     });
     render(this.#pointEditComponent, this.#container.element, RenderPosition.AFTERBEGIN);
@@ -39,11 +38,10 @@ export default class NewPointPresenter {
     if (this.#pointEditComponent === null) {
       return;
     }
-
     remove(this.#pointEditComponent);
     this.#pointEditComponent = null;
     document.removeEventListener('keydown', this.#escKeyDownHandler);
-    this.#onDestroy();
+    this.#handleDestroy();
   }
 
   setSaving() {
@@ -65,7 +63,7 @@ export default class NewPointPresenter {
   }
 
   #formSubmitHandler = (point) => {
-    this.#onDataChange(
+    this.#handleDataChange(
       EditingType.ADD_POINT,
       UpdateType.MINOR,
       point

src/presenter/point-presenter.js

@@ -8,18 +8,19 @@ export default class PointPresenter {
   #container = null;
   #destinationsModel = null;
   #offersModel = null;
-  #onDataChange = null;
-  #onModeChange = null;
+  #handleDataChange = null;
+  #handleModeChange = null;
   #point = null;
   #pointComponent = null;
   #pointEditComponent = null;
   #mode = PointMode.DEFAULT;
+
   constructor({ container, destinationsModel, offersModel, onDataChange, onModeChange }) {
     this.#container = container;
     this.#destinationsModel = destinationsModel;
     this.#offersModel = offersModel;
-    this.#onDataChange = onDataChange;
-    this.#onModeChange = onModeChange;
+    this.#handleDataChange = onDataChange;
+    this.#handleModeChange = onModeChange;
   }
 
   init(point) {
@@ -38,7 +39,7 @@ export default class PointPresenter {
       destinations: this.#destinationsModel.destinations,
       pointOffers: this.#offersModel.offers,
       onRollUpPointClick: this.#formRollUpClickHandler,
-      onSubmitForm: this.#formSubmitHandler,
+      onFormSubmit: this.#formSubmitHandler,
       onCancelFormClick: this.#cancelClickHandler
     });
     if (previousPointComponent === null || previousPointEditComponent === null) {
@@ -102,7 +103,7 @@ export default class PointPresenter {
   #replacePointToForm = () => {
     replace(this.#pointEditComponent, this.#pointComponent);
     document.addEventListener('keydown', this.#escKeyDownHandler);
-    this.#onModeChange();
+    this.#handleModeChange();
     this.#mode = PointMode.EDIT;
   };
 
@@ -134,7 +135,7 @@ export default class PointPresenter {
   #formSubmitHandler = (updatePoint) => {
     const isMinor = isBigDifference(updatePoint, this.#point);
     if (isMinor) {
-      this.#onDataChange(
+      this.#handleDataChange(
         EditingType.UPDATE_POINT,
         isMinor ? UpdateType.MINOR : UpdateType.PATCH,
         updatePoint
@@ -146,15 +147,15 @@ export default class PointPresenter {
   };
 
   #cancelClickHandler = (event) => {
-    this.#onDataChange(
+    this.#handleDataChange(
       EditingType.DELETE_POINT,
       UpdateType.MINOR,
       event
     );
   };
 
   #favoritePointClickHandler = () => {
-    this.#onDataChange(
+    this.#handleDataChange(
       EditingType.UPDATE_POINT,
       UpdateType.PATCH,
       {

src/templates/failed-loading-template.js

@@ -0,0 +1,3 @@
+export function createFailedLoadingTemplate(){
+  return '<p class="trip-events__msg">Failed to load latest route information</p>';
+}

src/templates/loading-template.js

@@ -0,0 +1,3 @@
+export function createLoadingTemplate(){
+  return '<p class="trip-events__msg">Loading...</p>';
+}

src/templates/point-edit-template.js

@@ -1,6 +1,6 @@
 import { POINTS_TYPES, ButtonText } from '../const.js';
 import he from 'he';
-import { formatStringToDateTime } from '../utils.js';
+import { getFullDate } from '../utils.js';
 
 function createPointCitiesOptionsTemplate(destinations) {
   return ( `${destinations.map((destination) => `<option value="${destination.name}"></option>`).join('')} `);
@@ -92,10 +92,10 @@ export function createPointEditTemplate({ state, destinations, pointOffers, isCr
         </div>
         <div class="event__field-group  event__field-group--time">
           <label class="visually-hidden" for="event-start-time-${id}">From</label>
-          <input class="event__input  event__input--time" id="event-start-time-${id}" type="text" name="event-start-time" ${point.dateFrom ? formatStringToDateTime(dateFrom) : ''} ${isActive ? '' : 'disabled'}>
+          <input class="event__input  event__input--time" id="event-start-time-${id}" type="text" name="event-start-time" ${point.dateFrom ? getFullDate(dateFrom) : ''} ${isActive ? '' : 'disabled'}>
           &mdash;
           <label class="visually-hidden" for="event-end-time-${id}">To</label>
-          <input class="event__input  event__input--time" id="event-end-time-${id}" type="text" name="event-end-time" ${point.dateTo ? formatStringToDateTime(dateTo) : ''} ${isActive ? '' : 'disabled'}>
+          <input class="event__input  event__input--time" id="event-end-time-${id}" type="text" name="event-end-time" ${point.dateTo ? getFullDate(dateTo) : ''} ${isActive ? '' : 'disabled'}>
         </div>
         <div class="event__field-group  event__field-group--price">
           <label class="event__label" for="event-price-${id}">

src/templates/point-template.js

@@ -1,4 +1,4 @@
-import { formatStringToDateTime, getMonthAndDay, getTime, getPointDuration } from '../utils.js';
+import { getFullDate, getMonthAndDay, getTime, getPointDuration } from '../utils.js';
 import he from 'he';
 
 function createPointOffersTemplate(offers, checkedOffers) {
@@ -21,16 +21,16 @@ export function createPointTemplate(point, destinations, pointOffers) {
   const favoriteClass = isFavorite ? 'event__favorite-btn--active' : '';
   return `<li class="trip-events__item">
   <div class="event">
-    <time class="event__date" datetime=${formatStringToDateTime(dateFrom)}>${getMonthAndDay(dateFrom)}</time>
+    <time class="event__date" datetime=${getFullDate(dateFrom)}>${getMonthAndDay(dateFrom)}</time>
     <div class="event__type">
       <img class="event__type-icon" width="42" height="42" src="img/icons/${type}.png" alt="Event type icon">
     </div>
     <h3 class="event__title">${type} ${he.encode(destinationName)}</h3>
     <div class="event__schedule">
       <p class="event__time">
-        <time class="event__start-time" datetime=${formatStringToDateTime(dateFrom)}>${getTime(dateFrom)}</time>
+        <time class="event__start-time" datetime=${getFullDate(dateFrom)}>${getTime(dateFrom)}</time>
         &mdash;
-        <time class="event__end-time" datetime=${formatStringToDateTime(dateTo)}>${getTime(dateTo)}</time>
+        <time class="event__end-time" datetime=${getFullDate(dateTo)}>${getTime(dateTo)}</time>
       </p>
       <p class="event__duration">${getPointDuration(point)}</p>
     </div>

src/utils.js

@@ -1,4 +1,4 @@
-import { Duration, SortTypes, SortingOptions } from './const';
+import { SortTypes, SortingOptions } from './const';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -30,7 +30,7 @@ function isEscapeButton (evt) {
   return evt.key === 'Escape';
 }
 
-function formatStringToDateTime(date) {
+function getFullDate(date) {
   return dayjs(date).format('YY/MM/DD HH:mm');
 }
 
@@ -62,23 +62,6 @@ function getPointDuration(point) {
   return pointDuration;
 }
 
-function getDate({ next }) {
-  const minsGap = getRandomInteger(0, Duration.MINUTE);
-  const hoursGap = getRandomInteger(1, Duration.HOUR);
-  const daysGap = getRandomInteger(0, Duration.DAY);
-  let date = dayjs().subtract(getRandomInteger(0, Duration.DAY), 'day').toDate();
-
-  if (next) {
-    date = dayjs(date).add(minsGap, 'minute').add(hoursGap, 'hour').add(daysGap, 'day').toDate();
-  }
-
-  return date;
-}
-
-
-function getFullDate(date) {
-  return dayjs(date).format('DD/MM/YY hh:mm');
-}
 
 function isPointPast(point) {
   return dayjs().isAfter(point.dateTo);
@@ -120,7 +103,7 @@ function sortByOffers(pointA, pointB) {
 }
 
 function isBigDifference(pointA, pointB) {
-  return pointA.dateFrom !== pointB.dateFrom || pointA.basePrice !== pointB.basePrice || sortByTime(pointA, pointB) !== 0;
+  return pointA.dateFrom !== pointB.dateFrom || pointA.price !== pointB.price || sortByTime(pointA, pointB) !== 0;
 }
 
 function adaptToClient(point) {
@@ -188,4 +171,4 @@ function getTripInfoCost(points = [], offers = []) {
   }, 0);
 }
 
-export {getRandomInteger, getRandomValue, formatStringToDateTime, getMonthAndDay, getTime, getPointDuration, getDate, isPointFuture, isPointPresent, isPointPast, updatePoint, sortByDay, sortByTime, sortByPrice, sortByEvent, sortByOffers, isBigDifference, getFullDate, adaptToClient, adaptToServer, isEscapeButton, getTripInfoTitle, getTripInfoDuration, getTripInfoCost};
+export {getRandomInteger, getRandomValue, getFullDate, getMonthAndDay, getTime, getPointDuration, isPointFuture, isPointPresent, isPointPast, updatePoint, sortByDay, sortByTime, sortByPrice, sortByEvent, sortByOffers, isBigDifference, adaptToClient, adaptToServer, isEscapeButton, getTripInfoTitle, getTripInfoDuration, getTripInfoCost};

src/view/empty-point-list-view.js

@@ -1,13 +1,14 @@
 import AbstractView from '../framework/view/abstract-view';
 import { createEmptyPointListTemplate } from '../templates/empty-point-list-template';
-
+import { createLoadingTemplate } from '../templates/loading-template';
+import { createFailedLoadingTemplate } from '../templates/failed-loading-template';
 
 export default class EmptyPointListView extends AbstractView{
   #filterType = null;
   #isLoading = false;
   #isLoadingError = false;
 
-  constructor({filterType, isLoading = false, isLoadingError = false}) {
+  constructor({filterType, isLoading, isLoadingError}) {
     super();
     this.#filterType = filterType;
     this.#isLoading = isLoading;
@@ -16,10 +17,10 @@ export default class EmptyPointListView extends AbstractView{
 
   get template() {
     if (this.#isLoading) {
-      return '<p class="trip-events__msg">Loading...</p>';
+      return createLoadingTemplate();
     }
     if (this.#isLoadingError) {
-      return '<p class="trip-events__msg">Failed to load latest route information</p>';
+      return createFailedLoadingTemplate();
     }
     return createEmptyPointListTemplate(this.#filterType);
   }

src/view/filter-view.js

@@ -3,19 +3,19 @@ import { createFilterTemplate } from '../templates/filter-template.js';
 export default class FilterView extends AbstractView {
   #activeFilters = [];
   #selectedFilter = null;
-  #onFilterTypeChange = null;
+  #handleFilterTypeChange = null;
 
   #filterTypeChangeHandler = (event) => {
     event.preventDefault();
-    this.#onFilterTypeChange?.(event.target.dataset.filterType);
+    this.#handleFilterTypeChange?.(event.target.dataset.filterType);
   };
 
   constructor({activeFilters, selectedFilter, onFilterTypeChange}) {
     super();
     this.#activeFilters = activeFilters;
     this.#selectedFilter = selectedFilter;
 
-    this.#onFilterTypeChange = onFilterTypeChange;
+    this.#handleFilterTypeChange = onFilterTypeChange;
 
     this.element.addEventListener('change', this.#filterTypeChangeHandler);
   }

src/view/new-point-view.js

@@ -2,11 +2,11 @@ import AbstractView from '../framework/view/abstract-view';
 import { createNewPointTemplate } from '../templates/new-point-template';
 
 export default class NewPointView extends AbstractView {
-  #onClick = null;
+  #handleClick = null;
 
   constructor({onClick}) {
     super();
-    this.#onClick = onClick;
+    this.#handleClick = onClick;
     this.element.addEventListener('click', this.#clickHandler);
   }
 
@@ -16,6 +16,6 @@ export default class NewPointView extends AbstractView {
 
   #clickHandler = (event) => {
     event.preventDefault();
-    this.#onClick();
+    this.#handleClick();
   };
 }