-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #21 from lunianka/module7-task1
- Loading branch information
Showing
23 changed files
with
633 additions
and
167 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,41 +1,43 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
||
<title>Big Trip</title> | ||
|
||
<link rel="stylesheet" href="./css/style.css"> | ||
</head> | ||
|
||
<body class="page-body"> | ||
<header class="page-header"> | ||
<div class="page-body__container page-header__container"> | ||
<img class="page-header__logo" src="img/logo.png" width="42" height="42" alt="Trip logo"> | ||
|
||
<div class="trip-main"> | ||
<div class="trip-main__trip-controls trip-controls"> | ||
<div class="trip-controls__filters"> | ||
<h2 class="visually-hidden">Filter events</h2> | ||
<!-- Фильтры --> | ||
</div> | ||
</div> | ||
|
||
<button class="trip-main__event-add-btn btn btn--big btn--yellow" type="button">New event</button> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
||
<title>Big Trip</title> | ||
|
||
<link rel="stylesheet" href="./css/style.css"> | ||
</head> | ||
|
||
<body class="page-body"> | ||
<header class="page-header"> | ||
<div class="page-body__container page-header__container"> | ||
<img class="page-header__logo" src="img/logo.png" width="42" height="42" alt="Trip logo"> | ||
|
||
<div class="trip-main"> | ||
<div class="trip-main__trip-controls trip-controls"> | ||
<div class="trip-controls__filters"> | ||
<h2 class="visually-hidden">Filter events</h2> | ||
<!-- Фильтры --> | ||
</div> | ||
</div> | ||
|
||
<!-- <button class="trip-main__event-add-btn btn btn--big btn--yellow" type="button">New event</button> --> | ||
</div> | ||
</header> | ||
<main class="page-body__page-main page-main"> | ||
<div class="page-body__container"> | ||
<section class="trip-events"> | ||
<h2 class="visually-hidden">Trip events</h2> | ||
</div> | ||
</header> | ||
<main class="page-body__page-main page-main"> | ||
<div class="page-body__container"> | ||
<section class="trip-events"> | ||
<h2 class="visually-hidden">Trip events</h2> | ||
|
||
<!-- Сортировка --> | ||
<!-- Сортировка --> | ||
|
||
<!-- Контент --> | ||
</section> | ||
</div> | ||
</main> | ||
</body> | ||
|
||
<!-- Контент --> | ||
</section> | ||
</div> | ||
</main> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,51 @@ | ||
import TripInfoView from './view/trip-info-view.js'; | ||
import TripPresenter from './presenter/trip-presenter.js'; | ||
import FilterPresenter from './presenter/filter-presenter.js'; | ||
import NewPointButtonPresenter from './presenter/new-point-button-presenter.js'; | ||
import MockService from './service/mock-service.js'; | ||
import DestinationsModel from './model/destinations-model.js'; | ||
import OffersModel from './model/offers-model.js'; | ||
import PointsModel from './model/points-model.js'; | ||
import FilterModel from './model/filter-model.js'; | ||
import { render, RenderPosition } from './framework/render.js'; | ||
|
||
const tripInfoElement = document.querySelector('.trip-main'); | ||
const siteMainElement = document.querySelector('.page-main'); | ||
const bodyElement = document.querySelector('body'); | ||
const headerElement = bodyElement.querySelector('.page-header'); | ||
const tripInfoElement = headerElement.querySelector('.trip-main'); | ||
const siteMainElement = bodyElement.querySelector('.page-main'); | ||
const eventListElement = siteMainElement.querySelector('.trip-events'); | ||
const filterElement = tripInfoElement.querySelector('.trip-controls__filters'); | ||
|
||
const mockService = new MockService(); | ||
const destinationsModel = new DestinationsModel(mockService); | ||
const offersModel = new OffersModel(mockService); | ||
const pointsModel = new PointsModel(mockService); | ||
const filterModel = new FilterModel(); | ||
|
||
const tripPresenter = new TripPresenter({ tripContainer: eventListElement, destinationsModel, offersModel, pointsModel }); | ||
const filterPresenter = new FilterPresenter({ container: filterElement, pointsModel }); | ||
const newPointButtonPresenter = new NewPointButtonPresenter({ | ||
container: tripInfoElement | ||
}); | ||
|
||
const filterPresenter = new FilterPresenter({ | ||
container: filterElement, | ||
pointsModel, | ||
filterModel | ||
}); | ||
|
||
const tripPresenter = new TripPresenter({ | ||
tripContainer: eventListElement, | ||
destinationsModel, | ||
offersModel, | ||
pointsModel, | ||
filterModel, | ||
newPointButtonPresenter: newPointButtonPresenter | ||
}); | ||
|
||
render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN); | ||
|
||
tripPresenter.init(); | ||
newPointButtonPresenter.init({ | ||
onButtonClick: tripPresenter.newPointButtonClickHandler | ||
}); | ||
|
||
filterPresenter.init(); | ||
tripPresenter.init(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,21 @@ | ||
export default class DestinationsModel { | ||
import Observable from '../framework/observable.js'; | ||
|
||
export default class DestinationsModel extends Observable { | ||
#service = null; | ||
#destinations = []; | ||
|
||
constructor(service) { | ||
this.service = service; | ||
this.destinations = this.service.getDestinations(); | ||
super(); | ||
this.#service = service; | ||
this.#destinations = this.#service.getDestinations(); | ||
} | ||
|
||
get() { | ||
return this.destinations; | ||
return this.#destinations; | ||
} | ||
|
||
getById(id) { | ||
return this.destinations.find((destination) => destination.id === id); | ||
return this.#destinations | ||
.find((destination) => destination.id === id); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import Observable from '../framework/observable.js'; | ||
import { FilterType } from '../const.js'; | ||
|
||
export default class FilterModel extends Observable { | ||
#filter = FilterType.EVERYTHING; | ||
|
||
get() { | ||
return this.#filter; | ||
} | ||
|
||
set(updateType, update) { | ||
this.#filter = update; | ||
this._notify(updateType, update) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,21 @@ | ||
export default class OffersModel { | ||
import Observable from '../framework/observable.js'; | ||
|
||
export default class OffersModel extends Observable { | ||
#service = null; | ||
#offers = []; | ||
|
||
constructor(service) { | ||
this.service = service; | ||
this.offers = this.service.getOffers(); | ||
super(); | ||
this.#service = service; | ||
this.#offers = this.#service.getOffers(); | ||
} | ||
|
||
get() { | ||
return this.offers; | ||
return this.#offers; | ||
} | ||
|
||
getByType(type) { | ||
return this.offers.find((offer) => offer.type === type).offers; | ||
return this.#offers | ||
.find((offer) => offer.type === type).offers; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,40 @@ | ||
export default class PointsModel { | ||
import Observable from '../framework/observable.js'; | ||
|
||
import { updateItem } from '../utils.js'; | ||
|
||
export default class PointsModel extends Observable { | ||
#points = []; | ||
#service = null; | ||
|
||
constructor(service) { | ||
this.service = service; | ||
this.points = this.service.getPoints(); | ||
super(); | ||
this.#service = service; | ||
this.#points = this.#service.getPoints(); | ||
} | ||
|
||
get() { | ||
return this.points; | ||
return this.#points; | ||
} | ||
|
||
getById(id) { | ||
return this.#points.find((point) => point.id === id); | ||
} | ||
|
||
update(updateType, point) { | ||
const updatedPoint = this.#service.updatePoint(point); | ||
this.#points = updateItem(this.#points, updatedPoint); | ||
this._notify(updateType, updatedPoint); | ||
} | ||
|
||
add(updateType, point) { | ||
const addedPoint = this.#service.addPoint(point); | ||
this.#points.push(addedPoint); | ||
this._notify(updateType, addedPoint); | ||
} | ||
|
||
delete(updateType, point) { | ||
this.#service.deletePoint(point); | ||
this.#points = this.#points.filter((pointItem) => pointItem.id !== point.id); | ||
this._notify(updateType); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,63 @@ | ||
import FilterView from '../view/filter-view.js'; | ||
import { render } from '../framework/render.js'; | ||
import { generateFilters } from '../mock/filter.js'; | ||
import FilterView from "../view/filter-view.js"; | ||
import { render, replace, remove } from "../framework/render.js"; | ||
import { UpdateType } from "../const.js"; | ||
import { filter } from "../utils/filter.js"; | ||
|
||
export default class FilterPresenter { | ||
#container = null; | ||
#filterComponent = null; | ||
|
||
#pointsModel = null; | ||
#filters = []; | ||
#filterModel = null; | ||
|
||
#currentFilter = null; | ||
|
||
constructor({ container, pointsModel }) { | ||
constructor({ container, pointsModel, filterModel }) { | ||
this.#container = container; | ||
this.#pointsModel = pointsModel; | ||
this.#filters = generateFilters(this.#pointsModel.get()); | ||
this.#filterModel = filterModel; | ||
|
||
this.#pointsModel.addObserver(this.#modelEventHandler); | ||
this.#filterModel.addObserver(this.#modelEventHandler); | ||
} | ||
|
||
get filters() { | ||
const points = this.#pointsModel.get(); | ||
|
||
return Object.entries(filter) | ||
.map(([filterType, filterPoints]) => ({ | ||
type: filterType, | ||
isChecked: filterType === this.#currentFilter, | ||
isDisabled: filterPoints(points).length === 0 | ||
})); | ||
} | ||
|
||
init() { | ||
render(new FilterView(this.#filters), this.#container); | ||
this.#currentFilter = this.#filterModel.get(); | ||
|
||
const filters = this.filters; | ||
|
||
const prevFilterComponent = this.#filterComponent; | ||
|
||
this.#filterComponent = new FilterView({ | ||
items: filters, | ||
onItemChange: this.#filterTypeChangeHandler | ||
}); | ||
|
||
if (prevFilterComponent === null) { | ||
render(this.#filterComponent, this.#container); | ||
return; | ||
} | ||
|
||
replace(this.#filterComponent, prevFilterComponent); | ||
remove(prevFilterComponent); | ||
} | ||
|
||
#filterTypeChangeHandler = (filterType) => { | ||
this.#filterModel.set(UpdateType.MAJOR, filterType); | ||
}; | ||
|
||
#modelEventHandler = () => { | ||
this.init(); | ||
}; | ||
} |
Oops, something went wrong.