definma-ui/README.md

54 lines
2.5 KiB
Markdown
Raw Normal View History

2020-08-12 17:38:12 +02:00
# DeFinMa - UI
2020-01-14 13:41:28 +01:00
2020-08-28 16:58:35 +02:00
This is the Angular front end for the DeFinMa web page hosted on the BIC at
[https://definma.apps.de1.bosch-iot-cloud.com](https://definma.apps.de1.bosch-iot-cloud.com).
A deep insight into the project structure can be gained in the
[Bachelor Thesis](https://definma.apps.de1.bosch-iot-cloud.com/assets/docs/Veit-Lukas_Bachelor-Thesis.pdf).
2020-01-14 13:41:28 +01:00
2020-01-14 16:27:30 +01:00
## Bosch styled components
2020-01-14 13:41:28 +01:00
2020-08-12 11:06:46 +02:00
Bosch styled Angular components were added following
[this](https://connect.bosch.com/blogs/f6aacf06-98dd-440c-b3a7-0c5a4ad4c1bd/entry/Getting_started_a_Bosch_styled_Angular_Project?lang=de_de)
guide, included using the `@inst-iot/bosch-angular-ui-components` package.
2020-01-14 13:41:28 +01:00
2020-08-28 16:58:35 +02:00
## General structure
2020-01-14 13:41:28 +01:00
2020-08-28 16:58:35 +02:00
All components are displayed inside of the `app.component`, most of them directly as routes, see
[app-routing.module.ts](./src/app/app-routing.module.ts). For all routes except the `/documentation` the user has to be
logged in and has to have the right user level. Login is handled by the
[login.service](./src/app/services/login.service.ts), which also provides the `canActivate` function.
### Additional components
The [error.component](./src/app/error) provides an error pop over.
The [help.component](./src/app/help) provides the help information for all pages which can be accessed by the question
mark in the top right corner.
The [img-magnifier](./src/app/img-magnifier) is used for displaying an image with a magnifying glass when hovering over
the image.
[rb-custom-inputs](./src/app/rb-custom-inputs) provides Bosch styled components which were not included in the library.
These are an array input for displaying nested input elements for every array item, a button with icon and a table.
The [models](./src/app/models) folder provides TS classes for database objects.
### Services
The [api.service](./src/app/services/api.service.ts) provides API access with integrated authorization and error
handling.
The [autocomplete.service](./src/app/services/autocomplete.service.ts) uses the _QuickScore_ module for sorting
autocomplete results.
The [data.service](./src/app/services/data.service.ts) loads some resources needed in multiple Components. Take a look
at the `collectionMap` in line 19 for available resources.
The [login.service](./src/app/services/login.service.ts) provides login and logout as well as information about the
current user.
The [validation.service](./src/app/services/validation.service.ts) provides validation together with the
[validate.directive](./src/app/validate.directive.ts) for Angular Forms.