Merge pull request #3 from NikitaBystritsky/module1-task3

htmlacademy-univer-js2 · Dec 23, 2024 · 2973117 · 2973117
2 parents 4bf53cc + 7403ca5
commit 2973117
Show file tree

Hide file tree

Showing 35 changed files with 1,392 additions and 0 deletions.
diff --git a/build/bundle.js b/build/bundle.js
diff --git a/build/css/style.css b/build/css/style.css
diff --git a/build/fonts/Montserrat-Bold.woff2 b/build/fonts/Montserrat-Bold.woff2
diff --git a/build/fonts/Montserrat-ExtraBold.woff2 b/build/fonts/Montserrat-ExtraBold.woff2
diff --git a/build/fonts/Montserrat-Medium.woff2 b/build/fonts/Montserrat-Medium.woff2
diff --git a/build/fonts/Montserrat-Regular.woff2 b/build/fonts/Montserrat-Regular.woff2
diff --git a/build/fonts/Montserrat-SemiBold.woff2 b/build/fonts/Montserrat-SemiBold.woff2
diff --git a/build/img/header-bg.png b/build/img/header-bg.png
diff --git a/build/img/[email protected] b/build/img/[email protected]
diff --git a/build/img/icons/bus.png b/build/img/icons/bus.png
diff --git a/build/img/icons/check-in.png b/build/img/icons/check-in.png
diff --git a/build/img/icons/drive.png b/build/img/icons/drive.png
diff --git a/build/img/icons/flight.png b/build/img/icons/flight.png
diff --git a/build/img/icons/restaurant.png b/build/img/icons/restaurant.png
diff --git a/build/img/icons/ship.png b/build/img/icons/ship.png
diff --git a/build/img/icons/sightseeing.png b/build/img/icons/sightseeing.png
diff --git a/build/img/icons/taxi.png b/build/img/icons/taxi.png
diff --git a/build/img/icons/train.png b/build/img/icons/train.png
diff --git a/build/img/icons/transport.png b/build/img/icons/transport.png
diff --git a/build/img/logo.png b/build/img/logo.png
diff --git a/build/img/photos/1.jpg b/build/img/photos/1.jpg
diff --git a/build/img/photos/2.jpg b/build/img/photos/2.jpg
diff --git a/build/img/photos/3.jpg b/build/img/photos/3.jpg
diff --git a/build/img/photos/4.jpg b/build/img/photos/4.jpg
diff --git a/build/img/photos/5.jpg b/build/img/photos/5.jpg
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Big Trip</title>
+
+    <link rel="stylesheet" href="./css/style.css">
+  </head>
+
+  <body class="page-body">
+    <header class="page-header">
+      <div class="page-body__container  page-header__container">
+        <img class="page-header__logo" src="img/logo.png" width="42" height="42" alt="Trip logo">
+
+        <div class="trip-main">
+          <div class="trip-main__trip-controls  trip-controls">
+            <div class="trip-controls__filters">
+              <h2 class="visually-hidden">Filter events</h2>
+              <!-- Фильтры -->
+            </div>
+          </div>
+
+          <button class="trip-main__event-add-btn  btn  btn--big  btn--yellow" type="button">New event</button>
+        </div>
+      </div>
+    </header>
+    <main class="page-body__page-main  page-main">
+      <div class="page-body__container">
+          <section class="trip-events">
+            <h2 class="visually-hidden">Trip events</h2>
+
+            <!-- Сортировка -->
+
+            <!-- Контент -->
+          </section>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,6 @@
+import BoardPresenter from './presenter/board-presenter';
+
+const bodyElement = document.querySelector('body');
+const boardPresenterElement = new BoardPresenter({boardContainer: bodyElement});
+
+boardPresenterElement.init();
diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js
@@ -0,0 +1,30 @@
+import {render} from '../render';
+import FilterView from '../view/filter-view';
+import SortView from '../view/sort-view';
+import NewPointView from '../view/new-point-view';
+import PointListView from '../view/event-point-view';
+import EventListView from '../view/event-list-view';
+
+const POINT_COUNT = 3;
+
+export default class BoardPresenter {
+  constructor({boardContainer}) {
+    this.boardContainer = boardContainer;
+  }
+
+  eventList = new EventListView();
+
+  init(){
+    const tripControlFiltersElement = this.boardContainer.querySelector('.trip-controls__filters');
+    const tripEventsElement = this.boardContainer.querySelector('.trip-events');
+
+    render(new FilterView(), tripControlFiltersElement);
+    render(new SortView(), tripEventsElement);
+    render(this.eventList, tripEventsElement);
+    render(new NewPointView(), this.eventList.getElement());
+
+    for (let i = 0; i < POINT_COUNT; i++) {
+      render(new PointListView(), this.eventList.getElement());
+    }
+  }
+}
diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js
@@ -0,0 +1,153 @@
+import {createElement} from '../render';
+
+const createEditPointTemplate = () => `<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/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">Taxi</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">
+        Flight
+      </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">
+      —
+      <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>
+        €
+      </label>
+      <input class="event__input  event__input--price" id="event-price-1" type="text" name="event-price" value="160">
+    </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">Add luggage</span>
+            +€&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">Switch to comfort</span>
+            +€&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">Add meal</span>
+            +€&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>
+            +€&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>
+            +€&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>`;
+export default class EditPointView {
+  getTemplate() {
+    return createEditPointTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}
diff --git a/src/view/event-list-view.js b/src/view/event-list-view.js
@@ -0,0 +1,19 @@
+import {createElement} from '../render';
+
+const createEventListTemplate = () => '<ul class="trip-events__list"></ul>';
+export default class EventListView {
+  getTemplate() {
+    return createEventListTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}
diff --git a/src/view/event-point-view.js b/src/view/event-point-view.js
@@ -0,0 +1,55 @@
+import {createElement} from '../render';
+
+const createEventPointTemplate = () => `<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>
+        —
+        <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">
+      €&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>
+        +€&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"></path>
+      </svg>
+    </button>
+    <button class="event__rollup-btn" type="button">
+      <span class="visually-hidden">Open event</span>
+    </button>
+  </div>
+</li>`;
+export default class EventPointView {
+  getTemplate() {
+    return createEventPointTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}
diff --git a/src/view/filter-view.js b/src/view/filter-view.js
@@ -0,0 +1,37 @@
+import {createElement} from '../render';
+
+const createFilterTemplate = () => `<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>`;
+export default class FilterView {
+  getTemplate() {
+    return createFilterTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}