Skip to content

Commit

Permalink
Merge pull request #16 from n3wstar/master
Browse files Browse the repository at this point in the history
  • Loading branch information
@keksobot
keksobot authored Jun 19, 2024
2 parents 11962cc + 63fd7f9 commit a7cea75
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 52 deletions.
109 changes: 57 additions & 52 deletions src/template/form-edit-markup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,15 @@ function createPointTypesListElement(currentType, id) {

function createPointDestinationListElement(destinations, selectedDestinationName) {
const options = destinations.map((destination) =>
`<option value="${destination.name}" ${destination.name === selectedDestinationName ? 'selected' : ''}>${destination.name}</option>`
`<option value="${destination.name}"></option>`
).join('');

return `<select class="event__input event__input--destination" name="event-destination">
${options}
</select>`;
return `
<input class="event__input event__input--destination" list="destination-list" name="event-destination" value="${selectedDestinationName}">
<datalist id="destination-list">
${options}
</datalist>
`;
}

function createOffersTemplate(currentOffers, selectedOfferIds) {
Expand Down Expand Up @@ -58,67 +61,69 @@ function createDestinationTemplate( destination ) {
</section>` : '';
}

function CreateFormEditMarkup({state, pointDestination, pointOffers, resetButtonLabel}){
function CreateFormEditMarkup({ state, pointDestination, pointOffers, resetButtonLabel }) {
const { point } = state;
const { id, basePrice, dateFrom, dateTo, offers, type, destination } = point;
const currentOffers = pointOffers.find((offer) => offer.type === type);
const currentDestination = destination ? pointDestination.find((dest) => dest.id === destination) : null;
const destinationName = currentDestination ? currentDestination.name : '';

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-${id}">
<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-${id}" type="checkbox">
<div class="event__type-list">
<fieldset class="event__type-group">
<legend class="visually-hidden">Event type</legend>
${createPointTypesListElement(type, id)}
</fieldset>
</div>
</div>
<div class="event__field-group event__field-group--destination">
<label class="event__label event__type-output" for="event-destination-${id}">
${type}
</label>
${createPointDestinationListElement(pointDestination, destinationName)}
</div>
<div class="event__field-group event__field-group--time">
<label class="visually-hidden" for="event-start-time-${id}">From</label>
<input class="event__input event__input--time" id="event-start-time-${id}" type="text" name="event-start-time" value="${formatStringToISODateTime(dateFrom)}">
&mdash;
<label class="visually-hidden" for="event-end-time-${id}">To</label>
<input class="event__input event__input--time" id="event-end-time-${id}" type="text" name="event-end-time" value="${formatStringToISODateTime(dateTo)}">
</div>
<div class="event__field-group event__field-group--price">
<label class="event__label" for="event-price-${id}">
<span class="visually-hidden">Price</span>
&euro;
</label>
<input class="event__input event__input--price" id="event-price-${id}" type="number" 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">${resetButtonLabel}</button>
<button class="event__rollup-btn" type="button">
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-${id}">
<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-${id}" type="checkbox">
<div class="event__type-list">
<fieldset class="event__type-group">
<legend class="visually-hidden">Event type</legend>
${createPointTypesListElement(type, id)}
</fieldset>
</div>
</div>
<div class="event__field-group event__field-group--destination">
<label class="event__label event__type-output" for="event-destination-${id}">
${type}
</label>
${createPointDestinationListElement(pointDestination, destinationName)}
</div>
<div class="event__field-group event__field-group--time">
<label class="visually-hidden" for="event-start-time-${id}">From</label>
<input class="event__input event__input--time" id="event-start-time-${id}" type="text" name="event-start-time" value="${formatStringToISODateTime(dateFrom)}">
&mdash;
<label class="visually-hidden" for="event-end-time-${id}">To</label>
<input class="event__input event__input--time" id="event-end-time-${id}" type="text" name="event-end-time" value="${formatStringToISODateTime(dateTo)}">
</div>
<div class="event__field-group event__field-group--price">
<label class="event__label" for="event-price-${id}">
<span class="visually-hidden">Price</span>
&euro;
</label>
<input class="event__input event__input--price" id="event-price-${id}" type="number" 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">${resetButtonLabel}</button>
<button class="event__rollup-btn" type="button">
</button>
</header>
<section class="event__details">
<section class="event__section event__section--offers">
<h3 class="event__section-title event__section-title--offers">Offers</h3>
<section class="event__section event__section--offers">
<h3 class="event__section-title event__section-title--offers">Offers</h3>
<div class="event__available-offers">
${createOffersTemplate(currentOffers.offers, offers)}
</div>
</section>
${currentDestination ? `<section class="event__section event__section--destination">
${currentDestination ? `<section class="event__section event__section--destination">
${createDestinationTemplate(currentDestination)}
</section>` : ''}
</section>
Expand Down
1 change: 1 addition & 0 deletions src/view/form-edit-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export default class FormEditView extends AbstractStatefulView {
}
};


#changePriceHandler = (evt) => {
const basePrice = evt.target.valueAsNumber;
if (!isNaN(basePrice)) {
Expand Down

0 comments on commit a7cea75

Please sign in to comment.