Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 73x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 6x 2x 2x 4x | import { Component, OnDestroy, OnInit } from '@angular/core';
import { TableModule, TablePageEvent } from 'primeng/table';
import { BadgeModule } from 'primeng/badge';
import { Device } from '../../models/devices';
import { TwinpadApiService } from '../../services/twinpad-api.service';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { LoaderComponent } from '../loader/loader.component';
import { DecimalPipe, NgFor, NgIf } from '@angular/common';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-devices',
imports: [TableModule, RouterModule, LoaderComponent, NgIf, NgFor, DecimalPipe, BadgeModule],
templateUrl: './devices.component.html',
styleUrl: './devices.component.scss'
})
export class DevicesComponent implements OnInit, OnDestroy {
devices: Device[];
displayedDevices: Device[];
deviceSubscription: Subscription;
rows: number = 10;
offset: number = 0;
status: string;
defaultRowOptions = [10, 20, 50];
filteredRowsPerPageOptions: number[] = [];
constructor(private twinpadApiService: TwinpadApiService, private router: Router, private route: ActivatedRoute) {}
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.rows = params['rows'] ? +params['rows'] : 10;
this.offset = params['offset']? +params['offset'] : 0;
this.status = params['status']? params['status'] : undefined;
Iif(this.status !== undefined && this.deviceSubscription !== undefined){
this.filterDevices();
}
else {
this.displayedDevices = this.devices;
}
});
this.updateRowsPerPageOptions();
this.deviceSubscription = this.twinpadApiService.devicesBehaviorSubject$
.subscribe({'next': value => {
this.devices = value;
this.displayedDevices = this.devices.map(device => device);
Iif(this.status !== undefined){
this.filterDevices();
}
}
});
}
ngOnDestroy(){
this.deviceSubscription?.unsubscribe();
}
onTableEvent(event: TablePageEvent){
this.offset = event.first;
this.rows = event.rows;
this.router.navigate([], {
queryParams: { offset: this.offset, rows: this.rows },
queryParamsHandling: 'merge'
});
}
updateRowsPerPageOptions(){
this.filteredRowsPerPageOptions = [...new Set([...this.defaultRowOptions, this.rows])].sort((a, b) => a - b);
}
// this can be useful if we want to order instead of filter the devices
orderDevices() {
let order: number;
switch(this.status){
case "up":
order = -1;
break;
case "down":
order = 1;
break;
}
this.displayedDevices?.sort((a: Device, b: Device) => {
return a.status?.toString().toLowerCase().localeCompare(b.status?.toString().toLowerCase()) * order;
});
}
filterDevices() {
this.displayedDevices = this.devices?.filter(device => device.status == this.status);
}
}
|