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. A deep insight into the project structure can be gained in the Bachelor Thesis.

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 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. 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, which also provides the canActivate function.

Additional components

The error.component provides an error pop over.

The help.component provides the help information for all pages which can be accessed by the question mark in the top right corner.

The img-magnifier is used for displaying an image with a magnifying glass when hovering over the image.

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 folder provides TS classes for database objects.

Services

The api.service provides API access with integrated authorization and error handling.

The autocomplete.service uses the QuickScore module for sorting autocomplete results.

The data.service loads some resources needed in multiple Components. Take a look at the collectionMap in line 19 for available resources.

The login.service provides login and logout as well as information about the current user.

The validation.service provides validation together with the validate.directive for Angular Forms.