Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Шаблонизируй это #8

Merged
merged 13 commits into from
Sep 25, 2024
Merged

Шаблонизируй это #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
84be7db
Получается деструктуризация offers
Phoenix8483 Sep 19, 2024
4596328
Получены наконец-то поля offers и description
Phoenix8483 Sep 20, 2024
0b6986d
функция по отрисовке офферов
Phoenix8483 Sep 22, 2024
177f13c
Ошибка title в поинтс. вью
Phoenix8483 Sep 22, 2024
1754551
Еще лучше
Phoenix8483 Sep 22, 2024
8d2cc8f
fdfdfdf
Phoenix8483 Sep 22, 2024
f3bd246
Попытка деструктуризации offers в поинтах
Phoenix8483 Sep 22, 2024
2c95daa
Все отрисовывается, но выскакивает иногда выскакивает ошибка
Phoenix8483 Sep 22, 2024
03b6327
Всё, рабочая вьюшка Поинтов!!!)))
Phoenix8483 Sep 23, 2024
2033689
Исправление отображения точки в поинтах, не знаю, как она там очутила…
Phoenix8483 Sep 23, 2024
d2e19f1
ВСЕ ГОТОВО!!!
Phoenix8483 Sep 23, 2024
f3a87b2
Отрисовка фото
Phoenix8483 Sep 23, 2024
73c0434
Все отрисовывается по id, осталось доработать рисунки
Phoenix8483 Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,9 @@ main {

.trip-events__item {
margin-bottom: 54px;
margin-left: auto; }
margin-left: auto;
list-style-type: none;
}

.trip-sort {
display: -ms-flexbox;
Expand Down
2 changes: 0 additions & 2 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@ <h2 class="visually-hidden">Filter events</h2>
<div class="page-body__container">
<section class="trip-events">
<h2 class="visually-hidden">Trip events</h2>

<!-- Сортировка -->

<!-- Контент -->
</section>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/const.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const TYPE = [
const TYPES = [
'Taxi',
'Bus',
'Train',
Expand Down Expand Up @@ -30,4 +30,4 @@ const OFFERS = [
'Book tickets',
'Lunch in city',
];
export { TYPE, CITIES, OFFERS };
export { TYPES, CITIES, OFFERS };
2 changes: 1 addition & 1 deletion src/mock/destination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const mockDestinations = [
{
'id': 'd9e9fc03-d3c9-4f60-baed-e5106dbfe007',
'description': '',
'description': 'Paris - is a wonderful city!',
'name': 'Paris',
'pictures': []
},
Expand Down
2 changes: 1 addition & 1 deletion src/model/point-model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getRandomPoint } from '../mock/points.js';
import { mockOffers } from '../mock/offers.js';
import { mockDestinations } from '../mock/destination.js';
const POINT_COUNT = 3; //Количество поинтов (сколько раз отрисуется поинт getRandomPoint)
const POINT_COUNT = 4; //Количество поинтов (сколько раз отрисуется поинт getRandomPoint)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Вот такие комментарии нужно переносить в названия идентификаторов. То есть в данном случае декларировать ее как POINT_COUNT_FOR_RENDER, RENDERING_POINT_COUNT.


export default class PointsModel {
points = Array.from({length: POINT_COUNT}, getRandomPoint); //Записываем в points массив поинтов
Expand Down
21 changes: 20 additions & 1 deletion src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,23 @@ function getRandomInteger(min, max) {
const rand = Math.floor(min + Math.random() * (max + 1 - min));
return Math.floor(rand);
}
export { getRandomArrayElement, getRandomInteger };

const createOfferItemTemplate = (type, title, price, className) => `
<div class="event__offer-selector">
<input class="event__offer-checkbox visually-hidden" id="event-offer-${type}-1" type="checkbox" name="event-offer-${type}" ${className}>
<label class="event__offer-label" for="event-offer-${type}-1">
<span class="event__offer-title">${title}</span>
&plus;&euro;&nbsp;
<span class="event__offer-price">${price}</span>
</label>
</div>
`;

const createTypeGroupTemplate = (group, className) => `
<div class="event__type-item">
<input id="event-type-${group.toLowerCase()}-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="${group.toLowerCase()}" ${className}>
<label class="event__type-label event__type-label--${group.toLowerCase()}" for="event-type-${group.toLowerCase()}-1">${group}</label>
</div>
`;

export { getRandomArrayElement, getRandomInteger, createOfferItemTemplate, createTypeGroupTemplate };
262 changes: 101 additions & 161 deletions src/view/trip-edit-point-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,173 +1,113 @@
import {createElement} from '../render.js';

function createAddPointTemplate(offer) {
const { point, offers, destination } = offer; //Необходимо деструктурировать!!
import { TYPES } from '../const.js';
import { createOfferItemTemplate, createTypeGroupTemplate } from '../utils.js';

function createAddPointTemplate(point, allOffers, allDestination, pointDestination) {
const { basePrice, type } = point;
const typeName = type[0].toUpperCase() + type.slice(1, type.length);
const { name, description, pictures } = pointDestination;
function asa() {
if(pictures.length !== 0) {
const [{src}] = pictures;
return src;
}
}
//console.log(description, src)
const createAllOffers = allOffers.offers
.map((offer) => {
const checkedClassName = point.offers.includes(offer.id) ? 'checked' : '';
return createOfferItemTemplate(allOffers.type, offer.title, offer.price, checkedClassName);
}).join('');

const createDesinationTemplate = allDestination
.map((item) => `<option value="${item.name}"></option>`).join('');

const createTypeList = TYPES
.map((group) => {
const checkedClassName = group === typeName ? 'checked' : '';
return createTypeGroupTemplate(group, checkedClassName);
}).join('');

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">ffdd</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">
${destination}
</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="3000">
</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">${point}</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">${offers}</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">dsdsddsds</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>`);
`<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/${type}.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>
${createTypeList}
</fieldset>
</div>
</div>
<div class="event__field-group event__field-group--destination">
<label class="event__label event__type-output" for="event-destination-1">
${typeName}
</label>
<input class="event__input event__input--destination" id="event-destination-1" type="text" name="event-destination" value="${name}" list="destination-list-1">
<datalist id="destination-list-1">
${createDesinationTemplate}
</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="${basePrice}">
</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">
${createAllOffers}
</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">${description}</p>
<div class="event__photos-container">
<div class="event__photos-tape">
<img class="event__photo" src="${asa()}" 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>
</section>
</section>
</form>
</li>`
);
}

export default class OffersView {
constructor({point, offers, destination}) {
constructor({point, allOffers, allDestination, pointDestination}) {
this.point = point;
this.offers = offers;
this.destination = destination;
this.allOffers = allOffers;
this.allDestination = allDestination;
this.pointDestination = pointDestination;
}

getTemplate() {
return createAddPointTemplate(this.point, this.offers, this.destination);
return createAddPointTemplate(this.point, this.allOffers, this.allDestination, this.pointDestination);
}

getElement() {
Expand Down
Loading
Loading