Zakhar Timoshenko
cb1977b65f
- Implemented StatusWidget component for embedding RideBus service status. - Created widget-client.js for client-side interaction with the status widget. - Developed install-widget-integrations script to automate integration into PWA, website, and admin projects. - Introduced server-side widget rendering in widget.mjs for generating status widget HTML. - Added comprehensive tests for widget functionality and integration.
6.9 KiB
Виджет статуса RideBus
Проверки: 13–14 октября 2026, Europe/Minsk. Изменения выполнены в локальных исходниках.
Подключение
| Проект | Размещение | Проверяемые сервисы | Публичная переменная сборки |
|---|---|---|---|
| ridebus-website/ridebus-website | Footer, рядом с авторством | website, api | NEXT_PUBLIC_STATUS_URL |
| ridebus-pwa | Footer, перед ссылками | pwa, api | VITE_STATUS_URL |
| polotsk-transit-api/frontend | Низ sidebar и раскрытого мобильного меню | admin, api | VITE_STATUS_URL |
В проекте статуса добавлены /embed, компактный /api/widget, общий клиент виджета, Manrope и SVG из @vkontakte/icons. Скрипт не загружает историю или транспортные ответы. Используются текущие состояния обычной доступности, сценариев и плановых работ. Демо-данные не принимаются. Отсутствие измерений, просроченный статус, отключение сети и недоступность самого мониторинга не отображаются как зелёное состояние.
Обновления идут каждые 30 секунд; в скрытой вкладке запросы приостанавливаются. Остаток времени свежести считается относительно часов клиента, с вычетом времени загрузки страницы или ответа. При задержке браузерных таймеров ответ на запрос родителя проверяет срок измерений заново.
Iframe изолирует оформление, поддерживает light/dark/auto и ru/en. В React-интеграции iframe декоративный, а поверх него находится одна обычная ссылка с текущим состоянием в доступном имени. Проверяется origin и источник сообщений. Поддерживаются фокус с клавиатуры и reduced motion. Запросы данных используют credentials: omit; referrer отключён. Ключи API и сессии приложения не передаются компоненту.
Проверки
ridebus-status: 71 тест, 0 ошибок, 0 пропусков; production-сборка успешна.ridebus-pwa: TypeScript и production-сборка успешны.ridebus-website: TypeScript, Webpack production-сборка и статическая генерация успешны. Для QA в сборку передан локальный NEXT_PUBLIC_STATUS_URL.- Админка: production-сборка Vite успешна.
git diff --checkпрошёл во всех четырёх checkout. Автоматическое изменение next-env.d.ts от Next build удалено; генерация OG не оставила изменений изображений.- Конфигурации Compose трёх клиентов проверены командой
docker compose config --quietс тестовым публичным URL. Docker-образы на этом этапе не собирались.
В браузере проверены desktop 1280px и mobile 390px. Виджет отображался с реальными успешными состояниями выбранных сервисов во всех трёх проектах. На мобильных страницах горизонтального переполнения нет. Английская страница /en вывела “Services operational”, правильное доступное имя и ссылку с lang=en. Shift+Tab перевёл фокус с авторства на виджет.
Админка проверена на локальном API-стенде с тестовым городом и аккаунтом widget-review. Production-аккаунты и CRUD не использовались. Сеанс завершён через обычное действие «Выйти»; локальные тестовые токены очищены этим действием.
Ссылка на подробности имеет правильный href и target=_blank; обычное нажатие родительской ссылки выполнено без ошибки. Регистрация новой внешней вкладки отдельно не подтверждена: список вкладок in-app browser её не показал.
Остановка локального сайта мониторинга и перезагрузка PWA подтвердили запасное состояние «Статус не получен». Все запущенные для QA серверы и вкладки закрыты. Telegram в QA-процессе был отключён; сообщения не отправлялись. Публикация на внешние хостинги не выполнялась.
Скриншоты
- PWA: desktop, mobile.
- Основной сайт: desktop, mobile, English.
- Админка на локальном стенде: desktop, mobile.
- Мониторинг недоступен: запасное состояние.
Подключение к будущему хостингу
Укажите URL сайта статуса в перечисленной переменной перед сборкой. Без URL production-виджет скрыт. При обычном локальном development по умолчанию используется http://127.0.0.1:5188; для режима NODE_ENV=production нужен явный URL. При наличии старого service worker браузер может показывать предыдущую версию PWA до обновления приложения; QA проведён на отдельном origin 5174.
Dockerfile и Compose передают URL через build args. Для Compose задавайте переменную в корневом .env проекта; для Vite без Docker — в .env соответствующего frontend. После изменения адреса пересоберите интерфейс. При CSP хостинга разрешите домен мониторинга в frame-src. Секретные .env при реализации не изменялись.