added prediction prototype
This commit is contained in:
parent
8a44135d9a
commit
c681c5d881
@ -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]},
|
||||
|
@ -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
|
||||
|
@ -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({
|
||||
|
20
src/app/prediction/prediction.component.html
Normal file
20
src/app/prediction/prediction.component.html
Normal 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>
|
4
src/app/prediction/prediction.component.scss
Normal file
4
src/app/prediction/prediction.component.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.dpt-chart {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
25
src/app/prediction/prediction.component.spec.ts
Normal file
25
src/app/prediction/prediction.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
74
src/app/prediction/prediction.component.ts
Normal file
74
src/app/prediction/prediction.component.ts
Normal 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]);
|
||||
}
|
||||
|
||||
}
|
@ -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>
|
||||
|
||||
|
@ -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'};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user