# DeFinMa - UI

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).

## 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.

## Bosch styled components

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.

## General structure

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.