"Веб-ларек"

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

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

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

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

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

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

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

npm install
npm run start

или

yarn
yarn start

Сборка

npm run build

или

yarn build

Данные и типы данных, используемые в приложении

Карточка товара

export interface ICardItem {
   id: string;
   title: string;
   price: number | null;
   image: string;
   category: string;
   description: string;
   status: string;
   indexElement: number;
}

Заказ

export interface IOrder {
  payment: string,
  email: string;
  address: string;
  phone: string;
}

Модель

export interface IAppState {
	catalog: ICardItem[];
	basket: string[];
	preview: string | null;
	order: string[] | null;
	loading: boolean;
}

Архитектура приложения

Код приложения разделен на слои согласно парадигме MVP:

• Model - слой данных, отвечает за хранение и изменение данных,
• View - слой представления, отвечает за отображение данных на странице,
• Presenter - отвечает за связь представления и данных.

Базовый код

Класс Api

Содержит в себе базовую логику отправки запросов. В конструктор передается базовый адрес сервера и опциональный объект с заголовками запросов. Методы:

• get - выполняет GET запрос на переданный в параметрах ендпоинт и возвращает промис с объектом, которым ответил сервер
• post - принимает объект с данными, которые будут переданы в JSON в теле запроса, и отправляет эти данные на ендпоинт переданный как параметр при вызове метода. По умолчанию выполняется POST запрос, но метод запроса может быть переопределен заданием третьего параметра при вызове.

Класс EventEmitter

Брокер событий позволяет отправлять события и подписываться на события, происходящие в системе. Класс используется в презентере для обработки событий и в слоях приложения для генерации событий.
Методы:

• on - подписка на событие
• emit - инициализация события
• trigger - возвращает функцию, при вызове которой инициализируется требуемое в параметрах событие

Класс Component

Класс Component является абстрактным базовым классом для создания и управления пользовательскими интерфейсными компонентами. Он предоставляет набор методов для работы с элементами DOM, упрощая задачи по изменению состояния элементов, управлению видимостью и изменению содержимого. Методы:

• toggleClass - переключение класса у элемента
• setText - установка текстового содержимого элемента
• setDisabled - блокировка или разблокировка элемента
• setHidden - скрытие элемента
• setVisible - отображение элемента
• setImage - установка источника и альтернативного текста изображения
• render - обновление состояния компонента и возврат корневого элемента

Model - Слой данных

Класс AppState

Класс AppState предназначен для управления состоянием приложения. Он включает в себя функциональность для работы с корзиной товаров, каталогом, заказами и контактными данными, а также валидацию и обработку ошибок.

Поля:

• basket: string[] - Массив, содержащий идентификаторы выбранных товаров.
• catalog: ICardItem[] - Массив, содержащий список всех доступных товаров.
• loading: boolean - Флаг загрузки данных.
• preview: string | null - Идентификатор текущего предварительно просматриваемого товара.
• order: IOrder - Объект, содержащий информацию о текущем заказе.
• orderErrors: FormErrors - Объект, содержащий ошибки, связанные с заказом.
• contactsErrors: FormErrors - Объект, содержащий ошибки, связанные с контактной информацией.

Методы:

• constructor(initialState: Partial, events: IEvents) - Конструктор класса, инициализирующий начальное состояние и события.
• setCatalog(items: ICardItem[]): void - Устанавливает каталог товаров, обновляя статус каждого товара на unselected.
• getSelectedCards(): ICardItem[] - Возвращает массив выбранных товаров и обновляет basket с их идентификаторами.
• findCardById(id: string): ICardItem | undefined - Находит товар в каталоге по идентификатору.
• setPreview(item: ICardItem): void - Устанавливает товар для предварительного просмотра и генерирует событие изменения предварительного просмотра.
• updateProductStatus(id: string): string - Переключает статус товара между selected и unselected.
• calculateTotalPrice(): number - Считает общую стоимость выбранных товаров.
• setOrderField(field: keyof IOrder, value: string): void - Устанавливает значение поля в объекте order и проверяет валидность заказа и контактных данных.
• validateOrder(): boolean - Проверяет валидность данных заказа и возвращает true, если ошибок нет.
• validateContacts(): boolean - Проверяет валидность контактной информации и возвращает true, если ошибок нет.
• setBasket(selectedCards: ICardItem[]): void - Обновляет basket, сохраняя идентификаторы товаров с ненулевой стоимостью.
• clearBasket(): void - Очищает корзину, сбрасывая статус всех выбранных товаров на unselected.
• get mybasket(): string[] - Возвращает массив идентификаторов товаров в корзине.

View - Классы представления

Все классы представления отвечают за отображение внутри контейнера (DOM-элемент) передаваемых в них данных.

Класс Modal

Реализует модальное окно. Так же предоставляет методы open и close для управления отображением модального окна. Устанавливает слушатели на клавиатуру, для закрытия модального окна по Esc, на клик в оверлей и кнопку-крестик для закрытия попапа.

• constructor(selector: string, events: IEvents) Конструктор принимает селектор, по которому в разметке страницы будет идентифицировано модальное окно и экземпляр класса EventEmitter для возможности инициации событий.

Поля класса

• modal: HTMLElement - элемент модального окна
• events: IEvents - брокер событий

Класс Page

Page управляет элементами страницы и корзиной, позволяя блокировать интерфейс и открывать корзину.

Поля:

• _counter: HTMLElement - Счетчик товаров в корзине.
• _wrapper: HTMLElement - Обертка страницы для блокировки.
• _basket: HTMLElement - Элемент корзины, который инициирует открытие корзины при клике.

Конструктор: Инициализирует Page, устанавливает элементы и события.

• locked (setter): Блокирует или разблокирует страницу.

Класс ViewItem

ViewItem представляет карточку товара, управляет её содержимым и состоянием.

Поля:

• _category?: HTMLElement - Категория товара.
• _title: HTMLElement - Название товара.
• _image?: HTMLImageElement - Изображение товара.
• _price: HTMLElement - Цена товара.
• _description?: HTMLElement - Описание товара.
• _cardId?: string - Идентификатор товара.
• _status?: string - Статус товара.
• _button?: HTMLButtonElement - Кнопка для управления товаром.
• _indexElement?: HTMLElement - Индекс товара в списке.

Методы:

• render: Обновляет состояние карточки товара.
• Сеттеры: Устанавливают свойства карточки товара.

Класс Form

Класс Form наследуется от Component и предоставляет функциональность для работы с HTML-формами, включая обработку событий ввода и отправки, а также управление состоянием формы, таким как ошибки и валидность.

Поля:

• _submit: HTMLButtonElement - Кнопка отправки формы.
• _errors: HTMLElement - Элемент для отображения ошибок формы.
• _input: HTMLInputElement | null - Поле ввода для работы с формой.

Методы:

• onInputChange: Обрабатывает изменения в полях ввода и генерирует соответствующие события.
• set valid: Управляет состоянием валидности формы и блокировкой кнопки отправки.
• set errors: Устанавливает текст ошибок формы в элементе _errors.
• render: - Обновляет состояние формы и её элементы на основе переданных данных.

Класс Order

Класс Order наследуется от Form и добавляет функциональность для обработки платежей и управления заказами. Он предоставляет методы для работы с кнопками выбора способа оплаты и управления адресом доставки.

Поля:

• payCard: HTMLElement | null - Кнопка для выбора оплаты картой.
• payCash: HTMLElement | null - Кнопка для выбора оплаты наличными.

Методы:

• handlePaymentClick: Обрабатывает клики по кнопкам выбора способа оплаты, активируя одну кнопку и деактивируя другую. Генерирует событие изменения способа оплаты.
• set address: Устанавливает значение адреса доставки в соответствующее поле формы.

Класс Contacts

Contacts расширяет функциональность Form и предназначен для управления контактными данными в форме. Он предоставляет возможность устанавливать значения для полей ввода телефона и электронной почты.

Методы:

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

Класс BasketView

BasketView предназначен для управления отображением и функциональностью корзины товаров. Класс позволяет обновлять список товаров в корзине, отображать общую стоимость товаров и обрабатывать действия пользователя, такие как нажатие кнопки для оформления заказа.

Поля:

• button: HTMLElement | null - Элемент кнопки для подтверждения заказа.
• basketPrice: HTMLElement - Элемент, отображающий общую стоимость товаров в корзине.
• basketList: HTMLElement - Элемент, содержащий список товаров в корзине.

Методы:

• items(items: HTMLElement[]): HTMLElement - Обновляет содержимое корзины, заменяя текущий список товаров на переданный массив элементов.
• items: HTMLElement[] - Массив элементов, представляющих товары в корзине.
• set TotalPrice(price: number): void - Устанавливает общую стоимость товаров в корзине и управляет состоянием кнопки подтверждения заказа (активной или неактивной в зависимости от стоимости).
• price: number - Общая стоимость товаров в корзине.

Слой коммуникации

Класс AppApi

Принимает в конструктор экземпляр класса Api и предоставляет методы реализующие взаимодействие с бэкендом сервиса.

Presenter - Взаимодействие компонентов

Код, описывающий взаимодействие представления и данных между собой находится в файле index.ts, выполняющем роль презентера.
Взаимодействие осуществляется за счет событий генерируемых с помощью брокера событий и обработчиков этих событий, описанных в index.ts
В index.ts сначала создаются экземпляры всех необходимых классов, а затем настраивается обработка событий.

Список всех событий, которые могут генерироваться в системе:\

• items:changed - Срабатывает, когда изменяется каталог товаров.
• card:select - Срабатывает при выборе карточки товара для предварительного просмотра.
• status:chenged - Срабатывает при изменении статуса товара.
• modal:open - Срабатывает при открытии модального окна.
• modal:close - Срабатывает при закрытии модального окна.
• basket:select - Срабатывает при выборе корзины для просмотра содержимого.
• card:delete - Срабатывает при удалении карточки товара из корзины.
• order:open - Срабатывает при открытии формы заказа.
• order:submit - Срабатывает при отправке формы заказа.
• orderErrors:change - Срабатывает при изменении состояния ошибок в форме заказа.
• contactsErrors:change - Срабатывает при изменении состояния ошибок в форме контактной информации.
• order:input - Срабатывает при изменении значения в поле формы заказа.
• contacts:input - Срабатывает при изменении значения в поле формы контактной информации.