Merge pull request #6 from vvvyat/module4-task2

htmlacademy-univer-js2 · Jun 10, 2024 · e31329a · e31329a
2 parents 7e4f41e + 4eff566
commit e31329a
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 87 deletions.
diff --git a/src/const.js b/src/const.js
@@ -1,7 +1,16 @@
-const POINT_COUNT = 4;
+const POINT_COUNT = 5;
 
 const DESTINATIONS = ['Paris', 'London', 'New York', 'Shanghai', 'Moscow'];
 
+const FILTERS = {
+  'Everything': POINT_COUNT,
+  'Future': POINT_COUNT,
+  'Present': POINT_COUNT,
+  'Past': POINT_COUNT
+};
+
+const DEFAULT_FILTER = 'Everything';
+
 const DESCRIPTIONS = [
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet varius magna, non porta ligula feugiat eget.',
   'Fusce tristique felis at fermentum pharetra. Aliquam id orci ut lectus varius viverra. Nullam nunc ex, convallis sed finibus eget, sollicitudin eget ante.',
@@ -31,4 +40,5 @@ const DEFAULT_POINT_DATA = {
   type: 'Flight'
 };
 
-export {POINT_COUNT, DESTINATIONS, DESCRIPTIONS, DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR, TYPES, DEFAULT_POINT_DATA};
+export {POINT_COUNT, DESTINATIONS, DESCRIPTIONS, DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR,
+  TYPES, DEFAULT_POINT_DATA, FILTERS, DEFAULT_FILTER};
diff --git a/src/main.js b/src/main.js
@@ -1,18 +1,16 @@
 import FilterView from './view/filter-view.js';
-import SortView from './view/sort-view.js';
 import ListPresenter from './presenter/list-presenter.js';
 import PointsModel from './model/points-model.js';
 import {render} from './framework/render.js';
 
 const filterContainer = document.querySelector('.trip-controls__filters');
-const pointsContainer = document.querySelector('.trip-events');
+const pointsListContainer = document.querySelector('.trip-events');
 
 const pointsModel = new PointsModel();
 const listPresenter = new ListPresenter({
-  container: pointsContainer,
+  container: pointsListContainer,
   pointsModel
 });
 
 render(new FilterView(), filterContainer);
-render(new SortView(), pointsContainer);
 listPresenter.init();
diff --git a/src/mock/point.js b/src/mock/point.js
@@ -1,4 +1,4 @@
-import {getRandomArrayElement, getRandomArbitrary} from '../utils.js';
+import {getRandomArrayElement, getRandomArbitrary} from '../utils/utils.js';
 import {DESTINATIONS, DESCRIPTIONS} from '../const.js';
 
 const mockPoints = [

diff --git a/src/presenter/list-presenter.js b/src/presenter/list-presenter.js
@@ -1,6 +1,8 @@
 import ListView from '../view/list-view.js';
+import SortView from '../view/sort-view.js';
 import EditPointView from '../view/edit-point-view.js';
 import ListPointView from '../view/point-view.js';
+import NoPointsView from '../view/no-points-view.js';
 import {render, replace} from '../framework/render.js';
 import {getDestinationById, getOffersByType, getSelectedOffers} from '../mock/point.js';
 
@@ -17,11 +19,7 @@ export default class ListPresenter {
 
   init() {
     this.#points = [...this.#pointsModel.points];
-    render(this.#listComponent, this.#container);
-
-    for (let i = 0; i < this.#points.length; i++) {
-      this.#renderPoint(this.#points[i]);
-    }
+    this.#renderList();
   }
 
   #renderPoint(point) {
@@ -70,4 +68,16 @@ export default class ListPresenter {
 
     render(pointComponent, this.#listComponent.element);
   }
+
+  #renderList() {
+    if (this.#points.length === 0) {
+      render(new NoPointsView(), this.#container);
+      return;
+    }
+    render(new SortView(), this.#container);
+    render(this.#listComponent, this.#container);
+    for (let i = 0; i < this.#points.length; i++) {
+      this.#renderPoint(this.#points[i]);
+    }
+  }
 }
diff --git a/src/utils/filters.js b/src/utils/filters.js
diff --git a/src/utils.js → src/utils/utils.js b/src/utils.js → src/utils/utils.js
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import {DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR} from './const';
+import {DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR} from '../const';
 
 function humanizeDueDate(dueDate) {
   return dueDate ? dayjs(dueDate).format(DATE_FORMAT) : '';

diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js
@@ -96,54 +96,47 @@ export default class EditPointView extends AbstractView {
     this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#clickHandler);
   }
 
+  #createTypeTemplate(type) {
+    const isChecked = type === this.#point.type ? 'checked' : '';
+    return `
+      <div class="event__type-item">
+        <input id="event-type-${type}-${this.#point.id}" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${type}" ${isChecked}>
+        <label class="event__type-label  event__type-label--${type}" for="event-type-${type}-${this.#point.id}">${type}</label>
+      </div>`;
+  }
+
   get #typesTemplate() {
-    let typesTemplate = '';
-    for (let i = 0; i < TYPES.length; i++) {
-      const isChecked = TYPES[i] === this.#point.type ? 'checked' : '';
-      typesTemplate += `
-        <div class="event__type-item">
-          <input id="event-type-${TYPES[i]}-${this.#point.id}" class="event__type-input  visually-hidden" type="radio" name="event-type" value="${TYPES[i]}" ${isChecked}>
-          <label class="event__type-label  event__type-label--${TYPES[i]}" for="event-type-${TYPES[i]}-${this.#point.id}">${TYPES[i]}</label>
-        </div>`;
-    }
-    return typesTemplate;
+    return TYPES.map((type) => this.#createTypeTemplate(type)).join('');
   }
 
   get #destinationsTemplate() {
-    let destinationsTemplate = '';
-    for (let i = 0; i < DESTINATIONS.length; i++) {
-      destinationsTemplate += `
-      <option value="${DESTINATIONS[i]}"></option>`;
-    }
-    return destinationsTemplate;
+    return DESTINATIONS.map((destination) => `<option value="${destination}"></option>`).join('');
+  }
+
+  #createOfferTemplate(offer) {
+    const isChecked = offer.id in this.#point.offers ? 'checked' : '';
+    const offerShortName = offer.name.toLowerCase().split(' ').at(-1);
+    return `
+      <div class="event__offer-selector">
+        <input class="event__offer-checkbox  visually-hidden" id="event-offer-${offerShortName}-${this.#point.id}" type="checkbox" name="event-offer-${offerShortName}" ${isChecked}>
+        <label class="event__offer-label" for="event-offer-${offerShortName}-${this.#point.id}">
+          <span class="event__offer-title">${offer.name}</span>
+          &plus;&euro;&nbsp;
+          <span class="event__offer-price">${offer.price}</span>
+        </label>
+      </div>`;
   }
 
   get #offersTemplate() {
-    let offersTemplate = '';
-    for (let i = 0; i < this.#offersByType.length; i++) {
-      const isChecked = this.#offersByType[i].id in this.#point.offers ? 'checked' : '';
-      const offerShortName = this.#offersByType[i].name.toLowerCase().split(' ').at(-1);
-      offersTemplate += `
-        <div class="event__offer-selector">
-          <input class="event__offer-checkbox  visually-hidden" id="event-offer-${offerShortName}-${this.#point.id}" type="checkbox" name="event-offer-${offerShortName}" ${isChecked}>
-          <label class="event__offer-label" for="event-offer-${offerShortName}-${this.#point.id}">
-            <span class="event__offer-title">${this.#offersByType[i].name}</span>
-            &plus;&euro;&nbsp;
-            <span class="event__offer-price">${this.#offersByType[i].price}</span>
-          </label>
-        </div>`;
-    }
-    return offersTemplate;
+    return this.#offersByType.map((offer) => this.#createOfferTemplate(offer)).join('');
+  }
+
+  #createPictureTemplate(picture) {
+    return `<img class="event__photo" src="${picture.src}" alt="${picture.description}">`;
   }
 
   get #picturesTemplate() {
-    let picturesTemplate = '';
-    for (let i = 0; i < this.#destination.pictures.length; i++) {
-      const picture = this.#destination.pictures[i];
-      picturesTemplate += `
-        <img class="event__photo" src="${picture.src}" alt="${picture.description}">`;
-    }
-    return picturesTemplate;
+    return this.#destination.pictures.map((picture) => this.#createPictureTemplate(picture)).join('');
   }
 
   get template() {

diff --git a/src/view/filter-view.js b/src/view/filter-view.js
@@ -1,35 +1,27 @@
 import AbstractView from '../framework/view/abstract-view.js';
+import {FILTERS, DEFAULT_FILTER} from '../const.js';
 
-function createFilterTemplate() {
+function createFilterTemplate(filterName, count) {
+  const filter = filterName.toLowerCase();
+  const isChecked = filterName === DEFAULT_FILTER ? 'checked' : '';
+  const isDisabled = count === 0 ? 'disabled' : '';
   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>
+    <div class="trip-filters__filter">
+      <input id="filter-${filter}" class="trip-filters__filter-input  visually-hidden" type="radio" name="trip-filter" value="${filter}" ${isChecked} ${isDisabled}>
+      <label class="trip-filters__filter-label" for="filter-${filter}">${filterName}</label>
+    </div>
   `;
 }
 
 export default class FilterView extends AbstractView {
   get template() {
-    return createFilterTemplate();
+    const filtersTemplate = Object.entries(FILTERS).map(([filter, count]) => createFilterTemplate(filter, count)).join('');
+
+    return `
+      <form class="trip-filters" action="#" method="get">
+        ${filtersTemplate}
+        <button class="visually-hidden" type="submit">Accept filter</button>
+      </form>
+    `;
   }
 }
diff --git a/src/view/no-points-view.js b/src/view/no-points-view.js
@@ -0,0 +1,11 @@
+import AbstractView from '../framework/view/abstract-view.js';
+
+function createNoPointsTemplate() {
+  return '<p class="trip-events__msg">Click New Event to create your first point</p>';
+}
+
+export default class NoPointsView extends AbstractView {
+  get template() {
+    return createNoPointsTemplate();
+  }
+}
diff --git a/src/view/point-view.js b/src/view/point-view.js
@@ -1,4 +1,4 @@
-import {humanizeDueDate, humanizeDueTime, humanizeDuration} from '../utils.js';
+import {humanizeDueDate, humanizeDueTime, humanizeDuration} from '../utils/utils.js';
 import AbstractView from '../framework/view/abstract-view.js';
 
 function createListPointTemplate(point, totalPrice, destination, selectedOffersTemplate, isFavorite) {
@@ -54,17 +54,17 @@ export default class ListPointView extends AbstractView {
     this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#clickHandler);
   }
 
+  #createSelectedOfferTemplate(offer) {
+    return `
+      <li class="event__offer">
+        <span class="event__offer-title">${offer.name}</span>
+        &plus;&euro;&nbsp;
+        <span class="event__offer-price">${offer.price}</span>
+      </li>`;
+  }
+
   get #selectedOffersTemplate() {
-    let selectedOffersTemplate = '';
-    for (let i = 0; i < this.#selectedOffers.length; i++) {
-      selectedOffersTemplate += `
-        <li class="event__offer">
-          <span class="event__offer-title">${this.#selectedOffers[i].name}</span>
-          &plus;&euro;&nbsp;
-          <span class="event__offer-price">${this.#selectedOffers[i].price}</span>
-        </li>`;
-    }
-    return selectedOffersTemplate;
+    return this.#selectedOffers.map((offer) => this.#createSelectedOfferTemplate(offer)).join('');
   }
 
   get #totalPrice() {