-
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 #3 from AlucardOpp/module1-task3
- Loading branch information
Showing
8 changed files
with
432 additions
and
0 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 |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import FiltersView from './view/filters-view.js'; | ||
import TripInfoView from './view/trip-info-view.js'; | ||
import {RenderPosition, render} from './render.js'; | ||
import EventsPresenter from './presenter/events-presenter.js'; | ||
|
||
const tripInfoContainer = document.querySelector('.trip-main'); | ||
const filtersContainer = document.querySelector('.trip-controls__filters'); | ||
const eventsContainer = document.querySelector('.trip-events'); | ||
const eventsPresenter = new EventsPresenter({eventsContainer: eventsContainer}); | ||
|
||
render(new TripInfoView(), tripInfoContainer, RenderPosition.AFTERBEGIN); | ||
render(new FiltersView(), filtersContainer); | ||
|
||
eventsPresenter.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,23 @@ | ||
import SortView from '../view/sort-view.js'; | ||
import EventsListView from '../view/events-list-view.js'; | ||
import EditPointView from '../view/edit-point-view.js'; | ||
import EventsItemView from '../view/events-item-view.js'; | ||
import {render} from '../render.js'; | ||
|
||
export default class BoardPresenter { | ||
eventsListComponent = new EventsListView(); | ||
eventsContainer; | ||
|
||
constructor({eventsContainer}) { | ||
this.eventsContainer = eventsContainer; | ||
} | ||
|
||
init() { | ||
render(new SortView(), this.eventsContainer); | ||
render(this.eventsListComponent, this.eventsContainer); | ||
render(new EditPointView(), this.eventsListComponent.getElement()); | ||
for (let i = 0; i < 3; i++) { | ||
render(new EventsItemView(), this.eventsListComponent.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,179 @@ | ||
import {createElement} from '../render.js'; | ||
|
||
function createEditPointTemplate() { | ||
return ( | ||
`<li class="trip-events__item"> | ||
<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> | ||
</li>` | ||
); | ||
} | ||
|
||
export default class EditPointView { | ||
getTemplate() { | ||
return createEditPointTemplate(); | ||
} | ||
|
||
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import {createElement} from '../render.js'; | ||
|
||
function createEventsItemTemplate() { | ||
return ( | ||
`<li class="trip-events__item"> | ||
<div class="event"> | ||
<time class="event__date" datetime="2019-03-18">MAR 18</time> | ||
<div class="event__type"> | ||
<img class="event__type-icon" width="42" height="42" src="img/icons/taxi.png" alt="Event type icon"> | ||
</div> | ||
<h3 class="event__title">Taxi Amsterdam</h3> | ||
<div class="event__schedule"> | ||
<p class="event__time"> | ||
<time class="event__start-time" datetime="2019-03-18T10:30">10:30</time> | ||
— | ||
<time class="event__end-time" datetime="2019-03-18T11:00">11:00</time> | ||
</p> | ||
<p class="event__duration">30M</p> | ||
</div> | ||
<p class="event__price"> | ||
€ <span class="event__price-value">20</span> | ||
</p> | ||
<h4 class="visually-hidden">Offers:</h4> | ||
<ul class="event__selected-offers"> | ||
<li class="event__offer"> | ||
<span class="event__offer-title">Order Uber</span> | ||
+€ | ||
<span class="event__offer-price">20</span> | ||
</li> | ||
</ul> | ||
<button class="event__favorite-btn event__favorite-btn--active" type="button"> | ||
<span class="visually-hidden">Add to favorite</span> | ||
<svg class="event__favorite-icon" width="28" height="28" viewBox="0 0 28 28"> | ||
<path d="M14 21l-8.22899 4.3262 1.57159-9.1631L.685209 9.67376 9.8855 8.33688 14 0l4.1145 8.33688 9.2003 1.33688-6.6574 6.48934 1.5716 9.1631L14 21z"/> | ||
</svg> | ||
</button> | ||
<button class="event__rollup-btn" type="button"> | ||
<span class="visually-hidden">Open event</span> | ||
</button> | ||
</div> | ||
</li>` | ||
); | ||
} | ||
|
||
export default class EventsItemView { | ||
getTemplate() { | ||
return createEventsItemTemplate(); | ||
} | ||
|
||
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import {createElement} from '../render.js'; | ||
|
||
function createEventsListTemplate() { | ||
return '<ul class="trip-events__list"></ul>'; | ||
} | ||
|
||
export default class EventsListView { | ||
getTemplate() { | ||
return createEventsListTemplate(); | ||
} | ||
|
||
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import {createElement} from '../render.js'; | ||
|
||
function createFilterTemplate() { | ||
return ( | ||
`<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" checked> | ||
<label class="trip-filters__filter-label" for="filter-everything">Everything</label> | ||
</div> | ||
<div class="trip-filters__filter"> | ||
<input id="filter-future" class="trip-filters__filter-input visually-hidden" type="radio" name="trip-filter" value="future"> | ||
<label class="trip-filters__filter-label" for="filter-future">Future</label> | ||
</div> | ||
<div class="trip-filters__filter"> | ||
<input id="filter-present" class="trip-filters__filter-input visually-hidden" type="radio" name="trip-filter" value="present"> | ||
<label class="trip-filters__filter-label" for="filter-present">Present</label> | ||
</div> | ||
<div class="trip-filters__filter"> | ||
<input id="filter-past" class="trip-filters__filter-input visually-hidden" type="radio" name="trip-filter" value="past"> | ||
<label class="trip-filters__filter-label" for="filter-past">Past</label> | ||
</div> | ||
<button class="visually-hidden" type="submit">Accept filter</button> | ||
</form>` | ||
); | ||
} | ||
|
||
export default class FilterView { | ||
getTemplate() { | ||
return createFilterTemplate(); | ||
} | ||
|
||
getElement() { | ||
if (!this.element) { | ||
this.element = createElement(this.getTemplate()); | ||
} | ||
|
||
return this.element; | ||
} | ||
|
||
removeElement() { | ||
this.element = null; | ||
} | ||
} |
Oops, something went wrong.