definma-ui/src/app/sample/sample.component.html

<h2>{{new ? 'Add new sample' : 'Edit sample ' + sample.number}}</h2>

<rb-loading-spinner *ngIf="loading"></rb-loading-spinner>

<form #sampleForm="ngForm" *ngIf="!responseData && !loading">
<!--<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)="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" [@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>
      </rb-form-input>
      <rb-form-input name="group" label="group" [rbFormInputAutocomplete]="autocomplete.bind(this, groups)" [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required [(ngModel)]="material.group" #groupInput="ngModel">
        <ng-template rbFormValidationMessage="failure">{{groupInput.errors.failure}}</ng-template>
      </rb-form-input>
      <rb-form-input name="mineral" label="mineral" type="number" required rbNumberConverter rbMin="0" rbMax="100" [(ngModel)]="material.mineral" ngModel>
        <ng-template rbFormValidationMessage="required">Invalid value</ng-template>
        <ng-template rbFormValidationMessage="rbMin">Minimum value is 0</ng-template>
        <ng-template rbFormValidationMessage="rbMax">Maximum value is 100</ng-template>
      </rb-form-input>
      <rb-form-input name="glass_fiber" label="glass_fiber" type="number" required rbNumberConverter rbMin="0" rbMax="100" [(ngModel)]="material.glass_fiber" ngModel>
        <ng-template rbFormValidationMessage="required">Invalid value</ng-template>
        <ng-template rbFormValidationMessage="rbMin">Minimum value is 0</ng-template>
        <ng-template rbFormValidationMessage="rbMax">Maximum value is 100</ng-template>
      </rb-form-input>
      <rb-form-input name="carbon_fiber" label="carbon_fiber" type="number" required rbNumberConverter rbMin="0" rbMax="100" [(ngModel)]="material.carbon_fiber" ngModel>
        <ng-template rbFormValidationMessage="required">Invalid value</ng-template>
        <ng-template rbFormValidationMessage="rbMin">Minimum value is 0</ng-template>
        <ng-template rbFormValidationMessage="rbMax">Maximum value is 100</ng-template>
      </rb-form-input>

      <div class="material-numbers">
        <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}">
          </rb-form-input>
        </div>
      </div>
    </div>

    &nbsp;

    <div>
      <rb-form-input name="type" label="type" appValidate="string" required [(ngModel)]="sample.type" #typeInput="ngModel">
        <ng-template rbFormValidationMessage="failure">{{typeInput.errors.failure}}</ng-template>
        <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
      </rb-form-input>
      <rb-form-input name="color" label="color" [rbFormInputAutocomplete]="autocomplete.bind(this, getColors(material))" [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="stringOf" [appValidateArgs]="[getColors(material)]" required [(ngModel)]="sample.color" #colorInput="ngModel">
        <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">
        <ng-template rbFormValidationMessage="failure">{{batchInput.errors.failure}}</ng-template>
      </rb-form-input>
    </div>
  </div>

  <div class="notes">
    <rb-form-input name="comment" label="comment" appValidate="stringLength" [appValidateArgs]="[512]" [(ngModel)]="sample.notes.comment" #commentInput="ngModel">
      <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" [@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>
        </rb-form-input>
      </div>
      <rb-form-input [name]="'cf-value' + i" label="value" appValidate="string" [required]="field[0] !== ''" [(ngModel)]="field[1]">
        <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
      </rb-form-input>
    </div>
<!--    TODO: Sample reference-->
  </div>

  &nbsp;

  <div class="conditions shaded-container">
    <h4>
      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" [@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>

      <rb-form-input *ngFor="let parameter of condition.parameters; index as i" [name]="'conditionParameter' + i" [label]="parameter.name" appValidate="string" required [(ngModel)]="sample.condition[parameter.name]" #parameterInput="ngModel">
        <ng-template rbFormValidationMessage="failure">{{parameterInput.errors.failure}}</ng-template>
        <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
      </rb-form-input>
    </div>
  </div>

  &nbsp;

  <div class="measurements shaded-container">
    <h4>Measurements</h4>
    <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>

      <div *ngFor="let parameter of getMeasurementTemplate(measurement.measurement_template).parameters; index as pIndex">
        <rb-form-input *ngIf="!parameter.range.type" [name]="'measurementParameter' + mIndex + '-' + pIndex" [label]="parameter.name" appValidate="string" [(ngModel)]="measurement.values[parameter.name]" #parameterInput="ngModel">
          <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" (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>
    </div>

    &nbsp;

    <div>
      <button class="rb-btn rb-secondary" type="button" (click)="addMeasurement()" [disabled]="!measurementTemplates"><span class="rb-ic rb-ic-add"></span>&nbsp;New measurement</button>
    </div>
  </div>


  <div>
    <button class="rb-btn rb-primary" type="submit" (click)="saveSample()" [disabled]="!sampleForm.form.valid">Save sample</button>
  </div>
</form>

<div *ngIf="responseData">
  <h3>Successfully added sample:</h3>
  <rb-table id="response-data">
    <tr><td>Sample number</td><td>{{responseData.number}}</td></tr>
    <tr><td>Type</td><td>{{responseData.type}}</td></tr>
    <tr><td>color</td><td>{{responseData.color}}</td></tr>
    <tr><td>Batch</td><td>{{responseData.batch}}</td></tr>
    <tr><td>Material</td><td>{{material.name}}</td></tr>
  </rb-table>

  &nbsp;

  <div>
    <a routerLink="/samples">
      <button class="rb-btn rb-primary" type="button">Return to samples</button>
    </a>
  </div>
</div>