Разработка страницы на Angular

Модуль: Шахматка расписания Шахматка расписания представляет собой визуальный интерфейс для отображения, создания и управления тренировками в интервале 1 недели. Это сетка, где: - по горизонтали — 7 дней недели (Пн–Вс); - по вертикали — сетка с шагом 30 минут; - каждый слот может содержать одну или несколько тренировок; - элементарной ячейкой сетки считается один 30-минутный временной интервал в один день. --- ### Функциональность #### 1. Отображение тренировок - Каждая тренировка отображается в виде карточки, высота которой соответствует её длительности. Наример: 30 мин = 1 ячейка. - Ширина карточки по умолчанию — `230px`, с отступами: `2px` слева, сверху и снизу, `10px` справа. #### 2. Контент карточек - **15 мин**: высота — `40px`, контент: название, время, заполненность. Белой подложки нет, вся информация расположена на цветном фоне. - **30 мин**: стандартный стиль, без блока «тренер». - **60 мин и более**: название, время, заполненность, тренер; - **90 мин и более**: дополнительно выводится место проведения.  --- #### 3. Пересечения и коллизии - Если карточек несколько, то они помещаются в контейнер списка с отступом справа в `10px`. Сами карточки уживаются до минимального размера и потом, с равным расстоянием между ними `{space-between}` отображаются с перекрытием и повышением `z-index` к последней карточке. Так не придется расчитывать отступы для каждого кол-ва карточек, потому что их может быть неограниченное кол-во. - Если на один слот назначено 2 занятия, они сужаются до `140px` и располагаются с нахлёстом: левая карточка ниже правой. У правой карточки отступ справа `10px`. - Если занятий 3+:   карточки уменьшаются в ширину пропорционально;   отступ между левыми краями карточек:     при 3 карточках — `46px`;     при 4 — `30px`;     при 5 и более — по той же логике пропорционально. **Пример:** Если есть 3 занятия: - 11:00–12:30 - 11:30–13:30 - 13:00–14:00 То шахматка выстраивается так: - `занятие 3` располагается под `занятием 1`, т.к. они не пересекаются; - `занятие 2` пересекается с обоими, поэтому все 3 карточки сужаются до 2-ух колонок, т.к. это минимальное необходимое число для корректного отображения. --- ### 4. Интерактивность #### Карточки - При нажатии на карточку — открывается список записанных клиентов. - В шапке карточки — кнопка **"Изменить"**, вызывающая модальное окно редактирования. - При наведении курсора — карточка поднимается на передний план (`z-index`). - Левая карточка всегда ниже правой при наложении. - Нижняя всегда выше верхней (как в примере выше могут пересекаться различные временные интервалы). #### Генерация цветов карточки - При добавлении карточки ей присваивается случайный цвет, например: (hsl 345°, 56%, 74%). Этот цвет применяется для шапки карточки. - В зависимости от цвета автоматически выбираются оттенки фона и текста.   Для фона карточки: (hsl 345°, 56%, 98%)   Для фона времени (hsl 345°, 56%, 93%)   Для времени и тренера (hsl 345°, 56%, 57%) Т.е мы берем оттенок и меняем его яркость для различных элементов.  Более наглядно см. во вложения. #### Бейдж заполненности - Цветовое отображение:   `< 50% — красный`   `50–75% — жёлтый`   `> 75% — зелёный` - Показывает текущее количество записавшихся в реальном времени. #### Текущая временная линия - Пунктирная, проходит по текущему времени и обновляется в режиме реального времени. - Когда линия достигает начала занятия:   карточка становится серой;   кнопка редактирования исчезает. --- ### 5. Автопрокрутка - При открытии интерфеска пользователя проматывает к текущему времени. Отображается текущий час и 1,5 часа до него. **Примеры:** - В 12:00 — отображение начинается с 10:30. - В 19:00 — отображение начинается с 17:30. --- ### 6. Фильтрация Шахматка поддерживает фильтры, влияющие на отображение карточек: | Параметр         | Описание                        | |------------------|----------------------------------| | Дата             | Конкретный день                 | | Услуга           | Тип предоставляемой услуги      | | Вид спорта       | Категория занятия               | | Тренер           | Закреплённый сотрудник          | | Длительность     | Продолжительность занятия       | | Свободные места  | По количеству мест             | | Место проведения | Конкретная локация/зал         | - Это относится к backend, добавили для понимания контекста задачи --- ### Требования к реализации - **Разметка**: сетка 7×N, где N — количество 30-минутных слотов в рабочем дне. 30 мин. надо сделать переменной и константой, в случае если нужно будет менять число. - **Отступы**:   от краёв страницы до белой подложки — `40px`;   от белой подложки до часов — `30px`;   от часов до таблицы — `20px`. - Поддержка всех сценариев отображения: перекрытия, шахматка, сужение карточек. - Высокая производительность и отзывчивость при большом количестве карточек