Merge pull request #3 from ershegm/module1-task3

htmlacademy-univer-js2 · Apr 6, 2024 · 08397d3 · 08397d3
2 parents bae95da + 5eb0716
commit 08397d3
Show file tree

Hide file tree

Showing 9 changed files with 642 additions and 0 deletions.
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,19 @@
+import {
+  render,
+  RenderPosition
+} from './render.js';
+import TripInfoView from './view/create-trip.js';
+import FiltersView from './view/create-filter.js';
+import PointsPresenter from './presenter/board-presenter.js';
+
+const tripMainContainer = document.querySelector('.trip-main');
+const tripEventsContainer = document.querySelector('.trip-events');
+const filtersContainer = tripMainContainer.querySelector('.trip-controls__filters');
+const pointsPresenter = new PointsPresenter({
+  tripEventsContainer
+});
+
+render(new TripInfoView(), tripMainContainer, RenderPosition.AFTERBEGIN);
+render(new FiltersView(), filtersContainer);
+
+pointsPresenter.init();
diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js
@@ -0,0 +1,30 @@
+import {
+  render
+} from '../render.js';
+import EventListView from '../view/events-list.js';
+import EventItemView from '../view/create-item.js';
+import PointEditorView from '../view/editor-view.js';
+import SortingView from '../view/create-sort.js';
+
+const POINTS_COUNT = 3;
+
+export default class PointsPresenter {
+  listComponent = new EventListView();
+  sortingComponent = new SortingView();
+
+  constructor({
+    tripEventsContainer
+  }) {
+    this.tripEventsContainer = tripEventsContainer;
+  }
+
+  init() {
+    render(this.sortingComponent, this.tripEventsContainer);
+    render(this.listComponent, this.tripEventsContainer);
+    render(new PointEditorView(), this.listComponent.getElement());
+
+    for (let i = 0; i < POINTS_COUNT; i++) {
+      render(new EventItemView(), this.listComponent.getElement());
+    }
+  }
+}
diff --git a/src/view/create-filter.js b/src/view/create-filter.js
@@ -0,0 +1,49 @@
+import {
+  createElement
+} from '../render.js';
+
+function createFiltersTemplate() {
+  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" checked>
+        <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">
+        <label class="trip-filters__filter-label" for="filter-past">Past</label>
+      </div>
+
+      <button class="visually-hidden" type="submit">Accept filter</button>
+    </form>`
+  );
+}
+
+export default class FiltersView {
+  getTemplate() {
+    return createFiltersTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}
diff --git a/src/view/create-item.js b/src/view/create-item.js
@@ -0,0 +1,63 @@
+import {
+  createElement
+} from '../render.js';
+
+function createEventItemTemplate() {
+  return (
+    `<li class="trip-events__item">
+      <div class="event">
+        <time class="event__date" datetime="2019-03-18">MAR 18</time>
+        <div class="event__type">
+          <img class="event__type-icon" width="42" height="42" src="img/icons/taxi.png" alt="Event type icon">
+        </div>
+        <h3 class="event__title">Taxi Amsterdam</h3>
+        <div class="event__schedule">
+          <p class="event__time">
+            <time class="event__start-time" datetime="2019-03-18T10:30">10:30</time>
+            &mdash;
+            <time class="event__end-time" datetime="2019-03-18T11:00">11:00</time>
+          </p>
+          <p class="event__duration">30M</p>
+        </div>
+        <p class="event__price">
+          &euro;&nbsp;<span class="event__price-value">20</span>
+        </p>
+        <h4 class="visually-hidden">Offers:</h4>
+        <ul class="event__selected-offers">
+          <li class="event__offer">
+            <span class="event__offer-title">Order Uber</span>
+            &plus;&euro;&nbsp;
+            <span class="event__offer-price">20</span>
+          </li>
+        </ul>
+        <button class="event__favorite-btn event__favorite-btn--active" type="button">
+          <span class="visually-hidden">Add to favorite</span>
+          <svg class="event__favorite-icon" width="28" height="28" viewBox="0 0 28 28">
+            <path d="M14 21l-8.22899 4.3262 1.57159-9.1631L.685209 9.67376 9.8855 8.33688 14 0l4.1145 8.33688 9.2003 1.33688-6.6574 6.48934 1.5716 9.1631L14 21z"/>
+          </svg>
+        </button>
+        <button class="event__rollup-btn" type="button">
+          <span class="visually-hidden">Open event</span>
+        </button>
+      </div>
+    </li>`
+  );
+}
+
+export default class EventItemView {
+  getTemplate() {
+    return createEventItemTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}
diff --git a/src/view/create-sort.js b/src/view/create-sort.js
@@ -0,0 +1,52 @@
+import {
+  createElement
+} from '../render.js';
+
+function createSortingTemplate() {
+  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="sort-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="sort-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="sort-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="sort-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="sort-offer" disabled>
+        <label class="trip-sort__btn" for="sort-offer">Offers</label>
+      </div>
+    </form>`
+  );
+}
+
+export default class SortingView {
+  getTemplate() {
+    return createSortingTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}
diff --git a/src/view/create-trip.js b/src/view/create-trip.js
@@ -0,0 +1,35 @@
+import {
+  createElement
+} from '../render.js';
+
+function createTripInfoTemplate() {
+  return (
+    `<section class="trip-main__trip-info  trip-info">
+      <div class="trip-info__main">
+        <h1 class="trip-info__title">Amsterdam &mdash; Chamonix &mdash; Geneva</h1>
+        <p class="trip-info__dates">Mar 18&nbsp;&mdash;&nbsp;20</p>
+      </div>
+      <p class="trip-info__cost">
+        Total: &euro;&nbsp;<span class="trip-info__cost-value">1230</span>
+      </p>
+    </section>`
+  );
+}
+
+export default class TripInfoView {
+  getTemplate() {
+    return createTripInfoTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}