diff --git a/src/app/api.service.ts b/src/app/api.service.ts index 31cc71d..6183512 100644 --- a/src/app/api.service.ts +++ b/src/app/api.service.ts @@ -7,13 +7,15 @@ import {LocalStorageService} from 'angular-2-local-storage'; }) export class ApiService { + private host = '/api'; + constructor( private http: HttpClient, private storage: LocalStorageService ) { } get(url) { - return this.http.get(url, this.authOptions()); + return this.http.get(this.host + url, this.authOptions()); } private authOptions() { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7c716f5..56965a3 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -7,6 +7,7 @@ import {SamplesComponent} from './samples/samples.component'; const routes: Routes = [ {path: '', component: HomeComponent}, + {path: 'home', component: HomeComponent}, {path: 'samples', component: SamplesComponent}, {path: 'replace-me', component: HomeComponent, canActivate: [LoginService]}, diff --git a/src/app/app.component.html b/src/app/app.component.html index 7a2ba1f..e31308e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,7 @@
Digital Fingerprint of Plastics
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9a8db0f..b997e1a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import {LoginService} from './login.service'; @Component({ selector: 'app-root', @@ -6,4 +7,9 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.scss'] }) export class AppComponent { + + constructor( + public loginService: LoginService + ) { + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 561fcf2..bed1712 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,6 +10,7 @@ import {FormsModule} from '@angular/forms'; import {LocalStorageModule} from 'angular-2-local-storage'; import {HttpClientModule} from '@angular/common/http'; import { SamplesComponent } from './samples/samples.component'; +import {RbTableModule} from './rb-table/rb-table.module'; @NgModule({ declarations: [ @@ -27,7 +28,8 @@ import { SamplesComponent } from './samples/samples.component'; AppRoutingModule, RbUiComponentsModule, FormsModule, - HttpClientModule + HttpClientModule, + RbTableModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/login.service.ts b/src/app/login.service.ts index 6702e9c..cfa1308 100644 --- a/src/app/login.service.ts +++ b/src/app/login.service.ts @@ -13,11 +13,15 @@ export class LoginService implements CanActivate { constructor( private api: ApiService, private storage: LocalStorageService - ) { } + ) { + this.login(); + } - login(username, password) { + login(username = '', password = '') { return new Promise(resolve => { - this.storage.set('basicAuth', btoa(username + ':' + password)); + if (username !== '') { + this.storage.set('basicAuth', btoa(username + ':' + password)); + } this.api.get('/authorized').subscribe((data: any) => { if (data.status === 'Authorization successful') { this.loggedIn = true; @@ -37,7 +41,7 @@ export class LoginService implements CanActivate { }); } - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { + canActivate(route: ActivatedRouteSnapshot = null, state: RouterStateSnapshot = null) { return this.loggedIn; } } diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 330d308..593bffc 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,8 +1,10 @@

Please log in

- - - {{message}} - +
+ + + {{message}} + +
diff --git a/src/app/rb-table/rb-table.module.ts b/src/app/rb-table/rb-table.module.ts new file mode 100644 index 0000000..37ff2ed --- /dev/null +++ b/src/app/rb-table/rb-table.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RbTableComponent } from './rb-table/rb-table.component'; + + + +@NgModule({ + declarations: [ + RbTableComponent + ], + imports: [ + CommonModule + ], + exports: [ + RbTableComponent + ] +}) +export class RbTableModule { } diff --git a/src/app/rb-table/rb-table/rb-table.component.html b/src/app/rb-table/rb-table/rb-table.component.html new file mode 100644 index 0000000..9ced8a1 --- /dev/null +++ b/src/app/rb-table/rb-table/rb-table.component.html @@ -0,0 +1,3 @@ + + +
diff --git a/src/app/rb-table/rb-table/rb-table.component.scss b/src/app/rb-table/rb-table/rb-table.component.scss new file mode 100644 index 0000000..80a2419 --- /dev/null +++ b/src/app/rb-table/rb-table/rb-table.component.scss @@ -0,0 +1,20 @@ +@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors"; + +table { + width: 100%; + border-collapse: collapse; + + ::ng-deep tr { + border-bottom: 1px solid $color-gray-mercury; + + ::ng-deep td, ::ng-deep th { + padding: 8px 5px; + } + + ::ng-deep th { + text-align: left; + } + } +} + + diff --git a/src/app/rb-table/rb-table/rb-table.component.spec.ts b/src/app/rb-table/rb-table/rb-table.component.spec.ts new file mode 100644 index 0000000..c5bae98 --- /dev/null +++ b/src/app/rb-table/rb-table/rb-table.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RbTableComponent } from './rb-table.component'; + +describe('RbTableComponent', () => { + let component: RbTableComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RbTableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RbTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/rb-table/rb-table/rb-table.component.ts b/src/app/rb-table/rb-table/rb-table.component.ts new file mode 100644 index 0000000..6394052 --- /dev/null +++ b/src/app/rb-table/rb-table/rb-table.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'rb-table', + templateUrl: './rb-table.component.html', + styleUrls: ['./rb-table.component.scss'] +}) +export class RbTableComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/samples/samples.component.html b/src/app/samples/samples.component.html index 386ae2a..00c2768 100644 --- a/src/app/samples/samples.component.html +++ b/src/app/samples/samples.component.html @@ -1 +1,41 @@ -

samples works!

+
+

Samples

+ +
+ + +   Filter + + Not implemented (yet) + + + + + + Number + Material number + Material name + Supplier + Material + GF + CF + M + type + Color + Batch + + + + {{sample.number}} + {{sample.material_number}} + {{materials[sample.material_id].name}} + {{materials[sample.material_id].supplier}} + {{materials[sample.material_id].group}} + {{materials[sample.material_id].glass_fiber}} + {{materials[sample.material_id].carbon_fiber}} + {{materials[sample.material_id].mineral}} + {{sample.type}} + {{sample.color}} + {{sample.batch}} + + diff --git a/src/app/samples/samples.component.scss b/src/app/samples/samples.component.scss index e69de29..4d9fd1d 100644 --- a/src/app/samples/samples.component.scss +++ b/src/app/samples/samples.component.scss @@ -0,0 +1,13 @@ +.header-addnew { + margin-bottom: 40px; + + & > * { + display: inline; + margin-bottom: 10px; + } + + button { + float: right; + } +} + diff --git a/src/app/samples/samples.component.ts b/src/app/samples/samples.component.ts index 757f484..df3327e 100644 --- a/src/app/samples/samples.component.ts +++ b/src/app/samples/samples.component.ts @@ -1,15 +1,35 @@ import { Component, OnInit } from '@angular/core'; +import {ApiService} from '../api.service'; @Component({ selector: 'app-samples', templateUrl: './samples.component.html', styleUrls: ['./samples.component.scss'] }) -export class SamplesComponent implements OnInit { +export class SamplesComponent implements OnInit { // TODO: implement paging - constructor() { } + materials = {}; + samples = []; + + constructor( + private api: ApiService + ) { } ngOnInit(): void { + this.api.get('/materials').subscribe((mData: any) => { + this.materials = {}; + mData.forEach(material => { + this.materials[material._id] = material; + }); + console.log(this.materials); + this.api.get('/samples').subscribe(sData => { + console.log(sData); + this.samples = sData as any; + this.samples.forEach(sample => { + sample.material_number = this.materials[sample.material_id].numbers.find(e => sample.color === e.color).number; + }); + }); + }); } }