Merge pull request #9 from DashaKukartseva/module4-task2

src/const.js

@@ -1,42 +1,11 @@
-const CITIES = [
-    'Moscow',
-    'Saint Petersburg',
-    'Novosibirsk',
-    'Yekaterinburg',
-    'Kazan',
-    'Nizhny Novgorod',
-    'Chelyabinsk',
-    'Krasnoyarsk',
-    'Samara',
-    'Ufa',
-  ];
-
-  const DESCRIPTION = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet varius magna, non porta ligula feugiat eget. Fusce tristique felis at fermentum pharetra. Aliquam id orci ut lectus varius viverra. Nullam nunc ex, convallis sed finibus eget, sollicitudin eget ante. Phasellus eros mauris, condimentum sed nibh vitae, sodales efficitur ipsum. Sed blandit, eros vel aliquam faucibus, purus ex euismod diam, eu luctus nunc ante ut dui. Sed sed nisi sed augue convallis suscipit in sed felis. Aliquam erat volutpat. Nunc fermentum tortor ac porta dapibus. In rutrum ac purus sit amet tempus.';
-
-  const OFFERS_NAMES = [
-    'Upgrade to a business class',
-    'Add luggage',
-    'Switch to comfort class',
-    'Add meal',
-    'Choose seats',
-    'Travel by train'
-  ];
-
-  const POINT_TYPES = [
-    'taxi',
-    'bus',
-    'train',
-    'ship',
-    'drive',
-    'flight',
-    'check-in',
-    'sightseeing',
-    'restaurant',
-  ];
-
+const CITIES = ['Moscow','Saint Petersburg','Novosibirsk','Yekaterinburg','Kazan','Nizhny Novgorod','Chelyabinsk','Krasnoyarsk','Samara','Ufa'];
+const DESCRIPTION = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet varius magna, non porta ligula feugiat eget. Fusce tristique felis at fermentum pharetra. Aliquam id orci ut lectus varius viverra. Nullam nunc ex, convallis sed finibus eget, sollicitudin eget ante. Phasellus eros mauris, condimentum sed nibh vitae, sodales efficitur ipsum. Sed blandit, eros vel aliquam faucibus, purus ex euismod diam, eu luctus nunc ante ut dui. Sed sed nisi sed augue convallis suscipit in sed felis. Aliquam erat volutpat. Nunc fermentum tortor ac porta dapibus. In rutrum ac purus sit amet tempus.'];
+const OFFERS_NAMES = ['Upgrade to a business class','Add luggage','Switch to comfort class','Add meal','Choose seats','Travel by train'];
+const POINT_TYPES = ['taxi','bus','train','ship','drive','flight','check-in','sightseeing','restaurant'];
 const EVENT_COUNT = 4;
 const DESTINATION_COUNT = 3;
-const DEFAULT_OFFER = 'flight';
+const DEFAULT_TYPE = 'flight';
+
 const Price = {
   MAX: 10,
   MIN: 1000
@@ -49,14 +18,20 @@ const POINT_EMPTY = {
   destination: null,
   isFavorite: false,
   offers: [],
-  type: DEFAULT_OFFER
+  type: DEFAULT_TYPE
+};
+
+const FilterType = {
+  EVERYTHING: 'everything',
+  FUTURE: 'future',
+  PRESENT: 'present',
+  PAST: 'past',
 };
 
 const MSEC_IN_SEC = 1000;
 const SEC_IN_MIN = 60;
 const MIN_IN_HOUR = 60;
 const HOUR_IN_DAY = 24;
-
 const MSEC_IN_HOUR = MIN_IN_HOUR * SEC_IN_MIN * MSEC_IN_SEC;
 const MSEC_IN_DAY = HOUR_IN_DAY * MSEC_IN_HOUR;
 
@@ -65,5 +40,4 @@ const Duration = {
   DAY: 5,
   MIN: 59
 };
-
-export { CITIES, DESCRIPTION, OFFERS_NAMES, POINT_TYPES,EVENT_COUNT, Price, POINT_EMPTY, DESTINATION_COUNT, Duration, MSEC_IN_HOUR, MSEC_IN_DAY};
+export { FilterType, CITIES, DESCRIPTION, OFFERS_NAMES, POINT_TYPES,EVENT_COUNT, Price, POINT_EMPTY, DESTINATION_COUNT, Duration, MSEC_IN_HOUR, MSEC_IN_DAY};

src/main.js

@@ -4,21 +4,23 @@ import OffersModel from './model/offers';
 import PointsModel from './model/points';
 import MockService from './service/mockservice.js';
 import FilterView from './view/filter.js';
+import { generateFilters } from './mock/filter.js';
 import { render } from './framework/render.js';
 
 const destinationsModel = new DestinationsModel();
+const mockService = new MockService();
 const offersModel = new OffersModel(mockService);
 const pointsModel = new PointsModel(mockService);
+const filters = generateFilters(pointsModel.get());
 const filterContainer = document.querySelector('.trip-controls__filters');
 const tripEventsContainer = document.querySelector('.trip-events');
-const mockService = new MockService();
 
 const tripEventsPresenter = new TripEventsPresenter({
-    container: tripEventsContainer,
-    destinationsModel,
-    offersModel,
-    pointsModel
-  });
+  container: tripEventsContainer,
+  destinationsModel,
+  offersModel,
+  pointsModel
+});
 
-render(new FilterView(), filterContainer);
+render(new FilterView({filters}), filterContainer);
 tripEventsPresenter.init();

src/mock/directions.js

@@ -2,18 +2,15 @@ import { getRandomValue, getRandomInteger } from '../utils';
 import { CITIES, DESCRIPTION, DESTINATION_COUNT } from '../const';
 
 function generateDestination() {
-  const city = getRandomValue(CITIES);
-
   return {
     id: crypto.randomUUID(),
-    name: city,
-    description: Array.from({length: getRandomInteger(1, 5)}, () => getRandomArrayElement(DESCRIPTION)).join(' '),
+    description: Array.from({length: getRandomInteger(1, 5)}, () => getRandomValue(DESCRIPTION)).join(' '),
+    name: getRandomValue(CITIES),
     pictures: Array.from({length: getRandomInteger(1, 5)}, () => ({
       src: `https://loremflickr.com/248/152?random=${crypto.randomUUID()}`,
-      description: getRandomArrayElement(DESCRIPTION)
+      description: getRandomValue(DESCRIPTION)
     }))
   };
 }
 const mockDestinations = Array.from({length: DESTINATION_COUNT}, generateDestination);
-
-export { mockDestinations };
+export {mockDestinations};

src/mock/filter.js

@@ -0,0 +1,20 @@
+import { FilterType } from '../const';
+import { isEventFuture, isEventPresent, isEventPast } from '../utils';
+
+const filter = {
+  [FilterType.EVERYTHING]: (events) => [...events],
+  [FilterType.FUTURE]: (events) => events.filter((event) => isEventFuture(event)),
+  [FilterType.PRESENT]: (events) => events.filter((event) => isEventPresent(event)),
+  [FilterType.PAST]: (events) => events.filter((event) => isEventPast(event)),
+};
+
+function generateFilters(events) {
+  return Object.entries(filter).map(
+    ([filterType, filterEvents]) => ({
+      type: filterType,
+      exists: filterEvents(events).length > 0
+    })
+  );
+}
+
+export {generateFilters};

src/mock/offer.js

@@ -1,21 +1,22 @@
 import { getRandomInteger, getRandomValue } from '../utils';
 import { OFFERS_NAMES, POINT_TYPES,Price } from '../const';
 
-const mockOffer=[]
-function generateOffersByType(type) {
+const mockOffer = [];
+
+function generateOffer(type) {
   return {
-    type: type,
-    offers: Array.from({ length: getRandomInteger(1, 5)}, () =>({
+    type,
+    offers: Array.from({length: getRandomInteger(0, 5)}, () => ({
       id: crypto.randomUUID(),
       title: getRandomValue(OFFERS_NAMES),
-      price: getRandomInteger(Price.MIN, Price.MAX)
+      price:getRandomInteger(Price.MIN, Price.MAX)
     }))
   };
 }
+
 POINT_TYPES.forEach((type) => {
-  const offer = generateOffersByType(type);
+  const offer = generateOffer(type);
   mockOffer.push(offer);
 });
 
-
-export { mockOffer };
+export {mockOffer};

src/presenters/trippresenter.js

@@ -2,6 +2,7 @@ import SortView from '../view/sort.js';
 import ListView from '../view/list.js';
 import EditablePointView from '../view/modpoint.js';
 import PointView from '../view/point.js';
+import NoPointView from '../view/nopoint.js';
 import {render, replace} from '../framework/render.js';
 
 export default class TripEventsPresenter {
@@ -21,6 +22,14 @@ export default class TripEventsPresenter {
 
   init() {
     this.#points = [...this.#pointsModel.points];
+    this.#renderTrip();
+  }
+
+  #renderTrip() {
+    if (this.#points.length === 0) {
+      render(new NoPointView(), this.#container);
+      return;
+    }
 
     render(new SortView(), this.#container);
     render(this.#listComponent, this.#container);

src/presenters/utils.js

@@ -1,35 +1,32 @@
 import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { Duration, MSEC_IN_HOUR, MSEC_IN_DAY } from './const';
 
-function getRandomInteger(a = 0, b = 1) {
-  const lower = Math.ceil(Math.min(a, b));
-  const upper = Math.floor(Math.max(a, b));
-  return Math.floor(lower + Math.random() * (upper - lower + 1));
-}
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
 
-function getRandomValue(array) {
-  return array[0, getRandomInteger(0, array.length - 1)];
-}
+function getRandomInteger (min, max) {
+  const lower = Math.ceil(Math.min(Math.abs(min), Math.abs(max)));
+  const upper = Math.floor(Math.max(Math.abs(min), Math.abs(max)));
+  const result = Math.random() * (upper - lower + 1) + lower;
 
-function formatDateToShortDate(date){
-  return dayjs(date).format('MMM DD');
+  return Math.floor(result);
 }
 
-function formatDateToDateTime(date) {
-  return dayjs(date).format('DD/MM/YY HH:mm');
+function getRandomValue(items) {
+  return items[getRandomInteger(0, items.length - 1)];
 }
 
-function formatDateToDateTimeHTML(date) {
-  return dayjs(date).format('YYYY-MM-DDTHH:mm');
+function firstLetterToUpperCase(type) {
+  return type.charAt(0).toUpperCase() + type.slice(1);
 }
 
-function formatDateToTime(date) {
-  return dayjs(date).format('HH:mm');
+function firstLetterToLowerCase(type) {
+  return type.toLowerCase();
 }
 
-function formatDuration(date1, date2){
-  const duration = dayjs(date2).subtract(dayjs(date1));
-  return `${duration.minute()}M`;
-}
+let date = dayjs().subtract(getRandomInteger(0, Duration.DAY), 'day').toDate();
 
 function getDate({ next }) {
   const minsGap = getRandomInteger(0, Duration.MIN);
@@ -43,7 +40,48 @@ function getDate({ next }) {
       .add(daysGap, 'day')
       .toDate();
   }
+
   return date;
 }
 
-export { getRandomInteger, getRandomValue, formatDateToShortDate, formatDateToDateTimeHTML, formatDateToDateTime, formatDateToTime, formatDuration, getDate };
+const formatStringToDateTime = (dateF) => dayjs(dateF).format('DD/MM/YY HH:mm');
+const formatStringToShortDate = (dateF) => dayjs(dateF).format('MMM DD');
+const formatStringToTime = (dateF) => dayjs(dateF).format('HH:mm');
+
+const getPointDuration = (dateFrom, dateTo) => {
+  const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom));
+
+  if (timeDiff >= MSEC_IN_DAY) {
+    return dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]');
+  } else if (timeDiff >= MSEC_IN_HOUR) {
+    return dayjs.duration(timeDiff).format('HH[H] mm[M]');
+  }
+  return dayjs.duration(timeDiff).format('mm[M]');
+};
+
+function isEventFuture(event) {
+  return dayjs().isBefore(event.dateFrom);
+}
+
+function isEventPresent(event) {
+  return dayjs().isAfter(event.dateFrom) && dayjs().isBefore(event.dateTo);
+}
+
+function isEventPast(event) {
+  return dayjs().isAfter(event.dateTo);
+}
+
+
+export {
+  isEventPast,
+  isEventPresent,
+  isEventFuture,
+  getRandomInteger,
+  getRandomValue,
+  getDate,
+  formatStringToDateTime,
+  formatStringToShortDate,
+  formatStringToTime,
+  getPointDuration,
+  firstLetterToUpperCase,
+  firstLetterToLowerCase};

src/service/mockservice.js

@@ -1,44 +1,43 @@
 import { mockDestinations } from '../mock/directions.js';
-import { mockOffer } from '../mock/offers.js';
+import { mockOffer } from '../mock/offer.js';
 import { generatePoint } from '../mock/point.js';
 import { EVENT_COUNT, POINT_TYPES } from '../const.js';
 import { getRandomValue, getRandomInteger } from '../utils.js';
 
 export default class MockService {
-    #destinations = null;
-    #offers = null;
-    #points = null;
-  constructor() {
-    this.#destinations = mockDestinations;
-    this.#offers = mockOffer;
-    this.#points = this.#generatePoints();
-  }
+  #destinations = null;
+  #offers = null;
+  #points = null;
+    constructor() {
+        this.#destinations = mockDestinations;
+        this.#offers = mockOffer;
+        this.#points = this.#generatePoints();
+    }
 
-  #generatePoints() {
-    return Array.from({length: EVENT_COUNT}, () => {
-      const type = getRandomValue(POINT_TYPES);
-      const destination = getRandomValue(this.#destinations);
-      const destinationIDs = destination.id;
-      const offersByType = this.#offers.find((offerByType) => offerByType.type === type);
-      const offersIDs = [];
-      offersByType.offers.forEach((offer) => {
-        if (getRandomInteger(0, 1)) {
-          offersIDs.push(offer.id);
-        }
-      });
-      return generatePoint(type, offersIDs, destinationIDs);
-    });
-  }
+    #generatePoints() {
+        return Array.from({length: EVENT_COUNT}, () => {
+          const type = getRandomValue(POINT_TYPES);
+          const destinationIDs = (getRandomInteger(0, 1)) ? getRandomValue(this.#destinations).id : null;
+          const offersByType = this.#offers.find((offerByType) => offerByType.type === type);
+          const offersIDs = [];
+          offersByType.offers.forEach((offer) => {
+            if (getRandomInteger(0, 1)) {
+              offersIDs.push(offer.id);
+            }
+          });
+          return generatePoint(type, offersIDs, destinationIDs);
+        });
+      }
 
-  getDestinations() {
-    return this.#destinations;
-  }
+      get destinations() {
+        return this.#destinations;
+      }
 
-  getOffers() {
-    return this.#offers;
-  }
+      get offers() {
+        return this.#offers;
+      }
 
-  getEvents() {
-    return this.#points;
-  }
-}
+      get events() {
+        return this.#points;
+      }
+    }