From 56282b03e339c694b8fb42860bd7445546a12ce8 Mon Sep 17 00:00:00 2001 From: Kirill Date: Sun, 12 May 2024 18:59:14 +0500 Subject: [PATCH 1/2] =?UTF-8?q?6.6.=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=B5=D0=BA=D0=B0=20(=D1=87?= =?UTF-8?q?=D0=B0=D1=81=D1=82=D1=8C=201)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/framework/view/abstract-stateful-view.js | 2 - src/main.js | 2 + src/mock/const.js | 8 +- src/mock/destination.js | 4 +- src/model/destination-model.js | 4 + src/presenter/point-presenter.js | 6 +- src/presenter/trip-presenter.js | 10 +- src/service/mock-service.js | 2 +- src/utils.js | 4 +- src/view/edit-point-view.js | 132 +++++++++++++++---- 10 files changed, 131 insertions(+), 43 deletions(-) diff --git a/src/framework/view/abstract-stateful-view.js b/src/framework/view/abstract-stateful-view.js index 66f68ae..3dc16a0 100644 --- a/src/framework/view/abstract-stateful-view.js +++ b/src/framework/view/abstract-stateful-view.js @@ -15,9 +15,7 @@ export default class AbstractStatefulView extends AbstractView { if (!update) { return; } - this._setState(update); - this.#rerenderElement(); } diff --git a/src/main.js b/src/main.js index 9689fa2..5d6fde2 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,8 @@ const destinationsModel = new DestinationModel(mockService); const pointsModel = new PointModel(mockService); const offersModel = new OfferModel(mockService); +// console.log(destinationsModel.get()[0]); + const tripPresenterElement = new TripPresenter({ tripContainer: bodyElement, destinationsModel, diff --git a/src/mock/const.js b/src/mock/const.js index 61a22de..94928b1 100644 --- a/src/mock/const.js +++ b/src/mock/const.js @@ -1,3 +1,5 @@ +import {getRandomIntFromRange} from '../utils.js'; + export const DATE_FORMAT = 'MMM D'; export const TIME_FORMAT = 'HH:mm'; export const DAY_FOMAT = 'D'; @@ -5,8 +7,8 @@ export const FULL_TIME_FOMAT = 'YYYY-MM-DDTHH:mm'; export const SLASH_TIME_FOMAT = 'DD/MM/YY HH:mm'; export const MILLISECONDS_IN_DAY = 86400000; export const MILLISECONDS_IN_HOUR = 3600000; -export const POINT_COUNT = 10; -export const DESTINATION_COUNT = POINT_COUNT; +//понимаю, что в константах должны быть константы, а не рандомные данные. сделал ради эксперимента +export const POINT_COUNT = getRandomIntFromRange(0, 10); export const OFFER_COUNT = 10; export const BooleanValues = [ @@ -81,6 +83,8 @@ export const CITIES = [ 'Chelmsford', ]; +export const DESTINATION_COUNT = CITIES.length; + export const FilterType = { EVERYTHING: 'EVERYTHING', FUTURE: 'FUTURE', diff --git a/src/mock/destination.js b/src/mock/destination.js index 41f2c36..a5f8a3d 100644 --- a/src/mock/destination.js +++ b/src/mock/destination.js @@ -1,8 +1,8 @@ import {getRandomArrayElement, getPicturesArray} from '../utils.js'; import {CITIES, DESCRIPTION} from './const.js'; -export const generateDestination = () => { - const city = getRandomArrayElement(CITIES); +export const generateDestination = (index) => { + const city = CITIES[index]; return { id: crypto.randomUUID(), diff --git a/src/model/destination-model.js b/src/model/destination-model.js index 980187c..2ef7587 100644 --- a/src/model/destination-model.js +++ b/src/model/destination-model.js @@ -12,4 +12,8 @@ export default class DestinationModel { getById(id) { return this.#destinations.find((destinations) => destinations.id === id); } + + getByName(name) { + return this.#destinations.find((destinations) => destinations.name === name); + } } diff --git a/src/presenter/point-presenter.js b/src/presenter/point-presenter.js index e55a764..a2dfadd 100644 --- a/src/presenter/point-presenter.js +++ b/src/presenter/point-presenter.js @@ -42,8 +42,8 @@ export default class PointPresenter { this.#pointEditComponent = new EditPointView({ point: this.#point, - pointDestination: this.#destinationsModel.getById(this.#point.destination), - pointOffers: this.#offersModel.getByType(this.#point.type), + pointDestination: this.#destinationsModel, + pointOffers: this.#offersModel, onSubmitClick: () => { this.#handleFormSubmit(this.#point); }, @@ -51,6 +51,7 @@ export default class PointPresenter { this.destroy(); }, onRollUpClick: () => { + this.#pointEditComponent.resetPoint(this.#point); this.#replaceFormToPoint(); } }); @@ -87,6 +88,7 @@ export default class PointPresenter { #escKeyDownHandler = (evt) => { if (evt.key === 'Escape') { evt.preventDefault(); + this.#pointEditComponent.resetPoint(this.#point); this.#replaceFormToPoint(); } }; diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index 084340d..af880c6 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -21,7 +21,7 @@ export default class TripPresenter { #pointPresenterArray = new Map(); #currentSortType = SortType.DAY; - #sourcedBoardTasks = []; + #sourcedTripPoints = []; #sortComponent = null; #filterComponent = null; @@ -40,10 +40,10 @@ export default class TripPresenter { this.#tripInfoElement = this.#tripContainer.querySelector('.trip-main'); this.#newEventElement = document.querySelector('.trip-main__event-add-btn'); - this.#sourcedBoardTasks = [...this.#pointsModel.get()]; + this.#sourcedTripPoints = [...this.#pointsModel.get()]; this.#points = [...this.#pointsModel.get()]; this.#points.sort(sortPointDay); - this.#sourcedBoardTasks.sort(sortPointDay); + this.#sourcedTripPoints.sort(sortPointDay); this.#newEventElement.addEventListener('click', () => this.#addPointHandler(this.#newEventElement)); this.#renderFilter(); @@ -66,7 +66,7 @@ export default class TripPresenter { #handlePointChange = (updatedPoint) => { this.#points = updateItem(this.#points, updatedPoint); - this.#sourcedBoardTasks = updateItem(this.#sourcedBoardTasks, updatedPoint); + this.#sourcedTripPoints = updateItem(this.#sourcedTripPoints, updatedPoint); this.#pointPresenterArray.get(updatedPoint.id).init(updatedPoint); }; @@ -92,7 +92,7 @@ export default class TripPresenter { this.#points.sort(sortPointTime); break; default: - this.#points = [...this.#sourcedBoardTasks]; + this.#points = [...this.#sourcedTripPoints]; } this.#currentSortType = sortType; diff --git a/src/service/mock-service.js b/src/service/mock-service.js index 4ca7867..17d7d15 100644 --- a/src/service/mock-service.js +++ b/src/service/mock-service.js @@ -28,7 +28,7 @@ export default class MockService { } generateDestinations() { - return Array.from({length: DESTINATION_COUNT}, () => generateDestination()); + return Array.from({length: DESTINATION_COUNT}, (_, index) => generateDestination(index)); } generateOffers() { diff --git a/src/utils.js b/src/utils.js index 483ac08..c89a60d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -72,10 +72,10 @@ export const updateItem = (items, update) => items.map((item) => item.id === upd export const sortPointDay = (pointA, pointB) => dayjs(pointA.dateFrom).diff(dayjs(pointB.dateFrom)); -export const sortPointPrice = (pointA, pointB) => pointA.basePrice - pointB.basePrice; +export const sortPointPrice = (pointA, pointB) => pointB.basePrice - pointA.basePrice; export const sortPointTime = (pointA, pointB) => { const timeDifferencePointA = dayjs(pointA.dateTo).diff(dayjs(pointA.dateFrom)); const timeDifferencePointB = dayjs(pointB.dateTo).diff(dayjs(pointB.dateFrom)); - return timeDifferencePointA - timeDifferencePointB; + return timeDifferencePointB - timeDifferencePointA; }; diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 3acc8fd..7b63065 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -1,6 +1,6 @@ import {formatToSlashDate} from '../utils.js'; import {CITIES, POINT_EMPTY, ROUTE_TYPE} from '../mock/const.js'; -import AbstractView from '../framework/view/abstract-view.js'; +import AbstractStatefulView from '../framework/view/abstract-stateful-view.js'; const getPicrtureItem = (picture) => `${picture.description}`; @@ -22,12 +22,15 @@ const getOfferItem = (offer, pointOffers) => `
`; -const createEditPointTemplate = ({point, pointDestination, pointOffers}) => { - const {basePrice, dateFrom, dateTo, type, id} = point; - const pictureItemsTemplate = pointDestination.pictures.map((picture) => getPicrtureItem(picture)).join(''); +const createEditPointTemplate = ({state, pointDestinations, pointOffers}) => { + const {basePrice, dateFrom, dateTo, type, id, destination, offers} = state; + const pointDestination = pointDestinations.getById(destination); + const pictureItemsTemplate = pointDestinations + .getById(destination) + .pictures.map((picture) => getPicrtureItem(picture)).join(''); const typeItemsTemplate = ROUTE_TYPE.map((typeItem) => getEventTypeItem(typeItem, type)).join(''); const cityItemsTemplate = CITIES.map((cityItem) => getDestinationItem(cityItem)).join(''); - const offerItemsTemplate = pointOffers.map((offer) => getOfferItem(offer, point.offers)).join(''); + const offerItemsTemplate = pointOffers.map((offer) => getOfferItem(offer, offers)).join(''); return `
  • @@ -70,8 +73,8 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => { € - + @@ -81,7 +84,7 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {
    - ${pointOffers.length !== 0 + ${state.offers.length !== 0 ? `

    Offers

    @@ -90,23 +93,28 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {
    ` : ''}
    -

    Destination

    -

    ${pointDestination.description}

    - -
    -
    - ${pictureItemsTemplate} -
    -
    + ${pointDestination.description !== null + ? `

    Destination

    +

    ${pointDestination.description}

    ` + : ''} + + ${pointDestination.pictures.length !== 0 + ? `
    +
    + ${pictureItemsTemplate} +
    +
    ` + : ''}
    • `; }; -export default class EditPointView extends AbstractView{ - #point = null; +export default class EditPointView extends AbstractStatefulView{ #pointDestination = []; + #offers = []; + #destinations = []; #pointOffers = []; #handleSubmitClick = null; #handleDeleteClick = null; @@ -114,30 +122,45 @@ export default class EditPointView extends AbstractView{ constructor({point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onDeleteClick, onRollUpClick}) { super(); - this.#point = point; - this.#pointDestination = pointDestination; - this.#pointOffers = pointOffers; + this.#destinations = pointDestination; + this.#pointDestination = pointDestination.getById(point.destination); + this.#offers = pointOffers; + this.#pointOffers = pointOffers.getByType(point.type); + + this._setState(EditPointView.parsePointToState(point)); this.#handleSubmitClick = onSubmitClick; this.#handleDeleteClick = onDeleteClick; this.#handleRollUpClick = onRollUpClick; - this.element.querySelector('.event__save-btn').addEventListener('click', this.#submitClickHandler); - this.element.querySelector('.event__reset-btn').addEventListener('click', this.#deleteClickHandler); - this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#rollUpClickHandler); + this._restoreHandlers(); } get template() { return createEditPointTemplate({ - point: this.#point, - pointDestination: this.#pointDestination, + state: this._state, + pointDestinations: this.#destinations, pointOffers: this.#pointOffers }); } + resetPoint = (point) => { + this.#pointOffers = this.#offers.getByType(point.type); + this.updateElement(point); + }; + + _restoreHandlers() { + this.element.querySelector('form').addEventListener('submit', this.#submitClickHandler); + this.element.querySelector('.event__reset-btn').addEventListener('click', this.#deleteClickHandler); + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#rollUpClickHandler); + this.element.querySelector('.event__type-group').addEventListener('change', this.#routeTypeChangeHandler); + this.element.querySelector('.event__input--destination').addEventListener('change', this.#destinationChangeHandler); + this.element.querySelector('.event__input--price').addEventListener('change', this.#priceChangeHandler); + } + #submitClickHandler = (evt) => { evt.preventDefault(); - this.#handleSubmitClick(this.#point); + this.#handleSubmitClick(this._state); }; #deleteClickHandler = (evt) => { @@ -149,4 +172,59 @@ export default class EditPointView extends AbstractView{ evt.preventDefault(); this.#handleRollUpClick(); }; + + #routeTypeChangeHandler = (evt) => { + const routeType = evt.target.value.charAt(0).toUpperCase() + evt.target.value.slice(1); + + this.#pointOffers = this.#offers.getByType(routeType); + + this.updateElement({ + type: routeType, + offers: this.#pointOffers + }); + }; + + #destinationChangeHandler = (evt) => { + const selectedDestination = this.#destinations.getByName(evt.target.value); + + const destinationId = (selectedDestination) + ? selectedDestination.id + : null; + + this.updateElement({ + destination: destinationId, + }); + }; + + #priceChangeHandler = (evt) => { + this._setState({ + basePrice: evt.target.value + }); + }; + + static parsePointToState(point) { + return {...point}; + } + + static parseStateToPoint(state, destination) { + const point = {...state}; + + if (!point.isOffers) { + point.offers = null; + } + + if (!point.isPictures) { + destination.pictures = null; + } + + if (!point.isDescription) { + destination.description = null; + } + + delete point.isOffers; + delete point.isPictures; + delete point.isDescription; + + return point; + } } From 790f17db456493288b3083e4d6597fb52ba99906 Mon Sep 17 00:00:00 2001 From: Kirill Date: Sun, 12 May 2024 19:05:34 +0500 Subject: [PATCH 2/2] =?UTF-8?q?6.6.=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=B5=D0=BA=D0=B0=20(=D1=87?= =?UTF-8?q?=D0=B0=D1=81=D1=82=D1=8C=201)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/edit-point-view.js | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 7b63065..d535095 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -205,26 +205,4 @@ export default class EditPointView extends AbstractStatefulView{ static parsePointToState(point) { return {...point}; } - - static parseStateToPoint(state, destination) { - const point = {...state}; - - if (!point.isOffers) { - point.offers = null; - } - - if (!point.isPictures) { - destination.pictures = null; - } - - if (!point.isDescription) { - destination.description = null; - } - - delete point.isOffers; - delete point.isPictures; - delete point.isDescription; - - return point; - } }