Merge pull request #42 in ~VLE2FE/definma-ui from f/dashboard to master

* commit 'bfe3788c377f25e239416b6f41057517c59cdf68':
  Apply sample page fix

src/app/home/home.component.html

@@ -1,3 +1,23 @@
-<app-login *ngIf="!login.isLoggedIn"></app-login>
-
+<div *ngIf="!login.isLoggedIn">
+    <app-login></app-login>
     <img src="/assets/imgs/key-visual.png" alt="" class="key-visual">
+</div>
+
+
+<div *ngIf="login.isLoggedIn">
+    <rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups"
+                        class="selection" (ngModelChange)="updateGroups($event)">
+        <span *rbFormMultiSelectOption="let key">{{key.id}}</span>
+    </rb-form-multi-select>
+
+    <!--
+    <rb-icon-button icon="forward-right" mode="primary" (click)="updateGroups()">
+        Apply groups 
+    </rb-icon-button>
+    -->
+
+    <div id="divChart">
+        <canvas id="myChart">
+        </canvas>
+    </div>
+</div>

src/app/home/home.component.ts

@@ -1,5 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import {LoginService} from '../services/login.service';
+import { ApiService } from '../services/api.service';
+import {Chart} from 'chart.js';
+
+
+
+interface KeyInterface {
+  id: string;
+  count: number;
+  active: boolean;
+}
 
 @Component({
   selector: 'app-home',
@@ -8,11 +18,121 @@ import {LoginService} from '../services/login.service';
 })
 export class HomeComponent implements OnInit {
 
+  keys: KeyInterface[] = [];
+  isActiveKey: { [key: string]: boolean } = {};  // object to check if key is currently active
+  myChart: Chart;
+
   constructor(
-    public login: LoginService
+    public login: LoginService,
+    public api: ApiService
   ) { }
 
   ngOnInit() {
+    // fetch all available groups  
+    this.fetchData('/material/groups', data => this.createGroup(data));
+    //this.initChart();
+    console.log(this.login.username);
   }
 
+  // api access with callback
+  async fetchData(URL: string, processor: any) {
+    this.api.get(URL, (sData, err, headers) => {
+      processor(sData);
+    });
+  }
+
+  // Fill interface with data
+  createGroup(data: any) {
+    let temp: KeyInterface[] = [];
+
+    for (var i = 0; i < data.length; i++) {
+      temp.push({ id: data[i], count: 0, active: false });
+    }
+    this.keys = temp; // invoke update in rb-multiselect
+    this.calcFieldSelectKeys();
+    // fetch all samples populated with according group
+    this.fetchData('/samples?status%5B%5D=validated&status=new&page-size=10&sort=_id-asc&fields%5B%5D=material.group', data => this.countSamples(data));
+  }
+
+  // loop through samples and count
+  countSamples(data: any) {
+    for (var i = 0; i < data.length; i++) {
+      this.keys.forEach(key => {
+        if (key.id === data[i].material.group) {
+          key.count += 1;
+        }
+      });
+    }
+    this.initChart();
+  }
+
+  // preset select
+  calcFieldSelectKeys() {
+    this.keys.forEach(key => {
+      this.isActiveKey[key.id] = key.active;
+    });
+  }
+
+  // update keys based on select
+  updateGroups(event: any) {
+    this.keys.forEach(key => {
+      if (event.hasOwnProperty(key.id)) {
+        key.active = event[key.id];
+      }
+    });
+    this.myChart.destroy();
+    this.initChart();
+  }
+
+  // get data for graph based on active keys
+  async getData() {
+    let nameList: string[] = [];
+    let dataList: number[] = [];
+
+    this.keys.forEach(key => {
+      if (key.active) {
+        nameList.push(key.id);
+        dataList.push(key.count);
+      }
+    })
+    return { names: nameList, data: dataList };
+  }
+
+  // draw graph
+  async initChart() {
+    const data = await this.getData();
+
+    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    const ctx = canvas.getContext('2d');
+
+    var img = new Image(width, height);
+    img.src = "/assets/imgs/supergraphic.svg";
+    img.onload = () => {
+      const fillPattern = ctx.createPattern(img, 'no-repeat');
+
+      this.myChart = new Chart("myChart", {
+        type: 'line',
+        data: {
+          labels: data.names,
+          datasets: [{
+            label: 'Number of samples per group',
+            data: data.data,
+            backgroundColor: fillPattern,
+            borderWidth: 2
+          }]
+        },
+        options: {
+          scales: {
+            yAxes: [{
+              ticks: {
+                beginAtZero: true
+              }
+            }]
+          }
+        }
+      });
+    }
+  }
 }

src/app/samples/samples.component.ts

@@ -11,13 +11,12 @@ import {DataService} from '../services/data.service';
 import { LocalStorageService } from 'angular-2-local-storage';
 import { Router } from '@angular/router';
 
-
-
 interface LoadSamplesOptions {
   toPage?: number;
   event?: Event;
   firstPage?: boolean;
 }
+
 interface KeyInterface {
   id: string;
   label: string;
@@ -168,6 +167,7 @@ export class SamplesComponent implements OnInit {
   // set toPage to null to reload first page, queues calls
   loadSamples(options: LoadSamplesOptions = {}, event = null) {
     if (event) {  // adjust active keys
+      console.log(event);
       this.keys.forEach(key => {
         if (event.hasOwnProperty(key.id)) {
           key.active = event[key.id];