-
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.
Создал презентер, пока отрисовывает НЕКОРРЕКТНО!!!
- Loading branch information
1 parent
2907b9e
commit 00255aa
Showing
5 changed files
with
214 additions
and
126 deletions.
There are no files selected for viewing
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,20 +1,27 @@ | ||
import TripInfoView from './view/trip-info-view.js'; | ||
import TripFilterView from './view/trip-filter-view.js'; | ||
import TripSortView from './view/trip-event-view.js'; | ||
import AddPoint from './view/trip-addPoint-view.js'; | ||
import ListView from './view/trip-list-view.js'; | ||
|
||
import BoardPresenter from './presenter/board-presenter.js'; | ||
|
||
import {render, renderBegin} from './render.js'; | ||
|
||
const siteMainElement = document.querySelector('.page-body'); | ||
const siteTripInfoElement = siteMainElement.querySelector('.trip-main'); // шапка | ||
const siteTripInfo = siteMainElement.querySelector('.trip-info'); // Инфо в шапке про маршрут | ||
const siteFiltersElement = siteTripInfoElement.querySelector('.trip-controls__filters'); // Фильтры EVERYTHING, FUTURE, PAST и т.д | ||
const siteEventsElement = siteMainElement.querySelector('.trip-events'); // Сортировка DAY, EVENT, TIME итд. | ||
const siteAddPointElement = siteMainElement.querySelector('.trip-events'); // Форма | ||
const siteListElement = siteMainElement.querySelector('.trip-events'); // Список маршрутов | ||
|
||
const boardPresenter = new BoardPresenter({boardContainer: siteMainElement}); | ||
|
||
renderBegin(new TripInfoView(), siteTripInfo); // Отображение информации вверху про маршрут | ||
render(new TripFilterView(), siteFiltersElement); // Отрисовка компонента Фильтры | ||
render(new TripSortView(), siteEventsElement); // Отрисовка компонента Эвент | ||
render(new AddPoint(), siteAddPointElement); // Отрисовка формы | ||
render(new ListView(), siteListElement); // Отрисовка компонента Лист(Список с маршрутами) | ||
|
||
boardPresenter.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 |
---|---|---|
@@ -0,0 +1,29 @@ | ||
//import BoardView from '../view/board-view.js'; | ||
import TripFilterView from '../view/trip-filter-view.js'; | ||
import ListView from '../view/trip-list-view.js'; | ||
//import TaskView from '../view/task-view.js'; | ||
//import TaskEditView from '../view/task-edit-view.js'; | ||
import AddPoint from '../view/trip-addPoint-view.js'; | ||
import {render} from '../render.js'; | ||
|
||
export default class BoardPresenter { | ||
boardComponent = new ListView(); | ||
taskListComponent = new ListView(); | ||
|
||
constructor({boardContainer}) { | ||
this.boardContainer = boardContainer; | ||
} | ||
|
||
init() { | ||
render(this.boardComponent, this.boardContainer); | ||
render(new TripFilterView(), this.boardComponent.getElement()); | ||
render(this.taskListComponent, this.boardComponent.getElement()); | ||
render(new AddPoint(), this.taskListComponent.getElement()); | ||
|
||
for (let i = 0; i < 3; i++) { | ||
render(new ListView(), this.taskListComponent.getElement()); | ||
} | ||
|
||
render(new AddPoint(), this.boardComponent.getElement()); | ||
} | ||
} |
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,176 @@ | ||
import {createElement} from '../render.js'; | ||
|
||
function createAddPointTemplate() { | ||
return ( | ||
`<form class="event event--edit" action="#" method="post"> | ||
<header class="event__header"> | ||
<div class="event__type-wrapper"> | ||
<label class="event__type event__type-btn" for="event-type-toggle-1"> | ||
<span class="visually-hidden">Choose event type</span> | ||
<img class="event__type-icon" width="17" height="17" src="img/icons/flight.png" alt="Event type icon"> | ||
</label> | ||
<input class="event__type-toggle visually-hidden" id="event-type-toggle-1" type="checkbox"> | ||
<div class="event__type-list"> | ||
<fieldset class="event__type-group"> | ||
<legend class="visually-hidden">Event type</legend> | ||
<div class="event__type-item"> | ||
<input id="event-type-taxi-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="taxi"> | ||
<label class="event__type-label event__type-label--taxi" for="event-type-taxi-1">Taxi</label> | ||
</div> | ||
<div class="event__type-item"> | ||
<input id="event-type-bus-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="bus"> | ||
<label class="event__type-label event__type-label--bus" for="event-type-bus-1">Bus</label> | ||
</div> | ||
<div class="event__type-item"> | ||
<input id="event-type-train-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="train"> | ||
<label class="event__type-label event__type-label--train" for="event-type-train-1">Train</label> | ||
</div> | ||
<div class="event__type-item"> | ||
<input id="event-type-ship-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="ship"> | ||
<label class="event__type-label event__type-label--ship" for="event-type-ship-1">Ship</label> | ||
</div> | ||
<div class="event__type-item"> | ||
<input id="event-type-drive-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="drive"> | ||
<label class="event__type-label event__type-label--drive" for="event-type-drive-1">Drive</label> | ||
</div> | ||
<div class="event__type-item"> | ||
<input id="event-type-flight-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="flight" checked> | ||
<label class="event__type-label event__type-label--flight" for="event-type-flight-1">Flight</label> | ||
</div> | ||
<div class="event__type-item"> | ||
<input id="event-type-check-in-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="check-in"> | ||
<label class="event__type-label event__type-label--check-in" for="event-type-check-in-1">Check-in</label> | ||
</div> | ||
<div class="event__type-item"> | ||
<input id="event-type-sightseeing-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="sightseeing"> | ||
<label class="event__type-label event__type-label--sightseeing" for="event-type-sightseeing-1">Sightseeing</label> | ||
</div> | ||
<div class="event__type-item"> | ||
<input id="event-type-restaurant-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="restaurant"> | ||
<label class="event__type-label event__type-label--restaurant" for="event-type-restaurant-1">Restaurant</label> | ||
</div> | ||
</fieldset> | ||
</div> | ||
</div> | ||
<div class="event__field-group event__field-group--destination"> | ||
<label class="event__label event__type-output" for="event-destination-1"> | ||
Flight | ||
</label> | ||
<input class="event__input event__input--destination" id="event-destination-1" type="text" name="event-destination" value="Chamonix" list="destination-list-1"> | ||
<datalist id="destination-list-1"> | ||
<option value="Amsterdam"></option> | ||
<option value="Geneva"></option> | ||
<option value="Chamonix"></option> | ||
</datalist> | ||
</div> | ||
<div class="event__field-group event__field-group--time"> | ||
<label class="visually-hidden" for="event-start-time-1">From</label> | ||
<input class="event__input event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="18/03/19 12:25"> | ||
— | ||
<label class="visually-hidden" for="event-end-time-1">To</label> | ||
<input class="event__input event__input--time" id="event-end-time-1" type="text" name="event-end-time" value="18/03/19 13:35"> | ||
</div> | ||
<div class="event__field-group event__field-group--price"> | ||
<label class="event__label" for="event-price-1"> | ||
<span class="visually-hidden">Price</span> | ||
€ | ||
</label> | ||
<input class="event__input event__input--price" id="event-price-1" type="text" name="event-price" value="160"> | ||
</div> | ||
<button class="event__save-btn btn btn--blue" type="submit">Save</button> | ||
<button class="event__reset-btn" type="reset">Delete</button> | ||
<button class="event__rollup-btn" type="button"> | ||
<span class="visually-hidden">Open event</span> | ||
</button> | ||
</header> | ||
<section class="event__details"> | ||
<section class="event__section event__section--offers"> | ||
<h3 class="event__section-title event__section-title--offers">Offers</h3> | ||
<div class="event__available-offers"> | ||
<div class="event__offer-selector"> | ||
<input class="event__offer-checkbox visually-hidden" id="event-offer-luggage-1" type="checkbox" name="event-offer-luggage" checked> | ||
<label class="event__offer-label" for="event-offer-luggage-1"> | ||
<span class="event__offer-title">Add luggage</span> | ||
+€ | ||
<span class="event__offer-price">50</span> | ||
</label> | ||
</div> | ||
<div class="event__offer-selector"> | ||
<input class="event__offer-checkbox visually-hidden" id="event-offer-comfort-1" type="checkbox" name="event-offer-comfort" checked> | ||
<label class="event__offer-label" for="event-offer-comfort-1"> | ||
<span class="event__offer-title">Switch to comfort</span> | ||
+€ | ||
<span class="event__offer-price">80</span> | ||
</label> | ||
</div> | ||
<div class="event__offer-selector"> | ||
<input class="event__offer-checkbox visually-hidden" id="event-offer-meal-1" type="checkbox" name="event-offer-meal"> | ||
<label class="event__offer-label" for="event-offer-meal-1"> | ||
<span class="event__offer-title">Add meal</span> | ||
+€ | ||
<span class="event__offer-price">15</span> | ||
</label> | ||
</div> | ||
<div class="event__offer-selector"> | ||
<input class="event__offer-checkbox visually-hidden" id="event-offer-seats-1" type="checkbox" name="event-offer-seats"> | ||
<label class="event__offer-label" for="event-offer-seats-1"> | ||
<span class="event__offer-title">Choose seats</span> | ||
+€ | ||
<span class="event__offer-price">5</span> | ||
</label> | ||
</div> | ||
<div class="event__offer-selector"> | ||
<input class="event__offer-checkbox visually-hidden" id="event-offer-train-1" type="checkbox" name="event-offer-train"> | ||
<label class="event__offer-label" for="event-offer-train-1"> | ||
<span class="event__offer-title">Travel by train</span> | ||
+€ | ||
<span class="event__offer-price">40</span> | ||
</label> | ||
</div> | ||
</div> | ||
</section> | ||
<section class="event__section event__section--destination"> | ||
<h3 class="event__section-title event__section-title--destination">Destination</h3> | ||
<p class="event__destination-description">Chamonix-Mont-Blanc (usually shortened to Chamonix) is a resort area near the junction of France, Switzerland and Italy. At the base of Mont Blanc, the highest summit in the Alps, it's renowned for its skiing.</p> | ||
</section> | ||
</section> | ||
</form>`); | ||
} | ||
|
||
export default class AddPoint { | ||
getTemplate() { | ||
return createAddPointTemplate(); | ||
} | ||
|
||
getElement() { | ||
if (!this.element) { | ||
this.element = createElement(this.getTemplate()); | ||
} | ||
|
||
return this.element; | ||
} | ||
|
||
removeElement() { | ||
this.element = null; | ||
} | ||
} |
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
Oops, something went wrong.