Skip to content

Commit

Permalink
2.10. Шаблонизируй это
Browse files Browse the repository at this point in the history
lunianka committed Mar 4, 2024
1 parent aae8185 commit 4144c45
Showing 15 changed files with 1,832 additions and 463 deletions.
1,705 changes: 1,379 additions & 326 deletions package-lock.json

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -16,12 +16,12 @@
"start": "webpack serve --mode development --open"
},
"devDependencies": {
"eslint": "8.28.0",
"eslint-config-htmlacademy": "8.0.0",
"@babel/core": "7.20.5",
"@babel/preset-env": "7.20.2",
"babel-loader": "9.1.0",
"copy-webpack-plugin": "11.0.0",
"eslint": "8.28.0",
"eslint-config-htmlacademy": "8.0.0",
"html-webpack-plugin": "^5.6.0",
"webpack": "5.75.0",
"webpack-cli": "5.0.0",
@@ -31,5 +31,6 @@
"node": "18"
},
"dependencies": {
"dayjs": "^1.11.6"
}
}
}
73 changes: 73 additions & 0 deletions src/const.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
const OFFER_COUNT = 5;
const DESTINATION_COUNT = 5;
const POINT_COUNT = 5;

const CITIES = [
'Chamonix',

Check failure on line 6 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 6 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Geneva',

Check failure on line 7 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 7 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Amsterdam',

Check failure on line 8 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 8 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Helsinki',

Check failure on line 9 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 9 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Oslo',

Check failure on line 10 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 10 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Kopenhagen',

Check failure on line 11 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 11 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Den Haag',

Check failure on line 12 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 12 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Rotterdam',

Check failure on line 13 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 13 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Saint Petersburg',

Check failure on line 14 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 14 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Moscow',

Check failure on line 15 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4

Check failure on line 15 in src/const.js

GitHub Actions / Check

Expected indentation of 2 spaces but found 4
'Sochi',
'Tokio',
];

const OFFERS = [
'Order Uber',
'Add luggage',
'Switch to comfort',
'Rent a car',
'Add breakfast',
'Book tickets',
'Lunch in city',
'Upgrade to a business class'
];

const DESCRIPTION = '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.';

const Price = {
MIN: 1,
MAX: 1000
};

const TYPES = [
'taxi',
'bus',
'train',
'ship',
'drive',
'flight',
'check-in',
'sightseeing',
'restaurant'
];

const DEFAULT_TYPE = 'flight';

const POINT_EMPTY = {
basePrice: 0,
dateFrom: null,
dateTo: null,
destination: null,
isFavorite: false,
offers: [],
type: DEFAULT_TYPE
};

export {
OFFER_COUNT,
DESTINATION_COUNT,
POINT_COUNT,
CITIES,
OFFERS,
DESCRIPTION,
Price,
TYPES,
DEFAULT_TYPE,
POINT_EMPTY
}
13 changes: 12 additions & 1 deletion src/main.js
Original file line number Diff line number Diff line change
@@ -2,10 +2,21 @@ import TripInfoView from './view/trip-info-view.js';
import FilterView from './view/filter-view.js';
import { render, RenderPosition } from './render.js';
import TripPresenter from './presenter/trip-presenter.js';
import MockService from './service/mock-service.js';
import DestinationsModel from './model/destinations-model.js';
import OffersModel from './model/offers-model.js';
import PointsModel from './model/points-model.js';

const tripInfoElement = document.querySelector('.trip-main');
const siteMainElement = document.querySelector('.page-main');
const tripPresenter = new TripPresenter(siteMainElement.querySelector('.trip-events'));
const eventListElement = siteMainElement.querySelector('.trip-events');

const mockService = new MockService();
const destinationsModel = new DestinationsModel(mockService);
const offersModel = new OffersModel(mockService);
const pointsModel = new PointsModel(mockService);

const tripPresenter = new TripPresenter({tripContainer: eventListElement, destinationsModel, offersModel, pointsModel});

render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN);
render(new FilterView(), tripInfoElement.querySelector('.trip-controls__filters'));
18 changes: 18 additions & 0 deletions src/mock/destination.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { getRandomValue, getRandomInteger } from "../utils.js";
import { CITIES, DESCRIPTION } from "../const.js";

function generateDestination () {
const city = getRandomValue(CITIES);

return {
id: crypto.randomUUID(),
description: DESCRIPTION,
name: city,
pictures: Array.from({ length: getRandomInteger(1, 5) }, () => ({
'src': `https://loremflickr.com/248/152?random=${crypto.randomUUID()}`,
'description': `${city} description`
}))
};
}

export { generateDestination };
14 changes: 14 additions & 0 deletions src/mock/offer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { OFFERS, Price } from '../const.js'
import { getRandomInteger, getRandomValue } from "../utils.js";

function generateOffer() {
const offer = getRandomValue(OFFERS);

return {
id: crypto.randomUUID(),
title: offer,
price: getRandomInteger(Price.MIN, (Price.MAX / 10))
};
}

export { generateOffer };
17 changes: 17 additions & 0 deletions src/mock/point.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Price } from "../const.js";
import { getRandomInteger, getDate } from "../utils.js";

function generatePoint (type, destinationId, offerIds) {
return {
id: crypto.randomUUID(),
basePrice: getRandomInteger(Price.MIN, Price.MAX),
dateFrom: getDate({ next: false }),
dateTo: getDate({ next: true }),
destination: destinationId,
isFavorite: getRandomInteger(0, 1),
offers: offerIds,
type
};
}

export { generatePoint };
14 changes: 14 additions & 0 deletions src/model/destinations-model.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export default class DestinationsModel {
constructor(service) {
this.service = service;
this.destinations = this.service.getDestinations();
}

get() {
return this.destinations;
}

getById(id) {
return this.destinations.find((destination) => destination.id === id);
}
}
14 changes: 14 additions & 0 deletions src/model/offers-model.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export default class OffersModel {
constructor(service) {
this.service = service;
this.offers = this.service.getOffers();
}

get() {
return this.offers;
}

getByType(type) {
return this.offers.find((offer) => offer.type === type);
}
}
10 changes: 10 additions & 0 deletions src/model/points-model.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export default class PointsModel {
constructor(service) {
this.service = service;
this.points = this.service.getPoints();
}

get() {
return this.points;
}
}
25 changes: 22 additions & 3 deletions src/presenter/trip-presenter.js
Original file line number Diff line number Diff line change
@@ -8,15 +8,34 @@ export default class TripPresenter {
constructor(tripContainer) {
this.tripContainer = tripContainer;
this.pointList = new TripView();
this.destinationsModel = destinationsModel;
this.offersModel = offersModel;
this.pointsModel = pointsModel;
this.points = [...pointsModel.get()];
}

init() {
render(new SortView(), this.tripContainer);
render(this.pointList, this.tripContainer);
render(new EditPointView(), this.pointList.getElement());
render(
new EditPointView({
point: this.points[0],
pointDestination: this.destinationsModel.getById(this.points[0].destination),
pointOffers: this.offersModel.getByType(this.points[0].type),
}),
this.pointList.getElement()
);

for (let i = 0; i < 3; i++) {
render(new PointView(), this.pointList.getElement());
for (let i = 1; i < this.points.length; i++) {
const point = this.points[i];
render(
new PointView({
point,
pointDestination: this.destinationsModel.getById(point.destination),
pointOffers: this.offersModel.getByType(point.type)
}),
this.pointList.getElement()
);
}
}
}
60 changes: 60 additions & 0 deletions src/service/mock-service.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { generateDestination } from '../mock/destination.js';
import { generateOffer } from '../mock/offer.js';
import { generatePoint } from '../mock/point.js';

import { getRandomInteger, getRandomValue } from '../utils.js';
import { DESTINATION_COUNT, OFFER_COUNT, POINT_COUNT, TYPES } from '../const.js';

export default class MockService {
destinations = [];
offers = [];
points = [];

constructor() {
this.destinations = this.generateDestinations();
this.offers = this.generateOffers();
this.points = this.generatePoints();
}

getDestinations() {
return this.destinations;
}

generateOffers() {
return TYPES.map((type) => ({
type,
offers: Array.from({ length: getRandomInteger(0, OFFER_COUNT) }, () => generateOffer(type))
}));
}

generatePoints() {
return Array.from({ length: POINT_COUNT }, () => {
const type = getRandomValue(TYPES);
const destination = getRandomValue(this.destinations);
const hasOffers = getRandomInteger(0, 1);
const offersByType = this.offers.find((offerByType) => offerByType.type === type);
const offerIds = (hasOffers)
? offersByType.offers
.slice(0, getRandomInteger(0, OFFER_COUNT))
.map((offer) => offer.id)
: [];

return generatePoint(type, destination.id, offerIds);
});
}

getOffers() {
return this.offers;
}

getPoints() {
return this.points;
}

generateDestinations() {
return Array.from(
{ length: DESTINATION_COUNT },
() => generateDestination()
);
}
}
Loading

0 comments on commit 4144c45

Please sign in to comment.