add mocks and remove static data

package.json

@@ -29,5 +29,8 @@
     "not ie <= 11",
     "not op_mini all",
     "not < 0.25%"
-  ]
+  ],
+  "dependencies": {
+    "dayjs": "1.11.7"
+  }
 }

src/main.js

@@ -1,5 +1,7 @@
 import Presenter from './presenter/presenter';
+import EventsModel from './model/events-model';
 
-const presenter = new Presenter();
+const eventsModel = new EventsModel();
+const presenter = new Presenter({eventsModel});
 
 presenter.init();

src/mock/event.js

@@ -0,0 +1,120 @@
+const mockEvents = [
+  {
+    'id': '1',
+    'base_price': 20,
+    'date_from': new Date('December 20, 2024 03:24:00'),
+    'date_to': new Date('December 20, 2024 03:54:00'),
+    'destination': 'amst',
+    'is_favorite': true,
+    'offers': [
+      'uber'
+    ],
+    'type': 'taxi'
+  },
+  {
+    'id': '2',
+    'base_price': 1200,
+    'date_from': new Date('December 20, 2024 10:24:00'),
+    'date_to': new Date('December 21, 2024 06:24:00'),
+    'destination': 'amst',
+    'is_favorite': true,
+    'offers': [
+      'luggage',
+      'comfort'
+    ],
+    'type': 'ship'
+  },
+  {
+    'id': '3',
+    'base_price': 1200,
+    'date_from': new Date('December 22, 2024 10:24:00'),
+    'date_to': new Date('December 23, 2024 20:24:00'),
+    'destination': 'gnv',
+    'is_favorite': false,
+    'offers': [
+      'rent'
+    ],
+    'type': 'drive'
+  }
+];
+
+const mockDestinations = [
+  {
+    'id': 'chm',
+    'description': 'Chamonix, is a beautiful city, a true asian pearl, with crowded streets.',
+    'name': 'Chamonix',
+    'pictures': [
+      {
+        'src': 'https://loremflickr.com/248/152?random=7',
+        'description': 'Chamonix parliament building'
+      }
+    ]
+  },
+  {
+    'id': 'amst',
+    '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.',
+    'name': 'Amsterdam',
+    'pictures': [
+      {
+        'src': 'https://loremflickr.com/248/152?random=1',
+        '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.'
+      }
+    ]
+  },
+  {
+    'id': 'gnv',
+    'description': 'Aliquam erat volutpat. Nunc fermentum tortor ac porta dapibus. In rutrum ac purus sit amet tempus.',
+    'name': 'Geneva',
+    'pictures': [
+      {
+        'src': 'https://loremflickr.com/248/152?random=8',
+        'description': 'Aliquam erat volutpat. Nunc fermentum tortor ac porta dapibus. In rutrum ac purus sit amet tempus.'
+      }
+    ]
+  }
+];
+
+const mockOffers = [
+  {
+    'type': 'taxi',
+    'offers': [
+      {
+        'id': 'uber',
+        'title': 'Order Uber',
+        'price': 20
+      },
+      {
+        'id': 'childSeat',
+        'title': 'Add child seat',
+        'price': 5
+      }
+    ]
+  },
+  {
+    'type': 'ship',
+    'offers': [
+      {
+        'id': 'luggage',
+        'title': 'Add luggage',
+        'price': 50
+      },
+      {
+        'id': 'comfort',
+        'title': 'Switch to comfort',
+        'price': 80
+      }
+    ]
+  },
+  {
+    'type': 'drive',
+    'offers': [
+      {
+        'id': 'rent',
+        'title': 'Rent a car',
+        'price': 200
+      }
+    ]
+  },
+];
+
+export {mockEvents, mockDestinations, mockOffers};

src/model/events-model.js

@@ -0,0 +1,15 @@
+import {mockDestinations, mockEvents, mockOffers} from '../mock/event';
+
+export default class EventsModel {
+  getEvents() {
+    return [...mockEvents];
+  }
+
+  getDestinations() {
+    return [...mockDestinations];
+  }
+
+  getOffers() {
+    return [...mockOffers];
+  }
+}

src/presenter/presenter.js

@@ -10,14 +10,22 @@ export default class Presenter {
   eventsContainer = document.querySelector('.trip-events');
   filterContainer = document.querySelector('.trip-controls__filters');
 
+  constructor({eventsModel}) {
+    this.eventsModel = eventsModel;
+  }
+
   init() {
+    this.events = this.eventsModel.getEvents();
+    this.destinations = this.eventsModel.getDestinations();
+    this.offers = this.eventsModel.getOffers();
+
     render(new Filters(), this.filterContainer);
     render(new Sorting(), this.eventsContainer);
     render(this.eventListComponent, this.eventsContainer);
-    render(new EditForm(), this.eventListComponent.getElement());
+    render(new EditForm({event:this.events[0], destinations: this.destinations, offers: this.offers}), this.eventListComponent.getElement());
 
-    for (let i = 0; i < 3; i++) {
-      render(new EventItem(), this.eventListComponent.getElement());
+    for (let i = 1; i < this.events.length; i++) {
+      render(new EventItem({event:this.events[i], destinations: this.destinations, offers: this.offers}), this.eventListComponent.getElement());
     }
   }
 }

src/utils/utils.js

@@ -0,0 +1,56 @@
+import dayjs from 'dayjs';
+
+function formatDate(date, format) {
+  return dayjs(date).format(format);
+}
+
+function formatToDisplayString(value) {
+  return`${value}`.padStart(2, '0');
+}
+
+function getDuration(dateFrom, dateTo) {
+  const from = dayjs(dateFrom);
+  const to = dayjs(dateTo);
+  const minutes = to.diff(from, 'minute');
+  const days = Math.floor(minutes / (24 * 60));
+  const remainingMinutes = minutes % (24 * 60);
+
+  const hours = Math.floor(remainingMinutes / 60);
+  const finalMinutes = remainingMinutes % 60;
+
+  const result = [];
+
+  if (days > 0) {
+    result.push(`${formatToDisplayString(days)}D`);
+  }
+  if (hours > 0) {
+    result.push(`${formatToDisplayString(hours)}H`);
+  }
+  if (finalMinutes > 0) {
+    result.push(`${formatToDisplayString(finalMinutes)}M`);
+  }
+
+  return result.join(' ');
+}
+
+function getEvent(type, destination) {
+  return `${type } ${ destination}`;
+}
+
+function getDestination(id, destinations) {
+  return destinations.find((d) => d.id === id);
+}
+
+function getEventIconUrl(type) {
+  return `img/icons/${type}.png`;
+}
+
+function getTypeOffers(type, offers) {
+  return offers.find((d) => d.type === type)?.offers;
+}
+
+function getOffer(id, offers) {
+  return offers?.find((d) => d.id === id);
+}
+
+export {formatDate, getDuration, getEvent, getDestination, getEventIconUrl, getTypeOffers, getOffer};