Hartenstein Ruben (PEA4-Fe)
0878ed9f10
* commit 'f7f351d6a303899fd86628d142e8585e03809636': Add very simple prediction delta UI Allow viscosity number predictions to be saved |
||
|---|---|---|
| cf_config | ||
| e2e | ||
| src | ||
| .editorconfig | ||
| .gitignore | ||
| .npmrc | ||
| angular.json | ||
| browserslist | ||
| karma.conf.js | ||
| manifest.yml | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.spec.json | ||
| tslint.json | ||
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.