Skip to content

WorkerBeesTeam/das_front

Repository files navigation

DeviceAccess Angular Frontend

Описание работы приложения

Введение

Приложение обменивается структурами данных с сервером посредством REST API отправляя JSON рапросы к серверу. Описание структуры данных авторизации и списка проектов находятся в файле src/app/user.ts, а структуры данных проекта в файле src/app/house/house.ts. Для POST запросов, должен передаваться CSRF токен в заголовке X-CSRFToken получаемый из Cookie csrftoken.

Список путей URL REST API и возвращаемые структуры данных:

Авторизация
  • /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) и если проект подключен загорается зелёный индикатор в противном случае жёлтый.

Cтруктуры данных

Поля структур прокоментированы в файлах определения.

Файл src/app/user.ts

Содержит следующие структуры: Шаблон массива данных - PaginatorApi<T>, Пользователь - User, Проект - House

Файл src/app/house/house.ts

Содержит следующие структуры: Описание проекта - HouseDetail, Устройство - Device, Элемент устройства - DeviceItem, Тип элемента - ItemType, Еденица измерения - SignType, Секция - Section, Группа - Group, Тип группы - GroupType, Уставка - ParamValue, Тип уставки - ParamItem, и некоторые другие.

Протокол общения по WebSocket

Приложение обменивается с WebSocket сервером сообщениями в виде массива байт. Стразу после установки соединения сервер посылает один байт Cmd.Auth(1) на что клиент отвечает ключом сессии. В случае успешной авторизации сервер возврашает один байт Cmd.Welcome(2) в противном случае разрывает соединение.

Структура сообщения

Кроме Auth и Welcome структура следующая: [1 байт CMD][4 байта PROJECT_ID][N байт ТЕЛО ЗАПРОСА]

Сообщения посылаемые клиентом

Cmd.Auth (1) - Авторизация. Ответ: Cmd.Welcome

[1][0][N TOKEN]

Cmd.ConnectInfo (3) - Подключён ли проект или нет. Ответ: Cmd.ConnectInfo

[3][PROJ_ID]

Cmd.WriteToDevItem (4) - Изменить значение элемента (Вкл./Выкл./Значение)

[4][PROJ_ID][4байта ITEM_ID][QVariant RAW_VALUE]

Cmd.ChangeGroupMode (5) - Изменить режим автоматизации

[5][PROJ_ID][4байта MODE_ID][4байта GROUP_ID]

Cmd.ChangeParamValues (6) - Изменить уставки

[6][PROJ_ID][QByteArray] - (Расписать содержимое QByteArray)

Cmd.ChangeCode (7) - Изменить скрипт автоматизации

[7][PROJ_ID][4байта CODE_ID][QString TEXT]

Cmd.ExecScript (8) - Выполнить JavaScript команду

[8][PROJ_ID][QString TEXT]

Cmd.Restart (9) - Перезагрузка

[8][PROJ_ID]

Сообщения посылаемые сервером

Cmd.Auth (1) - Авторизация

[1]

Cmd.Welcome (2) - Авторизация успешна

[2]

Cmd.ConnectInfo (3) - Состояние подключения проекта

[3][PROJ_ID][1байт BOOLEAN Connected][QString IP][INT64 time milliseconds][QString TimeZone name]

Cmd.DevItemValues (10) - Новые значения элементов

[10][PROJ_ID][4байта PACK_SIZE][[4байта ITEM_ID][QVariant raw_value][QVariant display_value][Повторяется PACK_SIZE раз]

Cmd.Eventlog (11) - Новое сообщение в журнале

[11][PROJ_ID][4байта EVENT_ID][4байта TYPE_ID][QString ISODateWithMs][QString category][QString message]

Cmd.GroupMode (12) - Новое значение режима автоматизации

[12][PROJ_ID][4байта MODE_ID][4байта GROUP_ID]


This project was generated with Angular CLI version 1.7.0.

Development server

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.

Code scaffolding

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.

Build

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.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.