Engelbart Kai Sven (PEA4-Fe)
b54e167ee7
* commit 'bfe3788c377f25e239416b6f41057517c59cdf68': Apply sample page fix |
||
---|---|---|
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.