basic account management (Login/Logout)

src/app/sample/sample.component.html

@@ -6,14 +6,14 @@
 <!--<form #sampleForm="ngForm">-->
   <div class="sample">
     <div>
-      <rb-form-input name="materialname" label="material name" [rbFormInputAutocomplete]="autocomplete.bind(this, materialNames)" [rbDebounceTime]="0" [rbInitialOpen]="true" (keydown)="preventSubmit($event)" (ngModelChange)="findMaterial($event)" appValidate="stringOf" [appValidateArgs]="[materialNames]" required [(ngModel)]="material.name" [autofocus]="true" #materialNameInput="ngModel">
+      <rb-form-input name="materialname" label="material name" [rbFormInputAutocomplete]="autocomplete.bind(this, materialNames)" [rbDebounceTime]="0" [rbInitialOpen]="true" (keydown)="preventDefault($event)" (ngModelChange)="findMaterial($event)" appValidate="stringOf" [appValidateArgs]="[materialNames]" required [(ngModel)]="material.name" [autofocus]="true" #materialNameInput="ngModel">
         <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>
       <button class="rb-btn rb-secondary" type="button" (click)="setNewMaterial(true)"><span class="rb-ic rb-ic-add"></span>&nbsp;New material</button>
     </div>
 
-    <div class="material shaded-container" *ngIf="newMaterial">
+    <div class="material shaded-container" *ngIf="newMaterial" [@inOut]>
       <h4>Material properties</h4>
       <rb-form-input name="supplier" label="supplier" [rbFormInputAutocomplete]="autocomplete.bind(this, suppliers)" [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required [(ngModel)]="material.supplier" #supplierInput="ngModel">
         <ng-template rbFormValidationMessage="failure">{{supplierInput.errors.failure}}</ng-template>
@@ -38,7 +38,7 @@
       </rb-form-input>
 
       <div class="material-numbers">
-        <div *ngFor="let number of material.numbers; index as i" class="two-col">
+        <div *ngFor="let number of material.numbers; index as i" class="two-col" [@inOut]>
           <rb-form-input label="color" appValidate="string" [required]="i < material.numbers.length - 1" (keyup)="handleMaterialNumbers()" [(ngModel)]="number.color" ngModel [ngModelOptions]="{standalone: true}">
           </rb-form-input>
           <rb-form-input label="material number" appValidate="string" [(ngModel)]="number.number" ngModel [ngModelOptions]="{standalone: true}">
@@ -69,7 +69,7 @@
       <ng-template rbFormValidationMessage="failure">{{commentInput.errors.failure}}</ng-template>
     </rb-form-input>
     <h5>Additional properties</h5>
-    <div *ngFor="let field of customFields; index as i" class="two-col">
+    <div *ngFor="let field of customFields; index as i" class="two-col" [@inOut]>
       <div>
         <rb-form-input [name]="'cf-key' + i" label="key" [rbFormInputAutocomplete]="autocomplete.bind(this, availableCustomFields)" [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="unique" [appValidateArgs]="[uniqueCfValues(i)]" (ngModelChange)="adjustCustomFields($event, i)" [ngModel]="field[0]" #keyInput="ngModel">
           <ng-template rbFormValidationMessage="failure">{{keyInput.errors.failure}}</ng-template>
@@ -89,7 +89,7 @@
       Condition
       <button class="rb-btn rb-secondary condition-set" type="button" (click)="toggleCondition()" [disabled]="!conditionTemplates">{{condition ? 'Do not set condition' : 'Set condition'}}</button>
     </h4>
-    <div *ngIf="condition">
+    <div *ngIf="condition" [@inOut]>
       <rb-form-select name="conditionSelect" label="Condition" (ngModelChange)="selectCondition($event)" [ngModel]="condition._id">
         <option *ngFor="let c of conditionTemplates" [value]="c._id">{{c.name}}</option>
       </rb-form-select>
@@ -105,8 +105,8 @@
 
   <div class="measurements shaded-container">
     <h4>Measurements</h4>
-    <div *ngFor="let measurement of sample.measurements; index as mIndex">
-      <rb-form-select name="measurementTemplateSelect" label="Template" [(ngModel)]="measurement.measurement_template">
+    <div *ngFor="let measurement of sample.measurements; index as mIndex" [@inOut]>
+      <rb-form-select name="measurementTemplateSelect" label="Template" [(ngModel)]="measurement.measurement_template" (ngModelChange)="clearChart(mIndex)">
         <option *ngFor="let m of measurementTemplates" [value]="m._id">{{m.name}}</option>
       </rb-form-select>
 
@@ -115,9 +115,16 @@
           <ng-template rbFormValidationMessage="failure">{{parameterInput.errors.failure}}</ng-template>
           <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
         </rb-form-input>
-        <rb-form-file *ngIf="parameter.range.type" [name]="'measurementParameter' + mIndex + '-' + pIndex" [label]="parameter.name" maxSize="10000000" (change)="fileToArray($event, mIndex, parameter.name)" required ngModel>
+        <rb-form-file *ngIf="parameter.range.type" [name]="'measurementParameter' + mIndex + '-' + pIndex" [label]="parameter.name" maxSize="10000000" (ngModelChange)="fileToArray($event, mIndex, parameter.name)" placeholder="Select file or drag and drop" dragDrop required ngModel>
           <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
         </rb-form-file>
+        <canvas baseChart *ngIf="parameter.range.type && charts[mIndex][0].data.length > 0"  class="dpt-chart" [@inOut]
+                [datasets]="charts[mIndex]"
+                [labels]="[]"
+                [options]="chartOptions"
+                [legend]="false"
+                chartType="scatter">
+        </canvas>
       </div>
 
       <button class="rb-btn rb-danger" type="button" (click)="removeMeasurement(mIndex)"><span class="rb-ic rb-ic-delete"></span>&nbsp;Delete measurement</button>
@@ -130,7 +137,6 @@
     </div>
   </div>
 
-  &nbsp;
 
   <div>
     <button class="rb-btn rb-primary" type="submit" (click)="saveSample()" [disabled]="!sampleForm.form.valid">Save sample</button>