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="(!generatedSamples.length || editSampleBase) && !loading">
  <div class="sample">
    <div>
      <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"
                     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>
      <rb-icon-button class="set-new-material space-below" icon="add" mode="secondary"
                      (click)="setNewMaterial(!newMaterial)">New material</rb-icon-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, d.arr.materialSuppliers)"
                     [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required
                     [(ngModel)]="material.supplier" #supplierInput="ngModel"
                     (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)"
                     title="chemical material type, eg. PA66">
        <ng-template rbFormValidationMessage="failure">{{groupInput.errors.failure}}</ng-template>
      </rb-form-input>
      <ng-template #modalWarning>
        <rb-alert alertTitle="Warning" type="warning" okBtnLabel="Use suggestion" cancelBtnLabel="Keep value">
          The specified {{modalText.list}} could not be found in the list. <br>
          Did you mean {{modalText.suggestion}}?
        </rb-alert>
      </ng-template>
      <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" title="Bosch material part number, eg. 5515753021"></rb-form-input>
      </rb-array-input>
      <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>
      <rb-form-input *ngFor="let parameter of d.id.materialTemplates[material.properties.material_template].parameters;
                     index as i" [name]="'materialParameter' + i"
                     [label]="parameter.name" appValidate="string" required
                     [(ngModel)]="material.properties[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>
      <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" 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"
                     title="batch number the sample was from, eg. 2264486614">
        <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"
                   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>
    <div *ngFor="let reference of sampleReferences; index as i" class="two-col" [@inOut]>
      <div>
        <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
                       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]" title="description how the samples are connected, eg. belongs to">
        <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
      </rb-form-input>
    </div>
    <h5>Additional properties</h5>
    <rb-array-input [(ngModel)]="customFields" name="customFields" [pushTemplate]="['', '']" pushPath="0"
                    class="two-col" [@inOut]>
      <ng-container *rbArrayInputItem="let item">
        <div>
          <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" 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]" title="value of additional property, eg. 0 min">
          <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
        </rb-form-input>
      </ng-container>
    </rb-array-input>
  </div>

  <div *ngIf="editSampleBase; else generateSamples" class="space-below">
    <button class="rb-btn rb-primary" type="submit" (click)="saveSample()" [disabled]="!sampleForm.form.valid">
      Save sample
    </button>
  </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"
                   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>
    <button class="rb-btn rb-primary space-below" type="submit" (click)="saveSample()"
            [disabled]="!sampleForm.form.valid">
      Generate sample{{sampleCount > 1 ? 's' : ''}}
    </button>
  </ng-template>
</form>


<div *ngIf="generatedSamples.length && !loading">
  <div *ngIf="!editSampleBase">
    <h3 *ngIf="new">Successfully added samples:</h3>
    <span *ngIf="!new" class="rb-ic rb-ic-edit clickable" (click)="checkFormAfterInit = editSampleBase = true"></span>
    <rb-table id="response-data">
      <tr><td>Material</td><td>{{generatedSamples[0].material.name}}</td></tr>
      <tr><td>Type</td><td>{{generatedSamples[0].type}}</td></tr>
      <tr><td>color</td><td>{{generatedSamples[0].color}}</td></tr>
      <tr><td>Batch</td><td>{{generatedSamples[0].batch}}</td></tr>
    </rb-table>
  </div>

  <form #cmForm="ngForm">
    <div *ngFor="let gSample of generatedSamples; index as gIndex">
      <h4 *ngIf="new">{{gSample.number}}</h4>
      <div class="conditions shaded-container space-below">
        <h5>
          Condition
          <button class="rb-btn rb-secondary condition-set" type="button" (click)="toggleCondition(gSample)">
            {{gSample.condition.condition_template ? 'Do not set condition' : 'Set condition'}}
          </button>
        </h5>
        <div *ngIf="gSample.condition.condition_template" [@inOut]>
          <rb-form-select name="conditionSelect" label="Condition"
                          [(ngModel)]="gSample.condition.condition_template">
            <option *ngFor="let c of d.latest.conditionTemplates" [value]="c._id">{{c.name}}</option>
          </rb-form-select>

          <ng-container *ngFor="let parameter of
                        d.id.conditionTemplates[gSample.condition.condition_template].parameters; index as i"
                        [ngSwitch]="(parameter.range.values ? 1 : 0)">
            <rb-form-select *ngSwitchCase="1"
                            [name]="'conditionParameter-' + gIndex + '-' + i"
                            [label]="parameter.name" [(ngModel)]="gSample.condition[parameter.name]" ngModel>
              <option *ngFor="let value of parameter.range.values" [value]="value">{{value}}</option>
              <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
            </rb-form-select>
            <rb-form-input *ngSwitchDefault
                           [name]="'conditionParameter-' + gIndex + '-' + i"
                           [label]="parameter.name" appValidate="string" required
                           [(ngModel)]="gSample.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>
          </ng-container>
        </div>
      </div>

      <div class="measurements shaded-container space-below">
        <h5>Measurements</h5>
        <div *ngFor="let measurement of gSample.measurements; index as mIndex" [@inOut]>
          <rb-form-select [name]="'measurementTemplateSelect-' + gIndex + '-' + mIndex" label="Template"
                          [(ngModel)]="measurement.measurement_template"
                          (ngModelChange)="clearMeasurement(gIndex, mIndex)">
            <option *ngFor="let m of d.latest.measurementTemplates" [value]="m._id">{{m.name}}</option>
          </rb-form-select>

          <div *ngFor="let parameter of d.id.measurementTemplates[measurement.measurement_template].parameters;
               index as pIndex">
            <ng-container [ngSwitch]="(parameter.range.type ? 1 : 0) + (parameter.range.values ? 2 : 0)">
              <rb-form-file *ngSwitchCase="1"
                            [name]="'measurementParameter-' + gIndex + '-' + mIndex + '-' + pIndex"
                            [label]="parameter.name" maxSize="10000000" multiple
                            [required]="measurement.values[parameter.name] &&
                            !measurement.values[parameter.name].length"
                            (ngModelChange)="fileToArray($event, gIndex, mIndex, parameter.name)"
                            placeholder="Select file or drag and drop" dragDrop ngModel>
                <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
              </rb-form-file>
              <rb-form-select *ngSwitchCase="2"
                              [name]="'measurementParameter-' + gIndex + '-' + mIndex + '-' + pIndex"
                              [label]="parameter.name" [(ngModel)]="measurement.values[parameter.name]" ngModel>
                <option *ngFor="let device of d.d.user.devices" [value]="device">{{device}}</option>
                <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
              </rb-form-select>
              <rb-form-input *ngSwitchDefault
                             [name]="'measurementParameter-' + gIndex + '-' + 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>
            </ng-container>
            <canvas baseChart *ngIf="parameter.range.type && charts[gIndex][mIndex][0].data.length > 0"
                    class="dpt-chart"
                    [@inOut]
                    [datasets]="charts[gIndex][mIndex]"
                    [labels]="[]"
                    [options]="chartOptions"
                    [legend]="false"
                    chartType="scatter">
            </canvas>
          </div>
          <rb-icon-button icon="delete" mode="danger" (click)="removeMeasurement(gIndex, mIndex)">
            Delete measurement
          </rb-icon-button>
        </div>

        &nbsp;

        <div>
          <rb-icon-button icon="add" mode="secondary" (click)="addMeasurement(gIndex)">
            New measurement
          </rb-icon-button>
        </div>
      </div>
    </div>
    <rb-icon-button icon="save" mode="primary" type="submit" (click)="cmSave()" [disabled]="!cmForm.form.valid">
      Save sample{{generatedSamples.length > 1 ? 's' : ''}}
    </rb-icon-button>
    <rb-icon-button class="delete-sample" icon="delete" mode="danger" *ngIf="!new"
                    (click)="deleteConfirm(modalDeleteConfirm)">
      Delete sample
    </rb-icon-button>
    <ng-template #modalDeleteConfirm>
      <rb-alert alertTitle="Are you sure?" type="danger" okBtnLabel="Delete sample" cancelBtnLabel="Cancel">
        Do you really want to delete {{sample.number}}?
      </rb-alert>
    </ng-template>
  </form>
</div>