Fetching only requested data instead

This commit is contained in:
Ruben Hartenstein (PEA4-Fe) 2021-01-11 10:35:18 +01:00
parent 84961310c3
commit b65f1126fc
3 changed files with 32 additions and 15 deletions

View File

@ -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">

View File

@ -6,3 +6,8 @@ app-login {
width: 70%;
float: right;
}
.selection{
float: left;
width: 20%;
}

View File

@ -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