Fetching only requested data instead
This commit is contained in:
parent
84961310c3
commit
b65f1126fc
@ -5,16 +5,12 @@
|
||||
|
||||
|
||||
<div *ngIf="login.isLoggedIn">
|
||||
<rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups"
|
||||
class="selection" (ngModelChange)="updateGroups($event)">
|
||||
<rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups" class="selection">
|
||||
<span *rbFormMultiSelectOption="let key">{{key.id}}</span>
|
||||
</rb-form-multi-select>
|
||||
|
||||
<!--
|
||||
<rb-icon-button icon="forward-right" mode="primary" (click)="updateGroups()">
|
||||
</rb-form-multi-select>
|
||||
<rb-icon-button icon="forward-right" mode="primary" (click)="updateGroups(isActiveKey)">
|
||||
Apply groups
|
||||
</rb-icon-button>
|
||||
-->
|
||||
|
||||
<div id="divChart">
|
||||
<canvas id="myChart">
|
||||
|
@ -6,3 +6,8 @@ app-login {
|
||||
width: 70%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.selection{
|
||||
float: left;
|
||||
width: 20%;
|
||||
}
|
@ -29,7 +29,6 @@ export class HomeComponent implements OnInit {
|
||||
ngOnInit() {
|
||||
// fetch all available groups
|
||||
this.fetchData('/material/groups', data => this.createGroup(data));
|
||||
//console.log(this.login.username);
|
||||
}
|
||||
|
||||
// api access with callback
|
||||
@ -44,16 +43,33 @@ export class HomeComponent implements OnInit {
|
||||
let temp: KeyInterface[] = [];
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
temp.push({ id: data[i], count: 0, active: true });
|
||||
temp.push({ id: data[i], count: 0, active: false });
|
||||
}
|
||||
this.keys = temp; // invoke update in rb-multiselect
|
||||
this.initChart();
|
||||
|
||||
this.calcFieldSelectKeys();
|
||||
// fetch all samples populated with according group
|
||||
this.fetchData('/samples?status%5B%5D=validated&status=new&sort=_id-asc&fields%5B%5D=material.group', data => this.countSamples(data));
|
||||
this.getSamples();
|
||||
}
|
||||
|
||||
getSamples(){
|
||||
let query = '/samples?status%5B%5D=validated&status=new&filters%5B%5D=%7B%22mode%22%3A%22in%22%2C%22field%22%3A%22material.group%22%2C%22values%22%3A%5B';
|
||||
let temp = '';
|
||||
this.keys.forEach(key =>{
|
||||
temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C': ""; // replace split().join() with replaceAll()
|
||||
});
|
||||
if (temp === ''){
|
||||
this.countSamples('');
|
||||
}else{
|
||||
query = query + temp.substr(0, temp.length-3) + '%5D%7D&fields%5B%5D=material.group';
|
||||
this.fetchData(query, data => this.countSamples(data));
|
||||
}
|
||||
}
|
||||
|
||||
// loop through samples and count
|
||||
countSamples(data: any) {
|
||||
this.keys.map(key => key.count = 0);
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
this.keys.forEach(key => {
|
||||
if (key.id === data[i].material.group) {
|
||||
@ -61,6 +77,7 @@ export class HomeComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
}
|
||||
this.myChart.destroy();
|
||||
this.initChart();
|
||||
}
|
||||
|
||||
@ -72,14 +89,13 @@ export class HomeComponent implements OnInit {
|
||||
}
|
||||
|
||||
// update keys based on select
|
||||
updateGroups(event: any) {
|
||||
updateGroups(activeKeys: any) {
|
||||
this.keys.forEach(key => {
|
||||
if (event.hasOwnProperty(key.id)) {
|
||||
key.active = event[key.id];
|
||||
if (activeKeys.hasOwnProperty(key.id)) {
|
||||
key.active = activeKeys[key.id];
|
||||
}
|
||||
});
|
||||
this.myChart.destroy();
|
||||
this.initChart();
|
||||
this.getSamples();
|
||||
}
|
||||
|
||||
// get data for graph based on active keys
|
||||
|
Loading…
Reference in New Issue
Block a user