Skip to content

Commit 3c15483

Browse files
WhiteShark23WhiteShark23
committed
4.16. Разделяй и властвуй
1 parent da34f7e commit 3c15483

File tree

6 files changed

+133
-107
lines changed

6 files changed

+133
-107
lines changed

‎src/presenter/board-presenter.js‎

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,73 @@
11
import FilterView from '../view/filter-view.js';
2-
import { render } from '../render.js';
2+
import { render, replace } from '../framework/render.js';
33
import ListEventsView from '../view/list-events.js';
44
import ItemEventView from '../view/item-event.js';
55
import EditEventView from '../view/edit-event.js';
66
export default class BoardPresenter {
7-
listEventsComponent = new ListEventsView();
7+
#boardContainer = null;
8+
#pointsModel = null;
9+
#boardPoints = [];
10+
11+
#listEventsComponent = new ListEventsView();
812

913
constructor({boardContainer, pointsModel}) {
10-
this.boardContainer = boardContainer;
11-
this.pointsModel = pointsModel;
14+
this.#boardContainer = boardContainer;
15+
this.#pointsModel = pointsModel;
1216
}
1317

1418
init() {
15-
this.boardPoints = [...this.pointsModel.getPoint()];
16-
render(new FilterView, this.boardContainer);
17-
render(this.listEventsComponent, this.boardContainer);
18-
render(new EditEventView(this.pointsModel, this.boardPoints[0]), this.listEventsComponent.getElement());
19+
this.#boardPoints = [...this.#pointsModel.getPoint()];
20+
21+
this.#renderBoard();
22+
}
23+
24+
#renderItemEvent(pointsModel, point) {
25+
const escKeyDownHandler = (evt) => {
26+
if (evt.key === 'Escape') {
27+
evt.preventDefault();
28+
replaceFormToCard();
29+
document.removeEventListener('keydown', escKeyDownHandler);
30+
}
31+
};
32+
33+
const itemEvent = new ItemEventView({
34+
pointsModel,
35+
point,
36+
onEditClick: () => {
37+
replaceCardToForm();
38+
document.addEventListener('keydown', escKeyDownHandler);
39+
}
40+
});
41+
42+
const editEvent = new EditEventView({
43+
pointsModel,
44+
point,
45+
onFormSubmit: () => {
46+
replaceFormToCard();
47+
document.removeEventListener('keydown', escKeyDownHandler);
48+
},
49+
onFormCloseClick: () => {
50+
replaceFormToCard();
51+
document.removeEventListener('keydown', escKeyDownHandler);
52+
}
53+
});
54+
55+
render(itemEvent, this.#listEventsComponent.element);
56+
57+
function replaceCardToForm() {
58+
replace(editEvent, itemEvent);
59+
}
60+
61+
function replaceFormToCard() {
62+
replace(itemEvent, editEvent);
63+
}
64+
}
1965

20-
for (let i = 1; i < this.boardPoints.length; i++) {
21-
render(new ItemEventView(this.pointsModel, this.boardPoints[i]), this.listEventsComponent.getElement());
66+
#renderBoard() {
67+
render(new FilterView, this.#boardContainer);
68+
render(this.#listEventsComponent, this.#boardContainer);
69+
for (let i = 0; i < this.#boardPoints.length; i++) {
70+
this.#renderItemEvent(this.#pointsModel, this.#boardPoints[i]);
2271
}
2372
}
2473
}

‎src/render.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/view/edit-event.js‎

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {createElement} from '../render.js';
1+
import AbstractView from '../framework/view/abstract-view.js';
22
import { humanizeTaskDueDate, DateFormat } from '../utils.js';
33

44
function createOffferTemplate (offer, checkedOffer) {
@@ -151,40 +151,56 @@ function createEditEventTemplate(point, checkedOffer, offer, allOffers, destinat
151151
</li>`;
152152
}
153153

154-
export default class EditEventView {
155-
156-
constructor(pointsModel, point) {
157-
this.pointsModel = pointsModel;
158-
159-
this.point = point;
160-
this.checkedOffer = [...this.pointsModel.getOfferById(this.point.type, this.point.offers)];
161-
this.offer = this.pointsModel.getOfferByType(this.point.type);
162-
this.allOffers = this.pointsModel.getOffer();
163-
this.destination = this.pointsModel.getDestinationById(this.point.destination);
164-
this.allDestinations = this.pointsModel.getDestination();
154+
export default class EditEventView extends AbstractView {
155+
#pointsModel = null;
156+
#point = null;
157+
#checkedOffer = null;
158+
#offer = null;
159+
#allOffers = null;
160+
#destination = null;
161+
#allDestinations = null;
162+
#handleFormSubmit = null;
163+
#handleFormCloseClick = null;
164+
165+
constructor({pointsModel, point, onFormSubmit, onFormCloseClick}) {
166+
super();
167+
this.#pointsModel = pointsModel;
168+
169+
this.#point = point;
170+
this.#checkedOffer = [...this.#pointsModel.getOfferById(this.#point.type, this.#point.offers)];
171+
this.#offer = this.#pointsModel.getOfferByType(this.#point.type);
172+
this.#allOffers = this.#pointsModel.getOffer();
173+
this.#destination = this.#pointsModel.getDestinationById(this.#point.destination);
174+
this.#allDestinations = this.#pointsModel.getDestination();
175+
this.#handleFormSubmit = onFormSubmit;
176+
this.#handleFormCloseClick = onFormCloseClick;
177+
178+
this.element.querySelector('form')
179+
.addEventListener('submit', this.#formFormHandler);
180+
181+
this.element.querySelector('.event__rollup-btn')
182+
.addEventListener('click', this.#formClickHandler);
165183
}
166184

167-
getTemplate() {
185+
get template() {
168186

169187
return createEditEventTemplate(
170-
this.point,
171-
this.checkedOffer,
172-
this.offer,
173-
this.allOffers,
174-
this.destination,
175-
this.allDestinations,
188+
this.#point,
189+
this.#checkedOffer,
190+
this.#offer,
191+
this.#allOffers,
192+
this.#destination,
193+
this.#allDestinations,
176194
);
177195
}
178196

179-
getElement() {
180-
if (!this.element) {
181-
this.element = createElement(this.getTemplate());
182-
}
197+
#formFormHandler = (evt) => {
198+
evt.preventDefault();
199+
this.#handleFormSubmit();
200+
};
183201

184-
return this.element;
185-
}
186-
187-
removeElement() {
188-
this.element = null;
189-
}
202+
#formClickHandler = (evt) => {
203+
evt.preventDefault();
204+
this.#handleFormCloseClick();
205+
};
190206
}

‎src/view/filter-view.js‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {createElement} from '../render.js';
1+
import AbstractView from '../framework/view/abstract-view.js';
22

33
function createFilterTemplate() {
44
return `<form class="trip-events__trip-sort trip-sort" action="#" method="get">
@@ -29,20 +29,8 @@ function createFilterTemplate() {
2929
</form>`;
3030
}
3131

32-
export default class FilterView {
33-
getTemplate() {
32+
export default class FilterView extends AbstractView {
33+
get template() {
3434
return createFilterTemplate();
3535
}
36-
37-
getElement() {
38-
if (!this.element) {
39-
this.element = createElement(this.getTemplate());
40-
}
41-
42-
return this.element;
43-
}
44-
45-
removeElement() {
46-
this.element = null;
47-
}
4836
}

‎src/view/item-event.js‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {createElement} from '../render.js';
1+
import AbstractView from '../framework/view/abstract-view.js';
22
import { getTimePeriod, humanizeTaskDueDate, DateFormat } from '../utils.js';
33
import dayjs from 'dayjs';
44

@@ -44,28 +44,32 @@ function createItemEventTemplate(point, offer, destination) {
4444
</li>`;
4545
}
4646

47-
export default class ItemEventView {
47+
export default class ItemEventView extends AbstractView {
48+
#pointsModel = null;
49+
#point = null;
50+
#offer = null;
51+
#destination = null;
52+
#handleEditClick = null;
4853

49-
constructor(pointsModel, point) {
50-
this.pointsModel = pointsModel;
51-
this.point = point;
52-
this.offer = [...this.pointsModel.getOfferById(this.point.type, this.point.offers)];
53-
this.destination = this.pointsModel.getDestinationById(this.point.destination);
54-
}
55-
56-
getTemplate() {
57-
return createItemEventTemplate(this.point, this.offer, this.destination);
58-
}
5954

60-
getElement() {
61-
if (!this.element) {
62-
this.element = createElement(this.getTemplate());
63-
}
55+
constructor({pointsModel, point, onEditClick}) {
56+
super();
57+
this.#pointsModel = pointsModel;
58+
this.#point = point;
59+
this.#offer = [...this.#pointsModel.getOfferById(this.#point.type, this.#point.offers)];
60+
this.#destination = this.#pointsModel.getDestinationById(this.#point.destination);
61+
this.#handleEditClick = onEditClick;
6462

65-
return this.element;
63+
this.element.querySelector('.event__rollup-btn')
64+
.addEventListener('click', this.#editClickHandler);
6665
}
6766

68-
removeElement() {
69-
this.element = null;
67+
get template() {
68+
return createItemEventTemplate(this.#point, this.#offer, this.#destination);
7069
}
70+
71+
#editClickHandler = (evt) => {
72+
evt.preventDefault();
73+
this.#handleEditClick();
74+
};
7175
}

‎src/view/list-events.js‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
1-
import {createElement} from '../render.js';
1+
import AbstractView from '../framework/view/abstract-view.js';
22

33
function createListEventsTemplate() {
44
return '<ul class="trip-events__list"></ul>';
55
}
66

7-
export default class ListEventsView {
8-
getTemplate() {
7+
export default class ListEventsView extends AbstractView {
8+
get template() {
99
return createListEventsTemplate();
1010
}
11-
12-
getElement() {
13-
if (!this.element) {
14-
this.element = createElement(this.getTemplate());
15-
}
16-
17-
return this.element;
18-
}
19-
20-
removeElement() {
21-
this.element = null;
22-
}
2311
}

0 commit comments

Comments
 (0)