Merge pull request #20 from PavelUd/master

src/const.js

@@ -11,7 +11,7 @@ export const Mode = {
   EDITING: 'editing',
 };
 
-export const TYPES = [
+export const POINT_TYPES = [
   'taxi',
   'flight',
   'bus',
@@ -56,21 +56,14 @@ export const UserAction = {
   DELETE_POINT: 'DELETE_POINT',
 };
 
-export const FILTER_TYPES = {
+export const FilterTypes = {
   EVERYTHING: 'everything',
   FUTURE: 'future',
   PRESENT: 'present',
   PAST: 'past'
 };
 
-export const POINT_FILTERS = [
-  'everything',
-  'future',
-  'present',
-  'past',
-];
-
-export const POINT_SORTS = {
+export const PointSorts = {
   DAY: 'day',
   EVENT: 'event',
   TIME: 'time',
@@ -79,18 +72,18 @@ export const POINT_SORTS = {
 };
 
 export const EnabledSortType = {
-  [POINT_SORTS.DAY]: true,
-  [POINT_SORTS.EVENT]: false,
-  [POINT_SORTS.TIME]: true,
-  [POINT_SORTS.PRICE]: true,
-  [POINT_SORTS.OFFERS]: false
+  [PointSorts.DAY]: true,
+  [PointSorts.EVENT]: false,
+  [PointSorts.TIME]: true,
+  [PointSorts.PRICE]: true,
+  [PointSorts.OFFERS]: false
 };
 
 export const EmptyListMessage = {
-  [FILTER_TYPES.EVERYTHING]: 'Click New Event to create your first point',
-  [FILTER_TYPES.FUTURE]: 'There are no future events now',
-  [FILTER_TYPES.PRESENT]: 'There are no present events now',
-  [FILTER_TYPES.PAST]: 'There are no past events now'
+  [FilterTypes.EVERYTHING]: 'Click New Event to create your first point',
+  [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 POINT_EMPTY = {

src/model/filter-model.js

@@ -1,8 +1,8 @@
 import Observable from '../framework/observable.js';
-import {FILTER_TYPES} from '../const.js';
+import {FilterTypes} from '../const.js';
 
 export default class FilterModel extends Observable {
-  #filter = FILTER_TYPES.EVERYTHING;
+  #filter = FilterTypes.EVERYTHING;
   get() {
     return this.#filter;
   }

src/presenter/board-presenter.js

@@ -8,7 +8,7 @@ import {remove, render, RenderPosition} from '../framework/render';
 import { filter, sort } from '../utils/common.js';
 import LoadingView from '../view/load-view.js';
 import UiBlocker from '../framework/ui-blocker/ui-blocker.js';
-import {FILTER_TYPES, POINT_SORTS, UpdateType, UserAction} from '../const.js';
+import {FilterTypes, PointSorts, UpdateType, UserAction} from '../const.js';
 
 const TimeLimit = {
   MIN: 350,
@@ -27,7 +27,7 @@ export default class BoardPresenter {
   #filterModel;
   #pointsModel;
   #newPointButtonPresenter;
-  #currentSortType = POINT_SORTS.DAY;
+  #currentSortType = PointSorts.DAY;
   #isCreating = false;
   #container;
   #isLoading = true;
@@ -109,9 +109,8 @@ export default class BoardPresenter {
       this.#sortPresenter.destroy();
       this.#sortPresenter = null;
     }
-
     if (resetSortType) {
-      this.#currentSortType = POINT_SORTS.DAY;
+      this.#currentSortType = PointSorts.DAY;
     }
   };
 
@@ -122,6 +121,7 @@ export default class BoardPresenter {
   #renderSort = () =>{
     this.#sortPresenter = new SortPresenter({
       container: this.#container,
+      currentSortType: this.#currentSortType,
       handleSortChange: this.#handleSortChange,
     });
     this.#sortPresenter.init();
@@ -205,13 +205,12 @@ export default class BoardPresenter {
         this.#pointPresenters.get(data.id).resetView();
         break;
       case UpdateType.MINOR:
-
         this.#clearBoard();
         this.#renderBoard();
         break;
       case UpdateType.MAJOR:
-        this.#clearBoard();
-        this.#renderBoard({resetSortType: true});
+        this.#clearBoard({resetSortType: true});
+        this.#renderBoard();
         break;
     }
   };
@@ -223,8 +222,8 @@ export default class BoardPresenter {
 
   handleNewPointClick = () => {
     this.#isCreating = true;
-    this.#currentSortType = POINT_SORTS.DAY;
-    this.#filterModel.set(UpdateType.MAJOR, FILTER_TYPES.EVERYTHING);
+    this.#currentSortType = PointSorts.DAY;
+    this.#filterModel.set(UpdateType.MAJOR, FilterTypes.EVERYTHING);
     this.#newPointButtonPresenter.disableButton();
     this.#newPointPresenter.init();
   };

src/presenter/sort-presenter.js

@@ -1,4 +1,4 @@
-import { EnabledSortType, POINT_SORTS } from '../const';
+import { EnabledSortType, PointSorts } from '../const';
 import { render, remove } from '../framework/render';
 import SortView from '../view/sort-view';
 
@@ -7,10 +7,11 @@ export default class SortPresenter {
 
   #sortElement = null;
   #handleSortChange = null;
-  #currentSortPoint = POINT_SORTS.DAY;
+  #currentSortPoint = null;
 
-  constructor({ container, handleSortChange }) {
+  constructor({ container,currentSortType, handleSortChange }) {
     this.#container = container;
+    this.#currentSortPoint = currentSortType;
     this.#handleSortChange = handleSortChange;
   }
 
@@ -19,7 +20,7 @@ export default class SortPresenter {
   }
 
   init() {
-    const items = Object.values(POINT_SORTS).map((sort) => ({
+    const items = Object.values(PointSorts).map((sort) => ({
       type: sort,
       isChecked: sort === this.#currentSortPoint,
       isDisabled: !EnabledSortType[sort],

src/utils/common.js

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import {MSEC_IN_DAY, MSEC_IN_HOUR, FILTER_TYPES, POINT_SORTS} from '../const.js';
+import {MSEC_IN_DAY, MSEC_IN_HOUR, FilterTypes, PointSorts} from '../const.js';
 
 
 export const updateItem = (items, update) => items.map((item) => item.id === update.id ? update : item);
@@ -19,8 +19,6 @@ export const formatStringDateTime = (date) => dayjs(date).format('YYYY-MM-DDTHH:
 
 export const formatStringTime = (date) => dayjs(date).format('HH:mm');
 
-export const formatStringDate = (date) => dayjs(date).format('YYYY-MM-DDT');
-
 export const formatStringToShortDate = (date) => dayjs(date).format('MMM DD');
 
 export const formatToSlashDate = (date) => dayjs(date).format('DD/MM/YY HH:mm');
@@ -54,19 +52,21 @@ export const getDurationDiff = (pointA, pointB) =>
   dayjs(pointB.dateTo).diff(dayjs(pointB.dateFrom)) - dayjs(pointA.dateTo).diff(dayjs(pointA.dateFrom));
 
 export const filter = {
-  [FILTER_TYPES.EVERYTHING]: (points) => points,
-  [FILTER_TYPES.FUTURE]: (points) => points.filter((point) => isPointDateFuture(point.dateFrom)),
-  [FILTER_TYPES.PRESENT] : (points) => points.filter((point) => isPointDatePresent(point.dateFrom, point.dateTo)),
-  [FILTER_TYPES.PAST]: (points) => points.filter((point) => isPointDatePast(point.dateTo)),
+  [FilterTypes.EVERYTHING]: (points) => points,
+  [FilterTypes.FUTURE]: (points) => points.filter((point) => isPointDateFuture(point.dateFrom)),
+  [FilterTypes.PRESENT] : (points) => points.filter((point) => isPointDatePresent(point.dateFrom, point.dateTo)),
+  [FilterTypes.PAST]: (points) => points.filter((point) => isPointDatePast(point.dateTo)),
 };
 
 export const sorter = {
-  [POINT_SORTS.DAY]: (points) => points.sort(getDateDiff),
-  [POINT_SORTS.PRICE]: (points) => points.sort(getPriceDiff),
-  [POINT_SORTS.TIME]: (points) => points.sort(getDurationDiff),
+  [PointSorts.DAY]: (points) => points.sort(getDateDiff),
+  [PointSorts.PRICE]: (points) => points.sort(getPriceDiff),
+  [PointSorts.TIME]: (points) => points.sort(getDurationDiff),
 };
 
-export const sort = (points, sortType = POINT_SORTS.DAY) => {
+export const title = (word) => word.charAt(0).toUpperCase() + word.slice(1);
+
+export const sort = (points, sortType = PointSorts.DAY) => {
   if (!sorter[sortType]) {
     throw new Error(`Sort by ${sortType} is not implemented`);
   }

src/utils/trip-info-utils.js

@@ -21,7 +21,6 @@ export const getTripDates = (points) => {
 
   const startDate = dayjs(sortedPoints[0].dateFrom).format('DD MMM');
   const finishDate = dayjs(sortedPoints[sortedPoints.length - 1].dateTo).format('DD MMM');
-
   return `${startDate} — ${finishDate}`;
 };
 

src/view/point-edit-view.js

@@ -1,16 +1,17 @@
-import { POINT_EMPTY, TYPES,EditType, ButtonLabel } from '../const.js';
+import { POINT_EMPTY, POINT_TYPES,EditType, ButtonLabel } from '../const.js';
 import AbstractStatefulView from '../framework/view/abstract-stateful-view.js';
-import {formatToSlashDate} from '../utils/common.js';
+import {formatToSlashDate, title} from '../utils/common.js';
 import CalendarView from './calendar-view.js';
 import he from 'he';
 
-function createTypesElements(typeArray){
+function createTypesElements(typeArray, selectedType){
 
   let typesElements = '';
   typeArray.forEach((type) => {
+    const checked = selectedType === type ? 'checked' : '';
     typesElements += `<div class="event__type-item">
-  <input id="event-type-${type.toLowerCase()}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type}">
-  <label class="event__type-label  event__type-label--${type.toLowerCase()}" for="event-type-${type}-1">${type}</label>
+  <input id="event-type-${type.toLowerCase()}-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type}" ${checked}>
+  <label class="event__type-label  event__type-label--${type.toLowerCase()}" for="event-type-${type}-1">${title(type)}</label>
 </div>`;
   });
 
@@ -107,13 +108,13 @@ function createPointEditElement({state, destinations, offers, pointType}) {
             <fieldset class="event__type-group">
               <legend class="visually-hidden">Event type</legend>
 
-              ${createTypesElements(TYPES)}
+              ${createTypesElements(POINT_TYPES, type)}
             </fieldset>
           </div>
         </div>
         <div class="event__field-group  event__field-group--destination">
           <label class="event__label  event__type-output" for="event-destination-1">
-          ${type}
+          ${title(type)}
           </label>
 
           <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" ${(isDisabled) ? 'disabled' : ''} value="${name}" list="destination-list-1">

src/view/point-view.js

@@ -1,6 +1,6 @@
 import { POINT_EMPTY} from '../const.js';
 import AbstractView from '../framework/view/abstract-view.js';
-import{formatStringDateTime, getPointDuration, formatStringTime, formatStringDate} from '../utils/common.js';
+import{formatStringDateTime, getPointDuration, formatStringTime, formatStringToShortDate} from '../utils/common.js';
 
 
 function createOfferElements(pointOffers, selectedOffers) {
@@ -21,7 +21,7 @@ function createPointElement({point, pointDestination, pointOffers}) {
   return `
     <li class="trip-events__item">
       <div class="event">
-        <time class="event__date" datetime="${formatStringDate(dateFrom)}">${formatStringDate(dateFrom)}</time>
+        <time class="event__date" datetime="${formatStringToShortDate(dateFrom)}">${formatStringToShortDate(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>