Web Interface for DeFinMa (Angular)
Go to file
2021-03-11 22:20:58 +01:00
cf_config added buttons for resetting to defaults in samples and changed defaults, added loading spinner and added apply filters button (again) 2020-08-18 12:37:27 +02:00
e2e code improvements 2020-09-03 15:51:53 +02:00
src More efficient sample counting 2021-03-11 22:20:58 +01:00
.editorconfig initial commit 2020-01-14 13:41:28 +01:00
.gitignore initial commit 2020-01-14 13:41:28 +01:00
.npmrc init 2020-01-14 16:18:26 +01:00
angular.json fixed changelog paging 2020-08-28 16:58:35 +02:00
browserslist initial commit 2020-01-14 13:41:28 +01:00
karma.conf.js fixed type filter 2020-08-14 14:29:17 +02:00
manifest.yml added templates component 2020-07-27 17:52:03 +02:00
package-lock.json Add pdfmake dependency 2021-01-25 10:41:07 +01:00
package.json Add pdfmake dependency 2021-01-25 10:41:07 +01:00
README.md updated README 2020-09-07 10:16:17 +02:00
tsconfig.app.json finished tests 2020-05-22 09:36:50 +02:00
tsconfig.json first version of sample.component finished 2020-06-19 08:43:22 +02:00
tsconfig.spec.json initial commit 2020-01-14 13:41:28 +01:00
tslint.json first version of sample.component finished 2020-06-19 08:43:22 +02:00

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.