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-09-07 10:16:17 +02:00
|
|
|
## Building
|
|
|
|
|
|
|
|
|
|
`npm start` Start local development server
|
|
|
|
|
|
|
|
|
|
`npm run build` Build UI into `dist` folder
|
|
|
|
|
|
|
|
|
|
`npm run build-push` Build UI and push to BIC. You must be logged in with the `cf` tool for this command to work.
|
|
|
|
|
|
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.
|
