banana/definma-ui
2
Fork 0
Code Releases Activity

Merge pull request #20 in ~VLE2FE/definma-ui from development to master

Browse Source 
* commit '8a44135d9ab9086af2d5cd3f551e9db8d859231e':
  changed type names
  small fixes
This commit is contained in:
Veit Lukas (PEA4-Fe) 2020-08-12 12:39:27 +02:00
commit f037a1ddb6
19 changed files with 142 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -4,8 +4,11 @@ This is the Angular front end for the digital fingerprint of plastics web page h
## 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.
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.
## Testing
Unit and e2e tests are implemented and can be executed using `ng test` and `protractor ./e2e/protractor.conf.js` respectively.
Unit and e2e tests are implemented and can be executed using `ng test` and `protractor ./e2e/protractor.conf.js`
respectively.

6
angular.json
View File

@ -26,7 +26,11 @@
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "./node_modules/@inst-iot/bosch-angular-ui-components/assets", "output": "./assets" }
{
"glob": "**/*",
"input": "./node_modules/@inst-iot/bosch-angular-ui-components/assets",
"output": "./assets"
}
],
"styles": [
"src/styles.scss"

2
src/app/app.module.ts
View File

@ -50,7 +50,7 @@ import { DocumentationDatabaseComponent } from './documentation-database/documen
],
imports: [
LocalStorageModule.forRoot({
prefix: 'dfop',
prefix: 'definma',
storageType: 'localStorage'
}),
BrowserModule,

2
src/app/changelog/changelog.component.html
View File

@ -21,7 +21,7 @@
</button>
</div>
<rb-table>
<rb-table ellipsis>
<tr>
<th>Date</th>
<th>Action</th>

36
src/app/documentation-database/documentation-database.component.html
View File

@ -22,10 +22,10 @@
<tr>
<td>type</td>
<td>
The material status of the sample, can be either <span class="name">granulate</span>, <span class="name">part
</span> or <span class="name">tension rod</span>.
The material status of the sample, can be either <span class="name">as-delivered/raw</span> or
<span class="name">processed</span>.
</td>
<td>'granulate'</td>
<td>'processed'</td>
</tr>
<tr>
<td>number</td>
@ -118,13 +118,13 @@
</tr>
<tr>
<td>name</td>
<td></td>
<td>Trade name of the material</td>
<td>'Ultradur B4300 G6'</td>
</tr>
<tr>
<td>numbers</td>
<td>Trade name of the material</td>
<td></td>
<td>Bosch material part numbers</td>
<td>['5515753021, '5515753404']</td>
</tr>
<tr>
<td>properties</td>
@ -149,6 +149,30 @@
<td>'new'</td>
</tr>
<tr><th>material_groups</th><th></th><th></th></tr>
<tr>
<td>_id</td>
<td>Automatically generated unique id</td>
<td>'5f2e631291c5d68f8a0708f9'</td>
</tr>
<tr>
<td>name</td>
<td>The chemical material type</td>
<td>'PA66'</td>
</tr>
<tr><th>material_supplier</th><th></th><th></th></tr>
<tr>
<td>_id</td>
<td>Automatically generated unique id</td>
<td>'5f2e631991c5d68f8a0709c3'</td>
</tr>
<tr>
<td>name</td>
<td>The material supplier</td>
<td>'BASF'</td>
</tr>
<tr><th>measurements</th><th></th><th></th></tr>
<tr>
<td>_id</td>

10
src/app/documentation-database/documentation-database.component.scss
View File

@ -1,11 +1,5 @@
.field-reference td {
white-space: normal;
text-overflow: initial;
max-width: none;
&:nth-child(3) {
font-family: boschmono, monospace;
}
.field-reference td:nth-child(3) {
font-family: boschmono, monospace;
}
span.name {

10
src/app/error/error.component.html
View File

@ -1,3 +1,11 @@
<rb-alert alertTitle="Error" type="error" okBtnLabel="Discard">
{{message}}
<div class="space-below">
{{message}}
</div>
<div *ngIf="details.length">
<a href="javascript:" class="rb-details-toggle" rbDetailsToggle #triggerDetails="rbDetailsToggle">Details</a>
<div *ngIf="triggerDetails.open">
<p *ngFor="let detail of details">{{detail}}</p>
</div>
</div>
</rb-alert>

1
src/app/error/error.component.ts
View File

@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
export class ErrorComponent implements OnInit {
message = '';
details: string[] = [];
constructor() { }

4
src/app/img-magnifier/img-magnifier.component.scss
View File

@ -11,9 +11,7 @@
.magnifier {
position: absolute;
background: #FFF;
background-repeat: no-repeat;
background-position: -500px -500px;
background: #FFF no-repeat -500px -500px;
z-index: 99;
border: 1px solid #FFF;
box-shadow: 10px 10px 25px $color-bosch-light-gray-b25;

19
src/app/img-magnifier/img-magnifier.component.ts
View File

@ -7,9 +7,9 @@ import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@a
})
export class ImgMagnifierComponent implements OnInit, AfterViewInit {
@Input('src') src: string;
@Input('zoom') zoom: number;
@Input('magnifierSize') magnifierSize: {width: number, height: number};
@Input() src: string;
@Input() zoom: number;
@Input() magnifierSize: {width: number, height: number};
@ViewChild('mainImg') mainImg: ElementRef;
backgroundSize;
@ -31,11 +31,18 @@ export class ImgMagnifierComponent implements OnInit, AfterViewInit {
calcPos(event) {
const img = this.mainImg.nativeElement.getBoundingClientRect();
this.magnifierPos.x = Math.min(img.width - this.magnifierSize.width, Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2));
this.magnifierPos.y = Math.min(img.height - this.magnifierSize.height + 7, Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2));
this.magnifierPos.x = Math.min(
img.width - this.magnifierSize.width,
Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2)
);
this.magnifierPos.y = Math.min(
img.height - this.magnifierSize.height + 7,
Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2)
);
}
calcBackgroundSize() {
this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) + 'px ' + (this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0';
this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) + 'px ' +
(this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0';
}
}

13
src/app/login/login.component.html
View File

@ -3,17 +3,22 @@
<form #loginForm="ngForm">
<rb-form-input name="username" label="username" appValidate="username" required [(ngModel)]="username" #usernameInput="ngModel">
<rb-form-input name="username" label="username" appValidate="username" required [(ngModel)]="username"
#usernameInput="ngModel">
<ng-template rbFormValidationMessage="failure">{{usernameInput.errors.failure}}</ng-template>
</rb-form-input>
<rb-form-input *ngIf="!passreset" type="password" name="password" label="password" appValidate="password" required [(ngModel)]="password" #passwordInput="ngModel">
<rb-form-input *ngIf="!passreset" type="password" name="password" label="password" appValidate="password" required
[(ngModel)]="password" #passwordInput="ngModel">
<ng-template rbFormValidationMessage="failure">{{passwordInput.errors.failure}}</ng-template>
</rb-form-input>
<rb-form-input *ngIf="passreset" type="email" name="email" label="email" email required [(ngModel)]="email" #emailInput="ngModel">
<rb-form-input *ngIf="passreset" type="email" name="email" label="email" email required [(ngModel)]="email"
#emailInput="ngModel">
<ng-template rbFormValidationMessage="failure">{{emailInput.errors.failure}}</ng-template>
</rb-form-input>
<a href="#" class="forgot-pass" (click)="passreset = !passreset">Forgot password</a>
<button class="rb-btn rb-primary login-button" (click)="login()" type="submit" [disabled]="!loginForm.form.valid">{{passreset ? 'Send' : 'Login'}}</button>
<button class="rb-btn rb-primary login-button" (click)="login()" type="submit" [disabled]="!loginForm.form.valid">
{{passreset ? 'Send' : 'Login'}}
</button>
<div class="message">{{message}}</div>
</form>
</div>

4
src/app/rb-custom-inputs/rb-table/rb-table.component.html
View File

@ -1,5 +1,5 @@
<div class="table-wrapper space-below">
<table>
<div class="table-wrapper space-below" [class.scroll-top]="scrollTop !== undefined">
<table [class.ellipsis]="ellipsis !== undefined">
<ng-content></ng-content>
</table>
</div>

15
src/app/rb-custom-inputs/rb-table/rb-table.component.scss
View File

@ -1,6 +1,6 @@
@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors";
.table-wrapper {
.table-wrapper.scroll-top {
overflow-x: auto;
width: 100%;
@ -20,10 +20,6 @@ table {
::ng-deep td, ::ng-deep th {
padding: 8px 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 200px;
}
::ng-deep th {
@ -32,4 +28,11 @@ table {
}
}
table.ellipsis {
::ng-deep td, ::ng-deep th {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 200px;
}
}

5
src/app/rb-custom-inputs/rb-table/rb-table.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import {Component, Input, OnInit} from '@angular/core';
@Component({
// tslint:disable-next-line:component-selector
@ -8,6 +8,9 @@ import { Component, OnInit } from '@angular/core';
})
export class RbTableComponent implements OnInit {
@Input() scrollTop;
@Input() ellipsis;
constructor() { }
ngOnInit(): void {

41
src/app/sample/sample.component.html
View File

@ -8,7 +8,8 @@
<rb-form-input name="materialname" label="material name" [rbDebounceTime]="0" [rbInitialOpen]="true"
[rbFormInputAutocomplete]="autocomplete.bind(this, materialNames)" appValidate="stringOf"
(keydown)="preventDefault($event)" (ngModelChange)="findMaterial($event)" ngModel
[appValidateArgs]="[materialNames]" required [(ngModel)]="material.name" [autofocus]="true">
[appValidateArgs]="[materialNames]" required [(ngModel)]="material.name" [autofocus]="true"
title="trade name of the material, eg. Ultradur B4300 G6">
<ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
<ng-template rbFormValidationMessage="failure">Unknown material, add properties for new material</ng-template>
</rb-form-input>
@ -22,14 +23,16 @@
[rbFormInputAutocomplete]="autocomplete.bind(this, d.arr.materialSuppliers)"
[rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required
[(ngModel)]="material.supplier" #supplierInput="ngModel"
(focusout)="checkTypo($event, 'materialSuppliers', 'supplier', modalWarning)">
(focusout)="checkTypo($event, 'materialSuppliers', 'supplier', modalWarning)"
title="material supplier, eg. BASF">
<ng-template rbFormValidationMessage="failure">{{supplierInput.errors.failure}}</ng-template>
</rb-form-input>
<rb-form-input name="group" label="group"
[rbFormInputAutocomplete]="autocomplete.bind(this, d.arr.materialGroups)"
[rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required
[(ngModel)]="material.group" #groupInput="ngModel"
(focusout)="checkTypo($event, 'materialGroups', 'group', modalWarning)">
(focusout)="checkTypo($event, 'materialGroups', 'group', modalWarning)"
title="chemical material type, eg. PA66">
<ng-template rbFormValidationMessage="failure">{{groupInput.errors.failure}}</ng-template>
</rb-form-input>
<ng-template #modalWarning>
@ -41,9 +44,9 @@
<rb-array-input [(ngModel)]="material.numbers" name="materialNumbers" [pushTemplate]="''">
<rb-form-input *rbArrayInputItem="let item" [rbArrayInputListener]="'materialNumber'" [index]="item.i"
label="material number" appValidate="string" [name]="'materialNumber-' + item.i"
[ngModel]="item.value"></rb-form-input>
[ngModel]="item.value" title="Bosch material part number, eg. 5515753021"></rb-form-input>
</rb-array-input>
<rb-form-select name="conditionSelect" label="Type"
<rb-form-select name="propertiesSelect" label="Type" title="=overall material group specific properties"
[(ngModel)]="material.properties.material_template">
<option *ngFor="let m of d.latest.materialTemplates" [value]="m._id">{{m.name}}</option>
</rb-form-select>
@ -57,18 +60,19 @@
</div>
<div>
<rb-form-select name="type" label="type" required [(ngModel)]="sample.type" ngModel>
<option value="granulate">granulate</option>
<option value="part">part</option>
<option value="tension rod">tension rod</option>
<rb-form-select name="type" label="type" required [(ngModel)]="sample.type" ngModel
title="material status of the sample">
<option value="as-delivered/raw">as-delivered/raw</option>
<option value="processed">processed</option>
<ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
</rb-form-select>
<rb-form-input name="color" label="color" appValidate="string" [(ngModel)]="sample.color"
#colorInput="ngModel">
#colorInput="ngModel" title="sample color, eg. black">
<ng-template rbFormValidationMessage="failure">{{colorInput.errors.failure}}</ng-template>
<ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
</rb-form-input>
<rb-form-input name="batch" label="batch" appValidate="string" [(ngModel)]="sample.batch" #batchInput="ngModel">
<rb-form-input name="batch" label="batch" appValidate="string" [(ngModel)]="sample.batch" #batchInput="ngModel"
title="batch number the sample was from, eg. 2264486614">
<ng-template rbFormValidationMessage="failure">{{batchInput.errors.failure}}</ng-template>
</rb-form-input>
</div>
@ -76,7 +80,8 @@
<div class="notes">
<rb-form-input name="comment" label="comment" appValidate="stringLength" [appValidateArgs]="[512]"
[(ngModel)]="sample.notes.comment" #commentInput="ngModel">
[(ngModel)]="sample.notes.comment" #commentInput="ngModel"
title="general remarks that cannot be expressed in additional properties, eg. stabilized">
<ng-template rbFormValidationMessage="failure">{{commentInput.errors.failure}}</ng-template>
</rb-form-input>
<h5>Sample references</h5>
@ -85,12 +90,13 @@
<rb-form-input [name]="'sr-id' + i" label="sample number" [rbFormInputAutocomplete]="sampleReferenceListBind()"
[rbDebounceTime]="300" appValidate="stringOf"
[appValidateArgs]="[sampleReferenceAutocomplete[i]]"
(ngModelChange)="checkSampleReference($event, i)" [ngModel]="reference[0]" ngModel>
(ngModelChange)="checkSampleReference($event, i)" [ngModel]="reference[0]" ngModel
title="sample number of the referenced sample, eg. An31">
<ng-template rbFormValidationMessage="failure">Unknown sample number</ng-template>
</rb-form-input>
</div>
<rb-form-input [name]="'sr-relation' + i" label="relation" appValidate="string" [required]="reference[0] !== ''"
[(ngModel)]="reference[1]">
[(ngModel)]="reference[1]" title="description how the samples are connected, eg. belongs to">
<ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
</rb-form-input>
</div>
@ -102,12 +108,12 @@
<rb-form-input [name]="'cf-key' + item.i" label="key" [rbArrayInputListener]="'cf-key'" [index]="item.i"
[rbFormInputAutocomplete]="autocomplete.bind(this, availableCustomFields)" [rbDebounceTime]="0"
[rbInitialOpen]="true" appValidate="unique" [appValidateArgs]="[uniqueCfValues(item.i)]"
[ngModel]="item.value[0]" #keyInput="ngModel">
[ngModel]="item.value[0]" #keyInput="ngModel" title="name of additional property, eg. vwz">
<ng-template rbFormValidationMessage="failure">{{keyInput.errors.failure}}</ng-template>
</rb-form-input>
</div>
<rb-form-input [name]="'cf-value' + item.i" label="value" appValidate="string" [required]="item.value[0] !== ''"
[ngModel]="item.value[1]">
[ngModel]="item.value[1]" title="value of additional property, eg. 0 min">
<ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
</rb-form-input>
</ng-container>
@ -121,7 +127,8 @@
</div>
<ng-template #generateSamples>
<rb-form-input type="number" name="sample-count" label="number of samples" pattern="^\d+?$" required
rbNumberConverter rbMin="1" [(ngModel)]="sampleCount" class="sample-count">
rbNumberConverter rbMin="1" [(ngModel)]="sampleCount" class="sample-count"
title="number of samples to create with this base information">
<ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
<ng-template rbFormValidationMessage="rbMin">Must be at least 1</ng-template>
</rb-form-input>

8
src/app/samples/samples.component.html
View File

@ -127,7 +127,7 @@
</a>
</div>
<rb-table class="samples-table">
<rb-table class="samples-table" scrollTop ellipsis>
<tr>
<th *ngIf="validation">
<rb-form-checkbox name="validate-all" (change)="selectAll($event)">all</rb-form-checkbox>
@ -213,7 +213,7 @@
<tr><th>Comment</th><td>{{sampleDetailsSample.notes.comment | exists}}</td></tr>
<tr *ngFor="let customField of sampleDetailsSample.notes.custom_fields_entries">
<th>{{customField[0]}}</th>
<td>{{customField[0]}}</td>
<td>{{customField[1]}}</td>
</tr>
<tr *ngFor="let reference of sampleDetailsSample.notes.sample_references">
<th>{{reference.relation}}</th>
@ -223,6 +223,10 @@
</button>
</td>
</tr>
<tr *ngFor="let conditionField of sampleDetailsSample.condition_entries">
<th>{{conditionField[0]}}</th>
<td>{{conditionField[1]}}</td>
</tr>
<tr *ngFor="let measurement of sampleDetailsSample.measurement_entries">
<th>{{measurement.name}}</th>
<td>{{measurement.value}}</td>

19
src/app/samples/samples.component.ts
View File

@ -3,6 +3,7 @@ import {ApiService} from '../services/api.service';
import {AutocompleteService} from '../services/autocomplete.service';
import cloneDeep from 'lodash/cloneDeep';
import pick from 'lodash/pick';
import omit from 'lodash/omit';
import {SampleModel} from '../models/sample.model';
import {LoginService} from '../services/login.service';
import {ModalService} from '@inst-iot/bosch-angular-ui-components';
@ -27,7 +28,7 @@ interface KeyInterface {
styleUrls: ['./samples.component.scss']
})
// TODO: save last settings
export class SamplesComponent implements OnInit {
@ -65,7 +66,7 @@ export class SamplesComponent implements OnInit {
loadSamplesQueue = []; // arguments of queued up loadSamples() calls
keys: KeyInterface[] = [
{id: 'number', label: 'Number', active: true, sortable: true},
{id: 'material.numbers', label: 'Material numbers', active: true, sortable: false},
{id: 'material.numbers', label: 'Material numbers', active: false, sortable: false},
{id: 'material.name', label: 'Material name', active: true, sortable: true},
{id: 'material.supplier', label: 'Supplier', active: true, sortable: true},
{id: 'material.group', label: 'Material', active: false, sortable: true},
@ -105,6 +106,7 @@ export class SamplesComponent implements OnInit {
this.filters.filters.find(e => e.field === 'material.group').autocomplete = this.d.arr.materialGroups;
});
this.d.load('userKey');
this.d.load('conditionTemplates');
this.loadTemplateKeys('material', 'type');
this.loadTemplateKeys('measurement', 'status');
}
@ -284,7 +286,6 @@ export class SamplesComponent implements OnInit {
});
}
// TODO: add measurements when ressource service is done
sampleDetails(id: string, modal: TemplateRef<any>) {
this.sampleDetailsSample = null;
this.api.get<SampleModel>('/sample/' + id, data => {
@ -295,11 +296,21 @@ export class SamplesComponent implements OnInit {
else {
this.sampleDetailsSample.custom_fields_entries = [];
}
if (Object.keys(data.condition).length) {
this.sampleDetailsSample.condition_entries = Object.entries(omit(this.sampleDetailsSample.condition, ['condition_template']))
.map(e => {
e[0] = `${this.ucFirst(this.d.id.conditionTemplates[this.sampleDetailsSample.condition.condition_template].name)} ${e[0]}`;
return e;
});
}
else {
this.sampleDetailsSample.condition_entries = [];
}
this.sampleDetailsSample.measurement_entries = [];
this.sampleDetailsSample.measurements.forEach(measurement => { // convert measurements for more optimized display without dpt
const name = this.d.id.measurementTemplates[measurement.measurement_template].name;
this.sampleDetailsSample.measurement_entries.push(...Object.entries(measurement.values).filter(e => e[0] !== 'dpt')
.map(e => ({name: this.ucFirst(name) + ' ' + this.ucFirst(e[0]), value: e[1]})));
.map(e => ({name: this.ucFirst(name) + ' ' + e[0], value: e[1]})));
});
new Promise(resolve => {
if (data.notes.sample_references.length) { // load referenced samples if available

5
src/app/services/api.service.ts
View File

@ -50,6 +50,11 @@ export class ApiService {
else {
const modalRef = this.modalService.openComponent(ErrorComponent);
modalRef.instance.message = 'Network request failed!';
const details = [err.error.status];
if (err.error.details) {
details.push(err.error.details);
}
modalRef.instance.details = details;
modalRef.result.then(() => {
this.window.location.reload();
});

4
src/styles.scss
View File

@ -25,10 +25,6 @@ button::-moz-focus-inner {
border: 0;
}
.supergraphic {
background-image: url("assets/imgs/supergraphic.svg");
}
.clickable {
cursor: pointer;
}