fix

htmlacademy-ecmascript · Jan 24, 2025 · 68ef65d · 68ef65d
1 parent bc1ee4b
commit 68ef65d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 30 deletions.
diff --git a/src/const.js b/src/const.js
@@ -0,0 +1,13 @@
+export const SortType = {
+  DAY: 'day',
+  PRICE: 'price',
+  TIME: 'time',
+};
+
+export const SORT_OPTIONS = [
+  { id: 'sort-day', value: 'day', label: 'Day', isDisabled: false, isChecked: true },
+  { id: 'sort-event', value: 'event', label: 'Event', isDisabled: true, isChecked: false },
+  { id: 'sort-time', value: 'time', label: 'Time', isDisabled: false, isChecked: false },
+  { id: 'sort-price', value: 'price', label: 'Price', isDisabled: false, isChecked: false },
+  { id: 'sort-offer', value: 'offer', label: 'Offers', isDisabled: true, isChecked: false },
+];
diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js
@@ -5,6 +5,7 @@ import EventListView from '../view/events-list-view.js';
 import { RenderPosition } from '../render.js';
 import { render } from '../framework/render.js';
 import EventPresenter from './event-presenter.js';
+import {SortType} from '../const.js';
 
 export default class BoardPresenter {
   #filtersContainer = null;
@@ -61,22 +62,22 @@ export default class BoardPresenter {
   #clearTripEvents() {
     this.#eventPresenters.forEach((presenter) => presenter.resetView());
     this.#eventPresenters.clear();
-    this.#eventsListView.element.innerHTML = '';
+    this.#eventsListView.element.replaceChildren();
   }
 
   #getSortedEvents() {
     const events = [...this.#model.events];
 
     switch (this.#currentSortType) {
-      case 'time':
+      case SortType.TIME:
         return events.sort(
           (a, b) =>
             (new Date(b.dateTo) - new Date(b.dateFrom)) -
             (new Date(a.dateTo) - new Date(a.dateFrom))
         );
-      case 'price':
+      case SortType.PRICE:
         return events.sort((a, b) => b.basePrice - a.basePrice);
-      case 'day':
+      case SortType.DAY:
       default:
         return events.sort((a, b) => new Date(a.dateFrom) - new Date(b.dateFrom));
     }

diff --git a/src/view/sorts-view.js b/src/view/sorts-view.js
@@ -1,33 +1,23 @@
+import {SORT_OPTIONS} from '../const.js';
 import AbstractView from '../framework/view/abstract-view.js';
 
 function createSortTemplate() {
   return `
-  <form class="trip-events__trip-sort  trip-sort" action="#" method="get">
-    <div class="trip-sort__item  trip-sort__item--day">
-      <input id="sort-day" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="day" checked>
-      <label class="trip-sort__btn" for="sort-day">Day</label>
-    </div>
-
-    <div class="trip-sort__item  trip-sort__item--event">
-      <input id="sort-event" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="event" disabled>
-      <label class="trip-sort__btn" for="sort-event">Event</label>
-    </div>
-
-    <div class="trip-sort__item  trip-sort__item--time">
-      <input id="sort-time" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="time">
-      <label class="trip-sort__btn" for="sort-time">Time</label>
-    </div>
-
-    <div class="trip-sort__item  trip-sort__item--price">
-      <input id="sort-price" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="price">
-      <label class="trip-sort__btn" for="sort-price">Price</label>
-    </div>
-
-    <div class="trip-sort__item  trip-sort__item--offer">
-      <input id="sort-offer" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="offer" disabled>
-      <label class="trip-sort__btn" for="sort-offer">Offers</label>
-    </div>
-  </form>
+    <form class="trip-events__trip-sort  trip-sort" action="#" method="get">
+      ${SORT_OPTIONS.map(({ id, value, label, isDisabled, isChecked }) => `
+        <div class="trip-sort__item  trip-sort__item--${value}">
+          <input
+            id="${id}"
+            class="trip-sort__input  visually-hidden"
+            type="radio"
+            name="trip-sort"
+            value="${value}"
+            ${isChecked ? 'checked' : ''}
+            ${isDisabled ? 'disabled' : ''}>
+          <label class="trip-sort__btn" for="${id}">${label}</label>
+        </div>
+      `).join('')}
+    </form>
   `;
 }
 
@@ -52,3 +42,5 @@ export default class SortsView extends AbstractView {
     this.#onSortTypeChange(evt.target.value);
   };
 }
+
+