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

* commit '8a44135d9ab9086af2d5cd3f551e9db8d859231e':
  changed type names
  small fixes

README.md

@@ -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.

angular.json

@@ -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"

src/app/app.module.ts

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

src/app/changelog/changelog.component.html

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

src/app/documentation-database/documentation-database.component.html

@@ -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
+      The material status of the sample, can be either <span class="name">as-delivered/raw</span> or
-      </span> or <span class="name">tension rod</span>.
+      <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>Bosch material part numbers</td>
-    <td></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>

src/app/documentation-database/documentation-database.component.scss

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

src/app/error/error.component.html

@@ -1,3 +1,11 @@
 <rb-alert alertTitle="Error" type="error" okBtnLabel="Discard">
+  <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>

src/app/error/error.component.ts

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

src/app/img-magnifier/img-magnifier.component.scss

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

src/app/img-magnifier/img-magnifier.component.ts

@@ -7,9 +7,9 @@ import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@a
 })
 export class ImgMagnifierComponent implements OnInit, AfterViewInit {
 
-  @Input('src') src: string;
+  @Input() src: string;
-  @Input('zoom') zoom: number;
+  @Input() zoom: number;
-  @Input('magnifierSize') magnifierSize: {width: number, height: 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.x = Math.min(
-    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));
+      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';
   }
 }

src/app/login/login.component.html

@@ -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>

src/app/rb-custom-inputs/rb-table/rb-table.component.html

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

src/app/rb-custom-inputs/rb-table/rb-table.component.scss

@@ -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;
+  }
+}

src/app/rb-custom-inputs/rb-table/rb-table.component.ts

@@ -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 {

src/app/sample/sample.component.html

@@ -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>
+      <rb-form-select name="type" label="type" required [(ngModel)]="sample.type" ngModel
-        <option value="granulate">granulate</option>
+                      title="material status of the sample">
-        <option value="part">part</option>
+        <option value="as-delivered/raw">as-delivered/raw</option>
-        <option value="tension rod">tension rod</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>

src/app/samples/samples.component.html

@@ -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>

src/app/samples/samples.component.ts

@@ -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

src/app/services/api.service.ts

@@ -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();
         });

src/styles.scss

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