Веб-разработка. Доработка существующего продукта. Пожелания и особенности: Разработка фронт-энд части интерфейса системы арбитражного анализа котировок 📌 Цель: Создать адаптивный и динамический веб-интерфейс на Angular, в котором: • Отображаются графики по торговым инструментам (через TradingView Lightcharts); • Панели с инструментами автоматически добавляются, обновляются и сортируются; • Реализована авторизация и базовая защита доступа; • Пользователь может управлять отображением, сортировкой и фильтрацией через элементы интерфейса. ⚙️ Технологии: • Фреймворк: Angular (v16+) • Графики: TradingView Lightweight Charts • UI: Адаптивная вёрстка (Flexbox / CSS Grid / Angular Material – опционально) • Данные: Вся информация поступает с API (формат JSON, эмуляция/mock до подключения бекенда) 🖥 Структура интерфейса 1. Хэдер страницы • Кнопка 🔄 Обновить список инструментов • По нажатию отправляется запрос на получение новых инструментов. • Только новые добавляются в UI (существующие не дублируются). • Отображение времени последнего обновления. • (Опционально) Бейдж количества активных арбитражей. 2. Панели инструментов Каждый инструмент отображается в виде панели, содержащей: • Название инструмента (например, GOLD, USD/CNH); • График TradingView (подключенный к данным для этого инструмента); • Основная информация: • Best Bid / Best Ask с каждой биржи; • Расчётный спред (поступает с API); • Цветовой индикатор арбитражной возможности: • 🟩 Зелёный — арбитраж найден; • ⬜️ Серый — нет сигнала; • Кнопка ✖️ Удалить панель (опционально); • Tooltip при наведении на спред — пояснение по формуле (из API). 3. Сетка панелей (Grid Layout) • Адаптивное поведение: панели автоматически размещаются в несколько рядов; • В 1 ряд помещается максимально возможное число панелей по ширине экрана; • Реализуется через CSS Grid или Flexbox, с приоритетом на читабельность и стабильную структуру; • Сортировка: • Панели отображаются по убыванию значения spread; • Автообновление порядка при обновлении данных. 4. Авторизация • Простая форма логина: • Поля: Email / Пароль • Кнопка Войти • После успешной авторизации — переход на главную страницу с графиками; • Защита всех маршрутов от неавторизованных пользователей; • Хранение токена авторизации (в localStorage или SessionStorage); • Выход из аккаунта (Logout) — кнопка в шапке интерфейса. 5. Цветовая индикация • Использовать цветовые классы (CSS или SCSS): • .has-arbitrage { background: #d0f0c0; } • .no-arbitrage { background: #f0f0f0; } • Иконка или текстовое сообщение Возможность арбитража обнаружена при spread > threshold (входит в JSON). 6. Обновление данных • Обновление данных: • По нажатию кнопки Обновить • Автоматически (таймер обновления с интервалом X часов — настраивается через переменную окружения) • Панели добавляются или остаются без изменений в зависимости от того, появились ли новые инструменты. • Сохраняется порядок сортировки по spread. 7. Адаптивность и кроссбраузерность • Интерфейс должен быть оптимизирован для: • Десктопов (приоритет); • Планшетов (адаптация с сохранением читабельности); • Минимальное разрешение — 1024px по ширине; • Все элементы должны корректно отображаться в последних версиях Chrome, Firefox, Safari. 🔐 Роли и доступ • Реализовать переключение состояния по роли (isAdmin: true/false) на клиенте: • Пока без различий в функционале; • Подготовить основу для отображения дополнительных админ-фич (в будущем).