Merge pull request #14 from egorarud/module8-task1

src/api/destinations-api.js

@@ -0,0 +1,8 @@
+import ApiService from '../framework/api-service.js';
+
+export default class DestinationsApi extends ApiService {
+  get destinations() {
+    return this._load({url: 'destinations'})
+      .then(ApiService.parseResponse);
+  }
+}

src/api/offers-api.js

@@ -0,0 +1,8 @@
+import ApiService from '../framework/api-service.js';
+
+export default class OffersApi extends ApiService {
+  get offers() {
+    return this._load({url: 'offers'})
+      .then(ApiService.parseResponse);
+  }
+}

src/api/points-api.js

@@ -0,0 +1,42 @@
+import ApiService from '../framework/api-service.js';
+
+const Method = {
+  GET: 'GET',
+  PUT: 'PUT',
+};
+
+export default class PointsApi extends ApiService {
+  get points() {
+    return this._load({url: 'points'})
+      .then(ApiService.parseResponse);
+  }
+
+  async updatePoint(point) {
+    const response = await this._load({
+      url: `points/${point.id}`,
+      method: Method.PUT,
+      body: JSON.stringify(this.#adaptToServer(point)),
+      headers: new Headers({'Content-Type': 'application/json'}),
+    });
+
+    const parsedResponse = await ApiService.parseResponse(response);
+
+    return parsedResponse;
+  }
+
+  #adaptToServer(point) {
+    const adaptedTask = {...point,
+      'base_price': point.basePrice,
+      'date_from': point.dateFrom.toISOString(),
+      'date_to': point.dateTo.toISOString(),
+      'is-favorite': point.isFavorite,
+    };
+
+    delete adaptedTask.basePrice;
+    delete adaptedTask.dateFrom;
+    delete adaptedTask.dateTo;
+    delete adaptedTask.isFavorite;
+
+    return adaptedTask;
+  }
+}

src/const.js

@@ -33,6 +33,7 @@ const UpdateType = {
   PATCH: 'PATCH',
   MINOR: 'MINOR',
   MAJOR: 'MAJOR',
+  INIT: 'INIT'
 };
 
 const SortType = {

src/main.js

@@ -7,14 +7,27 @@ import FilterPresenter from './presenter/filter-presenter.js';
 import NewPointButtonView from './view/new-point-button-view.js';
 import { render } from './framework/render.js';
 
+import PointsApi from './api/points-api.js';
+import OffersApi from './api/offers-api.js';
+import DestinationsApi from './api/destinations-api.js';
+
+const AUTHORIZATION = 'Basic h111222sfasfafsf44ffx';
+const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip';
+
 const mainContainer = document.querySelector('.trip-main');
 const tripControlsFilters = mainContainer.querySelector('.trip-controls__filters');
 const tripEvents = document.querySelector('.trip-events');
 
-const pointsModel = new PointsModel();
-const offersModel = new OffersModel();
+const pointsModel = new PointsModel({
+  pointsApi: new PointsApi(END_POINT, AUTHORIZATION)
+});
+const offersModel = new OffersModel({
+  offersApi: new OffersApi(END_POINT, AUTHORIZATION)
+});
 const filterModel = new FilterModel();
-const destinationsModel = new DestinationsModel();
+const destinationsModel = new DestinationsModel({
+  destinationsApi: new DestinationsApi(END_POINT, AUTHORIZATION)
+});
 
 const tripEventsPresenter = new TripEventsPresenter({
   tpipEventsContainer : tripEvents,
@@ -45,6 +58,8 @@ function handleNewPointButtonClick() {
 }
 
 render(newPointButtonComponent, mainContainer);
+offersModel.init();
+destinationsModel.init();
 filterPresenter.init();
 tripEventsPresenter.init();
-
+pointsModel.init();

src/model/destinations-model.js

@@ -1,17 +1,32 @@
-import { destinations } from '../mock/destination.js';
-
 export default class DestinationsModel {
-  #destinations = destinations;
+  #destinations = [];
+  #destinationsApi = null;
+
+  constructor({destinationsApi}) {
+    this.#destinationsApi = destinationsApi;
+  }
 
   get destinations(){
     return this.#destinations;
   }
 
+  async init() {
+    try {
+      this.#destinations = await this.#destinationsApi.destinations;
+    } catch(err) {
+      this.#destinations = [];
+    }
+  }
+
+  getCityNames() {
+    return this.#destinations.map((item) => item.name);
+  }
+
   getDestinationById(id) {
-    return this.destinations.find((destination) => destination.id === id);
+    return this.#destinations.find((destination) => destination.id === id);
   }
 
   getDestinationByName(name) {
-    return this.destinations.find((destination) => destination.name === name);
+    return this.#destinations.find((destination) => destination.name === name);
   }
 }

src/model/offers-model.js

@@ -1,12 +1,23 @@
-import { offers } from '../mock/offers.js';
-
 export default class OffersModel {
-  #offers = offers;
+  #offers = [];
+  #offersApi = null;
+
+  constructor({offersApi}) {
+    this.#offersApi = offersApi;
+  }
 
   get offers(){
     return this.#offers;
   }
 
+  async init() {
+    try {
+      this.#offers = await this.#offersApi.offers;
+    } catch(err) {
+      this.#offers = [];
+    }
+  }
+
   getOfferByType(type){
     return this.#offers.find((offer) => offer.type === type);
   }

src/model/points-model.js

@@ -1,27 +1,48 @@
-import { points } from '../mock/points.js';
 import Observable from '../framework/observable.js';
-
+import {UpdateType} from '../const.js';
 export default class PointsModel extends Observable {
-  #points = points;
+  #pointsApi = null;
+  #points = [];
+
+  constructor({pointsApi}) {
+    super();
+    this.#pointsApi = pointsApi;
+  }
 
   get points(){
     return this.#points;
   }
 
-  updatePoint(updateType, update) {
+  async init() {
+    try {
+      const points = await this.#pointsApi.points;
+      this.#points = points.map(this.#adaptToClient);
+    } catch(err) {
+      this.#points = [];
+    }
+
+    this._notify(UpdateType.INIT);
+  }
+
+  async updatePoint(updateType, update) {
     const index = this.#points.findIndex((point) => point.id === update.id);
 
     if (index === -1) {
       throw new Error('Can\'t update unexisting point');
     }
 
-    this.#points = [
-      ...this.#points.slice(0, index),
-      update,
-      ...this.#points.slice(index + 1),
-    ];
-
-    this._notify(updateType, update);
+    try {
+      const response = await this.#pointsApi.updatePoint(update);
+      const updatedPoint = this.#adaptToClient(response);
+      this.#points = [
+        ...this.#points.slice(0, index),
+        updatedPoint,
+        ...this.#points.slice(index + 1),
+      ];
+      this._notify(updateType, updatedPoint);
+    } catch(err) {
+      throw new Error('Can\'t update task');
+    }
   }
 
   addPoint(updateType, update) {
@@ -47,4 +68,20 @@ export default class PointsModel extends Observable {
 
     this._notify(updateType);
   }
+
+  #adaptToClient(point) {
+    const adaptedTask = {...point,
+      basePrice: point['base_price'],
+      dateFrom: new Date(point['date_from']),
+      dateTo: new Date(point['date_to']),
+      isFavorite: point['is-favorite']
+    };
+
+    delete adaptedTask['base_price'];
+    delete adaptedTask['date_from'];
+    delete adaptedTask['date_to'];
+    delete adaptedTask['is-favorite'];
+
+    return adaptedTask;
+  }
 }

src/presenter/trip-events-presenter.js

@@ -1,8 +1,11 @@
 import SortView from '../view/sort-view.js';
 import ListView from '../view/list-view.js';
+import LoadingView from '../view/loading-view.js';
 import ListEmptyView from '../view/list-empty-view.js';
+
 import TripPointPresenter from './trip-point-presenter.js';
 import NewPointPresenter from './new-point-presenter.js';
+
 import {render, remove} from '../framework/render.js';
 import { UserAction, UpdateType, SortType, FilterType} from '../const.js';
 import { calculateDateDifference, filter } from '../util.js';
@@ -12,6 +15,7 @@ export default class TripEventsPresenter {
   #listComponent = new ListView();
   #listEmptyComponent = null;
   #sortComponent = null;
+  #loadingComponent = new LoadingView();
 
   #tpipEventsContainer = null;
   #pointsModel = null;
@@ -25,6 +29,7 @@ export default class TripEventsPresenter {
   #newTaskPresenter = null;
 
   #filterType = null;
+  #isLoading = true;
 
   constructor({tpipEventsContainer, pointsModel, offersModel, destinationsModel, filterModel, onNewTaskDestroy}) {
     this.#tpipEventsContainer = tpipEventsContainer;
@@ -100,6 +105,12 @@ export default class TripEventsPresenter {
         this.#clearBoard(true);
         this.#renderBoard();
         break;
+      case UpdateType.INIT:
+        this.#isLoading = false;
+        remove(this.#loadingComponent);
+        this.#clearBoard(true);
+        this.#renderBoard();
+        break;
     }
   };
 
@@ -123,9 +134,14 @@ export default class TripEventsPresenter {
     render(this.#listComponent, this.#tpipEventsContainer);
   };
 
+  #renderLoading() {
+    render(this.#loadingComponent, this.#tpipEventsContainer);
+  }
+
   #renderListEmpty = () => {
     this.#listEmptyComponent = new ListEmptyView(this.#filterType);
     render(this.#listEmptyComponent, this.#tpipEventsContainer);
+    remove(this.#loadingComponent);
   };
 
   #renderPoints = (points) => {
@@ -151,6 +167,11 @@ export default class TripEventsPresenter {
   };
 
   #renderBoard() {
+    if (this.#isLoading) {
+      this.#renderLoading();
+      return;
+    }
+
     this.#renderSort();
     this.#renderList();
     this.#renderPoints(this.points);