added prediction prototype

src/app/prediction/prediction.component.html

@@ -0,0 +1,20 @@
+<h2>Prediction</h2>
+
+<h4 *ngIf="result !== '' || loading" [@inOut]>
+  Result: {{result}}<rb-loading-spinner *ngIf="loading"></rb-loading-spinner>
+</h4>
+
+<rb-form-file name="spectrum-upload" label="spectrum file" maxSize="10000000" class="space-below"
+              (ngModelChange)="fileToArray($event)" placeholder="Select file or drag and drop" dragDrop ngModel>
+</rb-form-file>
+
+<div class="dpt-chart">
+  <canvas baseChart
+          class="dpt-chart"
+          [datasets]="chart"
+          [labels]="[]"
+          [options]="chartOptions"
+          [legend]="false"
+          chartType="scatter">
+  </canvas>
+</div>

src/app/prediction/prediction.component.scss

@@ -0,0 +1,4 @@
+.dpt-chart {
+  max-width: 800px;
+  margin: 0 auto;
+}

src/app/prediction/prediction.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PredictionComponent } from './prediction.component';
+
+describe('PredictionComponent', () => {
+  let component: PredictionComponent;
+  let fixture: ComponentFixture<PredictionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PredictionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PredictionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/prediction/prediction.component.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import {ChartOptions} from 'chart.js';
+import {ApiService} from '../services/api.service';
+import {animate, style, transition, trigger} from '@angular/animations';
+
+@Component({
+  selector: 'app-prediction',
+  templateUrl: './prediction.component.html',
+  styleUrls: ['./prediction.component.scss'],
+  animations: [
+    trigger(
+      'inOut', [
+        transition(':enter', [
+          style({height: 0, opacity: 0}),
+          animate('0.5s ease-out', style({height: '*', opacity: 1}))
+        ]),
+        transition(':leave', [
+          style({height: '*', opacity: 1}),
+          animate('0.5s ease-in', style({height: 0, opacity: 0}))
+        ])
+      ]
+    )
+  ]
+})
+export class PredictionComponent implements OnInit {
+
+  readonly predictionUrl = 'https://definma-model-test.apps.de1.bosch-iot-cloud.com/predict';
+  result = '';
+  loading = false;
+  spectrum: string[][] = [[]];
+  chart = [{
+    data: [],
+    label: 'Spectrum',
+    showLine: true,
+    fill: false,
+    pointRadius: 0,
+    borderColor: '#00a8b0',
+    borderWidth: 2
+  }];
+  readonly chartOptions: ChartOptions = {
+    scales: {
+      xAxes: [{ticks: {min: 400, max: 4000, stepSize: 400, reverse: true}}],
+      yAxes: [{ticks: {min: 0, max: 1}}]
+    },
+    responsive: true,
+    tooltips: {enabled: false},
+    hover: {mode: null},
+    maintainAspectRatio: true,
+    plugins: {datalabels: {display: false}}
+  };
+
+  constructor(
+    private api: ApiService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  fileToArray(files) {
+    const fileReader = new FileReader();
+    fileReader.onload = () => {
+      this.spectrum = fileReader.result.toString().split('\r\n').map(e => e.split(','));
+      this.loading = true;
+      this.api.post<{result: string}>(this.predictionUrl, this.spectrum, data => {
+        this.result = data.result;
+        this.loading = false;
+      });
+      this.chart[0].data = this.spectrum.map(e => ({x: parseFloat(e[0]), y: parseFloat(e[1])}));
+      console.log(this.chart);
+    };
+    fileReader.readAsText(files[0]);
+  }
+
+}