Merge pull request #3 from licos87/module1-task3

Время разбивать камни
htmlacademy-ecmascript · Aug 30, 2024 · fc1805e · fc1805e
2 parents fea1bc2 + c202afd
commit fc1805e
Show file tree

Hide file tree

Showing 14 changed files with 721 additions and 39 deletions.
diff --git a/markup/css/style.css b/markup/css/style.css
@@ -751,6 +751,9 @@ main {
 .event__section--offers {
   padding: 0 20px; }
 
+.event__section--destination {
+  padding: 0 20px; }
+
 .event__section-title {
   margin: 0;
   font-weight: 800;
@@ -762,8 +765,7 @@ main {
   .event__section-title--offers {
     margin-bottom: 15px; }
   .event__section-title--destination {
-    margin-bottom: 8px;
-    margin-left: 20px; }
+    margin-bottom: 8px;}
 
 .event__available-offers {
   display: -ms-flexbox;
@@ -806,7 +808,6 @@ main {
   width: 560px;
   margin: 0;
   margin-bottom: 16px;
-  margin-left: 20px;
   font-size: 15px;
   line-height: 18px; }
 

diff --git a/public/css/style.css b/public/css/style.css
@@ -751,6 +751,9 @@ main {
 .event__section--offers {
   padding: 0 20px; }
 
+.event__section--destination {
+  padding: 0 20px; }
+
 .event__section-title {
   margin: 0;
   font-weight: 800;
@@ -762,8 +765,7 @@ main {
   .event__section-title--offers {
     margin-bottom: 15px; }
   .event__section-title--destination {
-    margin-bottom: 8px;
-    margin-left: 20px; }
+    margin-bottom: 8px;}
 
 .event__available-offers {
   display: -ms-flexbox;
@@ -806,7 +808,6 @@ main {
   width: 560px;
   margin: 0;
   margin-bottom: 16px;
-  margin-left: 20px;
   font-size: 15px;
   line-height: 18px; }
 

diff --git a/public/index.html b/public/index.html
@@ -1,41 +1,42 @@
 <!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>
+<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>
+
       </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>
+    </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>
 
-            <!-- Контент -->
-          </section>
-      </div>
-    </main>
-  </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,22 @@
+import {RenderPosition, render} from './render.js';
+import SectionTripInfoView from './view/section-trip-info-view.js';
+import NewEventButtonView from './view/new-event-button-view.js';
+import TripFiltersFormView from './view/trip-filters-form-view.js';
+import ListPresenter from './presenter/list-presenter.js';
+
+
+const tripMain = document.querySelector('.trip-main');
+const tripEventsElement = document.querySelector('.trip-events');
+const tripControlsFilters = document.querySelector('.trip-controls__filters');
+
+render(new SectionTripInfoView(), tripMain, RenderPosition.AFTERBEGIN); // Заголовок, даты, общая цена
+render(new NewEventButtonView(), tripMain); // Заголовок, кнопка добавить событие
+render (new TripFiltersFormView(), tripControlsFilters); // Кнопки сортировки
+
+
+const listPresenter = new ListPresenter({
+  listContainer: tripEventsElement
+});
+
+listPresenter.init();
+
diff --git a/src/presenter/list-presenter.js b/src/presenter/list-presenter.js
@@ -0,0 +1,31 @@
+import { render } from '../render.js';
+
+import SortButtonView from '../view/sort-view.js';
+import TripEventListView from '../view/trip-events-list-view.js';
+import TripEventItemView from '../view/trip-events-item-view.js';
+import AddNewPointView from '../view/add-new-point-view.js';
+import EditPointView from '../view/edit-poit-view.js';
+import TripEventsMessage from '../view/trip-events-message-view.js';
+
+export default class ListPresenter {
+
+  listComponent = new TripEventListView();
+
+  constructor({ listContainer }) {
+    this.listContainer = listContainer;
+  }
+
+  init() {
+    render(new SortButtonView(), this.listContainer);
+    render(new TripEventItemView(), this.listContainer);
+    render(new AddNewPointView(), this.listContainer);
+    render(new EditPointView(), this.listContainer);
+    render(this.listComponent, this.listContainer);
+
+    for (let i = 0; i < 3; i++) { // Создание элементов в списке
+      render (new TripEventItemView(), this.listComponent.getElement());
+    }
+
+    render(new TripEventsMessage(), this.listContainer);
+  }
+}
diff --git a/src/view/add-new-point-view.js b/src/view/add-new-point-view.js
@@ -0,0 +1,182 @@
+import {createElement} from '../render.js';
+
+function createAddNewPointTemplate() {
+  return `<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="Geneva" 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="19/03/19 00:00">
+                    —
+                    <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="19/03/19 00:00">
+                  </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="">
+                  </div>
+
+                  <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
+                  <button class="event__reset-btn" type="reset">Cancel</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">30</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 class</span>
+                          +€&nbsp;
+                          <span class="event__offer-price">100</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">Geneva is a city in Switzerland that lies at the southern tip of expansive Lac Léman (Lake Geneva). Surrounded by the Alps and Jura mountains, the city has views of dramatic Mont Blanc.</p>
+
+                    <div class="event__photos-container">
+                      <div class="event__photos-tape">
+                        <img class="event__photo" src="img/photos/1.jpg" alt="Event photo">
+                        <img class="event__photo" src="img/photos/2.jpg" alt="Event photo">
+                        <img class="event__photo" src="img/photos/3.jpg" alt="Event photo">
+                        <img class="event__photo" src="img/photos/4.jpg" alt="Event photo">
+                        <img class="event__photo" src="img/photos/5.jpg" alt="Event photo">
+                      </div>
+                    </div>
+                  </section>
+                </section>
+              </form>`;
+}
+
+export default class AddNewPointView {
+  getTemplate() {
+    return createAddNewPointTemplate();
+  }
+
+  getElement() {
+    if(!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}