diff --git a/src/const.js b/src/const.js
index 5abf5aa..009b20f 100644
--- a/src/const.js
+++ b/src/const.js
@@ -1,7 +1,16 @@
-const POINT_COUNT = 4;
+const POINT_COUNT = 5;
const DESTINATIONS = ['Paris', 'London', 'New York', 'Shanghai', 'Moscow'];
+const FILTERS = {
+ 'Everything': POINT_COUNT,
+ 'Future': POINT_COUNT,
+ 'Present': POINT_COUNT,
+ 'Past': POINT_COUNT
+};
+
+const DEFAULT_FILTER = 'Everything';
+
const DESCRIPTIONS = [
'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.',
@@ -31,4 +40,5 @@ const DEFAULT_POINT_DATA = {
type: 'Flight'
};
-export {POINT_COUNT, DESTINATIONS, DESCRIPTIONS, DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR, TYPES, DEFAULT_POINT_DATA};
+export {POINT_COUNT, DESTINATIONS, DESCRIPTIONS, DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR,
+ TYPES, DEFAULT_POINT_DATA, FILTERS, DEFAULT_FILTER};
diff --git a/src/main.js b/src/main.js
index 1d21208..daa1964 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,16 @@
import FilterView from './view/filter-view.js';
-import SortView from './view/sort-view.js';
import ListPresenter from './presenter/list-presenter.js';
import PointsModel from './model/points-model.js';
import {render} from './framework/render.js';
const filterContainer = document.querySelector('.trip-controls__filters');
-const pointsContainer = document.querySelector('.trip-events');
+const pointsListContainer = document.querySelector('.trip-events');
const pointsModel = new PointsModel();
const listPresenter = new ListPresenter({
- container: pointsContainer,
+ container: pointsListContainer,
pointsModel
});
render(new FilterView(), filterContainer);
-render(new SortView(), pointsContainer);
listPresenter.init();
diff --git a/src/mock/point.js b/src/mock/point.js
index becca55..7d11c77 100644
--- a/src/mock/point.js
+++ b/src/mock/point.js
@@ -1,4 +1,4 @@
-import {getRandomArrayElement, getRandomArbitrary} from '../utils.js';
+import {getRandomArrayElement, getRandomArbitrary} from '../utils/utils.js';
import {DESTINATIONS, DESCRIPTIONS} from '../const.js';
const mockPoints = [
diff --git a/src/presenter/list-presenter.js b/src/presenter/list-presenter.js
index a077e2c..afb9785 100644
--- a/src/presenter/list-presenter.js
+++ b/src/presenter/list-presenter.js
@@ -1,6 +1,8 @@
import ListView from '../view/list-view.js';
+import SortView from '../view/sort-view.js';
import EditPointView from '../view/edit-point-view.js';
import ListPointView from '../view/point-view.js';
+import NoPointsView from '../view/no-points-view.js';
import {render, replace} from '../framework/render.js';
import {getDestinationById, getOffersByType, getSelectedOffers} from '../mock/point.js';
@@ -17,11 +19,7 @@ export default class ListPresenter {
init() {
this.#points = [...this.#pointsModel.points];
- render(this.#listComponent, this.#container);
-
- for (let i = 0; i < this.#points.length; i++) {
- this.#renderPoint(this.#points[i]);
- }
+ this.#renderList();
}
#renderPoint(point) {
@@ -70,4 +68,16 @@ export default class ListPresenter {
render(pointComponent, this.#listComponent.element);
}
+
+ #renderList() {
+ if (this.#points.length === 0) {
+ render(new NoPointsView(), this.#container);
+ return;
+ }
+ render(new SortView(), this.#container);
+ render(this.#listComponent, this.#container);
+ for (let i = 0; i < this.#points.length; i++) {
+ this.#renderPoint(this.#points[i]);
+ }
+ }
}
diff --git a/src/utils/filters.js b/src/utils/filters.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils.js b/src/utils/utils.js
similarity index 98%
rename from src/utils.js
rename to src/utils/utils.js
index b1c5b65..708568f 100644
--- a/src/utils.js
+++ b/src/utils/utils.js
@@ -1,5 +1,5 @@
import dayjs from 'dayjs';
-import {DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR} from './const';
+import {DATE_FORMAT, TIME_FORMAT, HOUR_IN_DAY, MINUTES_IN_HOUR} from '../const';
function humanizeDueDate(dueDate) {
return dueDate ? dayjs(dueDate).format(DATE_FORMAT) : '';
diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js
index 309ed82..5480262 100644
--- a/src/view/edit-point-view.js
+++ b/src/view/edit-point-view.js
@@ -96,54 +96,47 @@ export default class EditPointView extends AbstractView {
this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#clickHandler);
}
+ #createTypeTemplate(type) {
+ const isChecked = type === this.#point.type ? 'checked' : '';
+ return `
+
+
+
+
`;
+ }
+
get #typesTemplate() {
- let typesTemplate = '';
- for (let i = 0; i < TYPES.length; i++) {
- const isChecked = TYPES[i] === this.#point.type ? 'checked' : '';
- typesTemplate += `
-
-
-
-
`;
- }
- return typesTemplate;
+ return TYPES.map((type) => this.#createTypeTemplate(type)).join('');
}
get #destinationsTemplate() {
- let destinationsTemplate = '';
- for (let i = 0; i < DESTINATIONS.length; i++) {
- destinationsTemplate += `
- `;
- }
- return destinationsTemplate;
+ return DESTINATIONS.map((destination) => ``).join('');
+ }
+
+ #createOfferTemplate(offer) {
+ const isChecked = offer.id in this.#point.offers ? 'checked' : '';
+ const offerShortName = offer.name.toLowerCase().split(' ').at(-1);
+ return `
+
+
+
+
`;
}
get #offersTemplate() {
- let offersTemplate = '';
- for (let i = 0; i < this.#offersByType.length; i++) {
- const isChecked = this.#offersByType[i].id in this.#point.offers ? 'checked' : '';
- const offerShortName = this.#offersByType[i].name.toLowerCase().split(' ').at(-1);
- offersTemplate += `
-
-
-
-
`;
- }
- return offersTemplate;
+ return this.#offersByType.map((offer) => this.#createOfferTemplate(offer)).join('');
+ }
+
+ #createPictureTemplate(picture) {
+ return `
`;
}
get #picturesTemplate() {
- let picturesTemplate = '';
- for (let i = 0; i < this.#destination.pictures.length; i++) {
- const picture = this.#destination.pictures[i];
- picturesTemplate += `
- `;
- }
- return picturesTemplate;
+ return this.#destination.pictures.map((picture) => this.#createPictureTemplate(picture)).join('');
}
get template() {
diff --git a/src/view/filter-view.js b/src/view/filter-view.js
index fa1aae5..0beb6ee 100644
--- a/src/view/filter-view.js
+++ b/src/view/filter-view.js
@@ -1,35 +1,27 @@
import AbstractView from '../framework/view/abstract-view.js';
+import {FILTERS, DEFAULT_FILTER} from '../const.js';
-function createFilterTemplate() {
+function createFilterTemplate(filterName, count) {
+ const filter = filterName.toLowerCase();
+ const isChecked = filterName === DEFAULT_FILTER ? 'checked' : '';
+ const isDisabled = count === 0 ? 'disabled' : '';
return `
-
+
+
+
+
`;
}
export default class FilterView extends AbstractView {
get template() {
- return createFilterTemplate();
+ const filtersTemplate = Object.entries(FILTERS).map(([filter, count]) => createFilterTemplate(filter, count)).join('');
+
+ return `
+
+ `;
}
}
diff --git a/src/view/no-points-view.js b/src/view/no-points-view.js
new file mode 100644
index 0000000..a54b24d
--- /dev/null
+++ b/src/view/no-points-view.js
@@ -0,0 +1,11 @@
+import AbstractView from '../framework/view/abstract-view.js';
+
+function createNoPointsTemplate() {
+ return 'Click New Event to create your first point
';
+}
+
+export default class NoPointsView extends AbstractView {
+ get template() {
+ return createNoPointsTemplate();
+ }
+}
diff --git a/src/view/point-view.js b/src/view/point-view.js
index 9a181b3..762e1e9 100644
--- a/src/view/point-view.js
+++ b/src/view/point-view.js
@@ -1,4 +1,4 @@
-import {humanizeDueDate, humanizeDueTime, humanizeDuration} from '../utils.js';
+import {humanizeDueDate, humanizeDueTime, humanizeDuration} from '../utils/utils.js';
import AbstractView from '../framework/view/abstract-view.js';
function createListPointTemplate(point, totalPrice, destination, selectedOffersTemplate, isFavorite) {
@@ -54,17 +54,17 @@ export default class ListPointView extends AbstractView {
this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#clickHandler);
}
+ #createSelectedOfferTemplate(offer) {
+ return `
+
+ ${offer.name}
+ +€
+ ${offer.price}
+ `;
+ }
+
get #selectedOffersTemplate() {
- let selectedOffersTemplate = '';
- for (let i = 0; i < this.#selectedOffers.length; i++) {
- selectedOffersTemplate += `
-
- ${this.#selectedOffers[i].name}
- +€
- ${this.#selectedOffers[i].price}
- `;
- }
- return selectedOffersTemplate;
+ return this.#selectedOffers.map((offer) => this.#createSelectedOfferTemplate(offer)).join('');
}
get #totalPrice() {