О проекте
Запись выбирается из таблицы и редактируется в форме. При отмене исходная запись должна остаться как была. После переходов Ionic таблице нужно пересчитать размеры.
Расписание, фильтры и формы редактирования. На десктопе приложение открывается в рамке телефона, на мобильном — на весь экран. Данные тестовые, сервер расписаний не подключён.
- Демонстрационный вход test / test не является системой аутентификации.
- 180 синтетических лабораторных записей и четыре BCP-примера не являются рабочими данными.
- Нереализованные разделы не включены в маршрут демонстрации. Число добавляемых строк ограничено 500.
Скриншоты, схемы и исходные материалы сохранены на языке оригинала; подписи и описание переведены.
Архитектура и схемы
- Синтетические записи покрывают демонстрируемые поля, а не заменяют таблицу пустым макетом.
- Форма редактирует черновик; отмена не должна менять исходную запись.
- Изменения остаются внутри браузерной сессии; серверный API расписаний в публичное демо не подключён.
Code-map: файлы и связи
Карта привязана к версии 71ea9d0d9724. В таблице — экран или API, связанный модуль и данные.
| Функция | Экран / API | Модуль | Данные / проверка |
|---|---|---|---|
| Рамка телефона | Корневой URL / iframe | src/main.ts; src/phone-preview.ts; src/global.scss | DOM viewport; 390/600/768/1024/1440 px |
| Синхронизация адреса | login, schedule, bcp | AppComponent NavigationEnd; phone-preview message listener | same-origin/source checks; refresh QA |
| Демо-вход | login / users/authenticate | login.page; AuthenticationService; fake backend | test/test; sessionStorage; login/reset QA |
| Расписание и фильтры | schedule | schedule.page; table component; table service | 180 seed-записей; фильтр/пустое состояние |
| Формы и удаление | schedule / Ionic modal | schedule.page openNew/openEdit/confirm | копия черновика, обязательные поля; cancel/create/delete QA |
| Пункты забора | bcp / меню | bcp page; demo data service | четыре синтетических пункта; навигация QA |
| Сброс | Сбросить свой пример | AppComponent.resetDemo | перезагрузка вкладки, удаление demo login; isolation QA |
Как работать с картой
- Перед изменением найти функцию и пройти связи до API, состояния и хранилища.
- Проверить входы, ошибки, повторные события и зависимые сценарии.
- После изменения обновить карту и затронутые схемы вместе с кодом.
- Выполнить связанные проверки и привязать новые материалы к версии исходников.
Сценарии и API
- Войдите test / test и откройте расписание.
- Отфильтруйте записи, переключите статусы и сравните представления.
- Добавьте запись, проверьте обязательные поля, откройте редактирование и отмените изменение.
- Проверьте мобильный вид и сброс исходного набора.
Проверка опубликованной версии
CI: Portfolio static build ↗ · 71ea9d0d · версия этого демо · 2026-09-07T03:53:46Z
- Login → schedule
- Filtering and empty state
- Edit cancellation leaves original record unchanged
- Required validation and successful creation
- Independent browser session has original dataset
- Delete selected record
- Reset clears tab session
Эти проверки относятся к указанной версии. Коммерческие показатели и качество моделей на независимой выборке здесь не измерялись.
Измерения
- Сохранено 13 содержательных кадров фактического интерфейса.
- Дата, сценарий и версия указаны у каждого кадра.
- Отдельного backend-процесса на VPS нет: Nginx раздаёт статику. Ресурсы общего Nginx нельзя честно приписать одному сайту.
- Измерено 6 повторений сценария; медиана 2390.0 мс, максимум 3282 мс. Время включает браузер и HTTPS; методика и ограничения приложены.
Запуск и эксплуатация
На компьютере демо работает внутри рамки телефона с same-origin iframe. При ширине окна до 600 px оболочка исчезает, приложение занимает весь экран. После перехода адрес синхронизируется; прямые ссылки и обновление страницы проверены.
Графики от 7 сентября 01:08–01:11 UTC сняты до визуального обновления. Это контекст статического хостинга предыдущей версии, а не новый замер скорости мобильного интерфейса.
В исходном приложении расписания приходят с сервера. Здесь используется локальный тестовый набор; это указано на экране.
Production-сборка Angular выполняется вне VPS. На сервер передаётся каталог готовых файлов, Nginx отдаёт его по HTTPS. Постоянного Node.js-процесса для этого демо нет.
Проверять /healthz, прямые маршруты после обновления страницы, вход, сохранение и отмену формы. Для отката переключить current на сохранённый каталог релиза. Данные восстанавливаются из встроенного набора.
Сборка вне VPS, на сервер уходят готовые файлы и образы с фиксированной версией. Секреты отдельно. Логи ротируются; после изменения log options контейнер нужно пересоздать. Общий docker prune не используется.
Code-map связывает экран или API с модулем и данными. При правке нужно проверить эти связи, обновить карту и прогнать затронутые сценарии: обычный проход, ошибку, повтор, сброс. Схема может устареть, поэтому её версия указана рядом.
Откат проверен 2026-09-07T00:59:39.939043+00:00: 20260907-verified → 20260907 → 20260907-verified. После каждого переключения подтверждены HTTPS, readiness и SHA. Это проверка конфигурации и артефактов на одном проверенном SHA; обратная миграция БД не выполнялась.
Стек
| Angular 17 | Компоненты страниц, формы, маршрутизация и состояние. |
|---|---|
| Ionic 7 | Навигация, элементы управления, модальные формы и адаптивный интерфейс. |
| SlickGrid | Табличное представление и операции со строками. |
Материалы и исходники
В репозитории есть исходный снимок от 1 мая 2024; начало разработки этим не установлено. Демо: 7 сентября 2026.
Архив материалов на языке оригинала.