Skip to content

Commit

Permalink
Создал презентер, пока отрисовывает НЕКОРРЕКТНО!!!
Browse files Browse the repository at this point in the history
  • Loading branch information
@Phoenix8483
Phoenix8483 committed Sep 5, 2024
1 parent 2907b9e commit 00255aa
Show file tree
Hide file tree
Showing 5 changed files with 214 additions and 126 deletions.
7 changes: 7 additions & 0 deletions src/main.js
View file
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();
29 changes: 29 additions & 0 deletions src/presenter/board-presenter.js
View file
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());
}
}
176 changes: 176 additions & 0 deletions src/view/trip-addPoint-view.js
View file
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">
&mdash;
<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>
&euro;
</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>
&plus;&euro;&nbsp;
<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>
&plus;&euro;&nbsp;
<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>
&plus;&euro;&nbsp;
<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>
&plus;&euro;&nbsp;
<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>
&plus;&euro;&nbsp;
<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;
}
}
9 changes: 2 additions & 7 deletions src/view/trip-filter-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@ import {createElement} from '../render.js';

function createTripFilterTemplate() {
return (
`<div class="trip-main__trip-controls trip-controls">
<div class="trip-controls__filters">
<h2 class="visually-hidden">Filter events</h2>
<form class="trip-filters" action="#" method="get">
`<form class="trip-filters" action="#" method="get">
<div class="trip-filters__filter">
<input id="filter-everything" class="trip-filters__filter-input visually-hidden" type="radio" name="trip-filter" value="everything">
<label class="trip-filters__filter-label" for="filter-everything">Everything</label>
Expand All @@ -27,9 +24,7 @@ function createTripFilterTemplate() {
</div>
<button class="visually-hidden" type="submit">Accept filter</button>
</form>
</div>
</div>`);
</form>`);
}

export default class TripFilterView {
Expand Down
Loading

0 comments on commit 00255aa

Please sign in to comment.