diff --git a/src/const.js b/src/const.js index ec2ea20..17f7fd7 100644 --- a/src/const.js +++ b/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 = { diff --git a/src/model/filter-model.js b/src/model/filter-model.js index 48ac959..48f6a55 100644 --- a/src/model/filter-model.js +++ b/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; } diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js index 835b011..d92e2f0 100644 --- a/src/presenter/board-presenter.js +++ b/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(); }; diff --git a/src/presenter/sort-presenter.js b/src/presenter/sort-presenter.js index 6cacb2d..c8c57ea 100644 --- a/src/presenter/sort-presenter.js +++ b/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], diff --git a/src/utils/common.js b/src/utils/common.js index 9f28852..8d70874 100644 --- a/src/utils/common.js +++ b/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`); } diff --git a/src/utils/trip-info-utils.js b/src/utils/trip-info-utils.js index e8c75f6..a942282 100644 --- a/src/utils/trip-info-utils.js +++ b/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}`; }; diff --git a/src/view/point-edit-view.js b/src/view/point-edit-view.js index 987089a..f883052 100644 --- a/src/view/point-edit-view.js +++ b/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 += `
- - + +
`; }); @@ -107,13 +108,13 @@ function createPointEditElement({state, destinations, offers, pointType}) {
Event type - ${createTypesElements(TYPES)} + ${createTypesElements(POINT_TYPES, type)}
diff --git a/src/view/point-view.js b/src/view/point-view.js index 87cb944..d3f2c0b 100644 --- a/src/view/point-view.js +++ b/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 `
  • - +
    Event type icon