Доработать frontend на React
Веб клиент используется для работы с охранным камерой. Выполняет функции получения списка событий и отображения в ленте, а также управления конфигурацией устройства.
Страница хостится на самом устройстве (как, к примеру, админка на роутере). Связывается с “back end” по WebSocket API.
Основные функции:
- Получение события и мгновенное отображение в лентах
- Получение исторической ленты событий
- Управление настройками устройства
- Отображение видео стрима WebRTC
- Генерация отчета о событиях (отчет генерируется на стороне back end, front end только отправляет запросы по API)
- Мониторинг тревог. Тут отображаются все незавершенные тревоги (тревога считается завершенной, когда пользователь кликнул на кнопку “Пометить как завершенную”). Отображается видео стрим (web rtc). В нижней части экрана отображается горизонтальная лента событий. При клике по событию в ленте оно отображается в детальном виде в правой части экрана.
Дизайн вкладки в фигме - страница “NEW Alarm screen” - Лента событий. Отображается вертикальная лента всех событий. При клике по событию в ленте оно отображается в детальном виде в правой части экрана.
Вверху ленты есть панель для включения/выключения фильтров отображаемых в ленте событий. Также есть меню для генерации отчета о событиях.
Дизайн вкладки в фигме - страница “NEW Events feed” - Настройки. Слева меню с разделами настроек. В каждом разделе свой набор элементов ввода.
Дизайн вкладки в фигме - страница “Настройки”
Уже имеется готовый веб клиент на react для предыдущей версии данного проекта.
В сравнении с предыдущей версией, изменилось:
- дизайн некоторых элементов на вкладках Мониторинг и Лента событий
- дизайн окна настроек (в прошлой версии вообще не было его)
- API в части получения событий: изменился набор JSON полей
- API для настроек (в прошлой версии его вообще нет)
План работ:
- Сделать новую верстку вкладок Мониторинг и Лента, доработать там API.
- Сделать одну вкладку в настройках, которая отвечает за конфигурацию системы оповещений (вкладка “Контроль”). Реализовать API для ее работы
- Сделать остальные вкладки в Настройках. Реализовать API (спецификация API для этих команд будет дополнена, сейчас в документе ее нету).
- Сделать работу с выгрузкой отчетов (спецификация API для этих команд будет дополнена, сейчас в документе ее нету)
Дизайн в фигме, спецификация API, прочие подробности проекта - при личном общении.
Проект срочный. Интересует независимый исполнитель, студии/команды/etc не интересуют. Просьба в отклике указать, что Вы прочитали эту строку.