-
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
36e7182
commit 3b27f24
Showing
8 changed files
with
576 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,5 @@ | ||
import Presenter from './presenter/presenter'; | ||
|
||
const presenter = new Presenter(); | ||
|
||
presenter.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 {render} from '../render'; | ||
import EventItem from '../view/event-item'; | ||
import EventList from '../view/event-list'; | ||
import Filters from '../view/filters'; | ||
import Sorting from '../view/sorting'; | ||
import EditForm from '../view/edit-form'; | ||
|
||
export default class Presenter { | ||
eventListComponent = new EventList(); | ||
eventsContainer = document.querySelector('.trip-events'); | ||
filterContainer = document.querySelector('.trip-controls__filters'); | ||
|
||
init() { | ||
render(new Filters(), this.filterContainer); | ||
render(new Sorting(), this.eventsContainer); | ||
render(this.eventListComponent, this.eventsContainer); | ||
render(new EditForm(), this.eventListComponent.getElement()); | ||
|
||
for (let i = 0; i < 3; i++) { | ||
render(new EventItem(), this.eventListComponent.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,186 @@ | ||
import {createElement} from '../render'; | ||
|
||
function getCreateFormTemplate() { | ||
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="Geneva" 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="19/03/19 00:00"> | ||
— | ||
<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="19/03/19 00:00"> | ||
</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=""> | ||
</div> | ||
<button class="event__save-btn btn btn--blue" type="submit">Save</button> | ||
<button class="event__reset-btn" type="reset">Cancel</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">30</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 class</span> | ||
+€ | ||
<span class="event__offer-price">100</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">Geneva is a city in Switzerland that lies at the southern tip of expansive Lac Léman (Lake Geneva). Surrounded by the Alps and Jura mountains, the city has views of dramatic Mont Blanc.</p> | ||
<div class="event__photos-container"> | ||
<div class="event__photos-tape"> | ||
<img class="event__photo" src="img/photos/1.jpg" alt="Event photo"> | ||
<img class="event__photo" src="img/photos/2.jpg" alt="Event photo"> | ||
<img class="event__photo" src="img/photos/3.jpg" alt="Event photo"> | ||
<img class="event__photo" src="img/photos/4.jpg" alt="Event photo"> | ||
<img class="event__photo" src="img/photos/5.jpg" alt="Event photo"> | ||
</div> | ||
</div> | ||
</section> | ||
</section> | ||
</form> | ||
</li> | ||
`; | ||
} | ||
|
||
export default class CreateForm { | ||
getTemplate() { | ||
return getCreateFormTemplate(); | ||
} | ||
|
||
getElement() { | ||
if(!this.element) { | ||
this.element = createElement(this.getTemplate()); | ||
} | ||
|
||
return this.element; | ||
} | ||
|
||
removeElement() { | ||
this.element = null; | ||
} | ||
} |
Oops, something went wrong.