5.3. Компоненты пользовательского интерфейса

5.3.1. Компонент выбора времени (Time Slots Picker)

Назначение: Компонент позволяет пользователю выбрать доступное время для записи к выбранному врачу из списка доступных временных интервалов.

Генерация и отображение: Метод renderTimeSlots() динамически создаёт кнопки слотов на основе отфильтрованных данных из appointments. Фильтрация учитывает выбранные клинику и врача, а также скрывает прошедшие слоты.

Интерактивность и состояния: Обработчики кликов, назначенные в renderTimeSlots(), позволяют выбрать слот. Визуальные состояния управляются через CSS-классы:

· taken и атрибут disabled для занятых слотов.

· selected для выбранного пользователем слота.

5.3.2. Модальное окно (Modal Component)

Назначение: Модальное окно для добавления произвольных медицинских услуг, которые отсутствуют в стандартном списке услуг клиник.

Управление окном:

· openAddServiceModal() — открывает окно и очищает поля ввода.

· Обработчики в setupEventListeners() для кнопок #service-add-btn (вызывает addCustomServiceToCart()) и #service-cancel-btn.

Механика работы: Видимостью окна управляют обработчики событий, изменяющие CSS-свойство display блока с id service-modal.

5.3.3. Компонент уведомлений (Notification System)

Назначение: Система отображения временных уведомлений для информирования пользователя о результатах выполнения операций.

Функция отображения: Метод showNotification(message, type) управляет показом сообщений. Он обновляет текст, задаёт CSS-класс (success или error) для цвета и включает таймер автоскрытия через setTimeout.

Интеграция: Метод широко используется по всему приложению для информирования пользователя, например, после bookAppointment(), addSelectedServiceToCart() или checkoutCart().

5.4. Модуль взаимодействия с api

5.4.1. Загрузка данных с сервера

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

Ключевые функции загрузки:

· loadData() — центральный метод, использующий Promise.all() для параллельной загрузки клиник и записей через fetch().

· loadMyAppointments() — загружает персональные записи пользователя, требует авторизации.

Обработка ответов: Все функции проверяют успешность ответа от сервера (поле success в JSON) и соответствующим образом обновляют состояние приложения или вызывают showNotification() в случае ошибки.

5.4.2. Отправка данных на сервер

Назначение: Модуль отвечает за отправку данных на сервер для выполнения операций, инициированных пользователем.

Основные операции отправки:

· bookAppointment() — отправляет POST-запрос для записи на выбранный слот.

· checkoutCart() — отправляет POST-запрос для оформления заказа услуг из корзины.

Структура запросов: Обе функции используют fetch() с методом POST, заголовком Content-Type: application/json и сериализованным в JSON телом запроса, содержащим необходимые данные (например, id слота или items корзины).

5.4.3. Синхронизация состояния после действий

Назначение: Обеспечение актуальности данных в интерфейсе после изменяющих действий.

Механизм обновления: после успешного выполнения действий, изменяющих данные на сервере (например, записи на приём или оформления заказа), вызывается повторная загрузка актуальных данных. В bookAppointment() после успешной записи последовательно вызываются loadData(), populateClinicSelect(), populateServiceSelect(), renderTimeSlots(), updateCalendar() и loadMyAppointments() для полного обновления интерфейса.

Обработка корзины: после успешного оформления заказа через checkoutCart() состояние локальной корзины очищается, и вызывается updateCartDisplay().