@@ -26,8 +26,8 @@ const getComponentTemplate = () => (`
`
);
-export default class FiltersView extends AbstractView {
+export default class FilterView extends AbstractView {
get template() {
- return getComponentTemplate();
+ return createFiltersTemplate();
}
}
diff --git a/src/view/form-view.js b/src/view/form-view.js
new file mode 100644
index 0000000..2bd7aec
--- /dev/null
+++ b/src/view/form-view.js
@@ -0,0 +1,160 @@
+import AbstractView from './abstract-view';
+import { DateFormat, FormMode } from '../const';
+import { nanoid } from 'nanoid';
+import { toUpperCaseFirstLetter } from '../utils';
+import dayjs from 'dayjs';
+
+
+const createEventTypeItemTemplate = (eventType, offerTypes = []) => offerTypes.map((type) => {
+ const id = nanoid();
+ const checkStatus = eventType === type ? 'checked' : '';
+ return (`
+
+
+
+
`
+ );
+}).join('');
+
+const createEventTypeListTemplate = (eventType, offerTypes) => (`
+
+
+ `
+);
+
+const createOfferListItemTemplate = (offers) => offers.map(({ id, title, price, isChecked }) => (`
+
+
+
+
`
+)).join('');
+
+const createOfferListTemplate = (offers) => (`
+
+ Offers
+
+ ${createOfferListItemTemplate(offers)}
+
+ `
+);
+
+const createDestinationListTemplate = ({ type, destination }, destinations = []) => {
+ const [labelId, listId] = [nanoid(), nanoid()];
+ return (`
+
+
+
+
+
`
+ );
+};
+
+const createPicturesTemplate = (pictures = []) => pictures.map(({ src, description }) => `
`).join('');
+
+const createDestinationDescriptionTemplate = ({ description, pictures }) => (`
+
+ Destination
+ ${description ? `${description}
` : ''}
+
+
+ ${createPicturesTemplate(pictures)}
+
+
`
+);
+
+
+const createFormTemplate = (event, destinations, offerTypes, mode) => {
+ const {
+ basePrice,
+ dateFrom,
+ dateTo,
+ destination,
+ offers,
+ type,
+ } = event || {};
+
+ const id = nanoid();
+ const exitButtonText = mode === FormMode.EDIT ? 'Delete' : 'Cancel';
+ const eventTypeList = createEventTypeListTemplate(type, offerTypes);
+ const destinationList = createDestinationListTemplate({ type, destination }, destinations);
+ const offerDetailsList = offers.length ? createOfferListTemplate(offers) : '';
+ const destinationDescription = destination && (destination.pictures.length || destination.description) ? createDestinationDescriptionTemplate(destination) : '';
+
+ const dateStart = dayjs(dateFrom).format(DateFormat.FORM_START);
+ const dateEnd = dayjs(dateTo).format(DateFormat.FORM_START);
+ const price = basePrice > 0 ? basePrice : '';
+
+ return (`
+
+
+ `
+ );
+};
+
+export default class FormView extends AbstractView {
+
+ #eventData = [];
+ #destinations = [];
+ #offerTypes = [];
+ #mode = FormMode.EDIT;
+
+ constructor(event, destinations, offerTypes, mode = FormMode.EDIT) {
+ super();
+ this.#eventData = event;
+ this.#destinations = destinations;
+ this.#offerTypes = offerTypes;
+ this.#mode = mode in FormMode ? mode : FormMode.EDIT;
+ }
+
+ get template() {
+ return createFormTemplate(this.#eventData, this.#destinations, this.#offerTypes, this.#mode);
+ }
+}
+
diff --git a/src/view/new-event-button-view.js b/src/view/new-event-button-view.js
new file mode 100644
index 0000000..8661e10
--- /dev/null
+++ b/src/view/new-event-button-view.js
@@ -0,0 +1,28 @@
+import AbstractView from './abstract-view';
+
+const createButtonTemplate = (isDisabled) => (`
+
+ `);
+
+export default class NewEventButtonView extends AbstractView {
+ #isDisabled;
+
+ constructor(isDisabled = false) {
+ super();
+ this.#isDisabled = isDisabled;
+ }
+
+ get template() {
+ return createButtonTemplate(this.#isDisabled);
+ }
+
+ disable() {
+ this.element.disabled = true;
+ }
+
+ enable() {
+ this.element.disabled = false;
+ }
+}
diff --git a/src/view/new-route-button-view.js b/src/view/new-route-button-view.js
deleted file mode 100644
index 839fe54..0000000
--- a/src/view/new-route-button-view.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import AbstractView from './abstract-view';
-
-const getComponentTemplate = () => (`
-
- `);
-
-export default class NewRouteButtonView extends AbstractView {
- get template() {
- return getComponentTemplate();
- }
-}
diff --git a/src/view/route-create-view.js b/src/view/route-create-view.js
deleted file mode 100644
index bd38527..0000000
--- a/src/view/route-create-view.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import AbstractView from './abstract-view';
-
-const getComponentTemplate = () => (`
-
-
- `
-);
-
-export default class RouteCreateView extends AbstractView {
- get template() {
- return getComponentTemplate();
- }
-}
-
diff --git a/src/view/route-edit-view.js b/src/view/route-edit-view.js
deleted file mode 100644
index ebf20cb..0000000
--- a/src/view/route-edit-view.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import AbstractView from './abstract-view';
-
-const getComponentTemplate = () => (`
-
-
- `
-);
-
-export default class RouteEditView extends AbstractView {
- get template() {
- return getComponentTemplate();
- }
-}
-
diff --git a/src/view/route-list-view.js b/src/view/route-list-view.js
deleted file mode 100644
index 58c6029..0000000
--- a/src/view/route-list-view.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import AbstractView from './abstract-view';
-
-const getComponentTemplate = () => (`
-
`
-);
-
-export default class RouteListView extends AbstractView {
- get template() {
- return getComponentTemplate();
- }
-}
diff --git a/src/view/route-point-view.js b/src/view/route-point-view.js
deleted file mode 100644
index ee493e4..0000000
--- a/src/view/route-point-view.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import AbstractView from './abstract-view';
-
-const getComponentTemplate = () => (`
-
-
-
-
-
-
-
Taxi Amsterdam
-
-
-
- —
-
-
-
30M
-
-
- € 20
-
-
Offers:
-
- -
- Order Uber
- +€
- 20
-
-
-
-
-
`
-);
-
-export default class RoutePointView extends AbstractView {
- get template() {
- return getComponentTemplate();
- }
-}
diff --git a/src/view/sort-view.js b/src/view/sort-view.js
index 310cd57..1c83dd3 100644
--- a/src/view/sort-view.js
+++ b/src/view/sort-view.js
@@ -1,6 +1,6 @@
import AbstractView from './abstract-view';
-const getComponentTemplate = () => (`
+const createSortTemplate = () => (`
+