-
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
Showing
9 changed files
with
643 additions
and
8 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
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,13 @@ | ||
import { render } from './render.js'; | ||
import FilterView from './view/filter-view.js'; | ||
import TripEventsPresenter from './presenter/trip-events-presenter.js'; | ||
|
||
|
||
const tripControlsFilters = document.querySelector('.trip-controls__filters'); | ||
const tripEvents = document.querySelector('.trip-events'); | ||
const tripEventsPresenter = new TripEventsPresenter({tpipEventsContainer : tripEvents}); | ||
|
||
render(new FilterView(), tripControlsFilters); | ||
|
||
tripEventsPresenter.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,26 @@ | ||
import SortView from '../view/sort-view.js'; | ||
import ListView from '../view/list-view.js'; | ||
import NewPointView from '../view/new-point-view.js'; | ||
import EditablePointView from '../view/editable-point-view.js'; | ||
import PointView from '../view/point-view.js'; | ||
|
||
import {render} from '../render.js'; | ||
|
||
export default class TripEventsPresenter { | ||
listComponent = new ListView(); | ||
|
||
constructor({tpipEventsContainer}) { | ||
this.tpipEventsContainer = tpipEventsContainer; | ||
} | ||
|
||
init() { | ||
render(new SortView(), this.tpipEventsContainer); | ||
render(this.listComponent, this.tpipEventsContainer); | ||
render(new EditablePointView, this.listComponent.getElement()); | ||
render(new NewPointView(), this.listComponent.getElement()); | ||
|
||
for (let i = 0; i < 3; i++) { | ||
render(new PointView(), this.listComponent.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 createEditablePointTemplate() { | ||
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 EditablePointView { | ||
getTemplate() { | ||
return createEditablePointTemplate(); | ||
} | ||
|
||
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,72 @@ | ||
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" | ||
> | ||
<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" | ||
checked | ||
> | ||
<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; | ||
} | ||
} |
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 createListTemplate() { | ||
return('<ul class="trip-events__list"></ul>'); | ||
} | ||
|
||
export default class ListView { | ||
getTemplate() { | ||
return createListTemplate(); | ||
} | ||
|
||
getElement() { | ||
if (!this.element) { | ||
this.element = createElement(this.getTemplate()); | ||
} | ||
|
||
return this.element; | ||
} | ||
|
||
removeElement() { | ||
this.element = null; | ||
} | ||
} |
Oops, something went wrong.