Merge pull request #4 from vvoyage/module1-task3

.gitignore

@@ -12,5 +12,4 @@ Thumbs.db
 node_modules/
 
 # Собранные файлы (допишите самостоятельно)
-
-build/
+build/

Contributing.md

@@ -24,7 +24,7 @@ git push
 ¹ В `academy` должна быть ссылка на репозиторий Академии. Если его там нет, добавьте:
 
 ```
-git remote add academy [email protected]:htmlacademy-univer-js2/2502599-big-trip-4.git
+git remote add academy [email protected]:htmlacademy-univer-js2/2431913-big-trip-4.git
 ```
 
 Когда вы обновили `master`, создайте ветку для нового задания:

package.json

@@ -1,58 +1,35 @@
-
 {
   "name": "big-trip",
-  "version": "19.0.0",
+  "version": "20.0.0",
   "private": true,
   "description": "Проект «Большое путешествие» от HTML Academy",
-  "main": "main.js",
-
   "scripts": {
     "lint": "eslint src/",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --mode production",
-    "start": "webpack serve --mode development --open"
+    "start": "webpack serve --mode development --open",
+    "build": "webpack --mode production"
   },
-
-  "repository":{
-  "type": "git",
-  "url": "https://github.com/DashaKukartseva/2433045-big-trip-4"
-  },
-
-  "dependencies": {
-    "dayjs": "^1.11.6",
-    "flatpickr": "^4.6.13",
-    "he": "^1.2.0"
-  },
-
   "devDependencies": {
-    "eslint": "8.28.0",
-    "eslint-config-htmlacademy": "8.0.0",
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.2",
-    "html-webpack-plugin": "^5.6.0",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
-    "webpack-dev-server": "^4.11.1"
+    "@babel/core": "7.21.4",
+    "@babel/preset-env": "7.21.4",
+    "babel-loader": "9.1.2",
+    "copy-webpack-plugin": "11.0.0",
+    "eslint": "8.38.0",
+    "eslint-config-htmlacademy": "9.0.0",
+    "find-cache-dir": "^5.0.0",
+    "html-webpack-plugin": "5.5.1",
+    "pkg-dir": "^8.0.0",
+    "webpack": "5.79.0",
+    "webpack-cli": "5.0.1",
+    "webpack-dev-server": "4.13.3"
   },
-
   "engines": {
     "node": "18"
   },
-
-  "browserslist":{
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+  "browserslist": [
+    "last 2 versions",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all",
+    "not < 0.25%"
+  ]
+}

src/main.js

@@ -0,0 +1,19 @@
+import {
+  render,
+  RenderPosition
+} from './render.js';
+import TripInfoView from './view/trip.js';
+import FiltersView from './view/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();

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/item.js';
+import PointEditorView from '../view/editor-view.js';
+import SortingView from '../view/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());
+    }
+  }
+}

src/view/creator-view.js

@@ -0,0 +1,188 @@
+import {
+  createElement
+} from '../render.js';
+
+function createNewPointTemplate() {
+  return (
+    `<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="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">
+            &mdash;
+            <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>
+              &euro;
+            </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>
+                  &plus;&euro;&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>
+                  &plus;&euro;&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>
+                  &plus;&euro;&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>
+                  &plus;&euro;&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>
+                  &plus;&euro;&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>
+    </li>`
+  );
+}
+
+export default class NewPointView {
+  getTemplate() {
+    return createNewPointTemplate();
+  }
+
+  getElement() {
+    if (!this.element) {
+      this.element = createElement(this.getTemplate());
+    }
+
+    return this.element;
+  }
+
+  removeElement() {
+    this.element = null;
+  }
+}