added prediction prototype

src/app/app-routing.module.ts

@@ -10,11 +10,13 @@ import {SettingsComponent} from './settings/settings.component';
 import {UsersComponent} from './users/users.component';
 import {ChangelogComponent} from './changelog/changelog.component';
 import {DocumentationDatabaseComponent} from './documentation-database/documentation-database.component';
+import {PredictionComponent} from './prediction/prediction.component';
 
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
   {path: 'home', component: HomeComponent},
+  {path: 'prediction', component: PredictionComponent},
   {path: 'samples', component: SamplesComponent, canActivate: [LoginService]},
   {path: 'samples/new', component: SampleComponent, canActivate: [LoginService]},
   {path: 'samples/edit/:id', component: SampleComponent, canActivate: [LoginService]},

src/app/app.component.html

@@ -1,6 +1,7 @@
 <rb-full-header id="top">
   <nav *rbMainNavItems>
     <a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
+    <a routerLink="/prediction" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.admin">Prediction</a>
     <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="login.isLoggedIn">Samples</a>
     <a routerLink="/templates" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">
       Templates

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { SettingsComponent } from './settings/settings.component';
 import { UsersComponent } from './users/users.component';
 import { ChangelogComponent } from './changelog/changelog.component';
 import { DocumentationDatabaseComponent } from './documentation-database/documentation-database.component';
+import { PredictionComponent } from './prediction/prediction.component';
 
 @NgModule({
   declarations: [
@@ -46,7 +47,8 @@ import { DocumentationDatabaseComponent } from './documentation-database/documen
     SettingsComponent,
     UsersComponent,
     ChangelogComponent,
-    DocumentationDatabaseComponent
+    DocumentationDatabaseComponent,
+    PredictionComponent
   ],
   imports: [
     LocalStorageModule.forRoot({

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]);
+  }
+
+}

src/app/sample/sample.component.html

@@ -1,4 +1,4 @@
-<script src="../models/template.model.ts"></script><h2>{{new ? 'Add new sample' : 'Edit sample ' + sample.number}}</h2>
+<h2>{{new ? 'Add new sample' : 'Edit sample ' + sample.number}}</h2>
 
 <rb-loading-spinner *ngIf="loading"></rb-loading-spinner>
 

src/app/services/api.service.ts

@@ -25,19 +25,19 @@ export class ApiService {
   }
 
   get<T>(url, f: (data?: T, err?, headers?) => void = () => {}) {
-    this.requestErrorHandler<T>(this.http.get(this.host + url, this.options()), f);
+    this.requestErrorHandler<T>(this.http.get(this.url(url), this.options()), f);
   }
 
   post<T>(url, data = null, f: (data?: T, err?, headers?) => void = () => {}) {
-    this.requestErrorHandler<T>(this.http.post(this.host + url, data, this.options()), f);
+    this.requestErrorHandler<T>(this.http.post(this.url(url), data, this.options()), f);
   }
 
   put<T>(url, data = null, f: (data?: T, err?, headers?) => void = () => {}) {
-    this.requestErrorHandler<T>(this.http.put(this.host + url, data, this.options()), f);
+    this.requestErrorHandler<T>(this.http.put(this.url(url), data, this.options()), f);
   }
 
   delete<T>(url, f: (data?: T, err?, headers?) => void = () => {}) {
-    this.requestErrorHandler<T>(this.http.delete(this.host + url, this.options()), f);
+    this.requestErrorHandler<T>(this.http.delete(this.url(url), this.options()), f);
   }
 
   private requestErrorHandler<T>(observable: Observable<any>, f: (data?: T, err?, headers?) => void) {
@@ -62,6 +62,15 @@ export class ApiService {
     });
   }
 
+  private url(url) {
+    if (/http[s]?:\/\//.test(url)) {
+      return url;
+    }
+    else {
+      return this.host + url;
+    }
+  }
+
   private options(): {headers: HttpHeaders, observe: 'body'} {
     return {headers: this.authOptions(), observe: 'response' as 'body'};
   }