# Angular / Ionic

Technical documentation

Schedule, filters and edit forms. On desktop the app sits in a phone frame; on mobile it fills the screen. Data is local test data; the scheduling backend is not connected.

Source version: `71ea9d0d972465a648633a244d1004d2785c8596`

The repository contains a source snapshot dated 1 May 2024; this does not establish when development began. Demo: 7 September 2026.

[Project notes](https://portfolio.komaroff-dev.ru/en/projects/ionic/) · [Online documentation](https://portfolio.komaroff-dev.ru/en/projects/ionic/docs/)

[Demo](https://ionic.komaroff-dev.ru/)

[Source repository](https://github.com/komaroffsergei/myProject-master)

## Task

A record is selected from the table and edited in a form. Cancelling must leave the original record unchanged. The table needs to recalculate its size after Ionic navigation.

Working with schedules and records in tables.

## Work done

- Phone frame, login screen and URL synchronization with the iframe.
- Table resizing after Ionic navigation.
- Filters, forms, statuses and mobile layout.
- Record ID and duplicate-add fixes. Separate demo login and test dataset.

## Stack

| Technology | Role |
| --- | --- |
| Angular 17 | Page components, forms, routing and state. |
| Ionic 7 | Navigation, controls, modal forms and a responsive interface. |
| SlickGrid | Tabular views and row operations. |

## Architecture and decisions

- Synthetic records cover the demonstrated fields instead of replacing the table with an empty mockup.
- The form edits a draft; canceling must leave the original record unchanged.
- Changes stay within the browser session; the public demo is not connected to the scheduling server API.

### Components of the published demo

![Components of the published demo](https://portfolio.komaroff-dev.ru/evidence/ionic/diagrams/components.svg)

[Mermaid source](https://portfolio.komaroff-dev.ru/evidence/ionic/diagrams/components.mmd)

### Main workflow

![Main workflow](https://portfolio.komaroff-dev.ru/evidence/ionic/diagrams/scenario.svg)

[Mermaid source](https://portfolio.komaroff-dev.ru/evidence/ionic/diagrams/scenario.mmd)

### Deployment of the published version

![Deployment of the published version](https://portfolio.komaroff-dev.ru/evidence/ionic/diagrams/deployment.svg)

[Mermaid source](https://portfolio.komaroff-dev.ru/evidence/ionic/diagrams/deployment.mmd)

## Code map

| Feature | Screen / API | Module | Data / verification |
| --- | --- | --- | --- |
| Phone frame | Root URL / iframe | src/main.ts; src/phone-preview.ts; src/global.scss | DOM viewport; 390/600/768/1024/1440 px |
| URL synchronization | login, schedule, bcp | AppComponent NavigationEnd; phone-preview message listener | same-origin/source checks; refresh QA |
| Demo sign-in | login / users/authenticate | login.page; AuthenticationService; fake backend | test/test; sessionStorage; login/reset QA |
| Schedule and filters | schedule | schedule.page; table component; table service | 180 seed records; filter / empty state |
| Forms and deletion | schedule / Ionic modal | schedule.page openNew/openEdit/confirm | draft copy, required fields; cancel/create/delete QA |
| Collection points | bcp / menu | bcp page; demo data service | four synthetic locations; navigation QA |
| Reset | Reset my example | AppComponent.resetDemo | tab reload, demo login removal; isolation QA |

Before changing a feature, trace its interface, API, state and storage dependencies. Check inputs, errors, retries and related workflows. Update the map and affected diagrams alongside the code, rerun the related checks and attach evidence for the source version.

## Workflows and API

1. Sign in with test / test and open the schedule.
2. Filter records, switch statuses and compare views.
3. Add a record, check required fields, open the editor and cancel a change.
4. Check the mobile view and reset the original dataset.

## Verification

- 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

[CI: Portfolio static build](https://github.com/komaroffsergei/myProject-master/actions/runs/34081180290) — `71ea9d0d972465a648633a244d1004d2785c8596`, 2026-09-07T03:53:46Z; this demo's version.

## Results and measurements

- 13 meaningful screenshots of the actual interface retained.
- Each screenshot includes its date, scenario and code revision.
- No separate backend process runs on the VPS: Nginx serves static files. Shared Nginx resources cannot fairly be attributed to a single site.
- 6 scenario repetitions measured; median 2390.0 ms, maximum 3282 ms. Timing includes the browser and HTTPS; methodology and limitations are included.

These checks apply to the listed version. Business metrics and model quality on an independent dataset were not measured.

![Shared VPS resource context for the static demo · 2026-09-07T01:08:27 — 01:11:22 UTC](https://portfolio.komaroff-dev.ru/evidence/ionic/charts/resources.svg)

[Shared VPS resource context for the static demo · 2026-09-07T01:08:27 — 01:11:22 UTC: source data](https://portfolio.komaroff-dev.ru/evidence/ionic/metrics/measurements.json)

![Measured scenario repetitions over HTTPS · 2026-09-07T01:08:36 UTC; methodology limitations in JSON](https://portfolio.komaroff-dev.ru/evidence/ionic/charts/scenario-time.svg)

[Measured scenario repetitions over HTTPS · 2026-09-07T01:08:36 UTC; methodology limitations in JSON: source data](https://portfolio.komaroff-dev.ru/evidence/ionic/metrics/measurements.json)

## Limitations

- Demo credentials test / test are not an authentication system.
- 180 synthetic laboratory records and four BCP examples are not production data.
- Unimplemented sections are excluded from the demo navigation. Added rows are limited to 500.

## Running and operating

On desktop, the demo runs in a phone frame with a same-origin iframe. At widths up to 600 px, the shell disappears and the app fills the screen. The URL follows navigation; direct links and page refresh were checked.

Charts from 7 September, 01:08–01:11 UTC, predate the visual update. They provide static-hosting context for the previous version, not a new measurement of mobile interface performance.

The original app gets schedules from a server. This demo uses a local test dataset, as noted in the interface.

The Angular production build runs outside the VPS. Ready-to-serve files are transferred to the server and served by Nginx over HTTPS. This demo has no persistent Node.js process.

Check /healthz, direct routes after refresh, sign-in, form save and cancel. Roll back by pointing current to the retained release directory. Data is restored from the built-in dataset.

Builds run outside the VPS; the server receives static files and versioned images. Secrets are kept separately. Logs rotate; changing log options requires recreating the container. No server-wide docker prune.

The code map links a screen or API to its module and data. A change needs those links checked, the map updated and the affected flows rerun: normal path, error, retry and reset. Diagrams can go stale, so their version is listed alongside them.

Rollback checked at 2026-09-07T00:59:39.939043+00:00: 20260907-verified → 20260907 → 20260907-verified. HTTPS, readiness and SHA were confirmed after each switch. This checks configuration and artifacts at one verified SHA; no reverse database migration was performed.

## Screenshot index

1. [Sign-in with clearly displayed demo credentials](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-01-login.png) — 2026-09-07T03:57:03.244Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

2. [Schedule: 180 test records](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-02-schedule.png) — 2026-09-07T03:57:04.809Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

3. [Completed examinations filter](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-03-filtered.png) — 2026-09-07T03:57:06.138Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

4. [Filter with no matches](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-04-empty.png) — 2026-09-07T03:57:07.366Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

5. [Isolated editing draft](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-05-edit-draft.png) — 2026-09-07T03:57:08.291Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

6. [Required-field validation error](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-06-validation.png) — 2026-09-07T03:57:09.677Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

7. [Completed form for a new record](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-07-create-form.png) — 2026-09-07T03:57:10.273Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

8. [New record in the table](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-08-created.png) — 2026-09-07T03:57:11.219Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

9. [Confirmation before deleting your own record](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-09-delete.png) — 2026-09-07T03:57:14.514Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

10. [Synthetic collection points](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-10-collection-points.png) — 2026-09-07T03:57:16.452Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

11. [Mobile schedule with a scrollable table](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-11-mobile-schedule.png) — 2026-09-07T03:57:18.021Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

12. [Mobile Ionic form](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-12-mobile-form.png) — 2026-09-07T03:57:18.718Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

13. [Reset returns to sign-in](https://portfolio.komaroff-dev.ru/evidence/ionic/full/71ea9d0d-13-reset.png) — 2026-09-07T03:57:20.533Z, source `71ea9d0d972465a648633a244d1004d2785c8596`.

Screenshots, diagrams and the original evidence package retain their source language. Captions and this document are translated into English.

[Original evidence package](https://portfolio.komaroff-dev.ru/downloads/ionic-evidence.zip)