From c97c9e58fc21c8485287366fd8f4476911530218 Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Tue, 3 Sep 2024 23:18:14 +0300 Subject: [PATCH 01/14] feat: add mock data (offers, points, destination) --- src/const.js | 80 ++++++++++++++++++++++++++++++++++++ src/main.js | 3 ++ src/mock/destination-mock.js | 47 +++++++++++++++++++++ src/mock/offers-mock.js | 41 ++++++++++++++++++ src/mock/point-mock.js | 37 +++++++++++++++++ src/util.js | 22 +++++++++- 6 files changed, 229 insertions(+), 1 deletion(-) create mode 100644 src/const.js create mode 100644 src/mock/destination-mock.js create mode 100644 src/mock/offers-mock.js create mode 100644 src/mock/point-mock.js diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..740c4e2 --- /dev/null +++ b/src/const.js @@ -0,0 +1,80 @@ +import { getRandomInteger } from "./util"; + +const CITIES = ['Amsterdam', 'Geneva', 'Chamonix', 'Basel', 'Düsseldorf', 'Strasbourg']; +const TYPES = ['Taxi', 'Bus', 'Train', 'Ship', 'Drive', 'Flight', 'Check-in', 'Sightseeing', 'Restaurant']; +const DESCRIPTION_TEXT = '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. Phasellus eros mauris, condimentum sed nibh vitae, sodales efficitur ipsum. Sed blandit, eros vel aliquam faucibus, purus ex euismod diam, eu luctus nunc ante ut dui. Sed sed nisi sed augue convallis suscipit in sed felis. Aliquam erat volutpat. Nunc fermentum tortor ac porta dapibus. In rutrum ac purus sit amet tempus.'; + +const PICTURES = [ + `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`, + `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`, + `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`, + `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}`, + `https://loremflickr.com/248/152?random=${getRandomInteger(1, 5)}` +] + +const DATES = [ + { + dateFrom: "2024-07-10T10:00:00.000Z", + dateTo: "2024-07-11T11:00:00.000Z", + }, + { + dateFrom: "2024-07-15T18:00:00.000Z", + dateTo: "2024-07-16T20:30:00.000Z", + }, + { + dateFrom: "2024-07-16T21:00:00.000Z", + dateTo: "2024-07-16T23:45:00.000Z", + }, + { + dateFrom: "2024-08-01T09:55:00.000Z", + dateTo: "2024-08-02T11:22:00.000Z", + }, + { + dateFrom: "2024-08-10T14:00:00.000Z", + dateTo: "2024-08-10T17:00:00.000Z", + }, + { + dateFrom: "2024-08-12T13:56:00.000Z", + dateTo: "2024-08-12T14:06:00.000Z", + }, +] + +const OFFERS = [ + { + id: 1, + title: 'Add luggage', + price: getRandomInteger(5, 200) + }, + { + id: 2, + title: 'Switch to comfort', + price: getRandomInteger(5, 200) + }, + { + id: 3, + title: 'Add meal', + price: getRandomInteger(5, 200) + }, + { + id: 4, + title: 'Choose seats', + price: getRandomInteger(5, 200) + }, + { + id: 5, + title: 'Order Uber', + price: getRandomInteger(5, 200) + }, + { + id: 6, + title: 'Add breakfast', + price: getRandomInteger(5, 200) + }, + { + id: 7, + title: 'Rent a car', + price: getRandomInteger(5, 200) + }, +]; + +export { CITIES, TYPES, DESCRIPTION_TEXT, OFFERS, PICTURES, DATES }; diff --git a/src/main.js b/src/main.js index 09a6175..626aa10 100644 --- a/src/main.js +++ b/src/main.js @@ -2,6 +2,9 @@ import NewFilters from './view/filters-view'; import NewTripInfo from './view/trip-info-view'; import { RenderPosition, render } from './render'; import MainPresenter from './presenter/main-presenter'; +import './mock/point-mock'; +import './mock/destination-mock'; +import './mock/offers-mock'; const mainContainer = document.querySelector('.trip-main'); const filtersContainer = document.querySelector('.trip-controls__filters'); diff --git a/src/mock/destination-mock.js b/src/mock/destination-mock.js new file mode 100644 index 0000000..2a87489 --- /dev/null +++ b/src/mock/destination-mock.js @@ -0,0 +1,47 @@ +import { CITIES, PICTURES } from "../const"; + +let destinationId = 0; + +const getDestinationMock = (city) => { + const destinationMock = { + id: destinationId, + name: city, + description: `${city}, is a beautiful city, a true asian pearl, with crowded streets.`, + pictures: [ + { + src: PICTURES[0], + description: `${city} parliament building` + }, + { + src: PICTURES[1], + description: `${city} main square` + }, + { + src: PICTURES[2], + description: `${city} best view` + }, + { + src: PICTURES[3], + description: `${city} landscape` + }, + { + src: PICTURES[4], + description: `${city} church` + } + ], + } + return destinationMock; +} + +const getDestinationsMockArray = () => { + const destinationsMockArray = []; + + CITIES.forEach((city) => { + destinationId++; + destinationsMockArray.push(getDestinationMock(city)); + }); + + return destinationsMockArray; +} + +export { getDestinationsMockArray } diff --git a/src/mock/offers-mock.js b/src/mock/offers-mock.js new file mode 100644 index 0000000..0198ae0 --- /dev/null +++ b/src/mock/offers-mock.js @@ -0,0 +1,41 @@ +import { pointMockArray } from "./point-mock" +import { OFFERS } from "../const"; + +const getOffersArray = (offersIdArray) => { + const offersArray = []; + + offersIdArray.forEach((offerId) => { + const offer = OFFERS.find(offer => offer.id === offerId); + offersArray.push(offer); + }) + + return offersArray; +} + +const getFullOfferMockElement = (type, offersIdArray) => { + const offerMockElement = { + type: type, + offers: getOffersArray(offersIdArray) + } + + return offerMockElement; +} + +const getOfferMockArray = () => { + const offerMockArray = []; + + pointMockArray.forEach((point) => { + const pointType = point.type; + const offersIdArray = point.offers; + const offerMockElement = getFullOfferMockElement(pointType, offersIdArray); + + offerMockArray.push(offerMockElement); + }) + + return offerMockArray; +} + +const offerMockArray = getOfferMockArray(); + +export { offerMockArray }; + diff --git a/src/mock/point-mock.js b/src/mock/point-mock.js new file mode 100644 index 0000000..a4511f5 --- /dev/null +++ b/src/mock/point-mock.js @@ -0,0 +1,37 @@ +import { getRandomArrayElement, getRandomInteger, createIdGenerator } from "../util" +import { TYPES, CITIES, DESCRIPTION_TEXT, DATES, OFFERS } from "../const"; + +const getRandomDescriptionPoint = (text) => { + const descriptionsArray = DESCRIPTION_TEXT.split('.'); + const randomDescriptionText = Array.from({ length: 5 }, () => getRandomArrayElement(descriptionsArray).trim()).join('.'); + return randomDescriptionText; +} + +const generateRandomPointId = createIdGenerator(); + +const getPointMockElement = () => { + let pointDate = getRandomArrayElement(DATES); + + const getPointMockElement = { + id: generateRandomPointId(), + type: getRandomArrayElement(TYPES), + destination: getRandomInteger(1, CITIES.length), + description: getRandomDescriptionPoint(DESCRIPTION_TEXT), + dateFrom: pointDate.dateFrom, + dateTo: pointDate.dateTo, + basePrice: getRandomInteger(20, 5000), + offers: Array.from({ length: getRandomInteger(1, 3) }, (_, i) => getRandomInteger(1, OFFERS.length)), + isFavorite: true + } + + return getPointMockElement; +} + +const getPointMockArray = () => { + return Array.from({ length: 10 }, () => getPointMockElement()) +} + +const pointMockArray = getPointMockArray(); + +export { pointMockArray }; + diff --git a/src/util.js b/src/util.js index 3c2b100..b810a73 100644 --- a/src/util.js +++ b/src/util.js @@ -1,3 +1,23 @@ const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1); -export { capitalize }; +function getRandomArrayElement(items) { + return items[Math.floor(Math.random() * items.length)]; +} + +const getRandomInteger = (a, b) => { + const lower = Math.ceil(Math.min(a, b)); + const upper = Math.floor(Math.max(a, b)); + const result = Math.random() * (upper - lower + 1) + lower; + return Math.floor(result); +}; + +const createIdGenerator = () => { + let numberId = 0; + + return () => { + numberId += 1; + return numberId; + }; +}; + +export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator }; From d635d0900f6a4386e12817bb8b0d18aca8cfb57a Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Tue, 3 Sep 2024 23:26:38 +0300 Subject: [PATCH 02/14] feat: add point model --- src/mock/point-mock.js | 4 +++- src/model/point-model.js | 9 +++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 src/model/point-model.js diff --git a/src/mock/point-mock.js b/src/mock/point-mock.js index a4511f5..9013996 100644 --- a/src/mock/point-mock.js +++ b/src/mock/point-mock.js @@ -1,6 +1,8 @@ import { getRandomArrayElement, getRandomInteger, createIdGenerator } from "../util" import { TYPES, CITIES, DESCRIPTION_TEXT, DATES, OFFERS } from "../const"; +const POINTS_COUNT = 10; + const getRandomDescriptionPoint = (text) => { const descriptionsArray = DESCRIPTION_TEXT.split('.'); const randomDescriptionText = Array.from({ length: 5 }, () => getRandomArrayElement(descriptionsArray).trim()).join('.'); @@ -28,7 +30,7 @@ const getPointMockElement = () => { } const getPointMockArray = () => { - return Array.from({ length: 10 }, () => getPointMockElement()) + return Array.from({ length: POINTS_COUNT }, () => getPointMockElement()) } const pointMockArray = getPointMockArray(); diff --git a/src/model/point-model.js b/src/model/point-model.js new file mode 100644 index 0000000..c187486 --- /dev/null +++ b/src/model/point-model.js @@ -0,0 +1,9 @@ +import { pointMockArray } from "../mock/point-mock"; + +export default class PointModel { + points = pointMockArray; + + getPoints() { + return this.points; + } +} From bd257e5ccc8fcc2ce16cec913ff7c9366fcfd800 Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Wed, 4 Sep 2024 15:27:04 +0300 Subject: [PATCH 03/14] fix: change export const on export function --- src/main.js | 11 +++++++---- src/mock/offers-mock.js | 3 ++- src/mock/point-mock.js | 6 +++++- src/model/point-model.js | 4 ++-- src/presenter/main-presenter.js | 9 ++++++--- 5 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/main.js b/src/main.js index 626aa10..68aae31 100644 --- a/src/main.js +++ b/src/main.js @@ -2,14 +2,17 @@ import NewFilters from './view/filters-view'; import NewTripInfo from './view/trip-info-view'; import { RenderPosition, render } from './render'; import MainPresenter from './presenter/main-presenter'; -import './mock/point-mock'; -import './mock/destination-mock'; -import './mock/offers-mock'; +import PointModel from './model/point-model'; const mainContainer = document.querySelector('.trip-main'); const filtersContainer = document.querySelector('.trip-controls__filters'); const pointsContainer = document.querySelector('.trip-events'); -const mainPresenter = new MainPresenter({pointsContainer: pointsContainer}); +const pointModel = new PointModel(); +const mainPresenter = new MainPresenter({ + pointsContainer: pointsContainer, + pointModel, +}); + render(new NewTripInfo(), mainContainer, RenderPosition.AFTERBEGIN); render(new NewFilters(), filtersContainer); diff --git a/src/mock/offers-mock.js b/src/mock/offers-mock.js index 0198ae0..c1cf222 100644 --- a/src/mock/offers-mock.js +++ b/src/mock/offers-mock.js @@ -1,4 +1,4 @@ -import { pointMockArray } from "./point-mock" +import { getCopyOfPointMockArray } from "./point-mock" import { OFFERS } from "../const"; const getOffersArray = (offersIdArray) => { @@ -23,6 +23,7 @@ const getFullOfferMockElement = (type, offersIdArray) => { const getOfferMockArray = () => { const offerMockArray = []; + const pointMockArray = getCopyOfPointMockArray(); pointMockArray.forEach((point) => { const pointType = point.type; diff --git a/src/mock/point-mock.js b/src/mock/point-mock.js index 9013996..dd5a455 100644 --- a/src/mock/point-mock.js +++ b/src/mock/point-mock.js @@ -35,5 +35,9 @@ const getPointMockArray = () => { const pointMockArray = getPointMockArray(); -export { pointMockArray }; +const getCopyOfPointMockArray = () => { + return pointMockArray; +} + +export { getCopyOfPointMockArray }; diff --git a/src/model/point-model.js b/src/model/point-model.js index c187486..df68546 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -1,7 +1,7 @@ -import { pointMockArray } from "../mock/point-mock"; +import { getCopyOfPointMockArray } from "../mock/point-mock"; export default class PointModel { - points = pointMockArray; + points = getCopyOfPointMockArray(); getPoints() { return this.points; diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index e6f5c9c..985eddf 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -8,18 +8,21 @@ import { render } from '../render'; export default class MainPresenter { pointsListComponent = new PointListView(); - constructor({pointsContainer}) { + constructor({pointsContainer, pointModel}) { this.pointsContainer = pointsContainer; + this.pointModel = pointModel; } init() { + this.points = [...this.pointModel.getPoints()]; + render(new SortingView(), this.pointsContainer); render(this.pointsListComponent, this.pointsContainer); render(new EditPoint(), this.pointsListComponent.getElement()); render(new CreatePoint(), this.pointsListComponent.getElement()); - for (let i = 0; i < 3; i++) { - render(new PointItemView(), this.pointsListComponent.getElement()); + for (let i = 0; i < this.points.length; i++) { + render(new PointItemView({point: this.points[i]}), this.pointsListComponent.getElement()); } } } From 7a829d7a1a7d42ef51fb254c08d8ce4ee384dbea Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Thu, 5 Sep 2024 12:02:33 +0300 Subject: [PATCH 04/14] feat: render points-views with mock data --- package-lock.json | 6 ++++ package.json | 1 + src/const.js | 24 +++++++-------- src/mock/offers-mock.js | 7 ++++- src/mock/point-mock.js | 1 + src/util.js | 36 +++++++++++++++++++++- src/view/point-item-view.js | 59 +++++++++++++++++++++++++++++-------- 7 files changed, 107 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 053c67c..e75820b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "22.0.0", "dependencies": { "@babel/core": "7.21.4", + "dayjs": "1.11.13", "webpack-dev-server": "4.13.3" }, "devDependencies": { @@ -3129,6 +3130,11 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index d3f597e..a418193 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ }, "dependencies": { "@babel/core": "7.21.4", + "dayjs": "1.11.13", "webpack-dev-server": "4.13.3" } } diff --git a/src/const.js b/src/const.js index 740c4e2..480f66b 100644 --- a/src/const.js +++ b/src/const.js @@ -14,28 +14,28 @@ const PICTURES = [ const DATES = [ { - dateFrom: "2024-07-10T10:00:00.000Z", - dateTo: "2024-07-11T11:00:00.000Z", + dateFrom: "2024-07-10T10:00:00", + dateTo: "2024-07-11T11:00:00", }, { - dateFrom: "2024-07-15T18:00:00.000Z", - dateTo: "2024-07-16T20:30:00.000Z", + dateFrom: "2024-07-15T18:00:00", + dateTo: "2024-07-16T20:30:00", }, { - dateFrom: "2024-07-16T21:00:00.000Z", - dateTo: "2024-07-16T23:45:00.000Z", + dateFrom: "2024-07-16T21:00:00", + dateTo: "2024-07-16T23:45:00", }, { - dateFrom: "2024-08-01T09:55:00.000Z", - dateTo: "2024-08-02T11:22:00.000Z", + dateFrom: "2024-08-01T09:55:00", + dateTo: "2024-08-02T11:22:00", }, { - dateFrom: "2024-08-10T14:00:00.000Z", - dateTo: "2024-08-10T17:00:00.000Z", + dateFrom: "2024-08-10T14:00:00", + dateTo: "2024-08-10T17:00:00", }, { - dateFrom: "2024-08-12T13:56:00.000Z", - dateTo: "2024-08-12T14:06:00.000Z", + dateFrom: "2024-08-12T13:56:00", + dateTo: "2024-08-12T14:06:00", }, ] diff --git a/src/mock/offers-mock.js b/src/mock/offers-mock.js index c1cf222..2dcebd7 100644 --- a/src/mock/offers-mock.js +++ b/src/mock/offers-mock.js @@ -37,6 +37,11 @@ const getOfferMockArray = () => { } const offerMockArray = getOfferMockArray(); +console.log(offerMockArray) -export { offerMockArray }; +const getCopyOfOfferMockArray = () => { + return offerMockArray; +} + +export { getCopyOfOfferMockArray }; diff --git a/src/mock/point-mock.js b/src/mock/point-mock.js index dd5a455..8134dbe 100644 --- a/src/mock/point-mock.js +++ b/src/mock/point-mock.js @@ -34,6 +34,7 @@ const getPointMockArray = () => { } const pointMockArray = getPointMockArray(); +console.log(pointMockArray); const getCopyOfPointMockArray = () => { return pointMockArray; diff --git a/src/util.js b/src/util.js index b810a73..1428b69 100644 --- a/src/util.js +++ b/src/util.js @@ -1,3 +1,12 @@ +import dayjs from "dayjs"; +var duration = require("dayjs/plugin/duration"); +// import duration from 'dayjs/plugin/duration' // ES 2015 + +dayjs.extend(duration); + +const DATE_FORMAT = 'D MMM' +const TIME_FORMAT = 'HH:mm' + const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1); function getRandomArrayElement(items) { @@ -20,4 +29,29 @@ const createIdGenerator = () => { }; }; -export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator }; +const humanizePointDate = (pointDate) => { + return pointDate ? dayjs(pointDate).format(DATE_FORMAT) : ''; +} + +const humanizePointTime = (pointDate) => { + return pointDate ? dayjs(pointDate).format(TIME_FORMAT) : ''; +} + +const getPointDuration = (pointDateFrom, pointDateTo) => { + const humatizedDateFrom = dayjs(pointDateFrom); + const humatizedDateTo = dayjs(pointDateTo); + + const duration = dayjs.duration(humatizedDateTo.diff(humatizedDateFrom)); + + let result = ``; + + if (duration.days() > 0) { + return result = duration.format('DD[D] HH[H] mm[M]'); + } else if (duration.hours() > 0) { + return result = duration.format('HH[H] mm[M]'); + } else { + return result = duration.format('mm[M]'); + } +} + +export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator, humanizePointDate, humanizePointTime, getPointDuration }; diff --git a/src/view/point-item-view.js b/src/view/point-item-view.js index 62e4636..2e6ad46 100644 --- a/src/view/point-item-view.js +++ b/src/view/point-item-view.js @@ -1,31 +1,60 @@ import { createElement } from '../render'; +import { getDestinationsMockArray } from '../mock/destination-mock'; +import { humanizePointDate, humanizePointTime, getPointDuration } from '../util'; +// import { getCopyOfOfferMockArray } from '../mock/offers-mock'; + +const destinationsMockArray = getDestinationsMockArray(); +// const offerMockArray = getCopyOfOfferMockArray(); + +// const getOffersFromArray = (offersArray) => { +// let result = []; + +// offersArray.forEach((offer) => { +// const offersList = offer.offers; +// result.push(Object.values(offersList)); +// }); + +// return result; +// } + +// console.log(getOffersFromArray(offerMockArray)); + +// const getSelectedOffersList = (offers) => { + +// return `
  • +// Order Uber +// +€  +// 20 +//
    • ` +// } + +function createPointItemViewTemplate(point) { + const { type, destination, dateFrom, dateTo, basePrice, offers } = point; + + const pointDestination = destination; + const modifiedDestination = destinationsMockArray.find((destination) => destination.id === pointDestination).name; -function createPointItemViewTemplate() { return `
  • - +
    Event type icon
    -

    Taxi Amsterdam

    +

    ${type} ${modifiedDestination}

    - + — - +

    -

    30M

    +

    ${getPointDuration(dateFrom, dateTo)}

    - € 20 + € ${basePrice}

      -
    • - Order Uber - +€  - 20 -
      • +
    • `; - const offersList = offerData.map((offer) => renderOffers(offer.title, offer.price)).join(''); - return offersList; - } + const result = offerData.map((offer) => renderOffers(offer.title, offer.price)).join(''); + return result; + }; return `
  • From 5d89bd388919998be5bca397aa4bb7eae142e241 Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Thu, 5 Sep 2024 18:07:37 +0300 Subject: [PATCH 07/14] feat: render mock data in edit-point-view.js --- src/const.js | 10 +++++--- src/util.js | 9 ++----- src/view/edit-point-view.js | 51 ++++++++++++++++++++++--------------- src/view/point-item-view.js | 9 ++++--- 4 files changed, 45 insertions(+), 34 deletions(-) diff --git a/src/const.js b/src/const.js index ef96bdd..14662dc 100644 --- a/src/const.js +++ b/src/const.js @@ -77,7 +77,7 @@ const OFFERS = [ }, ]; -const EVENT_TYPES = [ +const POINT_TYPES = [ { name: 'taxi', state: '' @@ -116,7 +116,7 @@ const EVENT_TYPES = [ } ]; -const EVENT_OFFERS = [ +const POINT_OFFERS = [ { class: 'luggage', title: 'Add luggage', @@ -149,4 +149,8 @@ const EVENT_OFFERS = [ }, ]; -export { CITIES, TYPES, DESCRIPTION_TEXT, OFFERS, PICTURES, DATES, EVENT_OFFERS, EVENT_TYPES }; +const DATE_FORMAT = 'D MMM'; +const TIME_FORMAT = 'HH:mm'; +const DATE_WITH_TIME_FORMAT = 'DD/MM/YY HH:MM'; + +export { CITIES, TYPES, DESCRIPTION_TEXT, OFFERS, PICTURES, DATES, POINT_OFFERS, POINT_TYPES, DATE_FORMAT, TIME_FORMAT, DATE_WITH_TIME_FORMAT }; diff --git a/src/util.js b/src/util.js index 93d58f9..59e742a 100644 --- a/src/util.js +++ b/src/util.js @@ -3,9 +3,6 @@ import duration from 'dayjs/plugin/duration'; dayjs.extend(duration); -const DATE_FORMAT = 'D MMM'; -const TIME_FORMAT = 'HH:mm'; - const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1); function getRandomArrayElement(items) { @@ -28,9 +25,7 @@ const createIdGenerator = () => { }; }; -const humanizePointDate = (pointDate) => pointDate ? dayjs(pointDate).format(DATE_FORMAT) : ''; - -const humanizePointTime = (pointDate) => pointDate ? dayjs(pointDate).format(TIME_FORMAT) : ''; +const humanizePointDate = (pointDate, dateFormat) => pointDate ? dayjs(pointDate).format(dateFormat) : ''; const getPointDuration = (pointDateFrom, pointDateTo) => { const humatizedDateFrom = dayjs(pointDateFrom); @@ -51,4 +46,4 @@ const getPointDuration = (pointDateFrom, pointDateTo) => { return result; }; -export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator, humanizePointDate, humanizePointTime, getPointDuration }; +export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator, humanizePointDate, getPointDuration }; diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 0c96c8b..0f5a25b 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -1,23 +1,28 @@ import { createElement } from '../render'; -import { capitalize } from '../util'; -import { EVENT_TYPES, EVENT_OFFERS } from '../const'; +import { capitalize, humanizePointDate } from '../util'; +import { POINT_TYPES, POINT_OFFERS, DATE_WITH_TIME_FORMAT } from '../const'; -const createPointTypeItem = (eventType) => ` +const createPointTypeItem = (pointType) => `
    - - + +
    `; -const getPointOfferItem = (eventOffer) => `
    - -
  • @@ -31,16 +36,16 @@ function createEditPointViewTemplate() {
    - ${EVENT_TYPES.map((eventType) => createPointTypeItem(eventType)).join('')} + ${POINT_TYPES.map((pointType) => createPointTypeItem(pointType)).join('')}
    - + @@ -50,10 +55,10 @@ function createEditPointViewTemplate() {
    - + — - +
    @@ -61,7 +66,7 @@ function createEditPointViewTemplate() { € - +
    @@ -75,13 +80,13 @@ function createEditPointViewTemplate() {

    Offers

    - ${EVENT_OFFERS.map((eventOffer) => getPointOfferItem(eventOffer)).join('')} + ${POINT_OFFERS.map((pointOffer) => getPointOfferItem(pointOffer)).join('')}

    Destination

    -

    Chamonix-Mont-Blanc (usually shortened to Chamonix) is a resort area near the junction of France, Switzerland and Italy. At the base of Mont Blanc, the highest summit in the Alps, it's renowned for its skiing.

    +

    ${description}

    @@ -89,8 +94,14 @@ function createEditPointViewTemplate() { } export default class EditPointView { + constructor({ point, offers, destinations }) { + this.point = point; + this.offers = offers; + this.destinations = destinations; + } + getTemplate() { - return createEditPointViewTemplate(); + return createEditPointViewTemplate(this.point, this.offers, this.destinations); } getElement() { diff --git a/src/view/point-item-view.js b/src/view/point-item-view.js index 868ea78..cce9b32 100644 --- a/src/view/point-item-view.js +++ b/src/view/point-item-view.js @@ -1,5 +1,6 @@ import { createElement } from '../render'; -import { humanizePointDate, humanizePointTime, getPointDuration } from '../util'; +import { humanizePointDate, getPointDuration } from '../util'; +import { DATE_FORMAT, TIME_FORMAT } from '../const'; function createPointItemViewTemplate(point, offers, destinations) { const { type, destination, dateFrom, dateTo, basePrice } = point; @@ -22,16 +23,16 @@ function createPointItemViewTemplate(point, offers, destinations) { return `
  • - +
    Event type icon

    ${type} ${modifiedDestination}

    - + — - +

    ${getPointDuration(dateFrom, dateTo)}

    From ba7477e388d3d315157e1e84f87c0aa9c08ebc3a Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Fri, 6 Sep 2024 20:41:43 +0300 Subject: [PATCH 08/14] fix: correct offer-mock data --- src/mock/destinations-mock.js | 6 +++--- src/mock/offers-mock.js | 33 ++++++++++++++----------------- src/mock/point-mock.js | 35 ++++++++++++++++++++++++--------- src/model/point-model.js | 6 ++++-- src/presenter/main-presenter.js | 4 ++-- src/util.js | 18 ++++++++++++++++- src/view/create-point-view.js | 2 +- 7 files changed, 68 insertions(+), 36 deletions(-) diff --git a/src/mock/destinations-mock.js b/src/mock/destinations-mock.js index 3e77e81..fbb7f38 100644 --- a/src/mock/destinations-mock.js +++ b/src/mock/destinations-mock.js @@ -44,8 +44,8 @@ const getDestinationsMockArray = () => { return destinationsMockArray; }; -const destinationsData = getDestinationsMockArray(); +const destinations = getDestinationsMockArray(); -const getDestinationsData = () => destinationsData; +const getDestinations = () => destinations; -export { getDestinationsData }; +export { getDestinations }; diff --git a/src/mock/offers-mock.js b/src/mock/offers-mock.js index d7248a3..75bac71 100644 --- a/src/mock/offers-mock.js +++ b/src/mock/offers-mock.js @@ -1,5 +1,5 @@ -import { getPointsData } from './point-mock'; -import { OFFERS } from '../const'; +import { OFFERS, TYPES } from '../const'; +import { getRandomInteger, getRandomIntegerArray } from '../util'; const getOffersArrayFromPoints = (offersIdArray) => { const offersArray = []; @@ -12,31 +12,28 @@ const getOffersArrayFromPoints = (offersIdArray) => { return offersArray; }; -const getOfferMockElement = (type, offersIdArray) => { - const offerMockElement = { +const getOfferMock = (type, offersIdArray) => { + const offerMock = { type: type, offers: getOffersArrayFromPoints(offersIdArray) }; - return offerMockElement; + return offerMock; }; -const getOffersMockArray = () => { - const offersMockArray = []; - const pointMockArray = getPointsData(); +const getOfferMocks = () => { + const offers = []; - pointMockArray.forEach((point) => { - const pointType = point.type; - const offersIdArray = point.offers; - const offerMockElement = getOfferMockElement(pointType, offersIdArray); + TYPES.forEach((type) => { + const randomIntegerArray = getRandomIntegerArray(1, getRandomInteger(1, OFFERS.length)); + const offer = getOfferMock(type, randomIntegerArray); + offers.push(offer); + }) - offersMockArray.push(offerMockElement); - }); - - return offersMockArray; -}; + return offers; +} -const offerMockArray = getOffersMockArray(); +const offerMockArray = getOfferMocks(); const getOffersData = () => offerMockArray; diff --git a/src/mock/point-mock.js b/src/mock/point-mock.js index 9dcaea9..210258a 100644 --- a/src/mock/point-mock.js +++ b/src/mock/point-mock.js @@ -1,7 +1,9 @@ import { getRandomArrayElement, getRandomInteger, createIdGenerator } from '../util'; import { TYPES, CITIES, DESCRIPTION_TEXT, DATES, OFFERS } from '../const'; +import { getOffersData } from './offers-mock'; const POINTS_COUNT = 10; +const offersData = getOffersData(); const getRandomDescriptionPoint = (text) => { const descriptionsArray = text.split('.'); @@ -11,29 +13,44 @@ const getRandomDescriptionPoint = (text) => { const generateRandomPointId = createIdGenerator(); -const getPointMockElement = () => { +const createPointMock = () => { const pointDate = getRandomArrayElement(DATES); + const pointType = getRandomArrayElement(TYPES); - const pointMockElement = { + const getRandomOffers = () => { + const typeOffers = offersData.find((offer) => offer.type === pointType).offers; + + let typeOffersKeys = []; + + typeOffers.forEach((offer) => { + typeOffersKeys.push(offer.id); + }) + + const pointOffers = typeOffersKeys.slice(0, getRandomInteger(1, typeOffersKeys.length)); + + return pointOffers; + } + + const pointMock = { id: generateRandomPointId(), - type: getRandomArrayElement(TYPES), + type: pointType, destination: getRandomInteger(1, CITIES.length), description: getRandomDescriptionPoint(DESCRIPTION_TEXT), dateFrom: pointDate.dateFrom, dateTo: pointDate.dateTo, basePrice: getRandomInteger(20, 5000), - offers: Array.from({ length: getRandomInteger(1, 3) }, () => getRandomInteger(1, OFFERS.length)), + offers: getRandomOffers(), isFavorite: true }; - return pointMockElement; + return pointMock; }; -const getPointMockArray = () => Array.from({ length: POINTS_COUNT }, () => getPointMockElement()); +const getPointMocks = () => Array.from({ length: POINTS_COUNT }, () => createPointMock()); -const pointMockArray = getPointMockArray(); +const points = getPointMocks(); -const getPointsData = () => pointMockArray; +const getPoints = () => points; -export { getPointsData }; +export { getPoints }; diff --git a/src/model/point-model.js b/src/model/point-model.js index 8156524..6781a5c 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -1,7 +1,9 @@ -import { getPointsData } from '../mock/point-mock'; +import { getPoints } from '../mock/point-mock'; +import { getDestinations } from '../mock/destinations-mock'; export default class PointModel { - points = getPointsData(); + points = getPoints(); + destinations = getDestinations(); getPoints() { return this.points; diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index 2e04f1e..ac51dd1 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -4,10 +4,10 @@ import CreatePoint from '../view/create-point-view'; import PointItemView from '../view/point-item-view'; import SortingView from '../view/sorting-view'; import { render } from '../render'; -import { getDestinationsData } from '../mock/destinations-mock'; +import { getDestinations } from '../mock/destinations-mock'; import { getOffersData } from '../mock/offers-mock'; -const destinations = getDestinationsData(); +const destinations = getDestinations(); const offers = getOffersData(); export default class MainPresenter { diff --git a/src/util.js b/src/util.js index 59e742a..c8afe4b 100644 --- a/src/util.js +++ b/src/util.js @@ -16,6 +16,22 @@ const getRandomInteger = (a, b) => { return Math.floor(result); }; +const getRandomIntegerArray = (min, max) => { + const randomIntegerArray = []; + + while (randomIntegerArray.length !== max) { + let newElement = getRandomInteger(min, max); + const result = randomIntegerArray.every((element) => element !== newElement); + + if (result) { + randomIntegerArray.push(newElement); + } else { + newElement = getRandomInteger(min, max); + } + } + return randomIntegerArray; +}; + const createIdGenerator = () => { let numberId = 0; @@ -46,4 +62,4 @@ const getPointDuration = (pointDateFrom, pointDateTo) => { return result; }; -export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator, humanizePointDate, getPointDuration }; +export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator, humanizePointDate, getPointDuration, getRandomIntegerArray }; diff --git a/src/view/create-point-view.js b/src/view/create-point-view.js index 3fdac2e..7a306db 100644 --- a/src/view/create-point-view.js +++ b/src/view/create-point-view.js @@ -100,7 +100,7 @@ function createCreatePointViewTemplate() {
    - +
    • `; } export default class CreatePointView { + constructor({ offers, destinations }) { + this.offers = offers; + this.destinations = destinations; + } + getTemplate() { - return createCreatePointViewTemplate(); + return createCreatePointViewTemplate(this.offers, this.destinations); } getElement() { diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index e4074d7..c4d1850 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -1,12 +1,15 @@ import { createElement } from '../render'; import { capitalize, humanizePointDate } from '../util'; -import { DATE_WITH_TIME_FORMAT, TYPES } from '../const'; +import { CITIES, DATE_WITH_TIME_FORMAT, TYPES } from '../const'; const createOfferClass = (offerTitle) => { const offerTitleSplitArray = offerTitle.split(' '); return offerTitleSplitArray[offerTitleSplitArray.length - 1]; } +const createDestinationsList = (destination) => +``; + const createPointTypeItem = (pointType, pointTypeChecked) => `
    @@ -67,9 +70,7 @@ function createEditPointViewTemplate(point, offers, destinations) { - - - + ${CITIES.map((city) => createDestinationsList(city)).join('')}
    From 108bc21c26df658819d7b0e59201e1463727b6c4 Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Sat, 7 Sep 2024 14:28:50 +0300 Subject: [PATCH 13/14] fix: make changes after lint check --- src/mock/offers-mock.js | 4 ++-- src/mock/point-mock.js | 8 ++++---- src/presenter/main-presenter.js | 2 +- src/view/create-point-view.js | 19 +++++++------------ src/view/edit-point-view.js | 16 ++++++++-------- 5 files changed, 22 insertions(+), 27 deletions(-) diff --git a/src/mock/offers-mock.js b/src/mock/offers-mock.js index 857a1c6..3598cd9 100644 --- a/src/mock/offers-mock.js +++ b/src/mock/offers-mock.js @@ -28,10 +28,10 @@ const getOfferMocks = () => { const randomIntegerArray = getRandomIntegerArray(1, getRandomInteger(1, OFFERS.length)); const offer = getOfferMock(type, randomIntegerArray); offers.push(offer); - }) + }); return offers; -} +}; const offerMocks = getOfferMocks(); diff --git a/src/mock/point-mock.js b/src/mock/point-mock.js index 3e02f73..53e2806 100644 --- a/src/mock/point-mock.js +++ b/src/mock/point-mock.js @@ -1,5 +1,5 @@ import { getRandomArrayElement, getRandomInteger, createIdGenerator } from '../util'; -import { TYPES, CITIES, DESCRIPTION_TEXT, DATES, OFFERS } from '../const'; +import { TYPES, CITIES, DESCRIPTION_TEXT, DATES } from '../const'; import { getOffers } from './offers-mock'; const POINTS_COUNT = 10; @@ -20,16 +20,16 @@ const createPointMock = () => { const getRandomOffers = () => { const typeOffers = offersData.find((offer) => offer.type === pointType).offers; - let typeOffersKeys = []; + const typeOffersKeys = []; typeOffers.forEach((offer) => { typeOffersKeys.push(offer.id); - }) + }); const pointOffers = typeOffersKeys.slice(0, getRandomInteger(1, typeOffersKeys.length)); return pointOffers; - } + }; const pointMock = { id: generateRandomPointId(), diff --git a/src/presenter/main-presenter.js b/src/presenter/main-presenter.js index 6fcffd5..36557bc 100644 --- a/src/presenter/main-presenter.js +++ b/src/presenter/main-presenter.js @@ -21,7 +21,7 @@ export default class MainPresenter { render(new SortingView(), this.pointsContainer); render(this.pointsListComponent, this.pointsContainer); render(new EditPoint({point: this.points[0], offers: this.offers, destinations: this.destinations}), this.pointsListComponent.getElement()); - render(new CreatePoint({offers: this.offers, destinations: this.destinations}), this.pointsListComponent.getElement()); + render(new CreatePoint(), this.pointsListComponent.getElement()); for (let i = 0; i < this.points.length; i++) { render(new PointItemView({point: this.points[i], offers: this.offers, destinations: this.destinations}), this.pointsListComponent.getElement()); diff --git a/src/view/create-point-view.js b/src/view/create-point-view.js index 7b50e1b..8e702ac 100644 --- a/src/view/create-point-view.js +++ b/src/view/create-point-view.js @@ -3,7 +3,7 @@ import { capitalize } from '../util'; import { TYPES, CITIES } from '../const'; const DEFAULT_TYPE = 'Flight'; -const DEFAULT_DESTINATION = 'Geneva' +const DEFAULT_DESTINATION = 'Geneva'; const DEFAULT_START_TIME = '19/03/19 00:00'; const DEFAULT_END_TIME = '19/03/19 00:00'; @@ -16,15 +16,15 @@ const createPointTypeItem = (pointType, pointTypeChecked) => ` const createDestinationsList = (destination) => ``; -function createCreatePointViewTemplate(offers, destinations) { - console.log(destinations); +function createCreatePointViewTemplate() { + const isTypeChecked = (pointType) => { if (pointType === 'flight') { - return 'checked' + return 'checked'; } else { - return '' + return ''; } - } + }; return `
  • @@ -144,13 +144,8 @@ function createCreatePointViewTemplate(offers, destinations) {
    • `; } export default class CreatePointView { - constructor({ offers, destinations }) { - this.offers = offers; - this.destinations = destinations; - } - getTemplate() { - return createCreatePointViewTemplate(this.offers, this.destinations); + return createCreatePointViewTemplate(); } getElement() { diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index c4d1850..d59110f 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -5,10 +5,10 @@ import { CITIES, DATE_WITH_TIME_FORMAT, TYPES } from '../const'; const createOfferClass = (offerTitle) => { const offerTitleSplitArray = offerTitle.split(' '); return offerTitleSplitArray[offerTitleSplitArray.length - 1]; -} +}; const createDestinationsList = (destination) => -``; + ``; const createPointTypeItem = (pointType, pointTypeChecked) => `
    @@ -32,19 +32,19 @@ function createEditPointViewTemplate(point, offers, destinations) { const isOfferChecked = (offerId) => { if (pointOffers.includes(offerId)) { - return 'checked' + return 'checked'; } else { - return '' + return ''; } - } + }; const isTypeChecked = (pointType) => { if (pointType === type) { - return 'checked' + return 'checked'; } else { - return '' + return ''; } - } + }; return `
  • From 93528b77a4cd6c0ff6bc871d2f7ecea1352f9fda Mon Sep 17 00:00:00 2001 From: Ksenia Tryapitsyna Date: Sun, 15 Sep 2024 16:37:10 +0300 Subject: [PATCH 14/14] fix: refactor code after code review --- src/util.js | 10 +++------- src/view/create-point-view.js | 4 ++-- src/view/edit-point-view.js | 12 ++++++------ src/view/point-item-view.js | 9 ++++----- 4 files changed, 15 insertions(+), 20 deletions(-) diff --git a/src/util.js b/src/util.js index c8afe4b..1e4e4f2 100644 --- a/src/util.js +++ b/src/util.js @@ -49,17 +49,13 @@ const getPointDuration = (pointDateFrom, pointDateTo) => { const pointDuration = dayjs.duration(humatizedDateTo.diff(humatizedDateFrom)); - let result = ''; - if (pointDuration.days() > 0) { - result = pointDuration.format('DD[D] HH[H] mm[M]'); + return pointDuration.format('DD[D] HH[H] mm[M]'); } else if (pointDuration.hours() > 0) { - result = pointDuration.format('HH[H] mm[M]'); + return pointDuration.format('HH[H] mm[M]'); } else { - result = pointDuration.format('mm[M]'); + return pointDuration.format('mm[M]'); } - - return result; }; export { capitalize, getRandomArrayElement, getRandomInteger, createIdGenerator, humanizePointDate, getPointDuration, getRandomIntegerArray }; diff --git a/src/view/create-point-view.js b/src/view/create-point-view.js index 8e702ac..cacb1af 100644 --- a/src/view/create-point-view.js +++ b/src/view/create-point-view.js @@ -18,7 +18,7 @@ const createDestinationsList = (destination) => function createCreatePointViewTemplate() { - const isTypeChecked = (pointType) => { + const getTypeCheckedAttribute = (pointType) => { if (pointType === 'flight') { return 'checked'; } else { @@ -39,7 +39,7 @@ function createCreatePointViewTemplate() {
    - ${TYPES.map((pointType) => createPointTypeItem(pointType, isTypeChecked(pointType))).join('')} + ${TYPES.map((pointType) => createPointTypeItem(pointType, getTypeCheckedAttribute(pointType))).join('')}
    • diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index d59110f..179f6a7 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -3,8 +3,8 @@ import { capitalize, humanizePointDate } from '../util'; import { CITIES, DATE_WITH_TIME_FORMAT, TYPES } from '../const'; const createOfferClass = (offerTitle) => { - const offerTitleSplitArray = offerTitle.split(' '); - return offerTitleSplitArray[offerTitleSplitArray.length - 1]; + const splittedOfferTitles = offerTitle.split(' '); + return splittedOfferTitles[splittedOfferTitles.length - 1]; }; const createDestinationsList = (destination) => @@ -30,7 +30,7 @@ function createEditPointViewTemplate(point, offers, destinations) { const modifiedDestination = destinations.find((destinationElement) => destinationElement.id === destination).name; const offersArray = offers.find((offer) => offer.type === type).offers; - const isOfferChecked = (offerId) => { + const getOfferCheckedAttribute = (offerId) => { if (pointOffers.includes(offerId)) { return 'checked'; } else { @@ -38,7 +38,7 @@ function createEditPointViewTemplate(point, offers, destinations) { } }; - const isTypeChecked = (pointType) => { + const getTypeCheckedAttribute = (pointType) => { if (pointType === type) { return 'checked'; } else { @@ -59,7 +59,7 @@ function createEditPointViewTemplate(point, offers, destinations) {
    - ${TYPES.map((pointType) => createPointTypeItem(pointType, isTypeChecked(pointType))).join('')} + ${TYPES.map((pointType) => createPointTypeItem(pointType, getTypeCheckedAttribute(pointType))).join('')}
    @@ -101,7 +101,7 @@ function createEditPointViewTemplate(point, offers, destinations) {

    Offers

    - ${offersArray.map((pointOffer) => getPointOfferItem(pointOffer, isOfferChecked(pointOffer.id))).join('')} + ${offersArray.map((pointOffer) => getPointOfferItem(pointOffer, getOfferCheckedAttribute(pointOffer.id))).join('')}
    diff --git a/src/view/point-item-view.js b/src/view/point-item-view.js index b306e28..855e9e7 100644 --- a/src/view/point-item-view.js +++ b/src/view/point-item-view.js @@ -2,8 +2,8 @@ import { createElement } from '../render'; import { humanizePointDate, getPointDuration } from '../util'; import { DATE_FORMAT, TIME_FORMAT } from '../const'; -const getOffersData = (offerType, offersList) => { - const offerData = offersList.find((offer) => offer.type === offerType).offers; +const getOffers = (offerType, offersList) => { + const offers = offersList.find((offer) => offer.type === offerType).offers; const renderOffers = (title, price) => `
  • ${title} @@ -11,8 +11,7 @@ const getOffersData = (offerType, offersList) => { ${price}
    • `; - const result = offerData.map((offer) => renderOffers(offer.title, offer.price)).join(''); - return result; + return offers.map((offer) => renderOffers(offer.title, offer.price)).join(''); }; function createPointItemViewTemplate(point, offers, destinations) { @@ -40,7 +39,7 @@ function createPointItemViewTemplate(point, offers, destinations) {

      - ${getOffersData(type, offers)} + ${getOffers(type, offers)}