Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module2 task1 #5

Merged
merged 5 commits into from
Sep 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions src/const.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
const TYPE = [
'Taxi',
'Bus',
'Train',
'Ship',
'Drive',
'Flight',
'Check-in',
'Sightseeing',
'Restaurant',
];
const CITIES = [
'New-York',
'Tokio',
'Saint-Petersburg',
'London',
'Paris',
'San-Francisco',
'Moscow',
];
const OFFERS = [
'Add luggage',
'Switch to comfort class',
'Add meal',
'Choose seats',
'Travel by train',
'Order Uber',
'Rent a car',
'Add breakfast',
'Book tickets',
'Lunch in city',
];
export { TYPE, CITIES, OFFERS };
9 changes: 7 additions & 2 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,22 @@ import TripSortView from './view/trip-event-view.js'; //Сортировка DAY
//import AddPointView from './view/trip-add-point-view.js'; //Форма создания

import BoardPresenter from './presenter/board-presenter.js';

import PointsModel from './model/point-model.js';
import {render, renderBegin} from './render.js';


const siteMainElement = document.querySelector('.page-body');
const siteTripInfoElement = siteMainElement.querySelector('.trip-main'); // шапка
const siteTripInfo = siteMainElement.querySelector('.trip-info'); // Инфо в шапке про маршрут
const siteFiltersElement = siteTripInfoElement.querySelector('.trip-controls__filters'); // Фильтры EVERYTHING, FUTURE, PAST и т.д
const siteEventsElement = siteMainElement.querySelector('.trip-events'); // Сортировка DAY, EVENT, TIME итд., Форма создания и Точка маршрута

const pointsModel = new PointsModel(); //Создаем инстанс класса из модели

const boardPresenter = new BoardPresenter({container: siteEventsElement});
const boardPresenter = new BoardPresenter({
container: siteEventsElement,
pointsModel
});

renderBegin(new TripInfoView(), siteTripInfo); // Отображение информации в шапке про маршрут
render(new TripFilterView(), siteFiltersElement); // Фильтры EVERYTHING, FUTURE, PAST и т.д
Expand Down
Empty file added src/mock/destination.js
Empty file.
82 changes: 82 additions & 0 deletions src/mock/offers.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { getRandomArrayElement, getRandomInteger } from '../utils.js';
import { TYPE, OFFERS } from '../const.js';

const mockOffers = [
{
'type': getRandomArrayElement(TYPE),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

По моему тут в поле тип должен быть конкретный уникальный тип, а в случае применения функции helper он может дублироваться

'offers': [
{
'id': '575c1f4b-b575-4ef7-b9ec-9e4e218f9ac0',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
},
{
'id': '2666bc9c-0ec7-4156-8a30-deadcca5d0c7',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
},
{
'id': 'a0499b61-8c63-4f89-84bc-0a5740aad819',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
},
{
'id': '5345f195-ce01-4217-b986-0ebd5c1b9177',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
},
{
'id': '3c8d6fa3-7ff8-459b-a1aa-0e581e45c779',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
}
]
},
{
'type': getRandomArrayElement(TYPE),
'offers': [
{
'id': 'a4dd55b0-77e6-42da-83f6-7e9b57764d85',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
},
{
'id': '49da3166-b680-4fb3-a3fc-3750d534e18e',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
},
{
'id': 'e9d4c4d5-03ab-4da1-ad2f-053ffafba6f1',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
}
]
},
{
'type': getRandomArrayElement(TYPE),
'offers': [
{
'id': '33cc680e-5a46-46c4-8cab-072b1f5b9b5f',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
},
{
'id': 'e420f53e-f5b3-4ccc-9f05-e6b5deb4421a',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
},
{
'id': 'd283cad1-cea0-43ea-a762-d66bd66b2c4c',
'title': getRandomArrayElement(OFFERS),
'price': getRandomInteger(100, 300)
}
]
},
];

function getRandomOffers() {
return getRandomArrayElement(mockOffers);
}
export {getRandomOffers};
//console.log(getRandomOffers())

90 changes: 90 additions & 0 deletions src/mock/points.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { getRandomArrayElement, getRandomInteger } from '../utils.js';
import { TYPE, CITIES, OFFERS } from '../const.js';

const mockPoints = [
{
'id': '02ec2f95-051c-4ce4-a60f-7f9eed7ec84f',
'basePrice': getRandomInteger(500, 2000),
'dateFrom': '2024-11-02T21:55:08.370Z',
'dateTo': '2024-11-04T08:28:08.370Z',
'destination': getRandomArrayElement(CITIES),
'isFavorite': false,
'offers': [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Тоже касается и поля offers

getRandomArrayElement(OFFERS),
getRandomArrayElement(OFFERS),
getRandomArrayElement(OFFERS),
getRandomArrayElement(OFFERS),
getRandomArrayElement(OFFERS),
],
'type': getRandomArrayElement(TYPE)
},
{
'id': '88586f92-70fa-4d0d-bc04-2841803772b0',
'basePrice': getRandomInteger(500, 2000),
'dateFrom': '2024-11-04T20:40:08.370Z',
'dateTo': '2024-11-05T18:46:08.370Z',
'destination': getRandomArrayElement(CITIES),
'isFavorite': true,
'offers': [
getRandomArrayElement(OFFERS),
getRandomArrayElement(OFFERS),
],
'type': getRandomArrayElement(TYPE)
},
{
'id': '849780ca-492d-481e-8929-c5a4137d216e',
'basePrice': getRandomInteger(500, 2000),
'dateFrom': '2024-11-07T05:18:08.370Z',
'dateTo': '2024-11-07T21:13:08.370Z',
'destination': getRandomArrayElement(CITIES),
'isFavorite': true,
'offers': [
getRandomArrayElement(OFFERS),
],
'type': getRandomArrayElement(TYPE)
},
{
'id': 'd378e714-b66a-4cd1-8c02-ddb09255dc1d',
'basePrice': getRandomInteger(500, 2000),
'dateFrom': '2024-11-09T19:01:08.370Z',
'dateTo': '2024-11-10T01:12:08.370Z',
'destination': getRandomArrayElement(CITIES),
'isFavorite': false,
'offers': [
getRandomArrayElement(OFFERS),
getRandomArrayElement(OFFERS),
getRandomArrayElement(OFFERS),
],
'type': getRandomArrayElement(TYPE)
},
{
'id': 'fa8b3372-f5d1-4358-85de-051faccedf1d',
'basePrice': getRandomInteger(500, 2000),
'dateFrom': '2024-11-11T12:14:08.370Z',
'dateTo': '2024-11-12T19:18:08.370Z',
'destination': getRandomArrayElement(CITIES),
'isFavorite': true,
'offers': [
getRandomArrayElement(OFFERS),
],
'type': getRandomArrayElement(TYPE)
},
{
'id': '0376175d-c725-47f8-bd9c-4bf2975cb033',
'basePrice': getRandomInteger(500, 2000),
'dateFrom': '2024-11-13T13:03:08.370Z',
'dateTo': '2024-11-14T02:51:08.370Z',
'destination': getRandomArrayElement(CITIES),
'isFavorite': true,
'offers': [
getRandomArrayElement(OFFERS),
],
'type': getRandomArrayElement(TYPE)
},
];

function getRandomPoint() {
return getRandomArrayElement(mockPoints); //Функция-обертка, возвращающая getRandomArrayElement ОДНОГО ПОИНТА!!!
}
export {getRandomPoint};

1 change: 1 addition & 0 deletions src/model/offers-model.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

17 changes: 17 additions & 0 deletions src/model/point-model.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {getRandomPoint} from '../mock/points.js';
import {getRandomOffers} from '../mock/offers.js';
const POINT_COUNT = 5; //Количество поинтов (сколько раз отрисуется поинт getRandomPoint)

export default class PointsModel {
points = Array.from({length: POINT_COUNT}, getRandomPoint); //Записываем в points массив поинтов
offers = Array.from({length: 1}, getRandomOffers);

getPoints() {
return this.points;
}

getOffers() {
return this.offers;
}
}

16 changes: 11 additions & 5 deletions src/presenter/board-presenter.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@

import PointView from '../view/trip-point-view.js'; //Точка маршрута
import EditPointView from '../view/trip-edit-point-view.js';
import OffersView from '../view/trip-edit-point-view.js';//Форма редактирования
import {render, RenderPosition} from '../render.js';

export default class BoardPresenter {
constructor({container}) {


constructor({container, pointsModel}) {
this.container = container;
this.pointsModel = pointsModel;
}

init() {
render(new EditPointView(), this.container, RenderPosition.BEFOREEND); //Форма редактирования
for (let i = 0; i < 3; i++) {
render(new PointView(), this.container, RenderPosition.BEFOREEND); //Отображение Точки маршрута 3 раза
this.boardOffers = [...this.pointsModel.getOffers()];
this.boardPoints = [...this.pointsModel.getPoints()];
render(new OffersView({offers: this.boardOffers[0]}), this.container, RenderPosition.BEFOREEND); //Отображение формы редактирования
for (let i = 0; i < this.boardPoints.length; i++) {
render(new PointView({points: this.boardPoints[i]}), this.container, RenderPosition.BEFOREEND); //Отображение Точки маршрута 3 раза
}
}
}

8 changes: 8 additions & 0 deletions src/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
function getRandomArrayElement(items) {
return items[Math.floor(Math.random() * items.length)];
}
function getRandomInteger(min, max) {
const rand = Math.floor(min + Math.random() * (max + 1 - min));
return Math.floor(rand);
}
export { getRandomArrayElement, getRandomInteger };
20 changes: 13 additions & 7 deletions src/view/trip-edit-point-view.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import {createElement} from '../render.js';

function createAddPointTemplate() {
function createAddPointTemplate(offers) {
const { type, offers: {price} } = offers; //Необходимо деструктурировать!!

return (
`<form class="event event--edit" action="#" method="post">
<header class="event__header">
Expand All @@ -17,7 +19,7 @@ function createAddPointTemplate() {

<div class="event__type-item">
<input id="event-type-taxi-1" class="event__type-input visually-hidden" type="radio" name="event-type" value="taxi">
<label class="event__type-label event__type-label--taxi" for="event-type-taxi-1">Taxi</label>
<label class="event__type-label event__type-label--taxi" for="event-type-taxi-1">ffdd</label>
</div>

<div class="event__type-item">
Expand Down Expand Up @@ -65,7 +67,7 @@ function createAddPointTemplate() {

<div class="event__field-group event__field-group--destination">
<label class="event__label event__type-output" for="event-destination-1">
Flight
${type}
</label>
<input class="event__input event__input--destination" id="event-destination-1" type="text" name="event-destination" value="Chamonix" list="destination-list-1">
<datalist id="destination-list-1">
Expand All @@ -88,7 +90,7 @@ function createAddPointTemplate() {
<span class="visually-hidden">Price</span>
&euro;
</label>
<input class="event__input event__input--price" id="event-price-1" type="text" name="event-price" value="160">
<input class="event__input event__input--price" id="event-price-1" type="text" name="event-price" value="${price}">
</div>

<button class="event__save-btn btn btn--blue" type="submit">Save</button>
Expand Down Expand Up @@ -123,7 +125,7 @@ function createAddPointTemplate() {
<div class="event__offer-selector">
<input class="event__offer-checkbox visually-hidden" id="event-offer-meal-1" type="checkbox" name="event-offer-meal">
<label class="event__offer-label" for="event-offer-meal-1">
<span class="event__offer-title">Add meal</span>
<span class="event__offer-title">${type}</span>
&plus;&euro;&nbsp;
<span class="event__offer-price">15</span>
</label>
Expand Down Expand Up @@ -157,9 +159,13 @@ function createAddPointTemplate() {
</form>`);
}

export default class EditPointView {
export default class OffersView {
constructor({offers}) {
this.offers = offers;
}

getTemplate() {
return createAddPointTemplate();
return createAddPointTemplate(this.offers);
}

getElement() {
Expand Down
4 changes: 3 additions & 1 deletion src/view/trip-info-view.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {createElement} from '../render.js';

function createTripInfoTemplate() {

return (
` <section class="trip-main__trip-info trip-info">
<div class="trip-info__main">
Expand All @@ -12,7 +13,8 @@ function createTripInfoTemplate() {
<p class="trip-info__cost">
Total: &euro;&nbsp;<span class="trip-info__cost-value">1230</span>
</p>
</section>`);
</section>`
);
}

export default class TripInfoView {
Expand Down
Loading
Loading