-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Шаблонизируй то #6
Changes from 4 commits
fcaeb81
58ed502
1b1177b
576a363
9fee6d3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,35 @@ | ||
const EVENT_TYPES = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant']; | ||
const EVENT_TYPES = [ | ||
'taxi' | ||
, 'bus' | ||
, 'train' | ||
, 'ship' | ||
, 'drive' | ||
, 'flight' | ||
, 'check-in' | ||
, 'sightseeing' | ||
, 'restaurant']; | ||
|
||
const MESSAGE = { | ||
EMPTY: 'Click New Event to create your first point', | ||
LOADING: 'Loading...', | ||
FAILED_LOAD: 'Failed to load latest route information', | ||
}; | ||
|
||
export {EVENT_TYPES}; | ||
const FilterType = { | ||
EVERYTHING: 'everything', | ||
FUTURE: 'future', | ||
PRESENT: 'present', | ||
PAST: 'past' | ||
}; | ||
|
||
const SortType = { | ||
DAY: 'day', | ||
EVENT: 'event', | ||
TIME: 'time', | ||
PRICE: 'price', | ||
OFFERS: 'offers', | ||
}; | ||
|
||
const DisabledSortType = [SortType.EVENT, SortType.OFFERS]; | ||
|
||
export {EVENT_TYPES, MESSAGE, FilterType, SortType, DisabledSortType}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { filter } from '../utils/filter.js'; | ||
|
||
function generateFilter() { | ||
return Object.entries(filter).map(([filterType]) => ({type: filterType})); | ||
} | ||
|
||
export { generateFilter }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,7 +6,7 @@ export default class PointsTripModel { | |
this.#points = points; | ||
} | ||
|
||
get() { | ||
get points() { | ||
return this.#points; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,46 +1,52 @@ | ||
import { render, RenderPosition, replace } from '../framework/render.js'; | ||
import { MESSAGE } from '../const.js'; | ||
import { SortType } from '../const.js'; | ||
import { sortEventsByDay, sortEventsByTime, sortEventsByPrice } from '../utils/filter.js'; | ||
|
||
import SectionTripInfoView from '../view/section-trip-info-view.js'; | ||
import NewEventButtonView from '../view/new-event-button-view.js'; | ||
import TripFiltersFormView from '../view/trip-filters-form-view.js'; | ||
|
||
import SortButtonView from '../view/sort-view.js'; | ||
import SortButtonView from '../view/sort-button-view.js'; | ||
import TripEventListView from '../view/trip-events-list-view.js'; | ||
import EventItemView from '../view/event-item-view.js'; | ||
// import AddNewPointView from '../view/add-new-point-view.js'; | ||
import EditPointView from '../view/edit-poit-view.js'; | ||
import TripEventsMessage from '../view/trip-events-message-view.js'; | ||
|
||
const tripMain = document.querySelector('.trip-main'); | ||
const tripControlsFilters = document.querySelector('.trip-controls__filters'); | ||
|
||
|
||
export default class ListPresenter { | ||
|
||
#listContainer; | ||
#pointsTrip; | ||
#destinations; | ||
#offers; | ||
#listContainer = null; | ||
#pointsTrip = null; | ||
#destinations = null; | ||
#offers = null; | ||
|
||
#listComponent = new TripEventListView(); | ||
|
||
#listPoints = []; | ||
|
||
#sourcedTripPoints = []; | ||
#sortComponent = null; | ||
#currentSortType = SortType.DAY; | ||
|
||
constructor({ listContainer, pointsTripModel, destinationsTripModel, offersTripModel }) { | ||
this.#listContainer = listContainer; | ||
this.#pointsTrip = pointsTripModel.get(); | ||
this.#pointsTrip = pointsTripModel.points; | ||
this.#destinations = destinationsTripModel; | ||
this.#offers = offersTripModel; | ||
} | ||
|
||
init() { | ||
this.#listPoints = [...this.#pointsTrip]; | ||
|
||
this.#sourcedTripPoints = [...this.#pointsTrip]; | ||
|
||
/** Отрисовка всех компонентов */ | ||
this.#renderList(); | ||
} | ||
|
||
|
||
/** Елемент события путешествия */ | ||
#tripEventData(item) { | ||
|
||
const destination = this.#destinations.getDestinationById(item); | ||
|
@@ -114,31 +120,70 @@ export default class ListPresenter { | |
|
||
#renderList() { | ||
/** Отрисовка шапки сайта */ | ||
render(new SectionTripInfoView({allDestinations: this.#destinations, allPoints: this.#listPoints}), tripMain, RenderPosition.AFTERBEGIN); // Заголовок, даты, общая цена | ||
render(new SectionTripInfoView({allDestinations: this.#destinations , allPoints: this.#listPoints}), tripMain, RenderPosition.AFTERBEGIN); // Заголовок, даты, общая цена | ||
render(new NewEventButtonView(), tripMain); // Заголовок, кнопка добавить событие | ||
render (new TripFiltersFormView(), tripControlsFilters); // Кнопки сортировки | ||
|
||
/** Рендерим кнопки сортировки */ | ||
this.#renderSort(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Лучше вынести из этого метода #renderSort(); и render(new SectionTripInfoView({allDestinations: this.#destinations , allPoints: this.#listPoints}), tripMain, RenderPosition.AFTERBEGIN); . В будущем могут возникнуть ситуации в которых нам надо перерендерить список, но не перерендеривать эти два элемента. В целом лучше разделять на разные методы рендеры разных кусков нашего приложения |
||
|
||
/** Рендерим список для новых событий */ | ||
render(this.#listComponent, this.#listContainer); | ||
|
||
/** Если список событий пуст, то отрисовываем сообщение */ | ||
if (this.#listPoints.length === 0) { | ||
render(new TripEventsMessage, this.#listContainer); | ||
/** Если список событий пуст, то отрисовываем сообщение */ | ||
render(new TripEventsMessage(MESSAGE.EMPTY), this.#listContainer); | ||
|
||
} | ||
/** Рендерим кнопки сортировки */ | ||
render(new SortButtonView(), this.#listContainer); | ||
} else { | ||
/** Если список событий не пуст, то отрисовываем события */ | ||
|
||
/** Рендерим редактируемое событие */ | ||
this.#rederTripEvent(this.#listPoints[0]); | ||
/** Рендерим редактируемое событие */ | ||
this.#rederTripEvent(this.#listPoints[0]); | ||
|
||
/** Рендерим список событий */ | ||
this.#renderAllTripEvents(); | ||
/** Рендерим список событий */ | ||
this.#renderAllTripEvents(); | ||
} | ||
|
||
|
||
// Переделать логику отрисовки новой точки! | ||
// render(new AddNewPointView({pointsTrip: this.#listPoints, offers: this.#offers}), this.#listContainer); | ||
} | ||
|
||
/** Отрисовка cортировки событий путешествия */ | ||
#renderSort() { | ||
this.#sortComponent = new SortButtonView({ | ||
onSortTypeChange: this.#handleSortTypeChange, | ||
currentSortType: this.#currentSortType, | ||
}); | ||
|
||
render(this.#sortComponent, this.#listContainer); | ||
} | ||
|
||
/** Сортировка событий путешествия */ | ||
#sortTripPoints(sortType) { | ||
|
||
switch (sortType) { | ||
case SortType.DAY: | ||
this.#pointsTrip.sort(sortEventsByDay); | ||
break; | ||
case SortType.TIME: | ||
this.#pointsTrip.sort(sortEventsByTime); | ||
break; | ||
case SortType.PRICE: | ||
this.#pointsTrip.sort(sortEventsByPrice); | ||
break; | ||
default: | ||
this.#pointsTrip = [...this.#sourcedTripPoints]; | ||
} | ||
|
||
this.#currentSortType = sortType; | ||
} | ||
|
||
#handleSortTypeChange = (sortType) => { | ||
if (this.#currentSortType === sortType) { | ||
return; | ||
} | ||
|
||
this.#sortTripPoints(sortType); | ||
}; | ||
|
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { FilterType } from '../const.js'; | ||
import dayjs from 'dayjs'; | ||
|
||
const filter = { | ||
[FilterType.EVERYTHING]: (pointsTrip) => pointsTrip, | ||
[FilterType.FUTURE]: (pointsTrip) => pointsTrip.filter((pointTrip) => new Date(pointTrip.date_from) > Date.now()), | ||
[FilterType.PRESENT]: (pointsTrip) => pointsTrip.filter((pointTrip) => new Date(pointTrip.date_from) <= Date.now() && new Date(pointTrip.date_to) >= Date.now()), | ||
[FilterType.PAST]: (pointsTrip) => pointsTrip.filter((pointTrip) => new Date(pointTrip.date_to) < Date.now()), | ||
}; | ||
|
||
|
||
function sortEventsByDay (eventA, eventB) { | ||
|
||
if (dayjs(eventA.date_from).diff(dayjs(eventB.date_from)) < 0) { | ||
return -1; | ||
} | ||
|
||
if (dayjs(eventA.date_from).diff(dayjs(eventB.date_from)) > 0) { | ||
return 1; | ||
} | ||
|
||
return 0; | ||
} | ||
|
||
function sortEventsByTime (eventA, eventB) { | ||
|
||
if (dayjs(eventA.date_from).diff(dayjs(eventA.date_to)) < | ||
dayjs(eventB.date_from).diff(dayjs(eventB.date_to))) { | ||
return -1; | ||
} | ||
|
||
if (dayjs(eventA.date_from).diff(dayjs(eventA.date_to)) > | ||
dayjs(eventB.date_from).diff(dayjs(eventB.date_to))) { | ||
return 1; | ||
} | ||
|
||
return 0; | ||
} | ||
|
||
function sortEventsByPrice (eventA, eventB) { | ||
|
||
if (eventA.base_price < eventB.base_price) { | ||
return -1; | ||
} | ||
|
||
if (eventA.base_price > eventB.base_price) { | ||
return 1; | ||
} | ||
|
||
return 0; | ||
} | ||
|
||
export { filter, sortEventsByDay, sortEventsByTime, sortEventsByPrice }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Мне кажется лучше рендерить фильтры внутри ListPresenter, т.к. список точек маршрутра и фильтрация - это взаимосвязанные вещи