Skip to content

Commit

Permalink
Merge pull request #9 from ssftvyn/module5-task2
Browse files Browse the repository at this point in the history
  • Loading branch information
@keksobot
keksobot authored May 16, 2024
2 parents 59b2dfc + 7caad70 commit e4136fd
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 37 deletions.
34 changes: 18 additions & 16 deletions src/const.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const TYPES = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant'];
export const TYPES = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant'];

const CITIES = ['Alubarna', 'Tokio', 'Kioto', 'Osaka', 'Konohagakure', 'Magnolia', 'Reole'];
export const CITIES = ['Alubarna', 'Tokio', 'Kioto', 'Osaka', 'Konohagakure', 'Magnolia', 'Reole'];

const DESCRIPTIONS = [
export const DESCRIPTIONS = [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'Cras aliquet varius magna, non porta ligula feugiat eget.',
'Fusce tristique felis at fermentum pharetra.',
Expand All @@ -16,54 +16,56 @@ const DESCRIPTIONS = [
'In rutrum ac purus sit amet tempus.'
];

const PicturesInfo = {
export const PicturesInfo = {
COUNT: 5,
SRC: 100,
};

const Price = {
export const Price = {
MIN: 100,
MAX: 500
};

const OFFERS = ['Upgrade to a business class', 'Add luggage', 'Add meal', 'Choose seats', 'Travel by train'];
export const OFFERS = ['Upgrade to a business class', 'Add luggage', 'Add meal', 'Choose seats', 'Travel by train'];

const Duration = {
export const Duration = {
MIN: 60,
HOUR: 10,
DAY: 3
};

const DateFormat = {
export const DateFormat = {
LONG: 'YYYY-MM-DDTHH:mm',
SHORT: 'MMM DD'
};

const OffersCount = {
export const OffersCount = {
MIN: 0,
MAX: 6
};

const FilterType = {
export const FilterType = {
EVERYTHING: 'everything',
FUTURE: 'future',
PAST: 'past',
};

const PICTURE_DISCRIPTIONS = [
export const PICTURE_DISCRIPTIONS = [
'Nice place',
'Ugly building',
'Pretty picture',
'Ancient city',
];

const POINTS_COUNT = 5;
export const POINTS_COUNT = 5;

const MODE = {
export const MODE = {
DEFAULT: 'DEFAULT',
EDITING: 'EDITING'
};

export {TYPES, CITIES, DESCRIPTIONS, POINTS_COUNT, OFFERS, MODE, Duration, DateFormat, Price, OffersCount, FilterType, PicturesInfo, PICTURE_DISCRIPTIONS};


export const SortType = {
DAY: 'day',
TIME: 'time',
PRICE: 'price',
};
38 changes: 37 additions & 1 deletion src/presenter/trip-info-presenter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import SortingView from '../view/sort.js';
import PointPresenter from './point-presenter.js';
import { render, RenderPosition } from '../framework/render.js';
import { updateItem } from '../utils/common.js';
import { SortType } from '../const.js';
import { sortByTime, sortByPrice, sortByDay } from '../utils/date-time.js';

export default class TripInfoPresenter {
#eventsList = null;
Expand All @@ -15,6 +17,9 @@ export default class TripInfoPresenter {
#tripEvents = [];

#destinations = null;
#currentSortType = SortType.DAY;
#sourcedPoints = [];


#noEventsComponent = new NoEventsView();
#sortingComponent = new SortingView();
Expand All @@ -26,9 +31,13 @@ export default class TripInfoPresenter {
init (tripContainer, pointsModel, destinationsModel) {
this.#tripContainer = tripContainer;
this.#pointsModel = pointsModel;
this.#points = [...this.#pointsModel.points];
this.#destinations = destinationsModel.destinations;

const pointsSortedByDefault = [...this.#pointsModel.points].sort(sortByDay);

this.#points = pointsSortedByDefault;
this.#sourcedPoints = pointsSortedByDefault;

if(this.#points.length === 0){
this.#renderNoEvents();
}
Expand All @@ -54,6 +63,32 @@ export default class TripInfoPresenter {
}
};

#sortEvents = (sortType) => {
switch (sortType){
case SortType.PRICE:
this.#points.sort(sortByPrice);
break;
case SortType.TIME:
this.#points.sort(sortByTime);
break;
default:
this.#points.sort(sortByDay);
}

this.#currentSortType = sortType;
};

#handleSortTypeChange = (sortType) => {
if (this.#currentSortType === sortType) {
return;
}

this.#sortEvents(sortType);

this.#clearEventsList();
this.#renderPoints();
};

#handlePointChange = (updatedPoint) => {
this.#tripEvents = updateItem(this.#tripEvents, updatedPoint);
this.#eventsPresenter.get(updatedPoint.id).init(updatedPoint, this.#destinations);
Expand All @@ -74,6 +109,7 @@ export default class TripInfoPresenter {

#renderSort = () => {
render(this.#sortingComponent, this.#tripContainer, RenderPosition.AFTERBEGIN);
this.#sortingComponent.setSortTypeChangeHandler(this.#handleSortTypeChange);
};

#renderNoEvents = () => {
Expand Down
50 changes: 42 additions & 8 deletions src/utils/date-time.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import duration from 'dayjs/plugin/duration';

dayjs.extend(duration);

const humanizeDate = (date) => dayjs(date).format('D MMMM');
export const humanizeDate = (date) => dayjs(date).format('D MMMM');

const humanizeTime = (date) => dayjs(date).format('HH:mm');
export const humanizeTime = (date) => dayjs(date).format('HH:mm');

const getEventDuration = (dateFrom, dateTo) => {
export const getEventDuration = (dateFrom, dateTo) => {
const timeParts = dayjs.duration(dayjs(dateTo).diff(dateFrom)).
format('DD HH mm').
split(' ');
Expand All @@ -28,11 +28,45 @@ const getEventDuration = (dateFrom, dateTo) => {
return eventDuration;
};

const humanizeFormDate = (date) => dayjs(date).format('DD/MM/YY HH:mm');
const getWeightForNullDate = (dateA, dateB) => {
if (dateA === null && dateB === null) {
return 0;
}

if (dateA === null) {
return 1;
}

if (dateB === null) {
return -1;
}

return null;
};

export const getWrightForTwoNullDates = (pointA, pointB) => {
const weightA = getWeightForNullDate(pointA.dateFrom, pointA.dateTo);
const weightB = getWeightForNullDate(pointB.dateFrom, pointB.dateTo);

return weightA && weightB;
};

export const sortByDay = (pointA, pointB) => {
const weight = getWeightForNullDate(pointA.dateFrom, pointB.dateFrom);

return weight ?? dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom));
};

export const sortByTime = (pointA, pointB) => {
const timeA = dayjs(pointA.dateTo).diff(dayjs(pointA.dateFrom));
const timeB = dayjs(pointB.dateTo).diff(dayjs(pointB.dateFrom));
return timeA - timeB;
};

export const sortByPrice = (pointA, pointB) => pointA.basePrice - pointB.basePrice;

const isPastPoint = (point) => dayjs(point.dateFrom).isBefore(dayjs());
export const humanizeFormDate = (date) => dayjs(date).format('DD/MM/YY HH:mm');

const isFuturePoint = (point) => dayjs(point.dateFrom).isAfter(dayjs());
export const PastPoint = (point) => dayjs(point.dateFrom).isBefore(dayjs());

export{ humanizeDate, humanizeTime, humanizeFormDate, getEventDuration,
isPastPoint, isFuturePoint };
export const FuturePoint = (point) => dayjs(point.dateFrom).isAfter(dayjs());
6 changes: 3 additions & 3 deletions src/utils/filter.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { FilterType } from '../const';
import { isFuturePoint, isPastPoint } from './date-time';
import { FuturePoint, PastPoint } from './date-time';

const filterPoints = {
[FilterType.EVERYTHING]: (points) => Array.from(points),
[FilterType.FUTURE]: (points) => Array.from(points).filter((point) => isFuturePoint(point)),
[FilterType.PAST]: (points) => Array.from(points).filter((point) => isPastPoint(point))
[FilterType.FUTURE]: (points) => Array.from(points).filter((point) => FuturePoint(point)),
[FilterType.PAST]: (points) => Array.from(points).filter((point) => PastPoint(point))
};

export { filterPoints };
32 changes: 23 additions & 9 deletions src/view/sort.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import AbstractView from '../framework/view/abstract-view.js';
import { SortType } from '../const.js';

const createSortingTemplate = () => (
`<form class="trip-events__trip-sort trip-sort" action="#" method="get">
<div class="trip-sort__item trip-sort__item--day">
<input id="sort-day" class="trip-sort__input visually-hidden" type="radio" name="trip-sort" value="sort-day">
<label class="trip-sort__btn" for="sort-day">Day</label>
<div class="trip-sort__item trip-sort__item--${SortType.DAY}">
<input id="sort-${SortType.DAY}" data-sort-type=${SortType.DAY} class="trip-sort__input visually-hidden" type="radio" name="trip-sort" value="sort-${SortType.DAY}" checked>
<label class="trip-sort__btn" for="sort-${SortType.DAY}">Day</label>
</div>
<div class="trip-sort__item trip-sort__item--event">
<input id="sort-event" class="trip-sort__input visually-hidden" type="radio" name="trip-sort" value="sort-event" disabled>
<label class="trip-sort__btn" for="sort-event">Event</label>
</div>
<div class="trip-sort__item trip-sort__item--time">
<input id="sort-time" class="trip-sort__input visually-hidden" type="radio" name="trip-sort" value="sort-time">
<label class="trip-sort__btn" for="sort-time">Time</label>
<div class="trip-sort__item trip-sort__item--${SortType.TIME}">
<input id="sort-${SortType.TIME}" data-sort-type=${SortType.TIME} class="trip-sort__input visually-hidden" type="radio" name="trip-sort" value="sort-${SortType.TIME}">
<label class="trip-sort__btn" for="sort-${SortType.TIME}">Time</label>
</div>
<div class="trip-sort__item trip-sort__item--price">
<input id="sort-price" class="trip-sort__input visually-hidden" type="radio" name="trip-sort" value="sort-price" checked>
<label class="trip-sort__btn" for="sort-price">Price</label>
<div class="trip-sort__item trip-sort__item--${SortType.PRICE}">
<input id="sort-${SortType.PRICE}" data-sort-type=${SortType.PRICE} class="trip-sort__input visually-hidden" type="radio" name="trip-sort" value="sort-${SortType.PRICE}">
<label class="trip-sort__btn" for="sort-${SortType.PRICE}">Price</label>
</div>
<div class="trip-sort__item trip-sort__item--offer">
Expand All @@ -33,4 +34,17 @@ export default class SortingView extends AbstractView {
get template () {
return createSortingTemplate();
}

setSortTypeChangeHandler = (callback) => {
this._callback.sortTypeChange = callback;
this.element.addEventListener('click', this.#sortTypeChangeHandler);
};

#sortTypeChangeHandler = (evt) => {
if (evt.target.tagName !== 'INPUT') {
return;
}

this._callback.sortTypeChange(evt.target.dataset.sortType);
};
}

0 comments on commit e4136fd

Please sign in to comment.