rb-table, samples table

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

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

src/app/app.component.html

@@ -1,7 +1,7 @@
 <rb-full-header>
   <nav *rbMainNavItems>
-    <a routerLink="/" routerLinkActive="active" rbLoadingLink>Home</a>
-    <a routerLink="/samples" routerLinkActive="active" rbLoadingLink>Samples</a>
+    <a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
+    <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="loginService.canActivate()">Samples</a>
   </nav>
   <div *rbSubBrandHeader>Digital Fingerprint of Plastics</div>
 </rb-full-header>

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
+  ) {
+  }
 }

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]

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

src/app/login/login.component.html

@@ -1,8 +1,10 @@
 <div class="login-wrapper">
   <h2>Please log in</h2>
 
-  <rb-form-input name="username" label="username" [(ngModel)]="username"></rb-form-input>
-  <rb-form-input type="password" name="password" label="password" [(ngModel)]="password"></rb-form-input>
-  <span class="message">{{message}}</span>
-  <button class="rb-btn rb-primary login-button" (click)="login()">Login</button>
+  <form>
+    <rb-form-input name="username" label="username" [(ngModel)]="username"></rb-form-input>
+    <rb-form-input type="password" name="password" label="password" [(ngModel)]="password"></rb-form-input>
+    <span class="message">{{message}}</span>
+    <button class="rb-btn rb-primary login-button" (click)="login()" type="submit">Login</button>
+  </form>
 </div>

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 { }

src/app/rb-table/rb-table/rb-table.component.html

@@ -0,0 +1,3 @@
+<table>
+  <ng-content></ng-content>
+</table>

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

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<RbTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RbTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RbTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+  }
+
+}

src/app/samples/samples.component.html

@@ -1 +1,41 @@
-<p>samples works!</p>
+<div class="header-addnew">
+  <h2>Samples</h2>
+  <button class="rb-btn rb-primary"><span class="rb-ic rb-ic-add"></span>&nbsp; New sample</button>
+</div>
+
+<rb-accordion>
+  <rb-accordion-title><span class="rb-ic rb-ic-filter"></span>&nbsp; Filter</rb-accordion-title>
+  <rb-accordion-body>
+    Not implemented (yet)
+  </rb-accordion-body>
+</rb-accordion>
+
+<rb-table>
+  <tr>
+    <th>Number</th>
+    <th>Material number</th>
+    <th>Material name</th>
+    <th>Supplier</th>
+    <th>Material</th>
+    <th>GF</th>
+    <th>CF</th>
+    <th>M</th>
+    <th>type</th>
+    <th>Color</th>
+    <th>Batch</th>
+  </tr>
+
+  <tr *ngFor="let sample of samples">
+    <td>{{sample.number}}</td>
+    <td>{{sample.material_number}}</td>
+    <td>{{materials[sample.material_id].name}}</td>
+    <td>{{materials[sample.material_id].supplier}}</td>
+    <td>{{materials[sample.material_id].group}}</td>
+    <td>{{materials[sample.material_id].glass_fiber}}</td>
+    <td>{{materials[sample.material_id].carbon_fiber}}</td>
+    <td>{{materials[sample.material_id].mineral}}</td>
+    <td>{{sample.type}}</td>
+    <td>{{sample.color}}</td>
+    <td>{{sample.batch}}</td>
+  </tr>
+</rb-table>

src/app/samples/samples.component.scss

@@ -0,0 +1,13 @@
+.header-addnew {
+  margin-bottom: 40px;
+
+  & > * {
+    display: inline;
+    margin-bottom: 10px;
+  }
+
+  button {
+    float: right;
+  }
+}
+

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