Merge pull request #4 from DanilinaMariya/module2-task1

package.json

@@ -29,5 +29,8 @@
   },
   "engines": {
     "node": "20"
+  },
+  "dependencies": {
+    "dayjs": "1.11.7"
   }
 }

src/const.js

@@ -0,0 +1,133 @@
+const FILTER__VALUE = ['everything', 'future', 'present', 'past'];
+
+const SORT__VALUE = ['day', 'event', 'time', 'price', 'offer'];
+
+const TYPES_ITEM = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-in', 'sightseeing', 'restaurant'];
+
+const OFFERS = [
+  {
+    id: 'luggage',
+    value: 'luggage',
+    title: 'Add luggage',
+    prise: '30'
+  },
+  {
+    id: 'comfort',
+    value: 'comfort',
+    title: 'Switch to comfort class',
+    prise: '100'
+  },
+  {
+    id: 'meal',
+    value: 'meal',
+    title: 'Add meal',
+    prise: '15'
+  },
+  {
+    id: 'seats',
+    value: 'seats',
+    title: 'Choose seats',
+    prise: '5'
+  },
+  {
+    id: 'train',
+    value: 'train',
+    title: 'Travel by train',
+    prise: '40'
+  },
+  {
+    id: 'Uber',
+    value: 'uber',
+    title: 'Order Uber',
+    prise: '20'
+  },
+  {
+    id: 'rent',
+    value: 'rent',
+    title: 'Rent a car',
+    prise: '200'
+  },
+  {
+    id: 'breakfast',
+    value: 'breakfast',
+    title: 'Add breakfast',
+    prise: '50'
+  },
+  {
+    id: 'tickets',
+    value: 'tickets',
+    title: 'Book tickets',
+    prise: '40'
+  },
+  {
+    id: 'lunch',
+    value: 'lunch',
+    title: 'Lunch in city',
+    prise: '30'
+  }
+];
+
+const DESTINATIONS = [
+  {
+    id: 'amsterdam',
+    name: 'Amsterdam',
+    description: '',
+    picture: []
+  },
+  {
+    id: 'geneva',
+    name: 'Geneva',
+    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.',
+    picture: [
+      {
+        src: 'img/photos/1.jpg',
+        description: 'Event photo'
+      },
+      {
+        src: 'img/photos/2.jpg',
+        description: 'Event photo'
+      },
+      {
+        src: 'img/photos/3.jpg',
+        description: 'Event photo'
+      },
+      {
+        src: 'img/photos/4.jpg',
+        description: 'Event photo'
+      },
+      {
+        src: 'img/photos/5.jpg',
+        description: 'Event photo'
+      }
+    ]
+  },
+  {
+    id: 'chamonix',
+    name: 'Chamonix',
+    description: 'Chamonix, is a beautiful city, a true asian pearl, with crowded streets.',
+    picture: [
+      {
+        src: 'https://loremflickr.com/248/152?random=15',
+        description: 'Event photo'
+      },
+      {
+        src: 'https://loremflickr.com/248/152?random=1554',
+        description: 'Event photo'
+      },
+      {
+        src: 'https://loremflickr.com/248/152?random=557',
+        description: 'Event photo'
+      },
+      {
+        src: 'https://loremflickr.com/248/152?random=954',
+        description: 'Event photo'
+      },
+      {
+        src: 'img/photos/5.jpg',
+        description: 'Event photo'
+      }
+    ]
+  }
+];
+
+export {FILTER__VALUE, SORT__VALUE, TYPES_ITEM, DESTINATIONS, OFFERS};

src/main.js

@@ -1,14 +1,16 @@
-import Filters from './view/filters.js';
+import FiltersView from './view/filters-view.js';
 import {render} from './render.js';
 import BoardPresenter from './presenter/board-presenter.js';
+import PointsModel from './model/points-model.js';
 
 const header = document.querySelector('.trip-main');
 const filtersContainer = header.querySelector('.trip-controls__filters');
 const main = document.querySelector('.page-main');
 const mainContainer = main.querySelector('.trip-events');
-const boardPresenter = new BoardPresenter({boardContainer: mainContainer});
+const pointsModel = new PointsModel();
+const boardPresenter = new BoardPresenter({boardContainer: mainContainer, pointsModel});
 
-render(new Filters(), filtersContainer);
+render(new FiltersView(), filtersContainer);
 
 
 boardPresenter.init();

src/mock/points.js

@@ -0,0 +1,38 @@
+import {getRandomArrayElement} from '../utils.js';
+import { TYPES_ITEM, DESTINATIONS } from '../const.js';
+
+const mockPoints = [
+  {
+    type: getRandomArrayElement(TYPES_ITEM),
+    destination: getRandomArrayElement(DESTINATIONS).id,
+    startDate: '2019-03-18T10:30',
+    endDate: '2019-03-18T11:00',
+    price: '130',
+    offers: ['luggage', 'meal'],
+    isFavorite: true,
+  },
+  {
+    type: getRandomArrayElement(TYPES_ITEM),
+    destination: getRandomArrayElement(DESTINATIONS).id,
+    startDate: '2019-03-18T14:30',
+    endDate: '2019-03-18T16:05',
+    price: '30',
+    offers: ['luggage'],
+    isFavorite: false,
+  },
+  {
+    type: getRandomArrayElement(TYPES_ITEM),
+    destination: getRandomArrayElement(DESTINATIONS).id,
+    startDate: '2019-03-20T08:25',
+    endDate: '2019-03-20T09:25',
+    price: '40',
+    offers: ['train'],
+    isFavorite: false,
+  }
+];
+
+function getRandomPoint() {
+  return getRandomArrayElement(mockPoints);
+}
+
+export {getRandomPoint};

src/model/points-model.js

@@ -0,0 +1,12 @@
+import { getRandomPoint } from '../mock/points';
+
+const POINT_COUNT = 4;
+
+export default class PointsModel {
+  points = Array.from({length: POINT_COUNT}, getRandomPoint);
+
+
+  getTasks() {
+    return this.points;
+  }
+}

src/presenter/board-presenter.js

@@ -1,24 +1,26 @@
-import Sort from '../view/sort.js';
-import ListPoints from '../view/list-points.js';
-import FormPoint from '../view/form-point.js';
-import Point from '../view/point.js';
+import SortView from '../view/sort-view.js';
+import ListPointsView from '../view/list-points-view.js';
+import FormPointView from '../view/form-point-view.js';
+import PointView from '../view/point-view.js';
 import {RenderPosition, render} from '../render.js';
 
 
 export default class BoardPresenter {
-  listContainer = new ListPoints();
+  listContainer = new ListPointsView();
 
-  constructor({boardContainer}) {
+  constructor({boardContainer, pointsModel}) {
     this.boardContainer = boardContainer;
+    this.pointsModel = pointsModel;
   }
 
   init() {
-    render(new Sort(), this.boardContainer);
+    this.boardPoints = [...this.pointsModel.getTasks()];
+    render(new SortView(), this.boardContainer);
     render(this.listContainer, this.boardContainer);
-    render(new FormPoint(true, false), this.listContainer.getElement(), RenderPosition.AFTERBEGIN);
+    render(new FormPointView(true, false), this.listContainer.getElement(), RenderPosition.AFTERBEGIN);
 
-    for (let i = 0; i < 3; i++) {
-      render(new Point(), this.listContainer.getElement());
+    for (let i = 1; i < this.boardPoints.length; i++) {
+      render(new PointView(this.boardPoints[i]), this.listContainer.getElement());
     }
   }
 }

src/utils.js

@@ -0,0 +1,45 @@
+import dayjs from 'dayjs';
+
+const FORMATS = {
+  DATE: 'D MMM',
+  TIME: 'HH:mm',
+  FORM: 'DD/MM/YY HH:mm'
+};
+
+function getRandomArrayElement(items) {
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+function humanizePointDate(date, format = FORMATS.DATE) {
+  return date ? dayjs(date).format(format) : '';
+}
+
+function capitalizeFirstLetter(text) {
+  const textFirstCapitalLetter = text.charAt(0).toUpperCase() + text.slice(1);
+  return textFirstCapitalLetter;
+}
+
+function humanizePointDuration(date1, date2) {
+  const startDate = dayjs(date1);
+  const endDate = dayjs(date2);
+  const durationMinutes = endDate.diff(startDate, 'minute');
+  let duration = '';
+
+  if (durationMinutes > 1140) {
+    const days = Math.trunc(durationMinutes / 1440);
+    const hours = Math.trunc((durationMinutes - (days * 1440)) / 60);
+    const minute = (durationMinutes - (days * 1440)) % 60;
+    duration = `${days.toString().padStart(2, '0')}D ${hours.toString().padStart(2, '0')}H ${minute.toString().padStart(2, '0')}M`;
+  } else {
+    if(durationMinutes >= 60) {
+      const hours = Math.trunc(durationMinutes / 60);
+      const minute = durationMinutes % 60;
+      duration = `${hours.toString().padStart(2, '0')}H ${minute.toString().padStart(2, '0')}M`;
+    }else {
+      duration = `${durationMinutes.toString().padStart(2, '0')}M`;
+    }
+  }
+  return duration;
+}
+
+export {getRandomArrayElement, humanizePointDate, humanizePointDuration, capitalizeFirstLetter, FORMATS};

src/view/filters.js → src/view/filters-view.js

@@ -1,5 +1,5 @@
 import {createElement} from '../render.js';
-const FILTER__VALUE = ['everything', 'future', 'present', 'past'];
+import { FILTER__VALUE } from '../const.js';
 
 function createFilterItemTemplate(value) {
   return `<div class="trip-filters__filter">
@@ -17,7 +17,7 @@ function createFiltersTemplate() {
   );
 }
 
-export default class Filters {
+export default class FiltersView {
   getTemplate() {
     return createFiltersTemplate();
   }