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.
48 lines
6.9 KiB
Markdown
48 lines
6.9 KiB
Markdown
# Виджет статуса 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](widget-pwa-desktop.png), [mobile](widget-pwa-mobile.png).
|
||
- Основной сайт: [desktop](widget-website-desktop.png), [mobile](widget-website-mobile.png), [English](widget-website-en.png).
|
||
- Админка на локальном стенде: [desktop](widget-admin-desktop.png), [mobile](widget-admin-mobile.png).
|
||
- Мониторинг недоступен: [запасное состояние](widget-unavailable.png).
|
||
|
||
## Подключение к будущему хостингу
|
||
|
||
Укажите 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 при реализации не изменялись.
|