From 96bc265fd51d66db8cfb0e3329cc7518b32e71d8 Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Mon, 27 May 2024 02:03:03 +0500 Subject: [PATCH 1/4] =?UTF-8?q?8.7.=20=D0=9F=D1=80=D0=B8=D1=88=D1=91=D0=BB?= =?UTF-8?q?,=20=D1=83=D0=B2=D0=B8=D0=B4=D0=B5=D0=BB,=20=D0=B7=D0=B0=D0=B3?= =?UTF-8?q?=D1=80=D1=83=D0=B7=D0=B8=D0=BB=20(=D1=87=D0=B0=D1=81=D1=82?= =?UTF-8?q?=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 25 +------- package.json | 3 +- src/api-service/points-api-service.js | 22 +++++++ src/const.js | 19 +++++- src/model/point-model.js | 34 ++++++----- src/presenter/filter-presenter.js | 5 +- src/presenter/new-point-presenter.js | 21 ++++++- src/presenter/point-presenter.js | 36 ++++++++++- src/presenter/trip-presenter.js | 27 +++++++-- src/template/editing-form-template.js | 86 +++++++++++++++++++-------- src/view/editing-form-view.js | 25 +++++++- src/view/filter-points-view.js | 4 +- 12 files changed, 225 insertions(+), 82 deletions(-) diff --git a/package-lock.json b/package-lock.json index 26a7862..e739011 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,7 @@ "dependencies": { "dayjs": "1.11.10", "flatpickr": "^4.6.13", - "he": "^1.2.0", - "nanoid": "^5.0.7" + "he": "^1.2.0" }, "devDependencies": { "@babel/core": "^7.20.5", @@ -5502,23 +5501,6 @@ "multicast-dns": "cli.js" } }, - "node_modules/nanoid": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz", - "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "bin": { - "nanoid": "bin/nanoid.js" - }, - "engines": { - "node": "^18 || >=20" - } - }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -11820,11 +11802,6 @@ "thunky": "^1.0.2" } }, - "nanoid": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz", - "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==" - }, "natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", diff --git a/package.json b/package.json index 62ef83d..eb9b4b5 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "dependencies": { "dayjs": "1.11.10", "flatpickr": "^4.6.13", - "he": "^1.2.0", - "nanoid": "^5.0.7" + "he": "^1.2.0" } } diff --git a/src/api-service/points-api-service.js b/src/api-service/points-api-service.js index d5a512f..2ddb793 100644 --- a/src/api-service/points-api-service.js +++ b/src/api-service/points-api-service.js @@ -7,6 +7,28 @@ export default class PointsApiService extends ApiService { .then(ApiService.parseResponse); } + async addPoint(point) { + const response = await this._load({ + url: 'points', + method: Method.POST, + body: JSON.stringify(this.#adaptToServer(point)), + headers: new Headers({'Content-Type': 'application/json'}), + }); + + const parsedResponse = await ApiService.parseResponse(response); + + return parsedResponse; + } + + async deletePoint(point) { + const response = await this._load({ + url: `points/${point.id}`, + method: Method.DELETE, + }); + + return response; + } + async updatePoint(point) { const response = await this._load({ url: `points/${point.id}`, diff --git a/src/const.js b/src/const.js index 9a383a4..32797ad 100644 --- a/src/const.js +++ b/src/const.js @@ -78,6 +78,11 @@ const UserAction = { DELETE_POINT: 'DELETE_POINT', }; +const EditingType = { + UPDATE: 'UPDATE', + NEW: 'NEW' +}; + const UpdateType = { PATCH: 'PATCH', MINOR: 'MINOR', @@ -88,6 +93,16 @@ const UpdateType = { const Method = { GET: 'GET', PUT: 'PUT', + POST: 'POST', + DELETE: 'DELETE', +}; + +const ButtonLabels = { + CANCEL: 'Cancel', + DELETE_DEFAULT: 'Delete', + DELETE_IN_PROGRESS: 'Deleting...', + SAVE_DEFAULT: 'Save', + SAVE_IN_PROGRESS: 'Saving...' }; export {POINT_EMPTY, @@ -99,5 +114,7 @@ export {POINT_EMPTY, Mode, SortType, UserAction, + EditingType, UpdateType, - Method}; + Method, + ButtonLabels}; diff --git a/src/model/point-model.js b/src/model/point-model.js index 5aca30f..77a341c 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -46,28 +46,34 @@ export default class PointsModel extends Observable { } } - addPoint = (updateType, update) => { - this.#points = [ - update, - ...this.#points, - ]; - - this._notify(updateType, update); + addPoint = async (updateType, update) => { + try { + const response = await this.#pointsApiService.addPoint(update); + const newPoint = this.#adaptToClient(response); + this.#points.unshift(newPoint); + this._notify(updateType, newPoint); + } catch (err) { + throw new Error('Can\'t add point'); + } }; - deletePoint = (updateType, update) => { + deletePoint = async (updateType, update) => { const index = this.#points.findIndex((point) => point.id === update.id); if (index === -1) { throw new Error('Can\'t delete unexisting point'); } - this.#points = [ - ...this.#points.slice(0, index), - ...this.#points.slice(index + 1), - ]; - - this._notify(updateType); + try { + await this.#pointsApiService.deletePoint(update); + this.#points = [ + ...this.#points.slice(0, index), + ...this.#points.slice(index + 1), + ]; + this._notify(updateType); + } catch (err) { + throw new Error('Can\'t delete point'); + } }; #adaptToClient = (point) => { diff --git a/src/presenter/filter-presenter.js b/src/presenter/filter-presenter.js index c73aa11..4d25ec5 100644 --- a/src/presenter/filter-presenter.js +++ b/src/presenter/filter-presenter.js @@ -10,6 +10,8 @@ export default class FilterPresenter { #filterComponent = null; + #currentFilter = null; + constructor({filterContainer, filterModel, pointsModel}) { this.#filterContainer = filterContainer; this.#filterModel = filterModel; @@ -26,12 +28,13 @@ export default class FilterPresenter { } init() { + this.#currentFilter = this.#filterModel.filter; const filters = this.filters; const prevFilterComponent = this.#filterComponent; this.#filterComponent = new FilterPointsView({ filters, - currentFilterType: this.#filterModel.filter, + currentFilterType: this.#currentFilter, onFilterTypeChange: this.#handleFilterTypeChange }); diff --git a/src/presenter/new-point-presenter.js b/src/presenter/new-point-presenter.js index f3dfd89..70fa86f 100644 --- a/src/presenter/new-point-presenter.js +++ b/src/presenter/new-point-presenter.js @@ -1,6 +1,5 @@ import {remove, render, RenderPosition} from '../framework/render.js'; import EditPointView from '../view/editing-form-view.js'; -import {nanoid} from 'nanoid'; import {UserAction, UpdateType} from '../const.js'; export default class NewPointPresenter { @@ -31,6 +30,24 @@ export default class NewPointPresenter { document.addEventListener('keydown', this.#escKeyDownHandler); } + setSaving() { + this.#pointEditComponent.updateElement({ + isDisabled: true, + isSaving: true + }); + } + + setAborting() { + const resetFormState = () => { + this.#pointEditComponent.updateElement({ + isDisabled: false, + isSaving: false, + isDeleting: false + }); + }; + this.#pointEditComponent.shake(resetFormState); + } + destroy() { if (this.#pointEditComponent === null) { return; @@ -48,7 +65,7 @@ export default class NewPointPresenter { this.#handleDataChange( UserAction.ADD_POINT, UpdateType.MINOR, - {id: nanoid(), ...point}, + point, ); this.destroy(); }; diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index 359445a..fdc7bf2 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -72,6 +72,7 @@ export default class PointPresenter { } if (this.#mode === Mode.EDITING) { replace(this.#pointEditComponent, prevPointEditComponent); + this.#mode = Mode.DEFAULT; } remove(prevPointComponent); @@ -79,6 +80,39 @@ export default class PointPresenter { /* console.log('Rendering point component to:', this.#pointListContainer); */ } + setSaving() { + if (this.#mode === PointMode.EDIT) { + this.#pointEditComponent.updateElement({ + isDisabled: false, + isSaving: true + }); + } + } + + setDeleting() { + if (this.#mode === Mode.EDITING) { + this.#pointEditComponent.updateElement({ + isDisabled: true, + isDeleting: true + }); + } + } + + setAborting() { + if (this.#mode === Mode.DEFAULT) { + this.#pointComponent.shake(); + return; + } + const resetFormState = () => { + this.#pointEditComponent.updateElement({ + isDisabled: false, + isSaving: false, + isDeleting: false, + }); + }; + this.#pointEditComponent.shake(resetFormState); + } + destroy() { remove(this.#pointComponent); remove(this.#pointEditComponent); @@ -124,7 +158,7 @@ export default class PointPresenter { update, ); - this.#replaceEditToPoint(); + //this.#replaceEditToPoint(); }; #pointEditClickHandler = () => { diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index 2df60f2..8b40ad9 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -6,7 +6,7 @@ import LoadingView from '../view/loading-view.js'; import { remove, render, RenderPosition } from '../framework/render.js'; import PointPresenter from './point-presenter.js'; -//import NewPointPresenter from './new-point-presenter.js'; +import NewPointPresenter from './new-point-presenter.js'; import { sortPointsByTime, sortPointsByPrice } from '../utils/points.js'; import { filter } from '../utils/filter.js'; @@ -39,7 +39,7 @@ export default class TripPresenter { this.#offersModel = offersModel; this.#filterModel = filterModel; - this.#newPointPresenter = new EditPointView({ + this.#newPointPresenter = new NewPointPresenter({ pointListContainer: this.#listComponent.element, onDataChange: this.#handleViewAction, onDestroy: onNewPointDestroy @@ -145,16 +145,31 @@ export default class TripPresenter { this.#pointPresenters.forEach((presenter) => presenter.resetView()); }; - #handleViewAction = (actionType, updateType, update) => { + #handleViewAction = async (actionType, updateType, update) => { switch(actionType) { case UserAction.UPDATE_POINT: - this.#pointsModel.updatePoint(updateType, update); + this.#pointPresenters.get(update.id).setSaving(); + try { + await this.#pointsModel.update(updateType, update); + } catch (err) { + this.#pointPresenters.get(update.id).setAborting(); + } break; case UserAction.ADD_POINT: - this.#pointsModel.addPoint(updateType, update); + this.#newPointPresenter.setSaving(); + try { + await this.#pointsModel.add(updateType, update); + } catch (err) { + this.#newPointPresenter.setAborting(); + } break; case UserAction.DELETE_POINT: - this.#pointsModel.deletePoint(updateType, update); + this.#pointPresenters.get(update.id).setDeleting(); + try { + await this.#pointsModel.remove(updateType, update); + } catch (err) { + this.#pointPresenters.get(update.id).setAborting(); + } break; } }; diff --git a/src/template/editing-form-template.js b/src/template/editing-form-template.js index b1d6bf6..e9013a7 100644 --- a/src/template/editing-form-template.js +++ b/src/template/editing-form-template.js @@ -1,12 +1,14 @@ -import { POINT_TYPE, OFFERS } from '../const'; +import { POINT_TYPE, OFFERS, ButtonLabels, EditingType } from '../const'; import { formatFullDate } from '../utils/day'; import { getRandomValue } from '../utils/common'; -//import he from 'he'; +import he from 'he'; -function createPointType() { +function createPointType(pointId, currentType, isDisabled) { return POINT_TYPE.map((type) => `
- - + +
`).join(''); } @@ -21,60 +23,92 @@ function createPointOffer() { `).join(''); } -function createEditPointTemplate({point}) { +function generateDestinations(destinations) { + return ( `${destinations.map((destination) => ``).join('')} `); +} + +function createSaveButtonTemplate({ isSaving, isDisabled }) { + const label = isSaving ? ButtonLabels.SAVE_IN_PROGRESS : ButtonLabels.SAVE_DEFAULT; + return ``; +} + +function createResetButtonTemplate({ type, isDisabled, isDeleting }) { + let label; + + if (type === EditingType.NEW) { + label = ButtonLabels.CANCEL; + } else { + label = isDeleting ? ButtonLabels.DELETE_IN_PROGRESS : ButtonLabels.DELETE_DEFAULT; + } + return ``; +} + +function createControlsButtonsTemplate({ type, isSaving, isDeleting, isDisabled }) { + return `${createResetButtonTemplate(type)} + ${type === EditingType.UPDATE ? createRollupBtn() : ''} + ${createSaveButtonTemplate({ isSaving, isDisabled })} + ${createResetButtonTemplate({ type, isDeleting, isDisabled })} + ${type === EditingType.UPDATE ? createRollupBtn(isDisabled) : ''}`; +} + +function createEditPointTemplate({state, pointDestinations, pointOffers}) { + const { point, isDisabled, isSaving, isDeleting } = state; + const { id, price, dateFrom, dateTo, offers, type } = point; + const currentDestination = pointDestinations.find((destination) => destination.id === point.destination); + const currentOffers = pointOffers.find((offer) => offer.type === type); + const destinationName = (currentDestination) ? currentDestination.name : ''; return `
  • -
    -
    - + — - +
    -
    - - - + ${createControlsButtonsTemplate({ type, isSaving, isDeleting, isDisabled })}
    diff --git a/src/view/editing-form-view.js b/src/view/editing-form-view.js index 488fe2e..99662c7 100644 --- a/src/view/editing-form-view.js +++ b/src/view/editing-form-view.js @@ -2,6 +2,8 @@ import AbstractStatefulView from '../framework/view/abstract-stateful-view.js'; import { createEditPointTemplate } from '../template/editing-form-template.js'; import { POINT_EMPTY } from '../const.js'; +import dayjs from 'dayjs'; + import flatpickr from 'flatpickr'; import 'flatpickr/dist/flatpickr.min.css'; @@ -29,7 +31,7 @@ export default class EditPointView extends AbstractStatefulView { get template() { return createEditPointTemplate({ - point: this._state, + state: this._state, pointDestinations: this.#pointDestinations, pointOffers: this.#pointOffers }); @@ -196,6 +198,23 @@ export default class EditPointView extends AbstractStatefulView { ); }; - static parsePointToState = (point) => ({point}); - static parseStateToPoint = (state) => ({...state}); + static parsePointToState = (point) => ({ + ...point, + isDisabled: false, + isSaving: false, + isDeleting: false, + }); + static parseStateToPoint = (state) => { + const point = {...state, + dateFrom: dayjs(state.dateFrom).format(), + dateTo: dayjs(state.dateTo).format(), + basePrice: Number(state.basePrice) + }; + + delete point.isDisabled; + delete point.isSaving; + delete point.isDeleting; + + return point; + }; } diff --git a/src/view/filter-points-view.js b/src/view/filter-points-view.js index a10f482..c6d9328 100644 --- a/src/view/filter-points-view.js +++ b/src/view/filter-points-view.js @@ -6,10 +6,10 @@ export default class FilterPointsView extends AbstractView { #currentFilter = null; #handleFilterTypeChange = null; - constructor(filters, currentFilterType, onFilterTypeChange) { + constructor(filters, currentFilter, onFilterTypeChange) { super(); this.#filters = filters; - this.#currentFilter = currentFilterType; + this.#currentFilter = currentFilter; this.#handleFilterTypeChange = onFilterTypeChange; this.element.addEventListener('change', this.#filterTypeChangeHandler); From c13336502433ccb70a3351dc62f2ea8f512c620c Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Mon, 27 May 2024 02:08:59 +0500 Subject: [PATCH 2/4] =?UTF-8?q?8.7.=20=D0=9F=D1=80=D0=B8=D1=88=D1=91=D0=BB?= =?UTF-8?q?,=20=D1=83=D0=B2=D0=B8=D0=B4=D0=B5=D0=BB,=20=D0=B7=D0=B0=D0=B3?= =?UTF-8?q?=D1=80=D1=83=D0=B7=D0=B8=D0=BB=20(=D1=87=D0=B0=D1=81=D1=82?= =?UTF-8?q?=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/presenter/point-presenter.js | 2 +- src/presenter/trip-presenter.js | 2 +- src/template/editing-form-template.js | 6 +++--- src/view/editing-form-view.js | 1 + 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index fdc7bf2..6e6dc22 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -81,7 +81,7 @@ export default class PointPresenter { } setSaving() { - if (this.#mode === PointMode.EDIT) { + if (this.#mode === Mode.EDIT) { this.#pointEditComponent.updateElement({ isDisabled: false, isSaving: true diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index 8b40ad9..b2e4f3e 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -11,7 +11,7 @@ import NewPointPresenter from './new-point-presenter.js'; import { sortPointsByTime, sortPointsByPrice } from '../utils/points.js'; import { filter } from '../utils/filter.js'; import { SortType, UserAction, UpdateType, FilterType } from '../const.js'; -import EditPointView from '../view/editing-form-view.js'; +//import EditPointView from '../view/editing-form-view.js'; export default class TripPresenter { #listComponent = new ListView(); diff --git a/src/template/editing-form-template.js b/src/template/editing-form-template.js index e9013a7..576bb96 100644 --- a/src/template/editing-form-template.js +++ b/src/template/editing-form-template.js @@ -53,11 +53,11 @@ function createControlsButtonsTemplate({ type, isSaving, isDeleting, isDisabled ${type === EditingType.UPDATE ? createRollupBtn(isDisabled) : ''}`; } -function createEditPointTemplate({state, pointDestinations, pointOffers}) { +function createEditPointTemplate({state, pointDestinations, /* pointOffers */}) { const { point, isDisabled, isSaving, isDeleting } = state; - const { id, price, dateFrom, dateTo, offers, type } = point; + const { id, price, /* dateFrom, dateTo, offers, */ type } = point; const currentDestination = pointDestinations.find((destination) => destination.id === point.destination); - const currentOffers = pointOffers.find((offer) => offer.type === type); + //const currentOffers = pointOffers.find((offer) => offer.type === type); const destinationName = (currentDestination) ? currentDestination.name : ''; return `
  • diff --git a/src/view/editing-form-view.js b/src/view/editing-form-view.js index 99662c7..53f9c23 100644 --- a/src/view/editing-form-view.js +++ b/src/view/editing-form-view.js @@ -204,6 +204,7 @@ export default class EditPointView extends AbstractStatefulView { isSaving: false, isDeleting: false, }); + static parseStateToPoint = (state) => { const point = {...state, dateFrom: dayjs(state.dateFrom).format(), From 21fa4f5b95f2a52be3089fdf0a03f8e53ad48ecf Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Mon, 27 May 2024 02:12:51 +0500 Subject: [PATCH 3/4] =?UTF-8?q?8.7.=20=D0=9F=D1=80=D0=B8=D1=88=D1=91=D0=BB?= =?UTF-8?q?,=20=D1=83=D0=B2=D0=B8=D0=B4=D0=B5=D0=BB,=20=D0=B7=D0=B0=D0=B3?= =?UTF-8?q?=D1=80=D1=83=D0=B7=D0=B8=D0=BB=20(=D1=87=D0=B0=D1=81=D1=82?= =?UTF-8?q?=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/template/editing-form-template.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/template/editing-form-template.js b/src/template/editing-form-template.js index 576bb96..9762045 100644 --- a/src/template/editing-form-template.js +++ b/src/template/editing-form-template.js @@ -45,12 +45,19 @@ function createResetButtonTemplate({ type, isDisabled, isDeleting }) { ${isDisabled ? 'disabled' : ''}>${label}`; } +function createRollupButton(isDisabled) { + return ` + `; +} + function createControlsButtonsTemplate({ type, isSaving, isDeleting, isDisabled }) { return `${createResetButtonTemplate(type)} - ${type === EditingType.UPDATE ? createRollupBtn() : ''} + ${type === EditingType.UPDATE ? createRollupButton() : ''} ${createSaveButtonTemplate({ isSaving, isDisabled })} ${createResetButtonTemplate({ type, isDeleting, isDisabled })} - ${type === EditingType.UPDATE ? createRollupBtn(isDisabled) : ''}`; + ${type === EditingType.UPDATE ? createRollupButton(isDisabled) : ''}`; } function createEditPointTemplate({state, pointDestinations, /* pointOffers */}) { From fa697268b259ca1051189aea0a82d086ad2e1875 Mon Sep 17 00:00:00 2001 From: Darya Palitsyna Date: Mon, 27 May 2024 02:14:50 +0500 Subject: [PATCH 4/4] =?UTF-8?q?8.7.=20=D0=9F=D1=80=D0=B8=D1=88=D1=91=D0=BB?= =?UTF-8?q?,=20=D1=83=D0=B2=D0=B8=D0=B4=D0=B5=D0=BB,=20=D0=B7=D0=B0=D0=B3?= =?UTF-8?q?=D1=80=D1=83=D0=B7=D0=B8=D0=BB=20(=D1=87=D0=B0=D1=81=D1=82?= =?UTF-8?q?=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/editing-form-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/editing-form-view.js b/src/view/editing-form-view.js index 53f9c23..732963a 100644 --- a/src/view/editing-form-view.js +++ b/src/view/editing-form-view.js @@ -204,7 +204,7 @@ export default class EditPointView extends AbstractStatefulView { isSaving: false, isDeleting: false, }); - + static parseStateToPoint = (state) => { const point = {...state, dateFrom: dayjs(state.dateFrom).format(),