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

Стек: 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

Об архитектуре

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

Описание типов

Основные интерфейсы и типы:

• Category: Категория товара.

  type Category = 
      'софт-скил' | 
      'хард-скил' |
      'кнопка' |
      'другое'|
      'дополнительное';

• IProduct: Описывает структуру объекта продукта.

  interface IProduct {
    id: string; // id номер товара
    name: string; // название товара
    description: string; // описание товара
    icon: string; // иконка товара
    cost: number | null; // цена товара
    category: Category; // категория товара
    inCart: boolean; // добавлен ли в корзину
  }

• ICart: Описывает корзину.

  interface ICart {
    items: IProduct[]; // товары, добаавленные в корзину
    totalCost: number; // общая их стоимость
  }

• IOrder: Определяет структуру объекта заказа.

  // наследуется от интерфейсов IDeliveryForm, IContactForm
  interface IOrder extends IDeliveryForm, IContactForm { 
    cart: ICart; // корзина
    total: number; // стоимость заказа
  }

• IAppState: Описывает состояние приложения.

  interface IAppState {
    catalog: ICatalog; // каталог товаров
    cart: ICart; // корзина с товарами
    delivery: IDeliveryForm | null; // доставка
    contact: IContactForm | null; // контакты
    order: IOrder | null; // заказ
  }

• IDeliveryForm и IContactForm: Определяют структуру данных для форм данных по доставке и контактной информации соответственно.

  interface IDeliveryForm {
    payment: string; // способ оплаты
    address: string; // адрес доставки
  }
  
  interface IContactForm {
      email: string; // электронная почта
      phone: string; // номер телефона
  }

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

• Абстрактный класс Model<T>: служит базовым для всех моделей данных в приложении.

  • Свойства:

    • data: T: Данные модели.
    • events: IEvents: Экземпляр EventEmitter для управления событиями.

  • Конструктор: Принимает объект данных и экземпляр EventEmitter.

    constructor(protected data: Partial<T>, events: IEvents) {
      Object.assign(this, data);
    }

  • Методы:

    • emitChanges(event: string): Генерирует событие об изменении данных модели.

• Абстрактный класс Component<T>: служит базовым для всех компонентов отображения в приложении.

  • Свойства:

    • container: HTMLElement: Контейнер компонента.

  • Конструктор: Принимает DOM-элемент контейнера, в который будет помещен компонент.

    protected constructor(protected container: HTMLElement) {};

  • Методы:

    • render(data?: Partial<T>): HTMLElement: Метод для отрисовки компонента, должен быть реализован/переопределен в наследниках.
    • toggleClass(element: HTMLElement, className: string): void;: Переключает класс для переданного элемента.
    • setHidden(element: HTMLElement): void;: Скрывает элемент.
    • setVisible(element: HTMLElement): void;: Отображает элемент.
    • setText(element: HTMLElement, value: unknown): void;: Устанавливает текстовое содержимое для переданного элемента.
    • setImage(element: HTMLImageElement, src: string, alt?: string): void;: Устанавливает изображения и альтернативный текст для изоображения.

Общие компоненты отображения

• Класс Modal: отвечает за управление модальными окнами в приложении. Наследуется от Component<IModal>.

  • Свойства:

    • _closeButton: HTMLButtonElement: Кнопка закрытия модального окна.
    • _content: HTMLElement: Отображаемый контент в модальном окне.

  • Конструктор: Принимает два параметра — container (DOM-элемент контейнера модального окна) и events (экземпляр EventEmitter для управления событиями).

    constructor(protected container: HTMLElement, protected events: IEvents) {
      super(container);
    }

  • Методы:

    • open(): Открывает модальное окно.
    • close(): Закрывает модальное окно.

• Класс Form: отвечает за работу с формами в приложении. Наследуется от Component<IFormState>.

  • Свойства:

    • submit: HTMLButtonElement: Кнопка отправки формы.
    • errors: HTMLElement: Элемент для отображения ошибок.

  • Конструктор: Принимает контейнер формы и экземпляр EventEmitter.

    constructor(protected container: HTMLFormElement, protected events: IEvents) {
      super(container);
    }

Компоненты модели данных

• Класс Product: предназначен для создания и упрвления данными продукта. Обеспечивает представление информации о продукте, которое может быть использовано для отображения или для обработки в бизнес-логике. Наследуется от Model<IProduct>.

  • Конструктор: Наследуется от Model

  • Методы: наследует методы из Model.

• Класс AppData: отвечает за состояние приложения, включая данные каталога, предпросмотра, корзины, заказа и ошибок формы. Наследуется от Model<IAppState>.

  • Конструктор: Наследуется от Model

  • Методы: наследует методы из Model, а также:

  • clearCart() — очистка корзины.

  • clearOrder() — сброс данных заказа.

  • setCatalog(items: IProduct[]) — установка каталога товаров.

  • addToCart(item: Product) — добавление товара в корзину.

  • setPreview(item: Product) - устанавливает предпросомотр продукта и инициализирует событие об изменении предпросмотра.

  • removeFromCart(item: Product) — удаление товара из корзины.

  • updateCart() — обновление данных корзины.

  • takeDeliveryField(field: keyof IDeliveryForm, value: string) - устанавливает значение в данные доставки заказа.

  • takeContactField(field: keyof IContactForm, value: string) - устанавливает значение в данные контактов заказа.

  • validateDelivery(): boolean — валидация адреса доставки.

  • validateContact(): boolean — валидация контактных данных.

Компоненты отображения

• Класс Page: предназначен для управления и отоброжения основных элементов страницы, таких как каталог продуктов, счетчик товаров в корзине, а так же позволяющий блокировать прокрутку страницы. Наследуется от Component<IPage>

  • Конструктор: constructor(container: HTMLElement, events: IEvents) - принимает контейнер страницы и объект для управлением событий.

  • Методы:

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

• Класс Card: предназначен для отображения и управления карточками товара(в каталоге, на превью и в корзине), а так-же обработку событий пользователя. Наследуется от Component<ICard>

  • Конструктор: constructor(container: HTMLElement, actions?: IActions) - принимает контейнер карточки и действия связанный с карточкой(опционально).

  • Методы:

    • set/get id - управляет индификатором карточки.
    • set/get title - управляет названием товара.
    • set/get price - управляет ценой товара.
    • set/get category - управляет категорией и ее цветом.
    • set image - устанавливает изображение товара.
    • set description - устанавливает описание товара.
    • set buttonTitle - устанавливает textContent кнопки.
    • disablePriceButton() - проверяет цену и делает кнопку покупки неактивной если цена не указана.

• Класс Cart: предназначен для отображения и управления компонентом корзины покупок. Обеспечивает отображение товаров, управление их выбором и общей стоимостью. Наследуется от Component<ICart>.

  • Конструктор: constructor(container: HTMLElement, events: EventEmitter) - принимает контейнер страницы и объект для управлением событий.

  • Методы:

    • toggleButton(isDisabled: boolean) - переключает доступность кнопки.
    • set items - устанавливает товары в корзине.
    • set total - устанавливает общую стоимость товаров.

• Класс DeliveryForm: предназначен для отображения и управления формой доставки, включая метод оплаты и ввод адреса доставки. Наследуется от Form<IDeliveryForm>.

  • Конструктор: constructor(container: HTMLFormElement, events: IEvents, actions?: IActions) - принимает контейнер формы доставки, объект для управления событиями и действия для обработки кликов в форме(опционально).

  • Методы:

    • toggleButtons() - переключает активность кнопок оплаты.
    • set address - устанавливает адрес доставки.

• Класс ContactForm: предназначен для отображения и управления формой контактных данных, включая ввод телефона и электронной почты. Наследуется от Form<IContactForm>.

  • Конструктор: constructor(container: HTMLFormElement, events: IEvents) - принимает контейнер формы доставки и объект для управления событиями.

  • Методы:

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

• Класс Success: предназначен для отоброжения и управления компонентом, отображающим сообщение об успешной операции, например, после оформления заказа. Наследуется от Component<ISuccess>.

  • Конструктор: constructor(container: HTMLElement, actions: ISuccessActions) - принимает контейнер и и объект для управления событиями.

  • Методы:

    • set total - устанавливает текст отображающий сумму операции.

Список всех событий:

• items:changed // изменение продуктов в каталоге
• card:select // выбор карточки из каталона
• preview:changed // изменение окна детального просмотра
• product:toggle // переключение продукта в коризне
• product:add // добавление продукта в корзину
• product:delete // удаление продукта из корзины
• cart:changed // изменение корзины
• counter:changed // изменение счетчика корзины
• basket:open // открытие окна корзины
• order:open // открытие окна формы доставки
• payment:toggle // изменение способа оплаты
• errors:changed // изменение списка ошибок
• /^order..*:change/ // изменение любого поля формы доставки
• /^contacts..*:change/ // изменение любого поля формы контактов
• delivery:valid // события готовности формы доставки к отправке
• contact:valid // события готовности формы контактов к отправке
• order:submit // отправка формы доставки
• contacts:submit // отправка формы контактов
• modal:open // открытие модального окна
• modal:close // закрытие модального окна