4. Разработка структуры клиентской части

В рамках данного проекта была разработана клиентская часть веб-приложения «Медицинский портал», состоящая из HTML-разметки, CSS-стилей и JavaScript-логики. Структура клиентской части организована по принципу модульной архитектуры, что обеспечивает чёткое разделение ответственности, повторное использование кода и простоту поддержки.

1. Основные компоненты клиентской части

Клиентская часть состоит из следующих ключевых компонентов, разработанных автором (frontend-часть):

1.1. HTML-шаблоны (View Layer)

· Файл index.html: основной шаблон приложения, содержащий структуру всех вкладок, навигацию и контейнеры для динамического контента.

· Файл login.html: шаблон страницы входа в систему с формой аутентификации.

· Файл register.html: шаблон страницы регистрации нового пользователя.

· Файл dashboard.html: шаблон личного кабинета пользователя (используется в минимальном объёме).

1.2. Стили (Presentation Layer)

· Файл style.css: единая таблица стилей, содержащая все CSS-правила для приложения. Организована по методологии компонентного CSS.

1.3. JavaScript-логика (Controller Layer)

· Файл script.js: основной модуль приложения, содержащий класс MedicalPortal и всю клиентскую бизнес-логику.

2. Архитектура взаимодействия компонентов

2.1. Последовательность загрузки и инициализации:

1. Загрузка HTML — браузер загружает и парсит index.html

2. Загрузка CSS — применяются стили из style.css, формируется визуальное представление

3. Загрузка JavaScript — выполняется script.js, создаётся экземпляр класса MedicalPortal

4. Инициализация приложения — загружаются данные с сервера, устанавливаются обработчики событий

5. Взаимодействие с пользователем — пользователь работает с интерфейсом, вызывая методы класса

3. Модульная структура JavaScript-кода

Класс MedicalPortal организован как модуль с чётким разделением ответственности:

3.1. Инициализация и жизненный цикл

· constructor() — инициализация состояния приложения

· init() — основной метод инициализации, вызывающий загрузку данных и настройку интерфейса

3.2. Работа с данными

· loadData() — загрузка клиник и записей с сервера

· loadMyAppointments() — загрузка личных записей пользователя

3.3. Управление интерфейсом

· renderClinics() — отображение списка клиник

· updateCalendar() — рендеринг календаря занятости

· renderTimeSlots() — отображение доступных временных слотов

· updateCartDisplay() — обновление отображения корзины

3.4. Обработка пользовательских действий

· bookAppointment() — обработка записи на приём

· addSelectedServiceToCart() — добавление услуги в корзину

· checkoutCart() — оформление заказа из корзины

3.5. Вспомогательные функции

· showNotification() — отображение системных уведомлений

· persistCart() — сохранение состояния корзины в localStorage.

5. Разработка собственных компонентов

5.1. Модель представления

Данный раздел посвящён HTML-компонентам интерфейса, которые обеспечивают структуру и семантику веб-приложения. Эти компоненты реализованы с использованием современных стандартов HTML5 и CSS3 и управляются через JavaScript-функции класса MedicalPortal.

5.1.1. Система вкладок (Tabs System)

Назначение: Компонент вкладок является основным навигационным элементом приложения, обеспечивающим переключение между различными разделами портала без перезагрузки страницы.

Принцип работы: Система состоит из двух частей: навигационных кнопок-вкладок и соответствующих им контентных областей. Логика переключения реализована в методе setupEventListeners(), который назначает обработчики событий на каждую вкладку. При клике происходит изменение активного состояния через манипуляции классами CSS.

Ключевые элементы и управляющие функции:

· Контейнер вкладок (класс tabs) — горизонтальная панель, содержащая все кнопки переключения.

· Обработчики событий, установленные в setupEventListeners() для элементов с классом tab.

· Логика скрытия/показа контентных областей через переключение классов active.

Логика взаимодействия: При клике на вкладку JavaScript-обработчик, установленный в setupEventListeners(), снимает активное состояние со всех вкладок и контентных областей, затем назначает класс active выбранной вкладке и связанной с ней контентной области. CSS обеспечивает визуальное выделение активной вкладки.

5.1.2. Компонент карточки клиники (Clinic Card)

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

Структура компонента: Каждая карточка генерируется динамически методом renderClinics(filter) на основе данных, загруженных через loadData(). Метод принимает необязательный параметр filter для поиска и фильтрации клиник по названию или услугам.

Информационные блоки карточки:

· Заголовок с названием клиники (элемент h3).

· Адрес клиники с иконкой места (элемент с классом clinic-address).

· Телефон для связи с иконкой телефона (элемент с классом clinic-phone).

· Описание клиники (элемент с классом clinic-desc).

· Список предоставляемых услуг с ценами (элемент с классом clinic-services).

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

5.1.3. Компонент календаря (Calendar Component)

Назначение: Интерактивный календарь отображает занятость врачей по дням месяца и позволяет пользователю визуально оценивать доступность записи на приём.

Архитектура компонента: Календарь состоит из трёх основных частей, которые рендерятся методом updateCalendar():

· Заголовок календаря с кнопками навигации, обрабатываемыми через setupEventListeners().

· Панель дней недели.

· Тело календаря — сетка дней месяца, генерируемая с помощью вспомогательных функций _formatYMD() и _pad2().

Визуальные индикаторы и детализация: Каждому дню присваивается визуальный статус на основе данных о записях. При клике на день вызывается метод _renderCalendarDayDetails(), который отображает детальную информацию о записях на эту дату через контейнер, создаваемый _ensureCalendarDayDetailsContainer().