-
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 licos87/module1-task3
Время разбивать камни
- Loading branch information
Showing
14 changed files
with
721 additions
and
39 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
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,41 +1,42 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
||
<title>Big Trip</title> | ||
|
||
<link rel="stylesheet" href="./css/style.css"> | ||
</head> | ||
|
||
<body class="page-body"> | ||
<header class="page-header"> | ||
<div class="page-body__container page-header__container"> | ||
<img class="page-header__logo" src="img/logo.png" width="42" height="42" alt="Trip logo"> | ||
|
||
<div class="trip-main"> | ||
<div class="trip-main__trip-controls trip-controls"> | ||
<div class="trip-controls__filters"> | ||
<h2 class="visually-hidden">Filter events</h2> | ||
<!-- Фильтры --> | ||
</div> | ||
</div> | ||
|
||
<button class="trip-main__event-add-btn btn btn--big btn--yellow" type="button">New event</button> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
||
<title>Big Trip</title> | ||
|
||
<link rel="stylesheet" href="./css/style.css"> | ||
</head> | ||
|
||
<body class="page-body"> | ||
<header class="page-header"> | ||
<div class="page-body__container page-header__container"> | ||
<img class="page-header__logo" src="img/logo.png" width="42" height="42" alt="Trip logo"> | ||
|
||
<div class="trip-main"> | ||
<div class="trip-main__trip-controls trip-controls"> | ||
<div class="trip-controls__filters"> | ||
<h2 class="visually-hidden">Filter events</h2> | ||
<!-- Фильтры --> | ||
</div> | ||
</div> | ||
|
||
</div> | ||
</header> | ||
<main class="page-body__page-main page-main"> | ||
<div class="page-body__container"> | ||
<section class="trip-events"> | ||
<h2 class="visually-hidden">Trip events</h2> | ||
</div> | ||
</header> | ||
<main class="page-body__page-main page-main"> | ||
<div class="page-body__container"> | ||
<section class="trip-events"> | ||
<h2 class="visually-hidden">Trip events</h2> | ||
|
||
<!-- Сортировка --> | ||
<!-- Сортировка --> | ||
|
||
<!-- Контент --> | ||
</section> | ||
</div> | ||
</main> | ||
</body> | ||
|
||
<!-- Контент --> | ||
</section> | ||
</div> | ||
</main> | ||
</body> | ||
</html> |
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,22 @@ | ||
import {RenderPosition, render} from './render.js'; | ||
import SectionTripInfoView from './view/section-trip-info-view.js'; | ||
import NewEventButtonView from './view/new-event-button-view.js'; | ||
import TripFiltersFormView from './view/trip-filters-form-view.js'; | ||
import ListPresenter from './presenter/list-presenter.js'; | ||
|
||
|
||
const tripMain = document.querySelector('.trip-main'); | ||
const tripEventsElement = document.querySelector('.trip-events'); | ||
const tripControlsFilters = document.querySelector('.trip-controls__filters'); | ||
|
||
render(new SectionTripInfoView(), tripMain, RenderPosition.AFTERBEGIN); // Заголовок, даты, общая цена | ||
render(new NewEventButtonView(), tripMain); // Заголовок, кнопка добавить событие | ||
render (new TripFiltersFormView(), tripControlsFilters); // Кнопки сортировки | ||
|
||
|
||
const listPresenter = new ListPresenter({ | ||
listContainer: tripEventsElement | ||
}); | ||
|
||
listPresenter.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,31 @@ | ||
import { render } from '../render.js'; | ||
|
||
import SortButtonView from '../view/sort-view.js'; | ||
import TripEventListView from '../view/trip-events-list-view.js'; | ||
import TripEventItemView from '../view/trip-events-item-view.js'; | ||
import AddNewPointView from '../view/add-new-point-view.js'; | ||
import EditPointView from '../view/edit-poit-view.js'; | ||
import TripEventsMessage from '../view/trip-events-message-view.js'; | ||
|
||
export default class ListPresenter { | ||
|
||
listComponent = new TripEventListView(); | ||
|
||
constructor({ listContainer }) { | ||
this.listContainer = listContainer; | ||
} | ||
|
||
init() { | ||
render(new SortButtonView(), this.listContainer); | ||
render(new TripEventItemView(), this.listContainer); | ||
render(new AddNewPointView(), this.listContainer); | ||
render(new EditPointView(), this.listContainer); | ||
render(this.listComponent, this.listContainer); | ||
|
||
for (let i = 0; i < 3; i++) { // Создание элементов в списке | ||
render (new TripEventItemView(), this.listComponent.getElement()); | ||
} | ||
|
||
render(new TripEventsMessage(), this.listContainer); | ||
} | ||
} |
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,182 @@ | ||
import {createElement} from '../render.js'; | ||
|
||
function createAddNewPointTemplate() { | ||
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="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>`; | ||
} | ||
|
||
export default class AddNewPointView { | ||
getTemplate() { | ||
return createAddNewPointTemplate(); | ||
} | ||
|
||
getElement() { | ||
if(!this.element) { | ||
this.element = createElement(this.getTemplate()); | ||
} | ||
|
||
return this.element; | ||
} | ||
|
||
removeElement() { | ||
this.element = null; | ||
} | ||
} |
Oops, something went wrong.