module2-task1

package.json

@@ -29,5 +29,8 @@
   },
   "engines": {
     "node": "18.20.5"
+  },
+  "dependencies": {
+    "dayjs": "1.11.13"
   }
 }

src/main.js

@@ -1,8 +1,11 @@
 import BoardPresenter from './presenter/board-presenter.js';
+import Model from './model/model.js';
 
 const filtersContainer = document.querySelector('.trip-controls__filters');
 const eventsContainer = document.querySelector('.trip-events');
 
-const boardPresenter = new BoardPresenter({filtersContainer, eventsContainer});
+const model = new Model();
+const boardPresenter = new BoardPresenter({filtersContainer, eventsContainer, model});
 
 boardPresenter.init();
+

src/mocks/destinations.js

@@ -0,0 +1,46 @@
+export const destinations =
+  [
+    {
+      id: '1',
+      description: 'Chamonix, is a beautiful city, a true asian pearl, with crowded streets.',
+      name: 'Chamonix',
+      pictures: [
+        {
+          src: 'http://picsum.photos/300/200?r=0.0762563005163317',
+          description: 'Chamonix parliament building'
+        }
+      ]
+    },
+    {
+      id: '2',
+      description: 'Bangkok is a vibrant metropolis known for its ornate temples, bustling street life.',
+      name: 'Bangkok',
+      pictures: [
+        {
+          src: 'https://en.wikipedia.org/wiki/King_Power_Mahanakhon#/media/File:Tha%C3%AFlande_Bangkok_MahaNakhon.jpg',
+          description: 'King Power Mahanakhon'
+        }
+      ]
+    },
+    {
+      id: '3',
+      description: 'Istanbul is a vibrant city bridging Europe and Asia.',
+      name: 'Istanbul',
+      pictures: [
+        {
+          src: 'http://picsum.photos/300/200?r=0.0762563005163317',
+          description: 'Istanbul Grand Bazaar'
+        }
+      ]
+    },
+    {
+      id: '4',
+      description: 'Amsterdam is a picturesque city known for its canals.',
+      name: 'Amsterdam',
+      pictures: []
+    }
+  ];
+
+export function getDestinations (){
+  return destinations;
+}

src/mocks/events.js

@@ -0,0 +1,48 @@
+export const events = [
+  {
+    id: '1',
+    basePrice: 200,
+    dateFrom: '2024-11-10T22:55:56',
+    dateTo: '2024-11-11T11:22:13',
+    destination: '3',
+    isFavorite: false,
+    offers: ['1', '4'],
+    type: 'taxi'
+  },
+  {
+    id: '2',
+    basePrice: 90,
+    dateFrom: '2024-11-12T22:55:56',
+    dateTo: '2024-11-13T11:22:13',
+    destination: '1',
+    isFavorite: false,
+    offers: ['2', '4'],
+    type: 'bus'
+  },
+  {
+    id: '3',
+    basePrice: 900,
+    dateFrom: '2024-11-14T02:42:56',
+    dateTo: '2024-11-14T11:22:13',
+    destination: '2',
+    isFavorite: true,
+    offers: ['1', '2'],
+    type: 'flight'
+  },
+  {
+    id: '4',
+    basePrice: 300,
+    dateFrom: '2024-11-16T22:55:56',
+    dateTo: '2024-11-17T11:22:13',
+    destination: '4',
+    isFavorite: false,
+    offers: [],
+    type: 'train'
+  }
+];
+
+export function getEvents (){
+  return events;
+}
+
+

src/mocks/offers.js

@@ -0,0 +1,100 @@
+export const offers = [
+  {
+    type: 'taxi',
+    offers: [
+      {
+        id: '1',
+        title: 'Upgrade to a business class',
+        price: 120
+      },
+      {
+        id: '2',
+        title: 'Upgrade to a limousine',
+        price: 300
+      },
+      {
+        id: '3',
+        title: 'Upgrade to a minivan',
+        price: 30
+      },
+      {
+        id: '4',
+        title: 'oversized luggage',
+        price: 60
+      },
+      {
+        id: '5',
+        title: 'chair for child',
+        price: 30
+      }
+    ]
+  },
+  {
+    type: 'bus',
+    offers: []
+  },
+  {
+    type: 'flight',
+    offers: [
+      {
+        id: '1',
+        title: 'Upgrade to a business class',
+        price: 500
+      },
+      {
+        id: '2',
+        title: 'Upgrade to a first class',
+        price: 1000
+      },
+      {
+        id: '3',
+        title: 'Platinum last minute upgrade.',
+        price: 20
+      },
+      {
+        id: '4',
+        title: 'luggage +10kg',
+        price: 40
+      }
+    ]
+  },
+  {
+    type: 'train',
+    offers: [
+      {
+        id: '1',
+        title: 'Upgrade to a business class',
+        price: 120
+      },
+      {
+        id: '2',
+        title: 'Upgrade to a luxury class',
+        price: 120
+      },
+      {
+        id: '3',
+        title: 'shower',
+        price: 10
+      },
+      {
+        id: '4',
+        title: 'Dinner',
+        price: 20
+      },
+      {
+        id: '5',
+        title: '',
+        price: 120
+      },
+      {
+        id: '6',
+        title: 'Upgrade to a business class',
+        price: 120
+      }
+    ]
+  }
+];
+
+export function getOffers(){
+  return offers;
+}

src/model/model.js

@@ -0,0 +1,23 @@
+import {events} from '../mocks/events.js';
+import {destinations} from '../mocks/destinations.js';
+import {offers} from '../mocks/offers.js';
+
+export default class Model{
+
+  events = events;
+  destinations = destinations;
+  offers = offers;
+
+  getEvents (){
+    return this.events;
+  }
+
+  getDestinations (){
+    return this.destinations;
+  }
+
+  getOffers(){
+    return this.offers;
+  }
+}
+

src/presenter/board-presenter.js

@@ -3,7 +3,7 @@ import FiltersView from '../view/filters-view.js';
 import SortsView from '../view/sorts-view.js';
 import EventListView from '../view/events-list-view.js';
 import EventEditView from '../view/event-edit-view.js';
-import EventsItemsView from '../view/events-items-view.js';
+import EventItemView from '../view/event-item-view.js';
 import EventView from '../view/event-view.js';
 
 export default class BoardPresenter{
@@ -13,21 +13,27 @@ export default class BoardPresenter{
   eventListView = new EventListView();
   eventView = new EventView();
 
-  constructor({filtersContainer, eventsContainer}){
+  constructor({filtersContainer, eventsContainer, model}){
 
+    this.model = model;
     this.filtersContainer = filtersContainer;
     this.eventsContainer = eventsContainer;
   }
 
   init(){
+    const destinations = this.model.getDestinations();
+    const offers = this.model.getOffers();
+    const events = this.model.getEvents();
+
     render(new FiltersView(), this.filtersContainer);
     render(new SortsView(), this.eventsContainer);
     render(this.eventListView, this.eventsContainer, RenderPosition.AFTEREND);
-    render(new EventEditView(), this.eventListView.getElement(), RenderPosition.AFTERBEGIN);
-    render(new EventView(), this.eventListView.getElement(), RenderPosition.AFTERBEGIN);
+    render(new EventEditView(events[0], destinations, offers), this.eventListView.getElement(), RenderPosition.AFTERBEGIN);
+    //render(new EventView(), this.eventListView.getElement(), RenderPosition.AFTERBEGIN);
 
-    for(let i = 0; i < 3; i += 1){
-      render(new EventsItemsView(), this.eventListView.getElement());
+    for (let i = 0; i < events.length ; i += 1) {
+      const event = events[i];
+      render(new EventItemView(event, destinations, offers), this.eventListView.getElement());
     }
   }
 }

src/utils.js

@@ -0,0 +1,34 @@
+import dayjs from 'dayjs';
+
+const DATE_FORMAT = 'MMM DD';
+const TIME_FORMAT = 'HH:mm';
+
+function humanizePointDueTime(dueDate) {
+  return dueDate ? dayjs(dueDate).format(TIME_FORMAT) : '';
+}
+
+function humanizePointDueDate(dueDate) {
+  return dueDate ? dayjs(dueDate).format(DATE_FORMAT) : '';
+}
+
+function getDiferenceTime(dateFrom, dateTo){
+  const startDate = dayjs(dateFrom);
+  const endDate = dayjs(dateTo);
+  const difference = endDate.diff(startDate);
+  const differenceHours = Math.floor(difference / (1000 * 60 * 60));
+  const differenceMin = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+  const differenceDays = Math.ceil(differenceHours / 24);
+
+  let differenceTime = `${differenceDays}D ${differenceHours }H ${differenceMin}M`;
+  if(differenceDays === 0){
+    differenceTime = `${differenceHours }H ${differenceMin }M`;
+  }
+  if(differenceDays === 0 && differenceHours === 0){
+    differenceTime = `${differenceMin}M`;
+  }
+  return differenceTime;
+}
+
+const capitalize = (word) => word[0].toUpperCase() + word.slice(1);
+
+export {humanizePointDueDate, humanizePointDueTime, getDiferenceTime, capitalize};