PheRum / web-larek-frontend

Фронтенд проекта "Веб Ларёк"

https://github.com/PheRum/web-larek-frontend

Проектная работа "Веб-ларек"

При реализации использовался паттерн MVP

MVP (Model-View-Presenter) — это популярный архитектурный шаблон для разработки программного обеспечения, который используется для построения приложений. MVP разделяет приложение на три основных компонента:

• Модель (Model): Модель представляет собой бизнес-логику приложения и данные. Она ответственна за выполнение операций, таких как чтение и запись данных, обработка бизнес-логики и взаимодействие с базой данных или внешними источниками данных. Модель не зависит от представления или презентера и предоставляет API для доступа к данным.

• Представление (View): Представление отображает данные пользователю и обрабатывает пользовательский ввод. Оно представляет собой интерфейс пользователя, через который пользователь взаимодействует с приложением. В MVP представление пассивно и не содержит бизнес-логики. Оно лишь отображает данные, предоставленные презентером, и передает пользовательский ввод презентеру.

• Презентер (Presenter): Презентер является посредником между моделью и представлением. Он содержит бизнес-логику приложения и управляет взаимодействием между моделью и представлением. Презентер получает данные от модели, форматирует их и передает представлению для отображения. Он также обрабатывает пользовательский ввод, передавая соответствующие команды модели для обновления данных.

Стек: HTML, SCSS, TS, Webpack

Структура проекта:

• src/ — исходные файлы проекта
• src/components/ — папка с JS компонентами
• src/components/base/ — папка с базовым кодом

Важные файлы:

• src/pages/index.html — HTML-файл главной страницы
• src/types/basket.ts — файл с типами корзины
• src/types/order.ts — файл с типами заказа
• src/types/payment.ts — файл с типами оплаты
• src/types/product.ts — файл с типами продукта
• src/index.ts — точка входа приложения
• src/styles/styles.scss — корневой файл стилей
• src/utils/constants.ts — файл с константами
• src/utils/index.ts — файл с утилитами

Установка и запуск

Для установки и запуска проекта необходимо выполнить команды

npm install
npm run start

или

yarn
yarn start

Сборка

npm run build

или

yarn build

Описание данных

IProduct

Содержит поля приходящие с сервера.

IBasket

Содержит список товаров и итоговую стоимость.

IOrder

Содержит поля для составления валидного заказа.

IOrderResult

Данный интерфейс содержит идентификатор созданного заказа и количество списанной валюты.

OrderFormType

Тип создан для валидации полей ввода.

PaymentMethodType

Тип в котором содержатся методы оплаты.

IWebLarekAPI

Интерфейс описывающий методы получения данных с сервера.

• getProductList - Список продуктов
• getProductItem - Получить продукт по его id
• orderProducts - будет брокировать прокрутку страницы.

IEvents

Интерфейс созданный для брокера событий.

Интерфейсы для отображения моделей данных

IModalData

Интерфейс содержит:

• content - контент в виде DOM-разметки.

IFormState

Интерфейс содержащий поля для отслеживания валидности введенных пользователем данных.

IPage

Интерфейс содержит:

• counter - счетчик товаров в корзине.
• catalog - каталог товаров в виде DOM-разметки.
• locked - будет брокировать прокрутку страницы.

Класс WebLarekAPI

Наследует класс Api и реализует интерфейс IWebLarekAPI. Предоставляет методы для взаимодействия с веб-API для работы с продуктами и заказами. Конструктор класса, который принимает URL-адрес хоста cdn, базовый URL-адрес baseUrl и опции для запроса options. В конструкторе вызывается конструктор родительского класса Api с переданными параметрами.

Содержит:

• getProductList - Выполняет запрос для получения списка продуктов и обрабатывает полученные данные, добавляя к каждому элементу ссылку на изображение.
• getProductItem - Выполняет запрос для получения информации о конкретном продукте по его идентификатору и обрабатывает полученные данные, добавляя ссылку на изображение.
• orderProducts - Отправка данных заказа на сервер

Базовые классы

Класс Component

Базовый класс предназначен для управления компонентом.

Абстрактный класс который является базовым компонентом. Предоставляет ряд методов для работы с DOM элементами.
Конструктор принимает один параметр - контейнер типа HTMLElement, в котором компонент будет рендериться.

Методы

• toggleClass - Переключает класс у элемента.
• setText - Устанавливает текстовое содержимое элемента.
• setDisabled - Устанавливает или снимает блокировку элемента.
• setImage - Устанавливает изображение и альтернативный текст.
• render - Основной метод, который возвращает корневой DOM-элемент компонента.
  Принимает необязательный параметр data, который можно использовать для обновления свойств компонента.

Класс View

Класс наследуется от Component и добавляет поле events типа IEvents, которое используется для управления событиями компонента. Конструктор принимает два параметра:container и events

Компоненты представления

Form

Наследует класс View<IFormState>. Представляет компонент формы с возможностью управления состоянием валидации и отображения ошибок. Конструктор класса принимает контейнер формы container типа HTMLFormElement и объект событий events типа EventEmitter. В конструкторе вызывается конструктор родительского класса View с переданным контейнером и объектом событий.

Содержит:

• onInputChange - Метод генерирует событие change с данными о поле формы, которое было изменено, и его значении.
• valid - Установка состояния валидации формы
• errors - Отображение ошибок.
• render - Метод принимает объект state, который содержит частичное состояние формы и обновляет состояние компонента.

Basket

Наследует класс View<IBasket>. Представляет компонент корзины с возможностью отображения списка товаров,
общей суммы и управления состоянием кнопки оформления заказа.
Конструктор класса, который принимает объект events типа EventEmitter для управления событиями.
Внутри конструктора вызывается конструктор родительского класса View с клонированным HTML-шаблоном корзины.

Содержит:

• template - Статическое поле, которое содержит HTML-шаблон корзины.
• _list - Приватное поле для хранения ссылки на элемент корзины.
• _total - Приватное поле для хранения ссылки на элемент корзины.
• _button - Приватное поле для хранения ссылки на элемент корзины.
• items - Метод для установки списка товаров в корзине. Если список не пустой, элементы списка заменяются внутри контейнера корзины. Если список пуст, вставляется элемент "Корзина пуста". Также обновляется состояние кнопки оформления заказа.
• selected - Метод для установки выбранных товаров. Если выбранные товары есть, кнопка оформления заказа активируется, иначе деактивируется.
• total - Метод для установки общей суммы товаров в корзине.

Page

Наследует класс View<IPage>. Представляет компонент страницы с некоторыми элементами и функциональностью для управления ими. Конструктор класса принимает контейнер страницы container типа HTMLElement и объект событий events типа IEvents. В конструкторе вызывается конструктор родительского класса View с переданным контейнером и объектом событий.

Содержит:

• counter - устанавливает значения счетчика.
• catalog - устанавливает содержимого каталога.
• locked - устанавливает состояния блокировки страницы.

Modal

Наследует класс View<IModalData>. Представляет компонент модального окна с возможностью открытия и закрытия, а также управления содержимым. Конструктор класса принимает контейнер модального окна container типа HTMLElement и объект событий events типа IEvents. В конструкторе вызывается конструктор родительского класса View с переданным контейнером и объектом событий.

Содержит:

• content - Устанавливает новое содержимое модального окна, заменяя предыдущее содержимое.
• open - Метод открывает модальное окно, добавляя ему класс modal_active, и генерирует событие 'modal: open'.
• close - Метод закрывает модальное окно, удаляя класс modal_active, устанавливает содержимое модального окна в null и генерирует событие 'modal:close'.

Order

Наследует класс Form<OrderForm>. Представляет форму заказа с возможностью выбора способа оплаты. Конструктор класса, который принимает контейнер формы заказа container типа HTMLFormElement и объект событий events типа EventEmitter. В конструкторе вызывается конструктор родительского класса Form с переданным контейнером и объектом событий.

Содержит:

• address - Устанавливает адрес для доставки заказа.
• payment - Устанавливает выбранный метод оплаты и активирует соответствующую кнопку.

Card

Наследует класс Component<IProduct>. Представляет компонент карточки товара с возможностью отображения
информации о товаре и выполнения действий при нажатии на кнопку или саму карточку. Конструктор класса принимает контейнер карточки container типа HTMLElement и опциональные действия actions типа ICardActions. В конструкторе вызывается конструктор родительского класса Component с переданным контейнером.

Содержит:

• id - Устанавливает и возвращает идентификатор карточки.
• title - Устанавливает и возвращает заголовок карточки.
• image - Устанавливает изображение карточки.
• price - Устанавливает и возвращает цену карточки, а также блокирует кнопку, если цена не указана.
• category - Устанавливает и возвращает категорию карточки, а также добавляет соответствующий класс для стилизации.
• description - Устанавливает описание карточки.
• button - Устанавливает надпись на кнопке карточки.

Contacts

Наследует класс Form<OrderForm>. Представляет форму для ввода контактной информации (электронной почты и номера телефона) при оформлении заказа. Конструктор класса, который принимает контейнер формы контактной информации container типа HTMLFormElement и объект событий events типа EventEmitter. В конструкторе вызывается конструктор родительского класса Form с переданным контейнером и объектом событий.

Содержит:

• email - Устанавливает значение электронной почты в соответствующем поле формы.
• phone - Устанавливает значение номера телефона в соответствующем поле формы.

Success

Наследует класс Component<IOrderResult>. Представляет компонент для отображения сообщения об успешном оформлении заказа. Конструктор класса, который принимает контейнер элемента container типа HTMLFormElement и опциональные действия actions типа ISuccessActions. В конструкторе вызывается конструктор родительского класса Component с переданным контейнером.

AppData

Класс представляет хранилище данных приложения. Он содержит информацию о продуктах, корзине, предпросмотре товара, заказе и ошибках формы заказа. Класс также обеспечивает методы для управления этими данными и взаимодействия с ними через события. Конструктор класса, который принимает объект событий events. В конструкторе инициализируются поля items, basket, preview и order, а также formErrors.

Методы:

• setItems(items: IProduct[]) - Устанавливает список продуктов и генерирует событие изменения списка.
• setPreview(item: IProduct) - Устанавливает предпросмотр товара и генерирует событие изменения предпросмотра.
• inBasket(item: IProduct) - Проверяет, содержится ли товар в корзине.
• addToBasket(item: IProduct) - Добавляет товар в корзину и генерирует событие изменения корзины.
• removeFromBasket(item: IProduct) - Удаляет товар из корзины и генерирует событие изменения корзины.
• clearBasket() - Очищает корзину и генерирует событие изменения корзины.
• setPaymentMethod(method: PaymentMethod) - Устанавливает метод оплаты для заказа.
• setOrderField(field: keyof OrderForm, value: string) - Устанавливает значения полей заказа и проверяет их валидность.
• validateOrder() - Проверяет валидность заказа и генерирует событие изменения ошибок формы заказа.

Описание событий.

Класс EventEmmiter

Является классом-посредником (Presenter) между классами отображения (View) и классом модели данных (Model) Реализует интерфейс IEvents. В параметры конструктора класса ничего не передается.

Содержит:

• events - переменная к которую будут кэшироваться события.
• on() - функция установки обработчика на событие.
• off() - функция снятия обработчика с события.
• emit() - функция инициирования события с данными.
• onAll - функция прослушивания всех событий.
• offAll - функция сброса всех обработчиков.
• trigger - функция создающая коллбек триггер, генерирующий событие при вызове.

События необходимые для работы приложения

• modal:open - Вызывается при открытии модального окна. Внутри обработчика устанавливается значение свойства 'locked' объекта ' page' в 'true'.

• modal:close - Вызывается при закрытии модального окна. Внутри обработчика устанавливается значение свойства 'locked' объекта 'page' в 'false'.

---

• card:select - Вызывается при нажатии карточки товара. Внутри обработчика вызывается метод 'setPreview' объекта 'appData' с передачей выбранного товара.

• items:change - Вызывается при изменении списка товаров. Внутри обработчика каждый товар из списка преобразуется в карточку товара, используя шаблон 'cardCatalogTemplate'. Обработчик клика на карточке устанавливается для передачи события 'card:select' с данными о выбранном товаре. Полученные карточки товаров затем сохраняются в свойстве 'catalog' объекта 'page'.

• preview:change - Вызывается при изменении предварительного просмотра товара. Внутри обработчика создается карточка товара на основе шаблона предварительного просмотра. Обработчик клика на карточке устанавливается для добавления или удаления товара из корзины и соответствующего изменения текста кнопки. После этого карточка товара рендерится и передается для отображения в содержимом модального окна, которое затем открывается.

---

• basket:open - Вызывается при открытии корзины. Внутри обработчика происходит рендеринг содержимого корзины и передача его для отображения в модальном окне, после чего модальное окно открывается.

• basket:change - Вызывается при изменении содержимого корзины. Внутри обработчика обновляется счетчик товаров на странице, список товаров в корзине и общая сумма товаров. Каждый товар в корзине представляется в виде карточки товара, для которой устанавливается обработчик клика для удаления товара из корзины.

---

• order:open - Вызывается при открытии оформления заказа. Внутри обработчика происходит рендеринг содержимого формы оформления заказа с начальными значениями, такими как метод оплаты, адрес доставки, состояние валидности формы и список ошибок. После этого модальное окно открывается для отображения формы оформления заказа.

• order.\*:change - При срабатывании события вызывается функция, которая устанавливает новое значение для указанного поля в форме оформления заказа.

• contacts.\*:change - При срабатывании события вызывается функция, которая устанавливает новое значение для указанного поля в форме оформления заказа.

• formErrors:change - Вызывается при изменении ошибок в форме. Внутри обработчика извлекаются ошибки для различных полей формы, таких как оплата, адрес, электронная почта и телефон. Затем обновляются состояния валидности формы оформления заказа и контактной информации на основе наличия ошибок.

---

• order:submit - Вызывается при нажатии кнопки продолжения заполнения заказа. Внутри обработчика происходит рендеринг содержимого формы контактной информации с начальными значениями, такими как номер телефона, электронная почта, состояние валидности формы и список ошибок. После этого модальное окно открывается для отображения формы контактной информации.

• contacts:submit - Вызывается при отправке контактной информации. Внутри обработчика отправляются данные заказа на сервер через API. При успешном оформлении заказа создается сообщение об успешном оформлении заказа, которое отображается в модальном окне. После закрытия модального окна происходит очистка корзины и обновление содержимого корзины. Если возникают ошибки при отправке заказа, они выводятся в консоль.