Приложение обменивается структурами данных с сервером посредством REST API отправляя JSON рапросы к серверу. Описание структуры данных авторизации и списка проектов находятся в файле src/app/user.ts, а структуры данных проекта в файле src/app/house/house.ts. Для POST запросов, должен передаваться CSRF токен в заголовке X-CSRFToken получаемый из Cookie csrftoken.
- /api/auth/ -> User
- /api/refresh/
- /api/verify/
- /api/v1/house/ -> PaginatorApi<House>
- /api/v1/detail/ -> HouseDetail
- /api/v1/events/ -> PaginatorApi<EventLog>
- /api/v1/logs/ -> PaginatorApi<Logs>
- /api/v1/code/ -> Codes
Пользователь заходит на сайт и попадает на страницу авторизации (компонент страницы src/app/login). Приложение посылает логин и пароль на /api/auth/ и в ответ получает структуру User c описанием данных пользователя, его разрешений и ключ сессии.
Пользователь заходит на страницу Панель (/src/app/houses/dashboard/) или Проекты (/src/app/houses/list/). Приложение запрашивает список проектов пользователя посылая GET запрос на /api/v1/house/ с указанием параметров для PaginatorApi например: "?limit=10&offset=0&ordering=title" запрос 10 проектов начиная с 0 отсортировать по "title". Также пользователь может воспользоваться Поиском (/src/app/houses/search/) приложение при этом передаёт параметр ?search=текст.
Пользователь нажимает на имя проекта с которым будет работать и попадает в модуль House(/src/app/house/house.module.ts) основной компонент которого HouseComponent(/src/app/house/house.component.*) содержит в себе меню для перехода к конкретным компонентам работы с проектом, а также закреплёную панель с выводом информации о состоянии подключения к проекту.
- Сведения (/src/app/houses/detail)
- Обзор (/src/app/house/view)
- Управление (/src/app/house/manage)
- Журнал (/src/app/house/log)
- Cтруктура (/src/app/house/settings)
- Отчёты (/src/app/house/reports)
Компонент HouseComponent при инициализации запрашивает описание проекта с помощью службы HouseService(/src/app/house/house.service.ts) которая в свою очередь посылает GET запрос на /api/v1/detail/?id=10 где 10 это ID выбранного проекта. В ответ приложение получает структуру HouseDetail и обрабатывает её.
В файле /src/app/web-socket.service.ts описаны базовые классы для работы с WebSocket. Это класс ByteTools который содержит статические методы для обработки байтовый сообщений. Класс службы WebSocketBytesService обеспечивает базовое взаимодействие с WebSocket сервером и служит основой для основного класса службы ControlService описывающего протокол общения по WebSocket, который находится в файле /src/app/house/control.service.ts.
После выбора проекта, приложение подключается к WebSocket и авторизуется передав ключ сессии полученный при авторизации на web сервере. На панеле при этом горит серый индикатор сообщающий о состоянии ожидания подключения. При неудачной установке соединения с сервером загорается красный индикатор. В случае успеха запрашивается состояние подключения выбранного проекта (Cmd.ConnectInfo) и если проект подключен загорается зелёный индикатор в противном случае жёлтый.
Поля структур прокоментированы в файлах определения.
Содержит следующие структуры: Шаблон массива данных - PaginatorApi<T>, Пользователь - User, Проект - House
Содержит следующие структуры: Описание проекта - HouseDetail, Устройство - Device, Элемент устройства - DeviceItem, Тип элемента - ItemType, Еденица измерения - SignType, Секция - Section, Группа - Group, Тип группы - GroupType, Уставка - ParamValue, Тип уставки - ParamItem, и некоторые другие.
Приложение обменивается с WebSocket сервером сообщениями в виде массива байт. Стразу после установки соединения сервер посылает один байт Cmd.Auth(1) на что клиент отвечает ключом сессии. В случае успешной авторизации сервер возврашает один байт Cmd.Welcome(2) в противном случае разрывает соединение.
Кроме Auth и Welcome структура следующая: [1 байт CMD][4 байта PROJECT_ID][N байт ТЕЛО ЗАПРОСА]
[1][0][N TOKEN]
[3][PROJ_ID]
[4][PROJ_ID][4байта ITEM_ID][QVariant RAW_VALUE]
[5][PROJ_ID][4байта MODE_ID][4байта GROUP_ID]
[6][PROJ_ID][QByteArray] - (Расписать содержимое QByteArray)
[7][PROJ_ID][4байта CODE_ID][QString TEXT]
[8][PROJ_ID][QString TEXT]
[8][PROJ_ID]
[1]
[2]
[3][PROJ_ID][1байт BOOLEAN Connected][QString IP][INT64 time milliseconds][QString TimeZone name]
[10][PROJ_ID][4байта PACK_SIZE][[4байта ITEM_ID][QVariant raw_value][QVariant display_value][Повторяется PACK_SIZE раз]
[11][PROJ_ID][4байта EVENT_ID][4байта TYPE_ID][QString ISODateWithMs][QString category][QString message]
[12][PROJ_ID][4байта MODE_ID][4байта GROUP_ID]
This project was generated with Angular CLI version 1.7.0.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.