Merge pull request htmlacademy-univer-js2#22 from DashaKukartseva/master

package.json

@@ -24,11 +24,11 @@
     "@babel/preset-env": "7.24.0",
     "babel-loader": "9.1.3",
     "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.11.0",
+    "css-loader": "^6.11.0",
     "eslint": "8.28.0",
     "eslint-config-htmlacademy": "8.0.0",
     "html-webpack-plugin": "5.6.0",
-    "style-loader": "3.3.4",
+    "style-loader": "^3.3.4",
     "webpack": "5.75.0",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1"

src/main.js

@@ -1,25 +1,35 @@
-import TripPointsPresenter from './presenter/trippresenter.js';
-import FilterPresenter from './presenter/filterpresenter.js';
-import DestinationsModel from './model/destinations-model';
+import TripPointsPresenter from './presenters/trippresenter.js';
+import FilterPresenter from './presenters/filterpresenter.js';
+import DestinationsModel from './models/destinations.js';
 import NewPointButtonView from './view/newpoint.js';
-import OffersModel from './model/offers';
-import PointsModel from './model/points';
+import OffersModel from './models/offers.js';
+import PointsModel from './models/points.js';
 import pointApiService from './service/apiservice.js';
-import FilterModel from './model/filters.js';
+import FilterModel from './models/filters.js';
 import { render, RenderPosition } from './framework/render.js';
 
 const AUTHORIZATION = 'Basic dd89j3m2h10l';
 const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip';
-const apiService = new pointApiService(END_POINT, AUTHORIZATION);
-
-const destinationsModel = new DestinationsModel( apiService);
-const offersModel = new OffersModel( apiService);
-const pointsModel = new PointsModel( apiService, offersModel, destinationsModel);
-const filterModel = new FilterModel();
 
 const filterContainer = document.querySelector('.trip-controls__filters');
 const tripMainContainer = document.querySelector('.trip-main');
 const tripContainer = document.querySelector('.trip-events');
+const filterModel = new FilterModel();
+const eventapiService = new pointApiService(END_POINT, AUTHORIZATION);
+const destinationsModel = new DestinationsModel( eventapiService);
+const offersModel = new OffersModel( eventapiService);
+const pointsModel = new PointsModel( {
+  eventapiService,
+  destinationsModel,
+  offersModel});
+
+const newPointButtonComponent = new NewPointButtonView({
+  onClick: handleNewPointButtonClick
+});
+
+function handleNewPointClick() {
+  newPointButtonComponent.element.disabled = true;
+}
 
 const routePresenter = new TripPointsPresenter({
   tripInfoContainer: tripMainContainer,
@@ -29,7 +39,7 @@ const routePresenter = new TripPointsPresenter({
   pointsModel,
   filterModel,
   onNewPointDestroy: handleNewPointFormClose,
-  onNewPointClick: handleNewPointButtonClick,
+  onNewPointClick: handleNewPointClick,
 });
 
 const filterPresenter = new FilterPresenter({
@@ -38,17 +48,13 @@ const filterPresenter = new FilterPresenter({
   pointsModel
 });
 
-const newPointButtonComponent = new NewPointButtonView({
-  onClick: handleNewPointButtonClick
-});
-
 function handleNewPointFormClose() {
   newPointButtonComponent.element.disabled = false;
 }
 
 function handleNewPointButtonClick() {
   routePresenter.createEvent();
-  handleNewPointButtonClick();
+  handleNewPointClick();
 }
 
 render(newPointButtonComponent, tripMainContainer, RenderPosition.BEFOREEND);

src/models/filters.js

@@ -1,5 +1,5 @@
 import Observable from '../framework/observable.js';
-import { FilterType } from '../const';
+import { FilterType } from '../const.js';
 
 export default class FilterModel extends Observable {
   #filter = FilterType.EVERYTHING;

src/models/points.js

@@ -1,22 +1,22 @@
 import Observable from '../framework/observable.js';
-import { updateItem, adaptToClient } from '../utils.js';
+import { updateItem, adaptToClient } from '../presenters/utils.js';
 import { UpdateType } from '../const.js';
 
 export default class PointsModel extends Observable {
-  #apiService = null;
+  #eventsApiService = null;
   #destinationsModel = null;
   #offersModel = null;
-  #points = [];
+  #events = [];
 
-  constructor ({pointApiService, destinationsModel, offersModel}) {
+  constructor({eventsApiService, destinationsModel, offersModel}) {
     super();
-    this.#apiService = pointApiService;
+    this.#eventsApiService = eventsApiService;
     this.#destinationsModel = destinationsModel;
     this.#offersModel = offersModel;
   }
 
   get() {
-    return this.#points;
+    return this.#events;
   }
 
   async init() {
@@ -25,52 +25,43 @@ export default class PointsModel extends Observable {
         this.#destinationsModel.init(),
         this.#offersModel.init()
       ]);
-
-      const points = await this.#apiService.points;
-      this.#points = points.map(adaptToClient);
+      const events = await this.#eventsApiService.events;
+      this.#events = events.map(adaptToClient);
       this._notify(UpdateType.INIT, {isError: false});
-    }
-
-    catch(err) {
-      this.#points = [];
+    } catch(err) {
+      this.#events = [];
       this._notify(UpdateType.INIT, {isError: true});
     }
   }
 
   async updateEvent(updateType, update) {
     try {
-      const response = await this.#apiService.updateEvent(update);
-      const updatedPoint = adaptToClient(response);
-      this.#points = updateItem(this.#points, updatedPoint);
-      this._notify(updateType, updatedPoint);
-    }
-
-    catch(err) {
+      const response = await this.#eventsApiService.updateEvent(update);
+      const updatedEvent = adaptToClient(response);
+      this.#events = updateItem(this.#events, updatedEvent);
+      this._notify(updateType, updatedEvent);
+    } catch(err) {
       throw new Error('Can\'t update event');
     }
   }
 
   async addEvent(updateType, update) {
     try {
-      const response = await this.#apiService.addEvent(update);
-      const newPoint = adaptToClient(response);
-      this.#points.push(newPoint);
-      this._notify(updateType, newPoint);
-    }
-
-    catch(err) {
+      const response = await this.#eventsApiService.addEvent(update);
+      const newEvent = adaptToClient(response);
+      this.#events.push(newEvent);
+      this._notify(updateType, newEvent);
+    } catch(err) {
       throw new Error('Can\'t add event');
     }
   }
 
   async deleteEvent(updateType, update) {
     try {
-      await this.#apiService.deleteEvent(update);
-      this.#points = this.#points.filter((pointItem) => pointItem.id !== update.id);
+      await this.#eventsApiService.deleteEvent(update);
+      this.#events = this.#events.filter((eventItem) => eventItem.id !== update.id);
       this._notify(updateType);
-    }
-
-    catch(err) {
+    } catch(err) {
       throw new Error('Can\'t delete event');
     }
   }

src/presenters/filterpresenter.js

@@ -1,7 +1,7 @@
 import { render, replace, remove } from '../framework/render.js';
 import FilterView from '../view/filter.js';
-import { filter } from '../utils.js';
-import { UpdateType, FilterType} from '../const';
+import { filter } from './utils.js';
+import { UpdateType, FilterType} from '../const.js';
 
 export default class FilterPresenter {
   #filterContainer = null;

src/presenters/newpointpresenter.js

@@ -1,82 +1,83 @@
 import { remove, render, RenderPosition } from '../framework/render.js';
 import EditablePointView from '../view/modpoint.js';
 import {UserAction, UpdateType, EditType} from '../const.js';
-import { isEscapeKey, } from '../utils.js';
+import { isEscapeKey, } from './utils.js';
 
 export default class NewPointPresenter {
-  #pointListContainer = null;
+  #eventListContainer = null;
   #destinationsModel = null;
   #offersModel = null;
   #handleDataChange = null;
   #handleDestroy = null;
-  #pointEditComponent = null;
 
-  constructor({pointListContainer, destinationsModel, offersModel, onDataChange, onDestroy}) {
-    this.#pointListContainer = pointListContainer;
+  #eventEditComponent = null;
+
+  constructor({eventListContainer, destinationsModel, offersModel, onDataChange, onDestroy}) {
+    this.#eventListContainer = eventListContainer;
     this.#destinationsModel = destinationsModel;
     this.#offersModel = offersModel;
     this.#handleDataChange = onDataChange;
     this.#handleDestroy = onDestroy;
   }
 
   init() {
-    if (this.#pointEditComponent !== null) {
+    if (this.#eventEditComponent !== null) {
       return;
     }
 
-    this.#pointEditComponent = new EditablePointView({
-      pointDestination: this.#destinationsModel.get(),
-      pointOffers: this.#offersModel.get(),
+    this.#eventEditComponent = new EditablePointView({
+      eventDestination: this.#destinationsModel.get(),
+      eventOffers: this.#offersModel.get(),
       onEditSubmit: this.#handleEditSubmit,
       onEditReset: this.#handleResetClick,
-      pointType: EditType.CREATING
+      eventType: EditType.CREATING
     });
 
-    render(this.#pointEditComponent, this.#pointListContainer.element, RenderPosition.AFTERBEGIN);
+    render(this.#eventEditComponent, this.#eventListContainer.element, RenderPosition.AFTERBEGIN);
 
     document.addEventListener('keydown', this.#escKeyDownHandler);
   }
 
   destroy() {
-    if (this.#pointEditComponent === null) {
+    if (this.#eventEditComponent === null) {
       return;
     }
 
     this.#handleDestroy();
 
-    remove(this.#pointEditComponent);
-    this.#pointEditComponent = null;
+    remove(this.#eventEditComponent);
+    this.#eventEditComponent = null;
 
     document.removeEventListener('keydown', this.#escKeyDownHandler);
   }
 
   setSaving() {
-    this.#pointEditComponent.updateElement({
+    this.#eventEditComponent.updateElement({
       isDisabled: true,
       isSaving: true,
     });
   }
 
-  #handleEditSubmit = (point) => {
-    this.#handleDataChange(
-      UserAction.ADD_EVENT,
-      UpdateType.MINOR,
-      point
-    );
-  };
-
   setAborting() {
     const resetFormState = () => {
-      this.#pointEditComponent.updateElement({
+      this.#eventEditComponent.updateElement({
         isDisabled: false,
         isSaving: false,
         isDeleting: false,
       });
     };
 
-    this.#pointEditComponent.shake(resetFormState);
+    this.#eventEditComponent.shake(resetFormState);
   }
 
+  #handleEditSubmit = (event) => {
+    this.#handleDataChange(
+      UserAction.ADD_EVENT,
+      UpdateType.MINOR,
+      event,
+    );
+  };
+
   #handleResetClick = () => {
     this.destroy();
   };