added prediction prototype

This commit is contained in:
VLE2FE 2020-08-12 15:15:31 +02:00
parent 8a44135d9a
commit c681c5d881
9 changed files with 143 additions and 6 deletions

View File

@ -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]},

View File

@ -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

View File

@ -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({

View File

@ -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>

View File

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

View File

@ -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();
});
});

View File

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

View File

@ -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>

View File

@ -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'};
}